Tag 标签

进行标记和分类的小标签。添加了多种预设色彩的标签样式如 pink、red、yellow、orange、cyan、green、blue、purple、geekblue、magenta、volcano、gold、lime 可选用。

使用指南

在 page.json 中引入组件

{
    "navigationBarTitleText": "Tag",
    "usingComponents": {
        "wux-tag": "../../dist/tag/index"
    }
}

示例

<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>

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,
        })
    },
})

视频演示

Tag

API

Tag props

Tag slot

Tag externalClasses