taro-ui-vue3/lib/tag/index.js

Taro UI Rewritten in Vue 3.0

import {h, defineComponent, computed, mergeProps} from "vue";
import {View} from "@tarojs/components";
const SIZE_CLASS = {
  normal: "normal",
  small: "small"
};
const TYPE_CLASS = {
  primary: "primary"
};
const AtTag = defineComponent({
  name: "AtTag",
  props: {
    size: {
      type: String,
      default: "normal",
      validator: (val) => ["normal", "small"].includes(val)
    },
    type: {
      type: String,
      default: "",
      validator: (val) => ["", "primary"].includes(val)
    },
    name: {
      type: String,
      default: ""
    },
    circle: {
      type: Boolean,
      default: false
    },
    active: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    },
    onClick: Function
  },
  setup(props, {attrs, slots}) {
    const rootClass = computed(() => ({
      "at-tag": true,
      [`at-tag--${SIZE_CLASS[props.size]}`]: SIZE_CLASS[props.size],
      [`at-tag--${props.type}`]: TYPE_CLASS[props.type],
      "at-tag--disabled": props.disabled,
      "at-tag--active": props.active,
      "at-tag--circle": props.circle
    }));
    function handleClick(event) {
      if (!props.disabled) {
        typeof props.onClick === "function" && props.onClick({
          name: props.name,
          active: props.active
        }, event);
      }
    }
    return () => h(View, mergeProps(attrs, {
      class: rootClass.value,
      onTap: handleClick
    }), {default: () => slots.default && slots.default()});
  }
});
var tag_default = AtTag;
export {
  tag_default as default
};