@morehook/component/tag/index.js

关于 vue 的小型业务组件库

import { defineComponent, createVNode, createTextVNode } from 'vue';
import { e as extend, t as truthProp, m as makeStringProp, c as createNamespace, w as withInstall } from '../basic-078d1c52.js';

const [name, bem] = createNamespace("tag");
const tagProps = extend({}, {
  size: String,
  mark: Boolean,
  show: truthProp,
  type: makeStringProp("default"),
  color: String,
  plain: Boolean,
  round: Boolean,
  textColor: String,
  closeable: Boolean
});
var _Tag = defineComponent({
  name,
  props: tagProps,
  emits: ["close"],
  setup(props, {
    slots,
    emit
  }) {
    const renderText = () => {
      const text = slots.default ? slots.default() : "";
      return createVNode("span", null, [text]);
    };
    const onClose = (event) => {
      event.stopPropagation();
      emit("close", event);
    };
    const getStyle = () => {
      if (props.plain) {
        return {
          color: props.textColor || props.color,
          borderColor: props.color
        };
      }
      return {
        color: props.textColor,
        background: props.color
      };
    };
    const renderTag = () => {
      const {
        closeable
      } = props;
      const CloseIcon = closeable && createVNode("div", {
        "onClick": onClose
      }, [createTextVNode("X")]);
      return createVNode("span", {
        "style": getStyle(),
        "class": bem("body")
      }, [renderText(), CloseIcon]);
    };
    return () => createVNode("div", null, [props.show ? renderTag() : null]);
  }
});

const Tag = withInstall(_Tag);

export { Tag, Tag as default, tagProps };