@fesjs/traction-widget

Appearance

Return to top
On this page

BTagsPanel

用于动态编辑标签，提供传入默认值，新增标签，删除标签功能

组件注册

js
import { BTagsPanel } from '@fesjs/traction-widget';
app.use(BTagsPanel);

代码演示

基础用法

只需传入tags用于双向绑定标签列表数据。

Play
<template>
    <BTagsPanel v-model:tags="tags"></BTagsPanel>
</template>
<script setup lang="ts">
import { ref, watch } from 'vue';
import { BTagsPanel } from '@fesjs/traction-widget';

const tags = ref<string[]>(['默认标签1', '默认标签2']);

watch(tags, (val) => {
    console.log('标签变化了', val);
});

</script>
查看代码

只读模式

不允许增加新标签，也不允许删除已有标签。

Play
<template>
    <BTagsPanel v-model:tags="tags" :disabled="true"></BTagsPanel>
</template>
<script setup lang="ts">
import { ref, watch } from 'vue';
import { BTagsPanel } from '@fesjs/traction-widget';

const tags = ref<string[]>(['默认标签1', '默认标签2']);

</script>
查看代码

双击编辑标签

允许通过双击标签编辑标签

Play
<template>
    <BTagsPanel v-model:tags="tags" :editabled="true"></BTagsPanel>
    <br>
    当前tag列表：{{ tags }}
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { BTagsPanel } from '@fesjs/traction-widget';

const tags = ref<string[]>(['默认标签1', '默认标签2']);

</script>
查看代码

长度限制

支持限制单标签长度，样例设置标签最大长度为8,设置展示当前输入长度。

Play
<template>
    <BTagsPanel v-model:tags="tags" :maxlength="8" :showWordLimit="true"></BTagsPanel>
</template>
<script setup lang="ts">
import { ref, watch } from 'vue';
import { BTagsPanel } from '@fesjs/traction-widget';

const tags = ref<string[]>(['默认标签1', '默认标签2']);

</script>
查看代码

数量限制

支持限制总标签数目。样例设置numberLimit=2，限定最多输入2个标签。

Play
<template>
    <BTagsPanel v-model:tags="tags" :numberLimit="2"></BTagsPanel>
</template>
<script setup lang="ts">
import { ref, watch } from 'vue';
import { BTagsPanel } from '@fesjs/traction-widget';

const tags = ref<string[]>(['默认标签1', '默认标签2']);

watch(tags, (val) => {
    console.log('标签变化了', val);
});

</script>
查看代码

唯一性校验

支持不允许输入重复标签。

Play
<template>
    <BTagsPanel v-model:tags="tags" :isUnique="true"></BTagsPanel>
</template>
<script setup lang="ts">
import { ref, watch } from 'vue';
import { BTagsPanel } from '@fesjs/traction-widget';

const tags = ref<string[]>(['默认标签1', '默认标签2']);


</script>
查看代码

标签名正则校验

支持对输入标签做自定义正则校验。样例设置标签只允许输入中英文字符、数字、下划线和中划线。

Play
<template>
    <BTagsPanel v-model:tags="tags" :regex="/^[\w\u4e00-\u9fa5-]+$/" regexTip="标签只允许输入中英文字符、数字、下划线和中划线"></BTagsPanel>
</template>
<script setup lang="ts">
import { ref, watch } from 'vue';
import { BTagsPanel } from '@fesjs/traction-widget';

const tags = ref<string[]>(['默认标签1', '默认标签2']);

</script>
查看代码

参数说明

TagsPanel Props

属性说明类型默认值
tags双向绑定的标签列表Array(string)[]
size尺寸，可选值：small、middle、largestringmiddle
effect主题，可选值：dark、light、plainstringlight
type类型，可选值：default、success、info、warning、dangerstringdefault
disabled是否不可编辑booleanfalse
editabled是否支持双击标签编辑标签内容booleanfalse
maxlength单标签最大长度number25
showWordLimit是否显示输入内容长度统计booleanfalse
regex是否自定义输入标签校验string''
regexTip标签校验错误提示语string'标签输入不符合校验规则'
isUnique标签是否不可重复添加booleanfalse
numberLimit标签总数限制number0 (默认值为0，表示不限制。)

注意事项

  1. BTagsPanel不同尺寸、主题和类型的标签样式效果，可至fes design查看。 https://fes-design.mumblefe.cn/zh/components/tag.html

Released under the MIT License.

Copyright © webank