javascript - antd-vue3，在自定义的模态框组件的插槽中，无法与a-radio-group组件进行双向绑定，感谢?

问题描述：

在自定义的模态框组件的插槽中，无法与a-radio-group组件进行双向绑定。但是用antd的a-modal就可以实现a-radio-group的数据双向绑定。有空的大佬帮忙看一下，小弟在此感谢您。

自定义模态框代码：

<template>
  <div v-show="state.openModal" v-bind="props" ref="modal" class="custom-modal full-fixed"  @click.stop.prevent="onClickBg">
    <transition
        enter-active-class="animate__animated animate__zoomIn"
        leave-active-class="animate__animated animate__zoomOut">
      <div v-show="state.openModal" @click.stop.prevent class="custom-modal-inner" v-bind="innerProps">
        <slot></slot>
      </div>
    </transition>
  </div>
</template>

<script lang="ts" setup>
import {nextTick, onBeforeUnmount, onDeactivated, onMounted, reactive, ref, watch} from 'vue';


const modal = ref();
const props = defineProps(['open', 'innerProps'])
const emit = defineEmits(['update:open']);
const state = reactive({openModal: false, beforeOpenModal: false});


onMounted(async () => {
  await nextTick();
  document.body.append(modal.value);
})

watch(() => props, (p) => {
  state.openModal = !!p.open;
}, {deep: true, immediate: true})

onDeactivated(() => {
  state.beforeOpenModal = state.openModal;
  state.openModal = false;
});

onMounted(async () => {
  await nextTick();
  document.body.append(modal.value);
})

const close = () => {
  state.openModal = false;
  emit('update:open', state.openModal);
}

const onClickBg = () => {
  close();
}

onBeforeUnmount(() => {
  close();
  modal.value.parentNode.removeChild(modal.value);
})

</script>

<style lang="scss" scoped>

.custom-modal {
  z-index: 10;
  color: #FFFFFF;
  background: rgb(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;

  .animate__animated {
    animation-duration: 300ms;
  }

  .custom-modal-inner {
    background: rgb(28, 28, 28);
    width: 80%;
    padding: 20px;
    border-radius: 4px;
  }
}
</style>

使用组件代码：

<template>
  <div class="full" style="background: #fff; color: #000">
    性别{{state.sex}}
    <a-radio-group v-model:value="state.sex" name="sex" :options="ffOptions" />

    <!--    这个自定义模态框已经全局引用 -->
    <custom-modal v-model:open="state.open" :innerProps="{
      style: {
        background: 'rgb(255 255 255)',
        color: '#000'
      }
    }">
      <a-space direction="vertical" style="width: 100%">
        <div>
          自定义模态框. 性别{{state.sex}}
          <a-radio-group v-model:value="state.sex" name="sex" :options="ffOptions" />
        </div>
      </a-space>
    </custom-modal>


    <a-modal v-model:visible="open" :footer="null">
      antd模态框.性别{{state.sex}}
      <a-radio-group v-model:value="state.sex" name="sex" :options="ffOptions" />
    </a-modal>
  </div>
</template>

<script lang="ts" setup>

import {onMounted, reactive, ref} from "vue";

const open = ref<boolean>(true);
const state = reactive({
  sex: true,
  open: true
});

const ffOptions = [{label: '是', value: true}, {label: '否', value: false}];


</script>

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

第 1 个答案：

<div v-show="state.openModal" @click.stop.prevent class="custom-modal-inner" v-bind="innerProps">
        <slot></slot>
      </div>

这里的prevent去掉

方法一参考一：https://www.eltyun.com/newsview?id=25492参考二：https://www.ancii.com/azhljxp7w/ ...