图鸟 UI vue3 uniapp 插件 - 标签选择
该组件一般用于选择多个标签选择的场景
仓库地址
安装方式
bash
npm i tnuiv3p-tn-select-tags
npm i tnuiv3p-tn-select-tags
1
bash
pnpm add tnuiv3p-tn-select-tags
pnpm add tnuiv3p-tn-select-tags
1
bash
yarn i tnuiv3p-tn-select-tags
yarn i tnuiv3p-tn-select-tags
1
组件位置
typescript
import TnSelectTags from 'tnuiv3p-tn-select-tags/index.vue'
import TnSelectTags from 'tnuiv3p-tn-select-tags/index.vue'
1
平台差异说明
App(vue) | H5 | 微信小程序 | 支付宝小程序 | ... |
---|---|---|---|---|
√ | √ | √ | √ | 适配中 |
基础使用
- 通过
v-model
绑定被选择标签的的value
值 - 通过
items
设置待选的标签数据- 通过
value
属性设置标签选中时的值 - 通过
label
属性设置标签显示的文本
- 通过
vue
<script setup lang="ts">
import { ref } from 'vue'
import SelectTags from 'tnuiv3p-tn-select-tags/index.vue'
import type { SelectTagsItem } from 'tnuiv3p-tn-select-tags'
const currentSelectTags = ref<number[]>([])
const tagItems: SelectTagsItem[] = [
{
label: '标签1',
value: 1,
},
{
label: '标签2',
value: 2,
},
{
label: '标签3',
value: 3,
},
{
label: '标签4',
value: 4,
},
{
label: '标签5',
value: 5,
},
]
</script>
<template>
<SelectTags v-model="currentSelectTags" :items="tagItems" />
</template>
<script setup lang="ts">
import { ref } from 'vue'
import SelectTags from 'tnuiv3p-tn-select-tags/index.vue'
import type { SelectTagsItem } from 'tnuiv3p-tn-select-tags'
const currentSelectTags = ref<number[]>([])
const tagItems: SelectTagsItem[] = [
{
label: '标签1',
value: 1,
},
{
label: '标签2',
value: 2,
},
{
label: '标签3',
value: 3,
},
{
label: '标签4',
value: 4,
},
{
label: '标签5',
value: 5,
},
]
</script>
<template>
<SelectTags v-model="currentSelectTags" :items="tagItems" />
</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
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
设置标签激活和未激活时的颜色
- 通过
inactive-bg-color
、inactive-color
、active-bg-color
、active-color
分别可以设置标签未选中时的背景颜色、未选中时文字的颜色、选中时的背景颜色、选中时的文字颜色 - 也可以通过设置标签数据的在属性中单独设置每一个标签的颜色
vue
<script setup lang="ts">
import { ref } from 'vue'
import SelectTags from 'tnuiv3p-tn-select-tags/index.vue'
import type { SelectTagsItem } from 'tnuiv3p-tn-select-tags'
const currentSelectTags = ref<number[]>([])
const tagItems: SelectTagsItem[] = [
{
label: '标签1',
value: 1,
activeBgColor: 'tn-orange-light',
},
{
label: '标签2',
value: 2,
inactiveBgColor: 'tn-grey-light',
activeColor: 'tn-grey',
},
{
label: '标签3',
value: 3,
},
{
label: '标签4',
value: 4,
},
{
label: '标签5',
value: 5,
},
]
</script>
<template>
<SelectTags v-model="currentSelectTags" :items="tagItems" />
</template>
<script setup lang="ts">
import { ref } from 'vue'
import SelectTags from 'tnuiv3p-tn-select-tags/index.vue'
import type { SelectTagsItem } from 'tnuiv3p-tn-select-tags'
const currentSelectTags = ref<number[]>([])
const tagItems: SelectTagsItem[] = [
{
label: '标签1',
value: 1,
activeBgColor: 'tn-orange-light',
},
{
label: '标签2',
value: 2,
inactiveBgColor: 'tn-grey-light',
activeColor: 'tn-grey',
},
{
label: '标签3',
value: 3,
},
{
label: '标签4',
value: 4,
},
{
label: '标签5',
value: 5,
},
]
</script>
<template>
<SelectTags v-model="currentSelectTags" :items="tagItems" />
</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
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
API
Props
参数 | 说明 | 类型 | 默认值 | 可选值 |
---|---|---|---|---|
v-model/model-value | 当前选中标签的值 | (String | Number)[] | [] | - |
items | 标签列表数据 | SelectTagsItem[] | [] | - |
inactive-bg-color | 未选中时标签背景颜色,以 tn 开头使用图鸟内置的颜色 | String | - | - |
inactive-color | 未选中时标签文字颜色,以 tn 开头使用图鸟内置的颜色 | String | - | - |
active-bg-color | 选中时标签背景颜色,以 tn 开头使用图鸟内置的颜色 | String | - | - |
active-color | 选中时标签文字颜色,以 tn 开头使用图鸟内置的颜色 | String | - | - |
multiple | 是否允许选中多个标签 | Boolean | true | false |
cancelable | 是否允许取消选择 | Boolean | true | false |
validate-event | 值发生修改时是否触发表单验证 | Boolean | true | false |
Events
| 事件名 | 说明 | 类型 | | ------ | ---------------- | ---------------------------------------------------------------- | ------------------- | | change | 选中的值发生改变 | (value: (string | number)[]) => void
| | click | 标签点击事件 | (index: number, status: boolean, item: SelectTagsItem) => void
|
type SelectTagsModelValue = string | number
SelectTagsItem
参数 | 说明 | 必填 |
---|---|---|
value | 标签选中后的值 | 是 |
label | 标签显示的值 | 是 |
inactiveBgColor | 未选中时标签背景颜色,以 tn 开头使用图鸟内置的颜色 | 否 |
inactiveColor | 未选中时标签文字颜色,以 tn 开头使用图鸟内置的颜色 | 否 |
activeBgColor | 选中时标签背景颜色,以 tn 开头使用图鸟内置的颜色 | 否 |
activeColor | 选中时标签文字颜色,以 tn 开头使用图鸟内置的颜色 | 否 |