vue组件系列之TagsInput详解

// @keydown.188 188代表是是分号键的keyCode

 
methods: {
 // 按下分号键的时候，需要阻止默认事件，否则会出现分号
 split (e) {
 e.preventDefault()
 this.add(e)
 },
 add (e) {
 const val = e.target.value
 if (!val) return
 // 如果已经存在相同tag，不再添加
 if (this.tags.indexOf(val) > -1) return
 // 把输入值添加到tag，并清空文本框
 this.tags.push(val)
 this.current = ''
 },
 del (e) {
 // 当文本框内没有值，再按回退键，则删除最后一个tag
 if (!e.target.value.length) {
 this.tags.pop()
 }
 },
} 

{{tag}} x

methods: {
 // 删除点击的标签
 delTag (index) {
 this.tags.splice(index, 1)
 }
}

 // props
 props: {
 value: Array,
 required: true,
 default: () => []
 }
 
 // computed
 computed: {
 tags () {
 return this.value.slice()
 }
 }
 
 // methods
 methods: {
 // 删除点击的标签
 delTag (index) {
 this.tags.splice(index, 1)
 this.$emit('input', this.tags)
 }
 }

// TagsInput.vue

// 父组件