This function is actually equivalent to displaying and hiding the secondary menu, but it is only realized by using vue.
A simple demonstration of the function, please ignore the css border line:
There are several difficulties in this demo, just to talk about it.
Vue click to show and hide actually depends on judging whether the property in vue is true, vue will automatically help you to show or hide, but there is a problem, this demo has not solved, when the "show" button is at the bottom of the page, it should look like a lot Upward instead of downward on the webpage, the scroll bar will have an extra part to hold the extra length. I simply adjusted it according to the height of the webpage the first time I opened it, so that the secondary menu is displayed upward.
It just didn't solve the problem.
Second, when the second-level menu or third-level menu is displayed, the mouse clicks on the webpage position, all the second-level and third-level menus are hidden. This is a difficult point. The solution I found through Baidu, the principle is not very clear, there are big guys Can you explain me something?
Third, I actually encountered a problem with vue. The second-level menu is in the mouseenter state, and then the third-level menu is also in the mouseenter state. Then the hover of css cannot add any css to the third-level menu. I don't know why?
Not much nonsense, just go to the code.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue点击切换显示隐藏</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<style>
*{
padding: 0px;
margin: 0px;
}
ul li,ul li a{
list-style-type:none ;
text-decoration: none;
}
#example{
height: 30px;
position:absolute;
margin-top: 500px;
border:1px solid #000;
}
div#tip{
position:relative;
width:150px;
height: 68px;
padding: 10px 0px;
box-shadow: #666 0px 1px 1px 1px;
border:1px solid #00CC66;
}
#tip ul li a,.two a{
text-align: center;
margin: 0px auto;
color: #000;
font-size: 12px;
border: 1px solid #000;
display: block;
height: 34px;
line-height: 34px;
width: 150px;
background-color:#fff;
}
.two{
border:1px solid #000;
width: 150px;
position: relative;
padding: 10px 0px;
left: 150px;
}
#tip ul li a:hover{
background: #F0F0F0;
}
.songActive{
background: #F0F0F0;
}
.song{
background: #fff;
}
</style>
<body>
<div id="example">
<button v-text="btnText" @click="showToggle" v-clickoutside="handleClose"></button>
<div v-show="isShow" id="tip" v-bind:style="{left:popup.x , top:popup.y }" @click.stop="isShow=true">
<ul>
<li>
<a href="javascript:void(0)" @mouseenter="enter($event)"
v-bind:style="{background:song.colorB}">
<i class="layui-icon-add-1"></i>添加到歌单<i class="layui-icon-right"></i>
</a>
</li>
<li>
<a href="javascript:void(0)" @mouseenter="enter($event)"
v-bind:style="{background:song.colorA}">
<i class="layui-icon-add-1"></i>添加到电台<i class="layui-icon-right"></i>
</a>
</li>
</ul>
<ul class="two" v-if="showSong" v-bind:style="{bottom:song.y}">
<li>
<a href="javascript:void(0)">轻音乐</a>
</li>
<li>
<a href="javascript:void(0)">爵士</a>
</li>
</ul>
</div>
</div>
<script type="text/javascript">
var H = document.documentElement.clientHeight || document.body.clientHeight;
console.log(H);
const clickoutside = {
// 初始化指令
bind(el, binding, vnode) {
function documentHandler(e) {
// 这里判断点击的元素是否是本身，是本身，则返回
if (el.contains(e.target)) {
return false;
}
// 判断指令中是否绑定了函数
if (binding.expression) {
// 如果绑定了函数 则调用那个函数，此处binding.value就是handleClose方法
binding.value(e);
}
}
// 给当前元素绑定个私有变量，方便在unbind中可以解除事件监听
el.__vueClickOutside__ = documentHandler;
document.addEventListener('click', documentHandler);
},
update() {},
unbind(el, binding) {
// 解除事件监听
document.removeEventListener('click', el.__vueClickOutside__);
delete el.__vueClickOutside__;
}
};
new Vue({
el:"#example",
data:{
btnText:"显示",
isShow:false,
popup:{
x:'',
y:''
},
showSong:false,
song:{
y:'',
colorA:'',
colorB:''
}
},
directives: {clickoutside},
methods:{
handleClose:function(){
this.isShow=false;
this.showSong=false;
this.song.colorA='#fff';
this.song.colorB='#fff';
},
showToggle:function(e){
console.log(e);
this.isShow = !this.isShow;
var Y=e.pageY;
var X=e.pageX;
var top=0;
var left=0;
console.log(Y,X)
if(Y<(H-20)){
top=0;
left=X+10;
}else{
top=-80;
left=X+10;
}
console.log(top+","+left);
this.popup.x=left+'px';
this.popup.y=top+'px';
// $('#tip').css({
// 'top' : top + 'px',
// 'left': left+ 'px'
// });
if(this.isShow){
this.btnText = "显示"
}else{
this.btnText = "隐藏"
}
},
enter:function(e){
e.stopPropagation();
console.log(e)
this.showSong=true;
//获得移入的元素
var element=e.target;
this.song.colorA='#fff';
this.song.colorB='#fff';
if(element.innerText=="添加到电台"){
this.song.y=34+'px';
this.song.colorA='#F0F0F0';
}else if(element.innerText=="添加到歌单"){
this.song.y=68+'px';
this.song.colorB='#F0F0F0';
}
},
leave:function(e){
this.showSong=false;
}
}
})
</script>
</body>
</html>
The code is very simple, you should be able to understand it without explanation, and you can ask questions at any time.