vue3使用自定义指令实现全选和取消全选。当单击“全选\按钮时,复选框全部被选中;"

在Vue3中，可以通过自定义指令来实现全选和取消全选的功能。首先，在Vue实例中定义一个全选指令：

app.directive('check-all', {
  mounted(el, binding) {
    el.addEventListener('click', () => {
      const checkboxes = document.querySelectorAll('input[type="checkbox"]');
      checkboxes.forEach(checkbox => {
        checkbox.checked = binding.value;
      });
    });
  }
});

然后，在模板中使用这个指令：

<template>
  <div>
    <input type="checkbox" v-check-all="selectAll">
    <button @click="selectAll = !selectAll">全选/取消全选</button>
    <!-- 其他复选框 -->
  </div>
</template>

接下来，在Vue实例中定义一个`selectAll`的响应式数据：

const app = Vue.createApp({
  data() {
    return {
      selectAll: false
    };
  },
  // ...
});

这样当点击“全选/取消全选”按钮时，`selectAll`的值会被切换，从而触发指令中的绑定函数。绑定函数会获取页面中所有的复选框，并设置它们的选中状态为`binding.value`，也就是`selectAll`的值。

这样，当点击按钮时，复选框就会全部被选中或取消选中，从而实现全选和取消全选的功能。

注意，此方法是通过控制复选框的原生属性`checked`来实现的，并没有使用Vue的组件化方式。如果需要在组件中使用，可以将自定义指令放在全局作用域中。