1.5.1 • Published 1 year ago
@wines/tag
Tag 标签
进行标记和分类的小标签。添加了多种预设色彩的标签样式如 pink
、red
、yellow
、orange
、cyan
、green
、blue
、purple
、geekblue
、magenta
、volcano
、gold
、lime
可选用。
使用指南
在 page.json 中引入组件
{
"navigationBarTitleText": "wux-tag",
"usingComponents": {
"wux-tag": "@wines/tag",
}
}
示例
<view class="page">
<view class="page__hd">
<view class="page__title">Tag</view>
<view class="page__desc">标签</view>
</view>
<view class="page__bd page__bd_spacing">
<view class="sub-title">Default</view>
<wux-tag>magenta</wux-tag>
<wux-tag color="magenta">magenta</wux-tag>
<wux-tag color="red">red</wux-tag>
<wux-tag color="volcano">volcano</wux-tag>
<wux-tag color="orange">orange</wux-tag>
<wux-tag color="gold">gold</wux-tag>
<wux-tag color="lime">lime</wux-tag>
<wux-tag color="green">green</wux-tag>
<wux-tag color="cyan">cyan</wux-tag>
<wux-tag color="blue">blue</wux-tag>
<wux-tag color="geekblue">geekblue</wux-tag>
<wux-tag color="purple">purple</wux-tag>
<view class="sub-title">Custom color</view>
<wux-tag color="#f50">#f50</wux-tag>
<wux-tag color="#2db7f5">#2db7f5</wux-tag>
<wux-tag color="#87d068">#87d068</wux-tag>
<wux-tag color="#108ee9">#108ee9</wux-tag>
<view class="sub-title">Closable</view>
<wux-tag closable bind:close="onClose">Tag 1</wux-tag>
<wux-tag
closable
visible="{{ visible }}"
controlled
bind:close="onClose"
bind:change="onChange"
>
Tag 3
</wux-tag>
<wux-tag bind:click="onToggle">Toggle</wux-tag>
</view>
</view>
import './index.less';
Page({
data: {
visible: true,
},
onClose(e) {
console.log('onClose', e);
},
onChange(e) {
console.log('onChange', e);
if (!e.detail.value) {
wx.showModal({
title: 'Sure to delete?',
success: (res) => {
if (res.confirm) {
this.setData({
visible: e.detail.value,
});
}
},
});
}
},
onToggle() {
this.setData({
visible: !this.data.visible,
});
},
});
API
Tag props
参数 | 类型 | 描述 | 默认值 |
---|
prefixCls | string | 自定义类名前缀 | wux-tag |
hoverClass | string | 指定按钮按下去的样式类。当 hover-class="none" 时,没有点击态效果 | default |
color | string | 标签色 | - |
closable | boolean | 标签是否可以关闭 | false |
defaultVisible | boolean | 默认是否显隐,当 controlled 为 false 时才生效 | true |
visible | boolean | 用于手动控制浮层显隐,当 controlled 为 true 时才生效 | true |
controlled | boolean | 是否受控 说明文档 | false |
bind:change | function | 监听状态变化的回调函数 | - |
bind:close | function | 关闭时的回调 | - |
bind:click | function | 点击事件 | - |
Tag slot
Tag externalClasses