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

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

import { defineComponent, computed, useSlots } from "vue";
import { IconLoader4Line } from "birdpaper-icon";
const _sfc_main = 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 = computed(() => props.disabled || props.loading);
    const btnClass = computed(() => {
      let className = [
        name,
        `${name}-${props.shape}-${props.size}`,
        `${name}-type-${props.type}-status-${props.status}`,
        { "has-default-slot": !!useSlots().default },
        { "is-block": props.block }
      ];
      return className;
    });
    const btnIcon = computed(() => {
      return props.loading ? IconLoader4Line : props.icon;
    });
    const onClick = () => {
      if (!props.disabled)
        return emit("click");
    };
    return {
      isDisabled,
      btnClass,
      btnIcon,
      onClick
    };
  }
});
export {
  _sfc_main as default
};