1,鼠标点击显示隐藏,样式可以自己调,我就写个dome。
<div class="min"> <button @click="change">点击我</button> <div v-show="show"> 显示隐藏的内容 </div> </div>
<script> export default { name: "testresult", data() { return { show: false }; }, methods: { change() { this.show = !this.show; } } }; </script>
鼠标移动上去事件:
html:
<div class="min"> <button class="cancelbtn" @mouseover="mouseover(n)" @mouseleave="mouseleave" v-show="isshow & (n == id)" > 取消</button ><br /> <button class="followbtn" @mouseover="mouseover(n)" @mouseleave="mouseleave" > 关注 </button> </div>
js
<script> export default { name: "testresult", data() { return { isshow: false, id: 0 }; }, methods: { // 移入 mouseover(id) { this.id = id; clearTimeout(this.timer); this.isshow = true; }, // 移出 mouseleave() { this.timer = setTimeout(() => { this.isshow = false; }, 100); } } }; </script>
css:
.followbtn { width: 50px; height: 30px; text-align: center; background-color: coral; color: #ffffff; border: 0; } .cancelbtn { width: 50px; height: 30px; text-align: center; background-color: brown; color: #ffffff; border: 0; }
效果图:
原文地址:https://www.cnblogs.com/lovebear123/p/12069245.html
时间: 2024-10-03 22:16:08