vue 标签组件

基于谀基于http://element-cn.eleme.io/#/zh-CN/component/tag ，做一 ，做一个标签封装，双击可以修改标签内容。支持动态添加

1. 首先在项目中安装 element-ui；方法自行百度

2.实现效果，双击可以修改标签，可以删除标签，可以动态添加标签

3.

3.代码    下载地址 https://download.csdn.net/download/wxf_angular/10667613

<template>

<div :style="'width:'+tagWidth" id="tag">

<el-tag :key="item.name" v-for="(item,index) in dynamicTags" :type="item.type" v-if="index!=chooseIndex" closable :disable-transitions="false" @dblclick.native="chooseTag(index)" @close="handleClose(index)">

{{item.name}}

</el-tag>

 

<el-input class="input-new-tag" v-else v-model="item.name" ref="editTagInput" @keyup.enter.native="saveTag" @blur="saveTag" size="small">

</el-input>

 

<input class="input-new-tag" style="height:32px" v-model="inputValue" ref="saveTagInput" size="small" @keyup.enter="handleInputConfirm" @blur="handleInputConfirm">

</input>

</div>

</template>