@morehook/component/button/index.js

关于 vue 的小型业务组件库

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

const stopPropagation = (event) => event.stopPropagation();
function preventDefault(event, isStopPropagation) {
  if (typeof event.cancelable !== "boolean" || event.cancelable) {
    event.preventDefault();
  }
  if (isStopPropagation) {
    stopPropagation(event);
  }
}

const [name$1, bem$1] = createNamespace("small-button");
const smallBtnDefaultText = ref("\u6211\u662FsmallBtn\u9ED8\u8BA4\u586B\u5145\u503C\uFF0C\u53EF\u4EE5\u901A\u8FC7hook\u66F4\u6539\uFF1A");
const useSmallBtn = () => {
  console.log("\u8C03\u7528\u4E86\uFF1AuseSmallBtn");
  return {
    smallBtnDefaultText
  };
};
const smallBtnProps = extend({}, {
  text: {
    type: Function,
    default: () => createVNode("div", null, [createTextVNode("\u6211\u662FsmallBtn")])
  }
});
const SmallButton = defineComponent({
  name: name$1,
  props: smallBtnProps,
  emits: ["click"],
  setup(props, {
    emit,
    slots
  }) {
    const renderText = () => {
      return createVNode("span", {
        "class": bem$1("text")
      }, [slots.default ? slots.default() : props.text()]);
    };
    const onClick = (event) => {
      emit("click", event);
    };
    return () => createVNode("div", {
      "class": bem$1("body"),
      "onClick": onClick
    }, [createVNode("div", null, [smallBtnDefaultText.value, renderText()])]);
  }
});

const [name, bem] = createNamespace("button");
const buttonProps = extend({}, {
  text: String,
  type: makeStringProp("default"),
  loadingText: String,
  color: String,
  loading: Boolean,
  disabled: Boolean
});
const btnDefaultText = ref("\u6211\u662FBtn\u9ED8\u8BA4\u586B\u5145\u503C\uFF0C\u53EF\u4EE5\u901A\u8FC7hook\u66F4\u6539\uFF1A");
const useBtn = () => {
  console.log("\u8C03\u7528\u4E86\uFF1AuseBtn");
  return {
    btnDefaultText
  };
};
var _Button = defineComponent({
  name,
  props: buttonProps,
  emits: ["click", "clickSmall"],
  setup(props, {
    emit,
    slots
  }) {
    const onClick = (event) => {
      if (props.loading) {
        preventDefault(event);
      } else if (!props.disabled) {
        emit("click", event);
      }
    };
    const onClickSmall = (event) => {
      emit("clickSmall", event);
    };
    const renderText = () => {
      let text;
      if (props.loading) {
        text = props.loadingText;
      } else {
        text = slots.default ? slots.default() : props.text;
      }
      return createVNode("span", {
        "class": "text"
      }, [text]);
    };
    return () => {
      return createVNode("div", null, [createVNode("div", {
        "class": bem("body"),
        "onClick": onClick
      }, [createVNode("div", {
        "class": bem("content")
      }, [btnDefaultText.value, renderText()])]), createVNode("div", {
        "style": "margin: 40px"
      }, [createTextVNode("------------\u7236\u5B50\u7EC4\u4EF6\u5206\u754C\u7EBF------------")]), createVNode(SmallButton, {
        "text": renderText,
        "onClick": onClickSmall
      }, null)]);
    };
  }
});

const Button = withInstall(_Button);

export { Button, buttonProps, Button as default, useBtn, useSmallBtn };