如果您使用的是第三方的 Modal 库或插件，您需要确保已正确安装和引入该库，并按照该库的文档进行初始化和使用。
如果您正在自己编写 Modal 组件，您可以像下面这样在 Vue 3 中定义一个简单的 Modal 组件：
```vue
<
template>
<div class="modal-mask" v-show="visible">
<div class="modal-wrapper">
<div class="modal-container">
<div class="modal-header">
<slot name="header"></slot>
<button class="modal-close" @click="hide">×</button>
</div>
<div class="modal-body">
<slot></slot>
</div>
<div class="modal-footer">
<slot name="footer"></slot>
</div>
</div>
</div>
</div>
</
template>
<script>
import { ref } from 'vue';
export default {
setup(props, { emit }) {
const visible = ref(false);
const show = () => {
visible.value = true;
};
const hide = () => {
visible.value = false;
};
// 将 show 和 hide
方法暴露给父组件
emit('update:show', show);
emit('update:hide', hide);
return {
visible,
show,
hide,
};
},
};
</script>
<style>
.modal-mask {
position: fixed;
top: 0;
left: 0;
z-index: 9998;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
}
.modal-wrapper {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
.modal-container {
width: 500px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
overflow: hidden;
}
.modal-header {
padding: 10px;
background-color: #f5f5f5;
text-align: center;
position: relative;
}
.modal-close {
position: absolute;
top: 10px;
right: 10px;
font-size: 20px;
font-weight: bold;
color: #999;
cursor: pointer;
border: none;
background-color: transparent;
}
.modal-body {
padding: 20px;
}
.modal-footer {
padding: 10px;
background-color: #f5f5f5;
text-align: center;
}
</style>
```
在上面的代码中，我们定义了一个名为 `Modal` 的组件，该组件
包含了 Modal 对话框的基本结构和样式，并暴露了 `visible`、`show` 和 `hide` 三个属性和
方法。其中，`visible` 是一个响应式变量，用于控制 Modal 是否可见，`show` 和 `hide` 分别是用于显示和隐藏 Modal 的
方法。
在父组件中，您可以像下面这样使用 `Modal` 组件：
```vue
<
template>
<div>
<button @click="showModal">打开对话框</button>
<Modal v-model:visible="modalVisible">
<
template #header>
<h3>添加机器人</h3>
</
template>
<
template #default>
<form>
<div>
<label for="name">名称：</label>
<input type="text" id="name" v-model="bot.name" />
</div>
<div>
<label for="description">描述：</label>
<textarea id="description" v-model="bot.description"></textarea>
</div>
</form>
</
template>
<
template #footer>
<button @click="saveBot">保存</button>
<button @click="hideModal">取消</button>
</
template>
</Modal>
</div>
</
template>
<script>
import Modal from './Modal.vue';
import { ref } from 'vue';
export default {
components: {
Modal,
},
setup() {
const modalVisible = ref(false);
const bot = ref({ name: '', description: '' });
const showModal = () => {
modalVisible.value = true;
};
const hideModal = () => {
modalVisible.value = false;
};
const saveBot = () => {
// 保存机器人
console.log('保存机器人', bot.value);
hideModal();
};
return {
modalVisible,
bot,
showModal,
hideModal,
saveBot,
};
},
};
</script>
```
在上面的代码中，我们使用 `Modal` 组件来创建一个添加机器人的对话框。我们使用 `v-model:visible` 绑定 `Modal` 的 `visible` 属性，使其与父组件中的 `modalVisible` 双向绑定。这样，当父组件中的 `modalVisible` 改变时，`Modal` 会自动显示或隐藏。
我们在 Modal 组件的插槽中定义了对话框的头部、内容和底部，以及
对应的
按钮事件。这里的 `saveBot` 和 `hideModal`
方法是从父组件中传递给 `Modal` 组件的，它们会在
对应的
按钮点击事件中被调用。
这样，我们就可以使用自定义的 `Modal` 组件来创建自己的对话框，并在其中嵌入任何内容。
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
4148
