javascript - Vue2 自定义指令有条件地禁用按钮

Question

我正在尝试创建一个自定义指令来有条件地禁用按钮。目前我的 html 看起来像这样:

<button v-if="someConditionIsTrue" @click="doTheThing">Do something</button>
<button v-else class="disabled">Do something</button>

对于禁用的类，只需应用一些样式即可。

它工作正常，但我希望 html 看起来像这样:

<button v-disable-if="someConditionIsTrue" @click="doTheThing">Do something</button>

这是一个工作代码笔，我只需在按钮上设置禁用标志即可完成此操作。

https://codepen.io/stevgouws/pen/yRGerW

但这显然不安全，因为他们可以在开发工具中对其进行编辑。

这是我使用 @click.native 和 e.preventDefault 所做的另一项操作，但我不知道如何在条件发生变化时恢复点击功能。

  Vue.directive('disableIf', {
    bind(el, binding, vnode) {
    if (binding.value) {
      el.classList.add("disabled")
      el.onclick = e => {
        if (binding.value) e.preventDefault()
      }  
    } else {
      el.classList.remove("disabled")
    }
  },
  update(el, binding, vnode) {
    if (binding.value) {
      el.classList.add("disabled")
      el.onclick = e => {
        if (binding.value) e.preventDefault()
      }        
    } else {
      el.classList.remove("disabled")
    }
  }
});

Codepen 在这里-> https://codepen.io/stevgouws/pen/JmwXGE

如有任何帮助，我们将不胜感激。

Answer 1

您可以使用 :disabled="someCondition" hmtl 属性直接禁用该按钮，无需自定义指令。请注意 : 的使用，以便它绑定(bind)到虚拟机的 someCondition 属性。

使用您的示例:

<div id="app">
  <button :disabled="someCondition" @click="doTheThing">Do the thing</button>
  <button @click="someCondition = !someCondition">Toggle Condition</button>
</div>

并使用 button:disabled css 选择器应用您的样式。

button:disabled {
  opacity: 0.4;
}

这是你的笔叉 https://codepen.io/dormenog/pen/jeXqYO?editors=0100 .

关于阻止单击事件，您可以使用相同的属性作为条件来阻止单击事件处理程序继续进行。例如

doTheThing($event) {
    if (this.someCondition) {
        return;
    }

    //do stuff
}

在 Vue 应用程序的生产版本中，您不应该有权访问开发工具。用户可能会通过 DOM 启用按钮，但方法内的条件会阻止操作继续进行。

请记住，您可以在任何原生支持 :disabled="foo" 绑定(bind)的 html 元素中使用它，即输入字段、 anchor 标记和文本区域。