Ant Design Vue：模态组件无法与 Composition API 一起使用
我将 Vue3 与 Ant Design Vue 一起使用，并希望创建一个“模态”组件我可以在整个应用程序中重复使用。
像这样非常简单的事情：
<template>
<a-button type="primary" @click="showModal">Open</a-button>
<a-modal v-model="visible" wrap-class-name="full-modal-to-xl">
<p>Some contents...</p>
<p>Some contents...</p>
<p>Some contents...</p>
</a-modal>
</template>
<script lang="ts">
import { ref, defineComponent } from "vue";
export default defineComponent({
setup() {
const visible = ref(false);
const showModal = () => {
visible.value = true;
};
return { visible, showModal };
},
});
</script>
但它根本不起作用......（没有控制台日志，或错误）。
当您将 visible 作为 prop 传递时，它似乎确实有效，但我真的不想这样做。这应该也可以...
我错过了什么？
编辑： 解决方案（但不是真正的解决方案）使用 Composition API 不是看来用 Ant 是可行的。
I'm using Vue3 with Ant Design Vue and would like create a 'Modal' component that I can reuse throughout the app.
Something very simple like so:
<template>
<a-button type="primary" @click="showModal">Open</a-button>
<a-modal v-model="visible" wrap-class-name="full-modal-to-xl">
<p>Some contents...</p>
<p>Some contents...</p>
<p>Some contents...</p>
</a-modal>
</template>
<script lang="ts">
import { ref, defineComponent } from "vue";
export default defineComponent({
setup() {
const visible = ref(false);
const showModal = () => {
visible.value = true;
};
return { visible, showModal };
},
});
</script>
But it simply will not work...(no console log, or error).
It does seem to work when you pass visible as a prop, but I really do not want to do that. This should work just as well...
What am I missing?
EDIT:
Solution (but not really a solution) Using the Composition API is not feasible with Ant it seems.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
模态的
v-model需要位于其visible属性上：The modal's
v-modelneeds to be on itsvisibleprop:demo