tnuiv3p-tn-select-tags v1.0.4

图鸟 UI vue3 uniapp Plugins - 多标签选择

Tuniao UI vue3官方仓库

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

组件安装

npm i tnuiv3p-tn-select-tags

组件位置

tnuiv3p-tn-select-tags/index.vue

平台差异说明

基础使用

• 通过v-model绑定被选择标签的的value值
• 通过items设置待选的标签数据
  • 通过value属性设置标签选中时的值
  • 通过label属性设置标签显示的文本

<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-color、inactive-color、active-bg-color、active-color分别可以设置标签未选中时的背景颜色、未选中时文字的颜色、选中时的背景颜色、选中时的文字颜色
• 也可以通过设置标签数据的在属性中单独设置每一个标签的颜色

<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

Events

type SelectTagsModelValue = string | number

SelectTagsItem