vue.js - 在条件下添加 vue 指令

Question

是否可以根据条件设置指令？

我有一个“sticky”指令让元素粘在屏幕上。我有一个社交分享组件，我正在使用它

<tempalte>
    <div class="social-share" v-sticky>
        ....
    </div>
</template>

但是，现在我需要一个条件。我很乐意通过 Prop 制作它。

<social-share :is-sticky="true">

有没有简单的方法来添加指令？

我尝试用 v-bind/绑定(bind)它:

<div class="social-share" :v-sticky="isSticky">

但这最终会在标签中呈现“v-sticky”。​​

Answer 1

当没有值传递给指令时，您可以考虑默认为 true。

bind(el, binding) {
    if ((! binding.hasOwnProperty('value')) || binding.value) {
        // The user wants the directive to be applied...
    }
}

在你的模板中:

<template>
    <social-share v-sticky> <!-- Will apply the directive -->
    <social-share v-sticky="true"> <!-- Will apply the directive -->
    <social-share v-sticky="false"> <!-- Will NOT apply the directive -->
</template>