dynamic-tag

标签编辑器

可对多个标签进行编辑或新增删除，支持字符串数组或对象数组，拖动排序等。双击即可编辑已有标签，费编辑状态下拖动排序。

引入

yarn add dynamic-tag
npm i dynamic-tag

依赖项：element-ui

使用

<dynamic-tag v-model="tags" :type="['', 'danger']" @change="onChange" @close="onClose" />

import DynamicTag from 'dynamic-tag'
export default {
  components: { DynamicTag },
  data () {
    return {
      tags: ['asd', '和人', '但是公司的']
    }
  },
  methods: {
    onClose () {
      console.log('删除标签')
    },
    onChange () {
      console.log(this.tags)
      this.$forceUpdate()
    }
  }
}

参数

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | --------- | ------------------ | ------------- | ------------------------------------ | ---------------- | | maxlength | 每个标签最多字符数 | Number String | -- | 10 | | count | 标签最多个数 | Number String | -- | 8 | | type | 标签样式 | String Array | '' 'danger' 'success' 'info' 'warning' 如果为数组，将会在多个颜色中循环使用 | '' | | addible | 是否可以新增 | Boolean | true false | true | | editable | 是否可以编辑 | Boolean | true false | true | | closable | 是否可以删除 | Boolean | true false | true | | disabled | 是否禁用 | Boolean | true false | false | | addName | 新增按钮名称 | String | '' | '+ 新增标签' | | objectKey | 对象键名，当绑定的值为对象数组时必填| String | '' | '' | | drag | 是否开启拖拽排序| Boolean | true false | true |

Methods

方法名| 参数 | 说明

• | - | - close | - | 参数关闭时回调 change | - | 数据改变时回调