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

努力进阶的快快~

已于 2023-07-17 09:53:43 修改

阅读量485

点赞数 1

分类专栏： vue3 antd 文章标签：前端 vue.js

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

本文链接：https://blog.csdn.net/m0_69439101/article/details/130638470

版权

vue3 同时被 2 个专栏收录

20 篇文章 1 订阅

订阅专栏

antd

12 篇文章 0 订阅

订阅专栏

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>