<template>
  <el-button
    class="m-button"
    :class="styleClass"
    :style="styleInline"
    :type="type"
    :disabled="disabled"
    :round="round"
  >
    <slot></slot>
  </el-button>
</template>

<script>
import { computed } from "vue";
export default {
  name: "mButton",
  props: {
    /**
     * 按钮类型
     */
    type: {
      type: String,
      default: "default",
      validator(value) {
        return (
          [
            "default",
            "primary",
            "success",
            "info",
            "warning",
            "danger",
            "text",
          ].indexOf(value) > -1
        );
      },
    },
    /**
     * 是否禁用
     */
    disabled: {
      type: Boolean,
      default: false,
    },
    /**
     * 是否开启圆角
     */
    round: {
      type: Boolean,
      default: false,
    },
    /**
     * 宽度像素值
     */
    width: {
      type: [String, Number],
      default: "",
    },
  },
  setup(props) {
    // 样式类名
    const styleClass = computed(() => {
      return {
        [`m-button--${props.type}`]: props.type,
        "is-disabled": props.disabled,
        "is-round": props.round,
      };
    });
    // 样式行内
    const styleInline = computed(() => ({
      width: props.width + "px",
    }));

    return {
      styleClass,
      styleInline,
    };
  },
};
</script>

<style lang="scss" scoped>
@import "../../../styles/MButton/index.scss";
</style>
