@wines/tag

@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

Tag slot

Tag externalClasses