vue 標籤元件
基於諛基於http://element-cn.eleme.io/#/zh-CN/component/tag ,做一 ,做一個標籤封裝,雙擊可以修改標籤內容。支援動態新增
1. 首先在專案中安裝 element-ui;方法自行百度
2.實現效果,雙擊可以修改標籤,可以刪除標籤,可以動態新增標籤
3.
<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>