antd of vue

<template>
  <a-button type="primary" @click="showModal">Open Modal</a-button>
  <a-modal v-model:visible="visible" title="Title" @ok="handleOk">
    <p>Some contents...</p>
  </a-modal>
</template>

<script>
export default {
  data() {
    return {
      visible: false,
    };
  },
  methods: {
    showModal() {
      this.visible = true;
    },
    handleOk(e) {
      console.log(e);
      this.visible = false;
    },
  },
};
</script>

<style scoped>
/* Add some styles if needed */
</style>

解释说明：

• <a-button> 和 <a-modal> 是 Ant Design of Vue 提供的组件。
• v-model:visible="visible"：用于控制模态框的显示与隐藏，visible 是一个布尔值，当它为 true 时模态框会显示，反之则隐藏。
• @click="showModal"：点击按钮时触发 showModal 方法，将 visible 设置为 true，从而显示模态框。
• @ok="handleOk"：点击模态框的确认按钮时触发 handleOk 方法，这里简单地将 visible 设置为 false，关闭模态框。

如果你需要更多组件或功能的示例，请参考 Ant Design of Vue 官方文档。