birdpaper-ui/lib/button/src/button.vue2.js

一个通用的 vue3 UI组件库。A common vue3 UI component library.

"use strict";
const vue = require("vue");
const birdpaperIcon = require("birdpaper-icon");
const _sfc_main = vue.defineComponent({
  name: "Button",
  props: {
    /** 按钮类型 Type of the button */
    type: { type: String, default: "normal" },
    /** 按钮尺寸 Size of the button */
    size: { type: String, default: "normal" },
    /** 按钮形状 Shape of the button */
    shape: { type: String, default: "square" },
    /** 按钮状态 Status of the button */
    status: { type: String, default: "normal" },
    /** 是否加载 Loading or not */
    loading: { type: Boolean, default: false },
    /** 是否禁用 Disabled or not */
    disabled: { type: Boolean, default: false },
    /** 按钮图标 Button icon */
    icon: { type: Object },
    /** 是否撑满父级 Block or not */
    block: { type: Boolean, default: false }
  },
  emits: ["click"],
  setup(props, { emit }) {
    const name = "bp-btn";
    const isDisabled = vue.computed(() => props.disabled || props.loading);
    const btnClass = vue.computed(() => {
      let className = [
        name,
        `${name}-${props.shape}-${props.size}`,
        `${name}-type-${props.type}-status-${props.status}`,
        { "has-default-slot": !!vue.useSlots().default },
        { "is-block": props.block }
      ];
      return className;
    });
    const btnIcon = vue.computed(() => {
      return props.loading ? birdpaperIcon.IconLoader4Line : props.icon;
    });
    const onClick = () => {
      if (!props.disabled)
        return emit("click");
    };
    return {
      isDisabled,
      btnClass,
      btnIcon,
      onClick
    };
  }
});
module.exports = _sfc_main;