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>

这是一个有效的Codepen，我可以通过在按钮上设置禁用标志来设法做到这一点。

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属性直接无需自定义指令来禁用按钮。请注意，使用:使其绑定到虚拟机的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的叉子。

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

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

    //do stuff
}

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

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

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

1 个答案: