Dynamic-tag NPM

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