element UI——button添加事件

问题

  element UI 中的button想添加鼠标mouseenter、mouseleave等事件,但是发现怎么加都不生效

解决办法

  创建原始的button,然后再在这个按钮上添加事件,如果想要elementUI中的按钮样式,可以设置Class为elementUI中的按钮样式

示例代码

            
// class 相当于elementUI button 中 size="mini",并且使用 plain 属性
            <button 
            class="el-button el-button--mini is-plain"
            @mouseenter="mouseenter"
            @mouseover="mouseover"
            @mousemove="mousemove"
            @mouseout="mouseout"
            @mouseleave="mouseleave"
            @mousedown="mousedown"
            @mouseup="mouseup"
            @dblclick="dblclick"
            >详情</button >

.
.
.
// 省略其他代码
.
.
.

mouseenter(){
    console.log("鼠标划入");
},
mouseover(){
    console.log("鼠标在按钮中");
},
mousemove(){
    console.log("鼠标在按钮中移动");
},
mouseout(){
    console.log("鼠标移出按钮");
},
mouseleave(){
    console.log("鼠标离开按钮");
},
mousedown(){
    console.log("按钮按下");
},
mouseup(){
    console.log("按钮松开");
},
dblclick(){
    console.log("双击按钮");
},

  

posted @ 2022-01-18 14:47  假装空白  阅读(2277)  评论(0)    收藏  举报