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

最新推荐文章于 2025-03-18 16:24:58 发布

AI小奶龙

最新推荐文章于 2025-03-18 16:24:58 发布

阅读量2k

点赞数 1

文章标签：计算机外设

本文链接：https://blog.youkuaiyun.com/qq_53986004/article/details/132360663

版权

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

效果如图：

鼠标移入时：

鼠标移出时：

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

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

所以我在外面套了一层div

<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>