n3Tags.vue

<template>
<div :class="classObj">
	<label 
  	v-for="i in value" 
	  :class="tagClass(i)">
	 {{i.label}}
	<a name="remove" v-if="removable" @click="del(i)"><n3-icon type="times"></n3-icon></a>
	</label>
</div>
</template>

<script>
import n3Icon from './n3Icon'

export default{
  props: {
    type: {
      type: String,
      default: 'default'
    },
    value: {
      type: Array,
      twoway: true
    },
    size: {
      type: String,
      default: ''
    },
    removable: {
      type: Boolean,
      default: false
    },
    prefixCls: {
      type: String,
      default: 'n3'
    }
  },
  components: {
    n3Icon
  },
  computed: {
    classObj () {
      let {prefixCls, size, type} = this
      let klass = {}

      klass[prefixCls + '-tag-group'] = true
      size ? klass[prefixCls + '-tag-' + size] = true : ''
      type ? klass[prefixCls + '-tag-' + type] = true : ''

      return klass
    },
    active () {
      return this.type === 'default' ? 'tag-primary' : 'tag-' + this.type
    }
  },
  methods: {
    tagClass (i) {
      let {prefixCls} = this
      let klass = {}

      klass[prefixCls + '-tag'] = true
      klass[prefixCls + '-tag-disabled'] = i.disabled

      return klass
    },
    find (i, target) {
      let ret = -1
      target.forEach((e, index) => {
        if (e.value === i.value) {
          ret = index
        }
      })
      return ret
    },
    del (i) {
      if (i.disabled) return
      let index = this.find(i, this.value)

      if (index > -1) {
        this.value.splice(index, 1)
      }
    }
  }
}
</script>