Data-tag标签

痛定思痛。 2022-03-30 05:43 249阅读 0赞

![20190123195815398.png][]

<el-tag>标签一</el-tag>
    <el-tag type="success">标签二</el-tag>
    <el-tag type="info">标签三</el-tag>
    <el-tag type="warning">标签四</el-tag>
    <el-tag type="danger">标签五</el-tag>

<el-tag
        :key="tag"
        v-for="tag in dynamicTags"
        closable
        :disable-transitions="false"
        @close="handleClose(tag)">
        {
       {tag}}
    </el-tag>
    <el-input
        class="input-new-tag"
        v-if="inputVisible"
        v-model="inputValue"
        ref="saveTagInput"
        size="small"
        @keyup.enter.native="handleInputConfirm"
        @blur="handleInputConfirm"
    >
    </el-input>
    <el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>

### Attributes ###

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>说明</th> 
   <th>类型</th> 
   <th>可选值</th> 
   <th>默认值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>type</td> 
   <td>主题</td> 
   <td>string</td> 
   <td>success/info/warning/danger</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td>closable</td> 
   <td>是否可关闭</td> 
   <td>boolean</td> 
   <td>—</td> 
   <td>false</td> 
  </tr> 
  <tr> 
   <td>disable-transitions</td> 
   <td>是否禁用渐变动画</td> 
   <td>boolean</td> 
   <td>—</td> 
   <td>false</td> 
  </tr> 
  <tr> 
   <td>size</td> 
   <td>尺寸</td> 
   <td>string</td> 
   <td>medium / small / mini</td> 
   <td>—</td> 
  </tr> 
 </tbody> 
</table>

### Events ###

<table> 
 <thead> 
  <tr> 
   <th>事件名称</th> 
   <th>说明</th> 
   <th>回调参数</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>close</td> 
   <td>关闭 Tag 时触发的事件</td> 
   <td>—</td> 
  </tr> 
 </tbody> 
</table>

[20190123195815398.png]: /images/20220330/bdddbf11735c40c3a291044f76713468.png