vue3 把antd 的Modal组件作为子组件

原创已于 2023-07-17 09:53:43 修改 · 900 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue.js

于 2023-05-12 11:21:59 首次发布

vue3 同时被 2 个专栏收录

20 篇文章

订阅专栏

antd

12 篇文章

订阅专栏

该文章展示了一个Vue应用中，父组件如何通过点击按钮触发子组件的弹窗显示。子组件使用A-Modal实现，并通过v-model双向绑定来控制弹窗的可见性。父组件通过ref进行交互，而子组件则定义了自定义事件来更新其可见状态。

1.在父组件，点击一个按钮，弹窗出现，把弹窗当做子组件

<template>
  <div>
    <a-button type="primary" @click="add">新增</a-button>
    <add-material v-model="fieldData.addVisible"></add-material>
  </div>
</template>

<script setup>
import addMaterial from './components/add-material.vue';
import { ref } from 'vue';
const fieldData = ref({
  addVisible: false,
});
const add = () => {
  fieldData.value.addVisible= true;
};
</script>

<style lang="less" scoped></style>

2.子组件

<template>
  <div>
    <a-modal  v-model:visible="modalVisible" title="Basic Modal" @ok="handleOk" @cancel="cancel">
      <p>Some contents...</p>
      <p>Some contents...</p>
      <p>Some contents...</p>
    </a-modal>
  </div>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue';
const props = defineProps({
  modelValue: {
    type: Boolean,
  },
});
const emit = defineEmits(['update:modelValue']);
const modalVisible = computed({
  get: () => props.modelValue,
  set: v => emit('update:modelValue', v),
});
// 确定按钮的回调
const handleOk = () => {
  console.log('%c Line:21 🧀', 'color:#6ec1c2');
};
</script>