@cqmcui/cqmcui/dist/packages/_es/Tag.js

轻量级移动端 Vue2、Vue3 组件库（支持小程序开发）

import { toRefs, computed, resolveComponent, openBlock, createElementBlock, normalizeClass, normalizeStyle, renderSlot, createBlock, createCommentVNode } from "vue";
import { c as createComponent } from "./component-81a4c1d0.js";
import { Close } from "@cqmcui/icons-vue";
import { _ as _export_sfc } from "./_plugin-vue_export-helper-cc2b3d55.js";
import "../locale/lang";
const { componentName, create } = createComponent("tag");
const _sfc_main = create({
  props: {
    color: { type: String, default: "" },
    textColor: { type: String, default: "" },
    type: {
      type: String,
      default: "default"
    },
    plain: {
      type: Boolean,
      default: false
    },
    round: {
      type: Boolean,
      default: false
    },
    mark: {
      type: Boolean,
      default: false
    },
    closeable: {
      type: Boolean,
      default: false
    }
  },
  components: {
    Close
  },
  emits: ["close", "click"],
  setup(props, { emit }) {
    const { type, color, plain, round, mark, textColor } = toRefs(props);
    const classes = computed(() => {
      const prefixCls = componentName;
      return {
        [prefixCls]: true,
        [`${prefixCls}--${type.value}`]: type.value,
        [`${prefixCls}--plain`]: plain.value,
        [`${prefixCls}--round`]: round.value,
        [`${prefixCls}--mark`]: mark.value
      };
    });
    const getStyle = () => {
      const style = {};
      if (textColor.value) {
        style.color = textColor.value;
      } else if (color.value && plain.value) {
        style.color = color.value;
      }
      if (plain.value) {
        style.background = "#fff";
        style["border-color"] = color.value;
      } else if (color.value) {
        style.background = color.value;
      }
      return style;
    };
    const onClose = (event) => {
      event.stopPropagation();
      emit("close", event);
    };
    const onClick = (event) => {
      emit("click", event);
    };
    return {
      classes,
      getStyle,
      onClose,
      onClick
    };
  }
});
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  const _component_Close = resolveComponent("Close");
  return openBlock(), createElementBlock("view", {
    class: normalizeClass(_ctx.classes),
    style: normalizeStyle(_ctx.getStyle()),
    onClick: _cache[0] || (_cache[0] = (...args) => _ctx.onClick && _ctx.onClick(...args))
  }, [
    renderSlot(_ctx.$slots, "default"),
    _ctx.closeable ? (openBlock(), createBlock(_component_Close, {
      key: 0,
      class: "cqmc-tag--close",
      width: "12px",
      height: "12px",
      onClick: _ctx.onClose
    }, null, 8, ["onClick"])) : createCommentVNode("", true)
  ], 6);
}
const Tag = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
export {
  Tag as default
};