标签输入 Input Number

专门输入标签的输入框，如果需要输入一系列的文本，这可能有用。

基础使用

这个组件用于标签输入，输入完按键 Enter 录入标签。

对于标签列表，传入 modelValue 进入受控模式。不传或者为 undefined 则为非受控模式，此时可以传入 defaultValue 属性作为默认值。

对于输入的文本，传入 inputValue 进入受控模式。不传或者为 undefined 则为非受控模式，此时可以传入 defaultInputValue 属性作为默认值。

Madoka

Sayaka

Mami

modelValue: [ "Sayaka", "Mami" ]; inputValue: Kyoko

<template>
	<px-space direction="vertical">
		<px-input-tag
			placeholder="Please input"
			:default-value="['Madoka']"
			default-input-value="Homura"
		></px-input-tag>
		<px-input-tag
			placeholder="Please input"
			v-model="tags"
			v-model:input-value="inputValue"
		></px-input-tag>
		<span>modelValue: {{ tags }}; inputValue: {{ inputValue }}</span>
	</px-space>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const tags = ref<string[]>(['Sayaka', 'Mami'])
const inputValue = ref('Kyoko')
</script>

<style lang="css" scoped>
.px-input-tag {
	width: 640px;
}
</style>

折叠标签

设置 collapseTags 属性可开启折叠标签（默认为 false），maxDisplayTags 属性设置最大展示标签，collapseTagsPopover 设置折叠后是否通过弹出框展示被折叠的标签（默认为 true）。

<template>
	<px-space direction="vertical">
		<px-input-tag
			placeholder="Please input"
			v-model="tags"
			collapse-tags
			:max-display-tags="8"
		></px-input-tag>
		<px-input-tag
			placeholder="Please input"
			v-model="tags"
			collapse-tags
			:max-display-tags="8"
			:collapse-tags-popover="false"
		></px-input-tag>
	</px-space>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const tags = ref<string[]>([])
</script>

<style lang="css" scoped>
.px-input-tag {
	width: 640px;
}
</style>

数量限制

传入 maxLength 属性限制标签数量。

<template>
	<px-input-tag placeholder="Please input" v-model="tags" :max-length="12"></px-input-tag>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const tags = ref<string[]>([])
</script>

<style lang="css" scoped>
.px-input-tag {
	width: 640px;
}
</style>

标签样式

传入 tagVariant 属性设置标签样式变体，tagTheme 属性控制标签主题，tagColor 属性自定义标签主题颜色。

<template>
	<px-space direction="vertical">
		<px-input-tag placeholder="Please input" v-model="tags"></px-input-tag>
		<px-input-tag placeholder="Please input" v-model="tags" tag-variant="plain"></px-input-tag>
		<px-input-tag placeholder="Please input" v-model="tags" tag-theme="primary"></px-input-tag>
		<px-input-tag placeholder="Please input" v-model="tags" tag-color="#E956AE"></px-input-tag>
	</px-space>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const tags = ref<string[]>([])
</script>

<style lang="css" scoped>
.px-input-tag {
	width: 640px;
}
</style>

自定义标签内容

通过插槽 tag 自定义标签内容。

<template>
	<px-input-tag placeholder="Please input" v-model="tags">
		<template #tag="{ tag, index }">
			<div style="display: flex; align-items: center">
				<IconUser style="margin-right: 4px"></IconUser> {{ index }}.{{ tag }}
			</div>
		</template>
	</px-input-tag>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { IconUser } from '@pixelium/web-vue/icon-hn/es'

const tags = ref<string[]>([])
</script>

<style lang="css" scoped>
.px-input-tag {
	width: 640px;
}
</style>

更多配置

InputTag 还拥有 Input 组件的部分功能。

Disabled, Readonly, Loading & Clearable

Size

Count

Slot

feat:

Pixel Art

Dark Mode

Status

Expose

<template>
	<px-space direction="vertical">
		<h4>Disabled, Readonly, Loading & Clearable</h4>
		<px-space>
			<px-input-tag placeholder="Please input" disabled></px-input-tag>
			<px-input-tag placeholder="Please input" readonly></px-input-tag>
			<px-input-tag placeholder="Please input" loading></px-input-tag>
			<px-input-tag placeholder="Please input" clearable></px-input-tag>
		</px-space>
		<h4>Size</h4>
		<px-space>
			<px-input-tag placeholder="Please input" size="small"></px-input-tag>
			<px-input-tag placeholder="Please input"></px-input-tag>
			<px-input-tag placeholder="Please input" size="large"></px-input-tag>
		</px-space>
		<h4>Count</h4>
		<px-space>
			<px-input-tag placeholder="Please input" show-count> </px-input-tag>
			<px-input-tag placeholder="Please input" show-count :max-length="255"> </px-input-tag>
		</px-space>
		<h4>Slot</h4>
		<px-space>
			<px-input-tag placeholder="Please input" :default-value="['Pixel Art', 'Dark Mode']">
				<template #prefix>feat:</template>
			</px-input-tag>
			<px-input-tag placeholder="Please input">
				<template #append>
					<IconBolt></IconBolt>
				</template>
			</px-input-tag>
		</px-space>
		<px-space>
			<px-input-group>
				<px-input-group-label>
					<IconBolt></IconBolt>
				</px-input-group-label>
				<px-input-tag placeholder="Please input"> </px-input-tag>
				<px-button>Confirm</px-button>
			</px-input-group>
		</px-space>
		<h4>Status</h4>
		<px-space>
			<px-input-tag placeholder="Please input"> </px-input-tag>
			<px-input-tag placeholder="Please input" status="success"> </px-input-tag>
			<px-input-tag placeholder="Please input" status="warning"> </px-input-tag>
			<px-input-tag placeholder="Please input" status="error"> </px-input-tag>
		</px-space>
		<h4>Expose</h4>
		<px-space direction="vertical">
			<px-space>
				<px-button theme="info" @click="focusHandler">Focus</px-button>
				<px-button theme="info" @click="blurHandler">Blur</px-button>
				<px-button theme="warning" @click="clearHandler">Clear</px-button>
			</px-space>
			<px-input-tag placeholder="Please input" ref="inputTagRef"></px-input-tag>
		</px-space>
	</px-space>
</template>

<script setup lang="ts">
import { IconBolt } from '@pixelium/web-vue/icon-hn/es'
import { ref } from 'vue'
import { InputTag } from '@pixelium/web-vue'

// If on-demand import
// import { InputTag } from '@pixelium/web-vue/es'

const inputTagRef = ref<InstanceType<typeof InputTag>>(null)

const focusHandler = () => {
	inputTagRef.value?.focus()
}
const blurHandler = () => {
	inputTagRef.value?.blur()
}
const clearHandler = () => {
	inputTagRef.value?.clear()
}
</script>

<style lang="css" scoped>
.px-input-tag {
	width: 400px;
}
</style>

API

InputTagProps

属性	类型	可选	默认值	描述	版本
modelValue	`string[] \| null`	是		标签输入框的值（受控模式），支持 `v-model`。	0.0.2
defaultValue	`string[] \| null`	是		标签输入框的默认值（非受控模式）。	0.0.2
inputValue	`string \| null`	是		内部文本输入框的值（受控模式），支持 `v-model`。	0.0.2
defaultInputValue	`string \| null`	是		内部文本输入框的默认值（非受控模式）。	0.0.2
placeholder	`string`	是		占位符文本。	0.0.2
disabled	`boolean`	是	`false`	是否禁用。	0.0.2
readonly	`boolean`	是	`false`	是否只读。	0.0.2
clearable	`boolean`	是	`false`	是否显示清除按钮。	0.0.2
loading	`boolean`	是	`false`	是否显示加载状态。	0.0.2
size	`'medium' \| 'large' \| 'small'`	是	`'medium'`	输入框尺寸。	0.0.2
shape	`'default' \| 'round'`	是	`'default'`	输入框形状。	0.0.2
borderRadius	`NumberOrPercentage \| NumberOrPercentage[]`	是		圆角半径，优先级高于 `shape`，与 CSS `border-radius` 行为一致；单值或长度为 1 的数组 → 四角同时生效；长度为 2 的数组 → [左上 & 右下, 右上 & 左下]；长度为 3 的数组 → [左上, 右上 & 左下, 右下]；长度为 4 的数组 → 按顺时针顺序依次作用于四角。	0.0.2
maxLength	`number`	是		最大输入长度。	0.0.2
collapseTags	`boolean`	是	`false`	是否开启折叠标签。	0.0.2
collapseTags	`number`	是		是否开启折叠标签。	0.0.2
collapseTagsPopover	`boolean`	是	`true`	是否在弹出框中展示被折叠的标签，开启 `collapseTags` 后生效。	0.0.2
tagTheme	`'primary' \| 'sakura' \| 'success' \| 'warning' \| 'danger' \| 'info'`	是	`'info'`	标签的 `theme` 属性，设置标签主题颜色。	0.0.2
tagVariant	`'primary' \| 'plain' \| 'outline'`	是	`'plain'`	标签的 `variant` 属性，设置标签样式变体。	0.0.2
tagColor	`string`	是		标签的 `color` 属性，自定义标签颜色。	0.0.2
status	`'success' \| 'warning' \| 'error' \| 'normal'`	是	`'normal'`	表单验证状态。	0.0.2
autofocus	`boolean`	是	`false`	原生 `<input>` 的 `autofocus` 属性。	0.0.2

InputTagEvents

事件	参数	描述	版本
update:modelValue	`value: string[]`	更新 `modelValue` 的回调。	0.0.2
tagAdd	`value: string, e: KeyboardEvent`	添加标签时的回调。	0.0.2
tagClose	`value: string, index: number, e: MouseEvent`	关闭标签时的回调。	0.0.2
change	`value: string[]`	标签列表内容变化时的回调。	0.0.2
input	`value: string, e: Event`	输入框输入时的回调。	0.0.2
update:inputValue	`value: string`	更新 `inputValue` 的回调。	0.0.2
inputChange	`value: string, e: Event \| undefined`	输入内容变化时的回调。	0.0.2
clear	`value: string[]`	点击清除文本按钮，清除内容时的回调。	0.0.2
blur	`e: FocusEvent`	输入框失焦时的回调。	0.0.2
focus	`e: FocusEvent`	输入框聚焦时的回调。	0.0.2

InputTagSlots

插槽	参数	描述	版本
prefix		前缀内容。	0.0.2
suffix		后缀内容。	0.0.2
tag	`tag: string, index: number`	标签内容。	0.0.2

InputTagExpose

属性	类型	可选	描述	版本
focus	`() => void`	否	聚焦到当前输入框。	0.0.2
blur	`() => void`	否	取消聚焦当前输入框。	0.0.2
clear	`() => void`	否	清空当前输入框。	0.0.2

NumberOrPercentage

export type NumberOrPercentage = number | `${number}%`

标签输入 Input Number ​

基础使用 ​

折叠标签 ​

数量限制 ​

标签样式 ​

自定义标签内容 ​

更多配置 ​