vue click, move mouse on Show Hidden

1, mouse click Show hidden, styles can be their own tune, and I wrote a dome.

<div class = " min " > 
      <@ the Click the Button = " Change " > click me </ the Button> 
      <div v-Show = " Show " > 
        Show hidden content
       </ div> 
    </ div>

<script>
export default {
  name: "testresult",
  data() {
    return {
      show: false
    };
  },
  methods: {
    change() {
      this.show = !this.show; } } }; </script>

 

Move mouse events:

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

Renderings: