vue中怎么让自定义指令符合某种条件才生效？

  • Z时代
  • 2024-03-05
  • 分类：IT

功能需求是这样的，点击打印后，打印表格中的某条数据。
但是现在只要点击按钮就会弹出打印窗口，如何做到符合条件再弹出打印框？

打印组件用的：vue-print-nb

<a-button type="primary" v-print="printObj">打印</a-button>

回答：

在 main.js ：

Vue.directive('conditional-print', {
  bind(el, binding, vnode) {
    if (typeof binding.value !== 'function') {
      console.warn('v-conditional-print expects a function');
      return;
    }
    el.addEventListener('click', () => {
      if (binding.value()) {
        vnode.context.$print(el);
      }
    });
  }
});

组件里：

<template>
  <a-button type="primary" v-conditional-print="shouldPrint">打印</a-button>
</template>
<script>
export default {
  methods: {
    shouldPrint() {
      // 返回 true 则执行打印，返回 false 就不执行
      return this.someConditionMet;
    }
  }
}
</script>

以上是 vue中怎么让自定义指令符合某种条件才生效？ 的全部内容， 来源链接： utcz.com/p/934788.html

回到顶部