TagsInput 标签输入器

特性

1. 使用 v-model 绑定创建的标签值
2. 支持设置可创建标签的数量
3. 支持组件外手动设置标签
4. 基于 vue2 版本封装，强依赖于 element-ui
5. 可在非 TS 环境下正常使用，但需自行构建 jsx 环境(参考 babel-plugin-transform-vue-jsx (opens new window))。

基本用法

绑定 v-model 记录创建标签的值，通过输入框输入后按回车键创建标签

<template>
  <div>
    <niuka-tags-input v-model="value"></niuka-tags-input>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: '',
    };
  },
};
</script>

隐藏源代码

纯数字标签校验

设置 check-number 属性，可在创建标签的时候进行纯数字校验

<template>
  <div>
    <niuka-tags-input v-model="value" check-number></niuka-tags-input>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: '',
    };
  },
};
</script>

隐藏源代码

组件赋值

通过修改 v-model 绑定的值，或者通过组件内置方法 addTags，可以修改标签

<template>
  <div>
    <niuka-tags-input ref="tags" v-model="value"></niuka-tags-input>
    <el-button @click="handleClick1">方法1</el-button>
    <el-button @click="handleClick2">方法2</el-button>
    <el-button @click="handleClick3">方法3</el-button>
    <el-button @click="handleClear">清空</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: '',
    };
  },
  methods: {
    handleClick1() {
      this.value = '标签1 标签2';
    },
    handleClick2() {
      this.$refs.tags.addTags('标签1 标签2');
    },
    handleClick3() {
      this.$refs.tags.addTags(['标签1', '标签2']);
    },
    handleClear() {
      this.value = '';
    },
  },
};
</script>

隐藏源代码

组件禁用

设置 disabled 属性，即可禁用组件，无法添加/删除标签

<template>
  <div>
    <niuka-tags-input ref="tags" v-model="value" disabled></niuka-tags-input>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: '标签1 标签2',
    };
  },
};
</script>

隐藏源代码

删除提示框

设置 remove-dialog 属性，在点击删除时会出现提示框，点击确认后删除标签

<template>
  <div>
    <niuka-tags-input v-model="value" remove-dialog></niuka-tags-input>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: '测试',
    };
  },
};
</script>

隐藏源代码

NiukaTagsInput Attributes