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

Posted 2023-03-14

【中文标题】Vue2自定义指令有条件地禁用按钮

【英文标题】：Vue2 Custom directive to disable button conditionally

【发布时间】：2018-10-25 11:24:22

【问题描述】：

我正在尝试创建一个自定义指令来有条件地禁用按钮。目前我的 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

任何帮助将不胜感激。

【参考方案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。

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

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

    //do stuff

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

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

【讨论】：

谢谢，这行得通，但这并不能解决我的问题。我不想将每个函数都包装在条件中。我喜欢 v-disabled-if 指令的想法是您只需声明条件一次，而不是两次。

使用指令似乎有点矫枉过正，在我看来，防止事件传播不属于指令的职责。一般来说，禁用按钮就足够了。如果您担心人们操纵 dom，也许更好的方法是有条件地渲染按钮而不是禁用它，使用 'v-if' 以便当条件为 falsy 时按钮在 Dom 中不存在。跨度>

我不知道你可能是对的，但对我来说，这似乎是理想的简单而干净的解决方案（明智的使用）。但也许这是不可能的。使用 v-if 是我目前正在做的事情。 （见我帖子的开头）。