在uni-app中,通过自定义组件和组件扩展来实现自定义的模态框Modal组件。
- 创建自定义组件:
在uni-app项目中,创建一个自定义的模态框组件。在components文件夹下创建一个名为CustomModal
的文件夹,并在其中创建CustomModal.vue
文件。在该文件中定义模态框的布局和样式,例如:
<template>
<view class="custom-modal" v-if="visible">
<!-- 模态框的内容 -->
<view class="content">
<slot></slot>
</view>
</view>
</template>
<script>
export default {
props: {
visible: {
type: Boolean,
default: false
}
}
};
</script>
<style scoped>
.custom-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
}
.custom-modal .content {
width: 80%;
background-color: #fff;
padding: 20px;
border-radius: 10px;
}
</style>
模态框组件默认是隐藏的(visible属性默认为false),当visible属性为true时,模态框显示。可以在content
元素中放置模态框的内容,通过插槽(slot)的方式实现。
- 在需要使用模态框的页面中引入和使用自定义组件:
在需要显示模态框的页面中,引入和使用刚才创建的自定义模态框组件。例如,在pages
文件夹下的home
页面中,可以添加以下代码:
<template>
<view>
<!-- 页面内容... -->
<button @click="openModal">打开模态框</button>
<!-- 引入自定义模态框 -->
<custom-modal :visible="modalVisible">
<!-- 模态框的内容 -->
<view>
<text>这是一个自定义模态框</text>
<button @click="closeModal">关闭</button>
</view>
</custom-modal>
</view>
</template>
<script>
import CustomModal from "@/components/CustomModal";
export default {
components: {
CustomModal
},
data() {
return {
modalVisible: false
};
},
methods: {
openModal() {
// 打开模态框
this.modalVisible = true;
},
closeModal() {
// 关闭模态框
this.modalVisible = false;
}
}
};
</script>
在页面中引入了创建的自定义组件CustomModal
,并通过modalVisible
属性控制模态框的显示和隐藏。点击"打开模态框"按钮时,调用openModal
方法打开模态框,点击模态框内的"关闭"按钮时,调用closeModal
方法关闭模态框。