[JavaScript知识库]vue封装一个自己的按钮组件，按钮组件用jsx编写

声明（使用）

src/components/Rbutton.vue

<script>
export default{
  name: "Rbutton",
  props:{
    type:{
      type: String,
      default:'primary',
      validate(val){
        return ['primary','success','danger','text'],includes(val)
      }
    },
    size:{
      type: String,
      default:'md',
      validate(val){
        return ['md','sm','mini'].includes(val)
      }
    },
    disabled:{
      type: Boolean,
      default: false
    }
  },
  computed:{
    btnClasses(){
      return ["btn","btn-"+ this.type,"btn-" + this.size]
    }
    
  },
  render(){
    return(
      <button 
        class={this.btnClasses.join(" ")}
        disabled={this.disabled}
        onClick={(e)=>this.$emit("click",e)}
      >
      {this.$slots.default}
      </button>
    ) 
  },
}
</script>
<style lang="scss" scoped>
  .btn{
    font-size: 12px;
    &:hover{
      color: #212529;
      cursor: pointer;
      transition: all 0.5s;
    }
    // 按钮的背景色
    &:disabled{
      cursor: not-allowed !important;
      opacity: 0.65;
    }
    &.btn-primary{
      color: #fff;
      background-color: #0d6efd;
      border-color:#0d6efd;
    }
    &.btn-success{
      color:#fff;
      background-color: #198754;
      border-color:#198754;
    }
    &.btn-danger{
      color:#fff;
      background-color: #dc3545;
      border-color:#dc3545;
    }
    &.btn-text{
      
    }
    // 按钮的大小
    &.btn-md{
      padding: 4px;
    }
    &.btn-sm{
      padding: 2px;
    }
    &.btn-mini{
      padding: 0px;
    }
  }
</style>

使用：

<template>
<div>
  <div class="home">我是首页</div>
  <r-button type="primary" size="md" @click="handle1">按钮1</r-button>
  <r-button type="success" size="sm" @click="handle2">按钮2</r-button>
  <r-button type="danger" size="mini" @click="handle3">按钮3</r-button>
  <r-button type="text" @click="handle4">按钮4</r-button>
  <r-button type="text" disabled>按钮4</r-button>
</div>

</template>
<script>
import RButton from "@/components/RButton"
export default {
  name: "Home",
  components: {
    RButton
  },
  methods: {
    handle1(e){
      console.log('点击按钮1:', e)
    },
    handle2(e){
      console.log('点击按钮2:', e)
    },
    handle3(e){
      console.log('点击按钮3:', e)
    },
    handle4(e){
      console.log('点击按钮4:', e)
    },
  }
};
</script>