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

Question

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

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

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

Answer 1

在 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>