vue3项目控制按钮 封装函数的方法

你可以使用Vue.js提供的自定义指令来封装控制按钮的函数。以下是一个示例：

// 在Vue实例中定义一个自定义指令
Vue.directive('button-control', {
  bind: function(el, binding) {
    // 在绑定时获取指令的参数
    const { value } = binding;

    // 在按钮上绑定点击事件
    el.addEventListener('click', () => {
      // 执行传入的函数
      value();
    });

    // 根据传入的参数控制按钮的可用状态
    el.disabled = binding.arg === 'disable';
  }
});

在模板中使用这个自定义指令：

<template>
  <button v-button-control:disable="disableBtn" v-button-control="handleClick">点击我</button>
</template>

这里的`v-button-control:disable`指令参数中，`:disable`表示将`disableBtn`的值作为参数传入指令，指令可以根据参数值来控制按钮的可用状态。`v-button-control`指令参数中，`handleClick`表示要执行的函数。