el-button实现按钮，鼠标移入显示，移出隐藏

爱写代码的派大星2023-08-19 16:51

2023.8.18今天我学习了如何实现鼠标移入显示按钮，鼠标移出隐藏按钮。

效果如图：

鼠标移入时：

鼠标移出时：

javascript 复制代码

@mouseover //鼠标移入事件
@mouseleave //鼠标移出事件

原本我是想直接在el-button写入这两个方法，但是elementUI并不支持。

所以我在外面套了一层div

javascript 复制代码

<template>
    <div>
        <div @mouseover="showButton" @mouseleave="leaveButton" style="width: 6vh;height: 3vh;">
            <el-button
                :class="buttonStyle?'show_button_style':'leave_button_style'"
              >切换
            </el-button>
        </div>
    </div>
</template>

<style>
//鼠标移入样式
.show_button_style{
  width:6vh;
  height:3vh;
  display:inline-block
}
//鼠标移出样式
.leave_button_style{
  width:6vh;
  height:3vh;
  display:none
}
</style>

<script>
export default{
    data(){
     return{
        buttonStyle:false//默认隐藏
      }
    },
    methods:{
       //鼠标移入时
       showButton(){
        this.buttonStyle = true//显示
      },
       //鼠标移出时
      leaveButton(){
        this.buttonStyle = false//隐藏
      }
    }

 }
</script>