關於vue中使用lodash的防抖用法

需求：手風琴效果（mouseover的函數防抖）

 

 

 

 

1.安裝： npm install --save lodash

2.引入：import debounce from "lodash.debounce";

3.使用：

      <div class="home_box">
        <div
          class="home_menu"
          v-for="(item, idx) in homeMenu"
          :key="idx"
          :class="{ active: hoverFlag === idx }"
 7 @mouseover="overevent(idx)"
        >
          <p :class="item.icon" class="home_menu_title">{{ item.label }}</p>
          <ul class="home_menu_list">
            <li
              v-for="(item1, idx1) in item.child"
              :key="idx1"
              :class="item1.class"
              @click="routerLink(item1.url)"
            >
              <img :src="item1.img" alt="" />
            </li>
          </ul>
        </div>
      </div>

 

可以有不同的寫法：

  methods: {
    // 鼠標滑入事件
    overevent(idx) {
        this.enterEvent(idx)
    },
    enterEvent: 
        debounce(function(idx) {
            this.hoverFlag = idx;
        }, 200),

  },

或者

  methods: {
    overevent: 
        debounce(function(idx) {
            this.hoverFlag = idx;
        }, 100),

  },