鼠标滑到icon显示弹框和鼠标滑走icon隐藏弹框

最新推荐文章于 2024-09-30 15:42:36 发布

前端小凯

最新推荐文章于 2024-09-30 15:42:36 发布

阅读量226

点赞数 3

文章标签：前端 java javascript

本文链接：https://blog.csdn.net/qq_43235503/article/details/138994363

版权

html：

<div>
    <i class="iconfont icon-shouji" 
       @mouseenter="mobileCodeShowBox(1)" 
       @mouseleave="mobileCodeHideBox(1)">
    </i>
    <div v-if="mobileCodeShow" 
         @mouseenter="mobileCodeShowBox(2)"
         @mouseleave="mobileCodeHideBox(2)">
    </div>
</div>

js变量：

mobileCodeShow: false,
mobileCodeType: 1

js方法：

/**
 * 弹框显示
 */
mobileCodeShowBox(type) {
    this.mobileCodeType = type;
    setTimeout(() => {
        this.mobileCodeShow = true;
    }, 100);
},
/**
 * 弹框隐藏
 */
mobileCodeHideBox(type) {
    this.mobileCodeType = type == this.mobileCodeType ? 1 : 2;
    setTimeout(() => {
        this.mobileCodeShow = this.mobileCodeType == 1 ? false : true;
    }, 100);
}