tags-selector v0.1.7

tag-select

功能介绍

基于elementUI的下拉选项框实现，包括如下功能点

• 下拉框选项可设置默认项，支持在输入框中输入关键字筛选选项，如果没有所需选项，可以选择“新增标签：XXX”新建标签
• 支持为输入的标签设置最大长度、最多可选数量、Reg校验
• 标签内容中开头和结尾的空格自动去除
• 标签字符数大于配置值，使用省略号表示后面的内容，鼠标放置到标签上，出现title显示全部内容

使用示例

main.js中引入

import tagSelect from 'tags-selector'
Vue.use(tagSelect)

<el-form>
    <el-form-item label="标签" label-width="100px" prop="labels" :error="tagErr">
        <tag-select 
          :labelsFormDataProp.sync="formAllData.labels"
          :initOptions="initOptions"
          :reg="Reg"
          :maxChecked="5"
          :maxLength="10"
          :ellipsisLength="6"
          @error="handleTagErr" 
          @clearError="handleClearTagErr">
        </tag-select>
    </el-form-item>
</el-form>

data() {
    return {
      formAllData: {
        labels: []
      },
      Reg: /^[0-9]+$/,
      tagErr: "",
      initOptions: [{
        name: '默认选项1',
        id: 1
      },
      {
        name: '默认选项2',
        id: 2
      },
      {
        name: '默认选项3',
        id: 2
      }]
    }
  },
  methods: {
    handleTagErr() {
      this.tagErr = "输入的字符无效，仅支持数字";
    },
    handleClearTagErr() {
      this.tagErr = "";
    },
  }

效果截图

Options

Events