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("双击按钮");
},

  


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM