1. 程式人生 > >vue 標籤元件

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>