tm-tags 纸片(标签)
🎉目录导航
👉使用方法,跟数1,2,3一样简单
基本示例
<tm-tags color="bg-gradient-pink-accent" size="n" model="fill">吃白饭</tm-tags>
1
👉完整的示例
可以复制到页面直接运行
<template>
<view>
<tm-menubars title="纸片(标签)" color="bg-gradient-blue-accent" :showback="true"></tm-menubars>
<tm-sheet>
<view class="pa-12 text-size-s text-weight-b blue text mb-32 ">
基础示例,渐变，圆角，投影,关闭等
</view>
<tm-tags size="xs" model="fill">吃白饭</tm-tags>
<tm-tags color="bg-gradient-amber-accent" size="s" model="fill" >吃白饭</tm-tags>
<tm-tags color="bg-gradient-pink-accent" size="n" model="fill">吃白饭</tm-tags>
<tm-tags color="bg-gradient-green-accent" size="m" model="fill">吃白饭</tm-tags>
<tm-tags color="red" size="g" model="fill">吃白饭</tm-tags>
<tm-tags color="red" size="g" :round="4" model="fill" :showClose="true">吃白饭</tm-tags>
<tm-tags color="orange" size="lg" model="fill">吃白饭</tm-tags>
<tm-tags color="blue-grey" size="lg" rounded model="fill" :showClose="true">吃白饭吃白饭吃白饭</tm-tags>
</tm-sheet>
<tm-sheet>
<view class="pa-12 text-size-s text-weight-b blue text mb-32 ">
outlined模式
</view>
<tm-tags size="xs" model="outlined">吃白饭</tm-tags>
<tm-tags color="lime" size="s" model="outlined">吃白饭</tm-tags>
<tm-tags color="green" size="n" model="outlined">吃白饭</tm-tags>
<tm-tags color="red" size="m" model="outlined">吃白饭</tm-tags>
<tm-tags color="pink" size="g" model="outlined">吃白饭</tm-tags>
<tm-tags color="orange" size="lg" model="outlined">吃白饭</tm-tags>
</tm-sheet>
<tm-sheet>
<view class="pa-12 text-size-s text-weight-b blue text mb-32 ">
text模式
</view>
<tm-tags size="xs" model="text">吃白饭</tm-tags>
<tm-tags color="lime" size="s" model="text">吃白饭</tm-tags>
<tm-tags color="green" size="n" model="text">吃白饭</tm-tags>
<tm-tags color="red" size="m" model="text">吃白饭</tm-tags>
<tm-tags color="pink" size="g" model="text">吃白饭</tm-tags>
<tm-tags color="orange" size="lg" model="text">吃白饭</tm-tags>
</tm-sheet>
</view>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<script>
export default {
data() {
return {
}
},
methods: {
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
👉props属性表
| 属性名称 | 类型 | 可选值 | 默认值 | 说明 |
|---|---|---|---|---|
| size | String | xxs/s/n/m | g/lg | n |
| black | Boolean | true/false | false | 暗黑模式 |
| color | String | 任意主题名称 | primary | 主题颜色 |
| round | Number | 任意数字0-25 | 2 | 圆角 |
| shadow | Number | 任意数字0-25 | 4 | 投影 |
| rounded | Boolean | true/false | false | 是否半圆 |
| showClose | Boolean | true/false | false | 是否显示关闭 |
| dense1.2.0 | Boolean | true/false | false | 是否去除边距间隙 |
| model | String | text/outlined/fill | outlined | 默认：outlined，样式，text:文本模式，outlined边框，fill背景 |
👉事件
| 事件名称 | 返回参数 | 返参类型 | 说明 |
|---|---|---|---|
| @close | - | - | 关闭时触发 |
| @click1.1.9 | - | - | 点击组件时触发 |
👉更新日志
2021年8月20日14:8:5 初始版本。