AUBREY

SOMETIMES LOVE JUST AIN'T ENOUGH

VUE:同时使用v-if判断与directive指令时的BUG

问题:

1、项目里的商品详情页,规格弹窗底部的按钮,需要根据选中规格的实际库存在”确定“与”已售罄“两种状态之间切换;

2、于是我放了两个<button>,用v-if/v-else根据对应库存来条件渲染;

3、由于”确定“按钮需要请求接口,提交订单信息,而该接口有时要耗时7s~8s,所以添加了给阻止重复点击的directive指令;

4、一件商品,多个规格,有些规格有库存、有些没有;

5、当在各个规格之前切换后(只要满足”确定“按钮和”已售罄“按钮都除了一次后),点击”确定“按钮,就会弹出阻止重复点击指令的提示文本。

 

代码如下:

// directive.js
/*
* 防止重复点击按钮
* */
Vue.directive('preventReClick', {
  inserted (el, binding) {
    el.addEventListener('click', () => {
      if (!el.disabled) {
        el.disabled = true
        setTimeout(() => {
          el.disabled = false
        }, binding.value || 3000)
      } else {
        Toast('您的操作过于频繁,请稍后再试~')
      }
    })
  }
})

 

// detailsOfGoods.vue

<button class="confirm_btn" @click.stop="confirmBuy" v-if="Number(stock) > 0" v-preventReClick>确定</button>
<button class="confirm_btn sold_out" v-else>已售罄</button>

 

查了VUE官方文档关于directive的说明,并未提及这个问题。

 

解决办法:

将两个按钮合并为一个

<button class="confirm_btn" @click.stop="confirmBuy" :class="Number(stock) > 0 ? '' : 'sold_out'" v-preventReClick>{{Number(stock) > 0 ? '确定' : '已售罄'}}</button>

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注