### 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>
效果示意图:
