Button 组件

使用

<r-button type="button"  btnType="primary" :disabled="false" size="lg" @click="test">我是按钮</r-button>
<r-button type="button"  btnType="default" :disabled="false" size="lg" @click="test">我是按钮</r-button>
<r-button type="button"  btnType="danger" :disabled="true" size="lg" @click="test">我是按钮</r-button>
<r-button type="button"  btnType="dash" :disabled="false" size="lg" @click="test">我是按钮</r-button>
import rButton from "@/components/Button";

<script>
import classNames from "classnames";
export default {
  name: "button",
  props: {
    btnType: {
      type: String,
      default: "default",
    },
    size: {
      type: String,
      default: "",
    },
    className: {
      type: String,
      default: "",
    },
    disabled: {
      type: Boolean,
      default: false,
    }
  },
  render(h) {
    const { btnType, disabled, className, size } = this;
    const classes = classNames("btn", className, {
      [`btn-${btnType}`]: btnType, // btnType存在就添加上这个[`btn-${btnType}`] class
      [`btn-${size}`]: size,
    });
    return (
      <button {...h} className={classes} disabled={disabled} >
        {h.$slots.default()}
      </button>
    );
  },
};
</script>