对el-button封装使用

x改变el-button样式并且多处使用

el-button封装：

<template>
  <el-button
    class="my-btn"
    :style="{ width }"
    :disabled="disabled"
    @click="myClick"
    @mouseenter="person.active = true"
    @mouseleave="person.active = false"
  >
    <!-- 如果父组件没传路径就默认使用以下 -->
    <img class="bg" :style="{ width }" :src="person.active ? btn2 : btn1" />
    <!-- 传了路径就使用以下  注意：vue3中Img不能使用require引入图片-->
    <img class="icon" v-if="img && !person.active" :src="img" />
    <img class="icon" v-if="img && person.active" :src="imgActive" />
    <div class="txt">{{ title }}</div>
  </el-button>
</template>

<script setup>
import { reactive, watch } from "vue";
import btn1 from "../assets/bgs/btn1.png";
import btn2 from "../assets/bgs/btn2.png";
const emits = defineEmits(["onClick"]);
let props = defineProps({
  width: {
    type: String,
    default: "119px",
  },
  disabled: {
    type: Boolean,
    default: false,
  },

  title: {
    type: String,
    default: "",
  },
  img: {
    type: String,
    default: "",
  },
  imgActive: {
    type: String,
    default: "",
  },
});
const person = reactive({
  active: "",
});

function myClick(val) {
  emits("onClick");
}
</script>
<style lang="less" scoped>
.my-btn {
  position: relative;
  display: flex;
  line-height: 30px;
  cursor: pointer;
  white-space: nowrap;
  justify-content: center;

  .bg {
    position: absolute;
    width: 119px;
    height: 30px;
    left: 0;
    top: 0;
    z-index: 1;
  }

  .icon {
    position: absolute;
    width: 119px;
    height: 30px;
    left: 0;
    top: 0;
    z-index: 1;
  }

  .txt {
    position: relative;
    z-index: 2;
    text-align: center;
    font-size: 16px;
    color: #fff;
    width: 100%;
  }
}
</style>

父组件使用：

1.不传图片路径使用默认背景图

<template>
    <MyBtn
      title="确定"
      @onClick="addDecice"
      :disabled="false"
    ></MyBtn>
  </div>
</template>

<script setup>
import { reactive, onMounted } from "vue";
import MyBtn from "../components/MyBtn.vue";
const person = reactive({});
function addDecice() {
  console.log('点击了按钮');
}
onMounted(() => {});
</script>
<style scoped lang='less'>
</style>

效果：

hover：

 

2.传入图片路径 使用新的背景图

<template>
    <MyBtn
      title="确定"
      @onClick="addDecice"
      :disabled="false"
      img="/src/assets/bgs/category.png"
      imgActive="/src/assets/bgs/category-active.png"
    ></MyBtn>
  </div>
</template>

<script setup>
import { reactive, onMounted } from "vue";
import MyBtn from "../components/MyBtn.vue";
const person = reactive({});
function addDecice() {
  console.log('点击了按钮');
}
onMounted(() => {});
</script>
<style scoped lang='less'>
</style>

效果：

hover：