javascript - 如何在元素 ui 中使用 mouseenter
问题描述
我试图在 mouseenter 事件时折叠垂直菜单,但它不能正常工作。
任何想法?
var Main = {
data() {
return {
isCollapse: true
};
},
methods: {
switchCollapse(){
this.isCollapse = !this.isCollapse;
}
}
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')
@import url("//unpkg.com/element-ui@2.9.2/lib/theme-chalk/index.css");
.el-menu-vertical-demo:not(.el-menu--collapse) {
width: 200px;
min-height: 400px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.9.2/lib/index.js"></script>
<div id="app">
<el-menu default-active="2" class="el-menu-vertical-demo" @mouseenter.native="switchCollapse" :collapse="isCollapse">
<el-submenu index="1">
<template slot="title">
<i class="el-icon-location"></i>
<span slot="title">Navigator One</span>
</template>
<el-menu-item-group>
<span slot="title">Group One</span>
<el-menu-item index="1-1">item one</el-menu-item>
<el-menu-item index="1-2">item two</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="Group Two">
<el-menu-item index="1-3">item three</el-menu-item>
</el-menu-item-group>
<el-submenu index="1-4">
<span slot="title">item four</span>
<el-menu-item index="1-4-1">item one</el-menu-item>
</el-submenu>
</el-submenu>
<el-menu-item index="2">
<i class="el-icon-menu"></i>
<span slot="title">Navigator Two</span>
</el-menu-item>
<el-menu-item index="3" disabled>
<i class="el-icon-document"></i>
<span slot="title">Navigator Three</span>
</el-menu-item>
<el-menu-item index="4">
<i class="el-icon-setting"></i>
<span slot="title">Navigator Four</span>
</el-menu-item>
</el-menu>
</div>
解决方案
我会使用 2 个不同的鼠标事件:mouseenter
和mouseleave
。
var Main = {
data() {
return {
isCollapse: true
};
},
methods: {
removeCollapse(){
this.isCollapse = false;
},
collapse(){
this.isCollapse = true;
},
}
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')
@import url("//unpkg.com/element-ui@2.9.2/lib/theme-chalk/index.css");
.el-menu-vertical-demo:not(.el-menu--collapse) {
width: 200px;
min-height: 400px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.9.2/lib/index.js"></script>
<div id="app">
<el-menu default-active="2" class="el-menu-vertical-demo" @mouseenter.native="removeCollapse"
@mouseleave.native="collapse"
:collapse="isCollapse">
<el-submenu index="1">
<template slot="title">
<i class="el-icon-location"></i>
<span slot="title">Navigator One</span>
</template>
<el-menu-item-group>
<span slot="title">Group One</span>
<el-menu-item index="1-1">item one</el-menu-item>
<el-menu-item index="1-2">item two</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="Group Two">
<el-menu-item index="1-3">item three</el-menu-item>
</el-menu-item-group>
<el-submenu index="1-4">
<span slot="title">item four</span>
<el-menu-item index="1-4-1">item one</el-menu-item>
</el-submenu>
</el-submenu>
<el-menu-item index="2">
<i class="el-icon-menu"></i>
<span slot="title">Navigator Two</span>
</el-menu-item>
<el-menu-item index="3" disabled>
<i class="el-icon-document"></i>
<span slot="title">Navigator Three</span>
</el-menu-item>
<el-menu-item index="4">
<i class="el-icon-setting"></i>
<span slot="title">Navigator Four</span>
</el-menu-item>
</el-menu>
</div>
推荐阅读
- android - 手机静音时如何不播放声音?
- c# - 异步函数同步运行而不是异步
- javascript - 从获取响应 Javascript/Nodejs 创建缓冲区对象
- php - 有没有办法列出所有在某个类别中发布视频的作者并一起显示,比如列表?
- python - 将.txt文件读入字典python
- python - 我无法流式传输直接 mp4 文件(错误 400,错误请求),但我可以使用带有正确标头的 python 请求下载相同的文件?
- sql - 如何从不同的表中删除行?
- groovy - 如何使用 jmeter 5.0 发送像 telnet 这样的 json 正文
- javascript - Babel 不预处理文件
- python - AssertionError:管理器项目的数量必须等于块项目的联合#管理器项目:6004,#tot_items:6005