### HTag 組件
介紹: `HTag` 也是相對比較常用的組件，比如 qq 面板中的好友評價，又如某外賣軟件對快遞員的評價等等。目前我對 `tag` 標簽只是進行了初步實現，以后肯定還會新增更多的功能與樣式。下面來看看該組件目前支持的屬性。
<table>
<caption>HTag 屬性</caption>
<thead>
<th>屬性</th>
<th>說明</th>
<th>類型</th>
<th>默認值</th>
</thead>
<tbody>
<tr>
<td>text</td>
<td>要顯示的文字</td>
<td>String</td>
<td>-</td>
</tr>
<tr>
<td>bgcolor</td>
<td>標簽的背景顏色</td>
<td>String</td>
<td>#CCC</td>
</tr>
<tr>
<td>color</td>
<td>文字顏色</td>
<td>String</td>
<td>#333</td>
</tr>
<tr>
<td>type</td>
<td>指定標簽的類型，不設置則為默認類型，目前支持的值為 `cirlce` 和 `triangle`</td>
<td>String</td>
<td>-</td>
</tr>
</tbody>
</table>
<table>
<caption>HTag 事件</caption>
<thead>
<th>事件名</th>
<th>說明</th>
<th>返回值</th>
</thead>
<tbody>
<tr>
<td>onClick</td>
<td>點擊事件</td>
<td>-</td>
</tr>
</tbody>
</table>
示例代碼:
<template>
<div class="app-container">
<div class="box">
<HTag :text="text" class="item"></HTag>
<HTag :text="text" type="circle" class="item"></HTag>
<HTag :text="text" type="triangle" class="item"></HTag>
</div>
<div class="box">
<HTag :text="text" class="item" :bgcolor="primary" :color="color"></HTag>
<HTag :text="text" type="circle" class="item" :bgcolor="primary" :color="color"></HTag>
<HTag :text="text" type="triangle" class="item" :bgcolor="primary" :color="color"></HTag>
</div>
<div class="box">
<HTag :text="text" class="item" :bgcolor="success" :color="color"></HTag>
<HTag :text="text" type="circle" class="item" :bgcolor="success" :color="color"></HTag>
<HTag :text="text" type="triangle" class="item" :bgcolor="success" :color="color"></HTag>
</div>
<div class="box">
<HTag :text="text" class="item" :bgcolor="warn" :color="color"></HTag>
<HTag :text="text" type="circle" class="item" :bgcolor="warn" :color="color"></HTag>
<HTag :text="text" type="triangle" class="item" :bgcolor="warn" :color="color"></HTag>
</div>
<div class="box">
<HTag :text="text" class="item" :bgcolor="error" :color="color"></HTag>
<HTag :text="text" type="circle" class="item" :bgcolor="error" :color="color"></HTag>
<HTag :text="text" type="triangle" class="item" :bgcolor="error" :color="color"></HTag>
</div>
</div>
</template>
<script>
import { HTag } from 'vuecomponent'
export default {
data () {
return {
text: 'Smart',
primary: '#2866AB',
success: '#28CC9E',
warn: '#F98903',
error: '#C62727',
color: '#FFF'
}
},
components: {
HTag
}
}
</script>
<style scoped>
.item:not(:last-child) {
margin-right: 16px;
}
.box {
margin-bottom: 24px;
font-family: sans-serif;
}
</style>
效果示意圖:
