如何在 Vue2 中包装锚标记？

【问题标题】：How do you wrap an achor tag in Vue2?如何在 Vue2 中包装锚标记？
【发布时间】：2018-08-24 15:57:48
【问题描述】：

我正在使用 Vue 2，并且我使用锚标记作为“按钮”（用于 svg 的样式设置）。

以这种方式使用锚标记的缺点是不能像按钮一样禁用它。

我想做一个简单包装锚标签的 vue 组件。我希望组件将自定义组件的所有属性传递到子锚标记上，以便有人可以像这样使用它：

<custom-comp id="closeButton" title="Close" class="c-btn" @click="close" :disable="true"></custom-comp>

我想拦截子锚标记上的click，并且仅在组件未禁用时才发出它。

我怎样才能做到这一点？

【问题讨论】：

【解决方案1】：

你不能。 disable 属性仅用于表单元素。你在这里寻找的是使用v-if：

<a id="closeButton" title="Close" class="c-btn" @click="close" v-if="isConditionMatched">
    Only show if isConditionMatched returns true
</a>

或者，有条件地你可以在你的方法中使用return false 语句：

close() {
  if(!isConditionMatched) return false;
  // continue your close function
}

【讨论】：