Element UI 在el-button上绑定 mouseover和mouseout事件无效

Question

想要做一个悬浮按钮的组件，在鼠标移动到按钮时展开说明按钮功能

但是，在绑定mouseover和mouseout事件时，发现绑在按钮上时无效的，只有绑在按钮上的Icon上才有效，想问问大家怎么解决

绑定在按钮上的Code：

<el-button 
type="primary" 
class="box-button"
@mouseover='btn1_show' @mouseout="btn1_close">
    <span id='btn1_title'  style="margin:0px 5px;">系统消息</span>
    <img 
    style="height:50%;margin:0px 10px"
    src="./assets/ic_remind.png">
</el-button>

绑定在Icon上的Code：

<el-button 
type="primary" 
class="box-button"
>
    <span id='btn1_title'  style="margin:0px 5px;">系统消息</span>
    <img 
    style="height:50%;margin:0px 10px"
    @mouseover='btn1_show' @mouseout="btn1_close"
    src="./assets/ic_remind.png" alt="">
</el-button>

Answer 1

如果这个组件没处理这两个事件的话是绑不了的。可以添加.native修饰符，就可以把事件绑到组件的根元素上

Answer 2

@mouseover.native = ""
@mouseout.native = ""