TagInput 标签输入

示例

尺寸

可供选用的尺寸 ui 属性值：xs / s / m / l。

Large

Normal

Small

Extra small

<template>
<article>
  <section>
    <veui-tag-input
      v-model="valueL"
      ui="l"
    />
  </section>
  <section>
    <veui-tag-input v-model="valueM"/>
  </section>
  <section>
    <veui-tag-input
      v-model="valueS"
      ui="s"
    />
  </section>
  <section>
    <veui-tag-input
      v-model="valueXs"
      ui="xs"
    />
  </section>
</article>
</template>

<script>
import { TagInput } from 'veui'

export default {
  components: {
    'veui-tag-input': TagInput
  },
  data () {
    return {
      valueS: ['Small'],
      valueL: ['Large'],
      valueM: ['Normal'],
      valueXs: ['Extra small']
    }
  }
}
</script>

<style lang="less" scoped>
section {
  margin-bottom: 1em;
}
</style>

只读状态

设置 readonly 来使输入框处于只读状态。

Read-only

Large

Normal

Small

Extra small

在 GitHub 上编辑此示例编辑

<template>
<article>
  <section>
    <veui-checkbox v-model="readonly">
      Read-only
    </veui-checkbox>
  </section>
  <section>
    <section>
      <veui-tag-input
        v-model="valueL"
        ui="l"
        :readonly="readonly"
      />
    </section>
    <section>
      <veui-tag-input
        v-model="valueM"
        :readonly="readonly"
      />
    </section>
    <section>
      <veui-tag-input
        v-model="valueS"
        ui="s"
        :readonly="readonly"
      />
    </section>
    <section>
      <veui-tag-input
        v-model="valueXs"
        ui="xs"
        :readonly="readonly"
      />
    </section>
  </section>
</article>
</template>

<script>
import { TagInput, Checkbox } from 'veui'

export default {
  components: {
    'veui-tag-input': TagInput,
    'veui-checkbox': Checkbox
  },
  data () {
    return {
      valueS: ['Small'],
      valueL: ['Large'],
      valueM: ['Normal'],
      valueXs: ['Extra small'],
      readonly: true
    }
  }
}
</script>

<style lang="less" scoped>
section {
  margin-bottom: 1em;
}
</style>

禁用状态

设置 disabled 来使输入框处于禁用状态。

Disabled

Large

Normal

Small

Extra small

在 GitHub 上编辑此示例编辑

<template>
<article>
  <section>
    <veui-checkbox v-model="disabled">
      Disabled
    </veui-checkbox>
  </section>
  <section>
    <section>
      <veui-tag-input
        v-model="valueL"
        ui="l"
        :disabled="disabled"
      />
    </section>
    <section>
      <veui-tag-input
        v-model="valueM"
        :disabled="disabled"
      />
    </section>
    <section>
      <veui-tag-input
        v-model="valueS"
        ui="s"
        :disabled="disabled"
      />
    </section>
    <section>
      <veui-tag-input
        v-model="valueXs"
        ui="xs"
        :disabled="disabled"
      />
    </section>
  </section>
</article>
</template>

<script>
import { TagInput, Checkbox } from 'veui'

export default {
  components: {
    'veui-tag-input': TagInput,
    'veui-checkbox': Checkbox
  },
  data () {
    return {
      valueS: ['Small'],
      valueL: ['Large'],
      valueM: ['Normal'],
      valueXs: ['Extra small'],
      disabled: true
    }
  }
}
</script>

<style lang="less" scoped>
section {
  margin-bottom: 1em;
}
</style>

允许重复

设置 allow-duplicate 来允许输入重复的标签。

Allow duplicate

Steve

在 GitHub 上编辑此示例编辑

<template>
<article>
  <section>
    <veui-checkbox v-model="allowDuplicate">
      Allow duplicate
    </veui-checkbox>
  </section>
  <section>
    <veui-tag-input
      v-model="value"
      :allow-duplicate="allowDuplicate"
    />
  </section>
</article>
</template>

<script>
import { TagInput, Checkbox } from 'veui'

export default {
  components: {
    'veui-tag-input': TagInput,
    'veui-checkbox': Checkbox
  },
  data () {
    return {
      allowDuplicate: true,
      value: ['Steve', 'Steve']
    }
  }
}
</script>

<style lang="less" scoped>
section {
  margin-bottom: 1em;
}
</style>

最大标签数

设置 max 属性来限制输入的标签数上限。

Max tag count

Tony

Steve

2/3

在 GitHub 上编辑此示例编辑

<template>
<article>
  <section>
    <h4>Max tag count</h4>
    <veui-number-input v-model="max"/>
  </section>
  <section>
    <veui-tag-input
      v-model="value"
      :max="max"
    />
  </section>
</article>
</template>

<script>
import { TagInput, NumberInput } from 'veui'

export default {
  components: {
    'veui-tag-input': TagInput,
    'veui-number-input': NumberInput
  },
  data () {
    return {
      max: 3,
      value: ['Tony', 'Steve']
    }
  }
}
</script>

<style lang="less" scoped>
section {
  margin-bottom: 1em;
}
</style>

最大字符数

设置 maxlength 属性来限制输入的字符数上限。

Max tag length

Tony

Steve

在 GitHub 上编辑此示例编辑

<template>
<article>
  <section>
    <h4>Max tag length</h4>
    <veui-number-input v-model="maxlength"/>
  </section>
  <section>
    <veui-tag-input
      v-model="value"
      :maxlength="maxlength"
    />
  </section>
</article>
</template>

<script>
import { TagInput, NumberInput } from 'veui'

export default {
  components: {
    'veui-tag-input': TagInput,
    'veui-number-input': NumberInput
  },
  data () {
    return {
      maxlength: 6,
      value: ['Tony', 'Steve']
    }
  }
}
</script>

<style lang="less" scoped>
section {
  margin-bottom: 1em;
}
</style>

自定义标签

通过 tag 插槽来自定义标签的展示。

Stephen

Wanda

Carol

在 GitHub 上编辑此示例编辑

<template>
<article>
  <section>
    <veui-tag-input v-model="value">
      <template #tag="{ tag, attrs, listeners }">
        <veui-tag
          ui="bordered"
          color="violet"
          v-bind="attrs"
          v-on="listeners"
        >
          {{ tag }}
        </veui-tag>
      </template>
    </veui-tag-input>
  </section>
</article>
</template>

<script>
import { TagInput, Tag } from 'veui'

export default {
  components: {
    'veui-tag-input': TagInput,
    'veui-tag': Tag
  },
  data () {
    return {
      value: ['Stephen', 'Wanda', 'Carol']
    }
  }
}
</script>

API

属性

名称类型默认值描述

ui

string

预设样式。

值	描述
`xs`	超小尺寸样式。
`s`	小尺寸样式。
`m`	中尺寸样式。
`l`	大尺寸样式。

value

string

v-model

输入的标签列表值。

input-value

string

''

.sync

文本输入框的值。

disabled boolean false 标签输入框是否为禁用状态。

readonly boolean false 标签输入框是否为只读状态。

placeholder string - 输入占位符。

clearable boolean false 是否显示清除按钮。

autofocus boolean false 是否自动聚焦。

maxlength number - 最大可输入的字符长度。

max number - 允许输入的标签数上限。

strict

boolean | Object

false

当为 boolean 时，将同时配置 maxlength 和 max 两种限制的严格模式；当为 Object 时，可进行分别配置。

名称	类型	描述
`maxlength`	`boolean`	是否严格输入长度，超出禁止输入。
`max`	`boolean`	是否严格限制输入的标签数，超出后新增的不生效。

get-length function(string): number - 自定义的字符长度计算函数。

allow-duplicate boolean false 是否允许输入重复的标签。

插槽

名称描述

tag

已添加的标签项。

默认内容：Tag 组件渲染的标签项。

名称	类型	描述
`attrs`	`Object`	需要输出到标准 `Tag` 组件上的属性，可以使用 `v-bind="attrs"` 统一进行输出。
`listeners`	`Object`	需要输出到标准 `Tag` 组件上的事件监听器，可以使用 `v-on="listeners"` 统一进行输出。
`tag`	`string`	标签项文本值。
`index`	`function(value: *): void`	用于切换已选项。
`key`	`string`	标签项的 `key`，必须绑定到单个项目上。
`invalid`	`boolean`	是否为校验不合法状态。
`readonly`	`boolean`	是否为只读状态。
`disabled`	`boolean`	是否为禁用状态。
`edit`	`function(): void`	编辑当前标签项。
`remove`	`function(): void`	移除当前标签项。

事件

名称	描述
`change`	`v-model` 标签列表内容变化时触发。回调参数为 `(value: Array<string>)`，`value` 为已填写的标签列表。
`input`	`.sync` 文本输入框中输入内容变化时。回调参数为 `(inputValue: string)`，`inputValue` 为输入框的文本内容。
`clear`	点击清除按钮时触发。

此外，TagInput 支持如下的原生事件：

auxclick、click、contextmenu、dblclick、mousedown、mouseenter、mouseleave、mousemove、mouseover、mouseout、mouseup、select、wheel、keydown、keypress、keyup、focus、blur、focusin、focusout。

回调函数的参数都为原生事件对象。

图标

名称	描述
`remove`	清除按钮。

在 GitHub 上编辑此页面编辑