## 标签展示
<br />
> 用于单个及多个标签的展示，可自定义标签文案、删除标签

## 导入使用
```code[javascript]
import SuTag from "ss-universal-client-web/comp/widget/su-tag";
```
### 基本用法

:::demo
```html
<template>
    <su-tag></su-tag>
</template>
<script>
    export default {
        components:{seTag},
    }
</script>
```
:::

### 自定义标签
`text`可自定义标签文案，默认文案为‘标签’，`color`可自定义设置标签边框及字体颜色，默认为#FF4436

:::demo 
```html
<template>
    <su-tag :text="text" :color="color">
    </su-tag>
</template>

<script>
    export default {
        components:{seTag},
        data() {
            return {
                text : "我是自定义标签",
                color: "#000"
            }
        }
    }
</script>
```
:::

### 删除标签

:::demo `shwoRemove`默认为`false`,`loading`默认为`false`
```html
<template>
    <su-tag :text="text" :shwoRemove="shwoRemove" @callBack="callBack" :loading="loading">
    </su-tag>
</template>

<script>
    export default {
        components:{seTag},
        data() {
            return {
                text : "我是可以删除的标签",
                shwoRemove : true,
                loading : false,
            }
        },
        methods: {
            callBack() {
                var _this = this;
                this.$message("点击了删除");
                this.loading = true;
                setTimeout(function () {
                    _this.loading = false;
                }, 1000);
            }
        }
    }
</script>
```
:::

### Attributes
| 参数      | 说明          | 类型      | 可选值                           | 默认值  |
|---------- |-------------- |---------- |--------------------------------  |-------- |
| text | 标签文案 | string | — | 标签 |
| color | 标签颜色 | string | — | #FF4436 |
| shwoRemove | 是否展示删除按钮 | boolean | — | false |
| loading | 加载状态 | boolean | — | false |

### Events
| 事件名称 | 说明 | 回调参数 |
|---------- |-------- |---------- |
| callBack | 标签点击删除回调 | — |