本示例是针对ant design vue组件库使用

点击添加标签和修改标签_IT

 

 HTML:

<template>
  <div>
        <!-- 获取标签和修改标签 -->
            <a-input
                v-if="showInputVisible"
                ref="input"
                type="text"
                size="small"
                v-model="selectbabelName"
                :style="{ width: '78px'}"
                :value="inputValue"
                @change="handleInputChange"
                @blur="InputConfirm"
                @keyup.enter="InputConfirm"
            />
            <template v-for="(tag, index) in tags"  v-else>
                <a-tag
                    :key="tag"  
                    :closable="index !== -1"
                    @close="() => handleClose(tag)"
                    :class='{bg:index===isonClickShowbg}'
                    @click="selectBebel(tag)"
                >
                    {{ tag }}
                </a-tag>
            </template>
        <!-- 添加标签 -->
            <a-input
                v-if="inputVisible"
                ref="input"
                type="text"
                size="small"
                v-model="selectbabelName"
                :style="{ width: '78px'}"
                :value="inputValue"
                @change="handleInputChange"
                @blur="handleInputConfirm"
                @keyup.enter="handleInputConfirm"
        />
        <span v-else :class='{"IsSelect":this.tags.length===1}'>
            <span :class='{"disabledSelet":this.tags.length===1}'>
                <a-tag  style="background: #fff; color:#1890ff;borderStyle: solid;" @click="showInput" >
                <a-icon type="plus"/>添加标签
                </a-tag>
            </span>
        </span>
  </div>
</template>

<script>
export default {
  name: 'index',
  data() {
    return {
      tags:[],
      inputVisible: false,
      showInputVisible:false,
    };
  },

  mounted() {
   
  },

  methods: {
    handleClose(removedTag) {
            this.showInputVisible = false
            this.isonClickShowbg = ''
            const tags = this.tags.filter(tag => tag !== removedTag);
            this.tags = tags;
        },
        showInput() {
            this.selectbabelName = ''
            this.inputVisible = true;
            this.$nextTick(function() {
            this.$refs.input.focus();
            })
        },
        handleInputChange(e) {
            this.inputValue = e.target.value;
        },
        handleInputConfirm() {
            this.isonClickShowbg = ''
            const inputValue = this.inputValue;
            let tags = this.tags;
            if (inputValue && tags.indexOf(inputValue) === -1) {
                tags = [...tags, inputValue];
            }
            Object.assign(this, {
                tags,
                inputVisible: false,
                showInputVisible:false,
                inputValue: '',
            });
        },
        //修改已经添加的标签
        InputChange(e) {
            this.inputValue = e.target.value;
        },
        InputConfirm() {
            const modfyValue = this.inputValue;
            let tags = this.tags;
             if (modfyValue && tags.indexOf(modfyValue) === -1) {
                let a = []
                this.selectbabelName = modfyValue
                a.push(this.selectbabelName)
                tags = a
            }
            Object.assign(this, {
                tags,
                inputVisible: false,
                showInputVisible:false,
                inputValue: '',
            });
        },
        //选择标签
        selectBebel(tag) {
            this.selectbabelName = tag
            this.selectbabelName = ''
            if(this.tags.length !== 0) {
                this.showInputVisible = true;
                this.$nextTick(function() {
                this.$refs.input.focus();
                })
            }
        }    
  },
};
</script>

<style lang="scss" scoped>
.IsSelect {
  cursor:not-allowed;
}
.disabledSelet {
  pointer-events: none;
}
   
</style>