Skip to content
12:13

图鸟 UI vue3 uniapp 插件 - 标签选择

该组件一般用于选择多个标签选择的场景

仓库地址

Github

npmjs

安装方式

bash
npm i tnuiv3p-tn-select-tags
npm i tnuiv3p-tn-select-tags
bash
pnpm add tnuiv3p-tn-select-tags
pnpm add tnuiv3p-tn-select-tags
bash
yarn i tnuiv3p-tn-select-tags
yarn i tnuiv3p-tn-select-tags

组件位置

typescript
import TnSelectTags from 'tnuiv3p-tn-select-tags/index.vue'
import TnSelectTags from 'tnuiv3p-tn-select-tags/index.vue'

平台差异说明

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>

设置标签激活和未激活时的颜色

  • 通过inactive-bg-colorinactive-coloractive-bg-coloractive-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>

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是否允许选中多个标签Booleantruefalse
cancelable是否允许取消选择Booleantruefalse
validate-event值发生修改时是否触发表单验证Booleantruefalse

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 开头使用图鸟内置的颜色

Tuniao UI