@cancel 如何使用

@cancel 是 Vue.js 中的一个事件修饰符，用于监听取消事件。通常，@cancel 用于监听用户的取消操作，例如按下 ESC 键或者点击模态框的取消按钮。

使用 @cancel 时，需要在绑定的元素上添加 @cancel 修饰符。例如，如果你要在一个模态框上监听取消事件，可以这样写：

<template>
  <div class="modal">
    <div class="modal-content">
      <p>这是一个模态框。</p>
      <button @click="closeModal">关闭</button>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    closeModal() {
      // 关闭模态框的方法
    },
    onCancel() {
      // 取消操作的方法
    }
  },
  mounted() {
    // 监听取消事件
    this.$refs.modal.addEventListener('cancel', this.onCancel)
  },
  beforeDestroy() {
    // 解除监听取消事件
    this.$refs.modal.removeEventListener('cancel', this.onCancel)
  }
}
</script>

在这个例子中，我们在模态框的根元素上添加了一个 @cancel 修饰符，表示要监听取消事件。在 mounted 钩子函数中，我们使用 addEventListener 方法监听 cancel 事件，并将其绑定到 onCancel 方法上。在 beforeDestroy 钩子函数中，我们使用 removeEventListener 方法解除监听。

当用户触发取消事件时，onCancel 方法就会被调用。你可以在 onCancel 方法中添加一些逻辑，例如关闭模态框或者进行一些清理操作。