码迷,mamicode.com
首页 > 移动开发 > 详细

vue 点击,鼠标移动上去显示隐藏

时间:2019-12-19 19:13:23      阅读:384      评论:0      收藏:0      [点我收藏+]

标签:set   效果   click   ack   button   onclick   code   info   内容   

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>
View Code

 

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>
View Code

 

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;
}

效果图:

技术图片   技术图片

vue 点击,鼠标移动上去显示隐藏

标签:set   效果   click   ack   button   onclick   code   info   内容   

原文地址:https://www.cnblogs.com/lovebear123/p/12069245.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!