vue3封装el-button

1、确认安装最新版node
node -v
2、全局安装vite，并在cmd中输出
npm install -g create-vite@latest
3、创建vite项目vue版本，完成后安装依赖启动项目
create-vite my-project

cd my-project //切换到项目目录

npm install //安装依赖

npm run dev //启动项目

4、在components目录下创建ELBUTTON.vue

<!--
 * @Author: liangzai
 * @Date: 2023-06-30 14:06:50
 * @LastEditTime: 2023-07-07 17:19:09
 * @LastEditors: liangzai
 * @Description: 封装el-button子组件
-->
<template>
    <button ref="button" class="el-button" :class="[typeClass,sizeClass,disableClass]" :disabled="disabled" @click="clickButton">
      <slot></slot>
    </button>
</template>
<script setup lang="ts">
import { computed ,ref} from 'vue';
//defineProps 来接收组件的传值
const props = defineProps({
    type: {
        type:String,
        default:""
    },
    size: {
        type:String,
        default:""
    },
    disabled: {
      type:Boolean,
      default:"false"
    }
  })
//定义自定义click事件
const emit = defineEmits(["click"]) 
let typeClass = computed(()=>props.type?`el-button--${props.type}` : ""); //type字段对应的类名
let sizeClass = computed(()=>props.size?`el-button--${props.size}` : ""); //size字段对应的类名
let disableClass = computed(()=>props.disabled == true ?`el-button--disabled` : ""); //disabled字段对应的类名
//获取元素
const button = ref(null)
//定义点击事件
const clickButton = ()=>{
  emit('click')
}
</script>
 
<style scoped>
.el-button{
  display: inline-block;/* 设置为行内样式 */
  text-align: center;   /* 文字居中 */
  cursor: pointer;      /* 手指形状 */
  padding: 14px 20px;
  border-radius: 5px;   /* 圆角 */
  font-size: 14px;      /* 字体大小 */
  outline: none;        /* 外部的线 */
  border: none;         /* 取消默认边框 */
}
/*  type为primary时对应的颜色  */
.el-button--primary{
  background: #409EFF;
  color: white;
}
/*  type为success时对应的颜色  */
.el-button--success{
  background: #67C23A;
  color: white;
}
/*  type为danger时对应的颜色  */
.el-button--danger{
  background: #f56c6c;
  color: white;
}
/*  size为large时对应的字体大小和长度宽度  */
.el-button--large{
  width: 200px;
  height: 40px;
  font-size: 18px;
  line-height: 10px;
}
/*  size为small时对应的字体大小和长度宽度  */
.el-button--small{
  width: 100px;
  height: 25px;
  font-size: 18px;
  line-height: 10px;
}
/*  disabled为禁用时对应的背景颜色  */
.el-button--disabled{
  background: rgba(64,158,255,.5);
}
</style>

5、在App.vue中引入子组件ELBUTTON.vue

<!--
 * @Author: liangzai
 * @Date: 2023-06-30 14:06:50
 * @LastEditTime: 2023-07-07 17:21:40
 * @LastEditors: liangzai
 * @Description: 主入口文件
-->
<template>
  <div>
    <!-- 传递type、size、disabled，设置点击事件来控制按钮的禁用  -->
    <el-button type="primary" size="small" :disabled="disabled" @click="changeStatus">按钮</el-button>
  </div>
</template>
 
<script setup>
import {ref} from "vue"
import elButton from "./components/ELBUTTON.vue"
//定义disabled状态
let disabled = ref(false)
//改变状态
const changeStatus = ()=>{
  disabled.value = true;
}
</script>
 
<style>
body{
  margin: 0;
  padding: 0;
}
</style>

6、查看界面上的效果即可
//没禁用时候的效果

//禁用时候的效果