【小程序开发】—— 封装自定义弹窗组件

🍋前言：

大家好我是不苒，本人男，头像是女朋友照片，很多大佬都以为我是女的，浅浅的解释一下哈哈。很高兴书写博客与大家分享知识。 本片文章主要讲的是，使用uniapp开发背景下，使用Vue的具名插槽封装一个自定义的弹窗组件popup，感兴趣的小伙伴可以学习一下，如果发现本人编写有问题的话，欢迎大家随时来评论区探讨指出问题。

话不多说直接上正文一起来学习一下封装自定义弹窗组件吧！

🍍正文

1、探讨需求封装popup自定义弹窗组件

首先我们需要探讨一下，封装自定义的组件都需要什么功能

1.需要一个半透明灰色的背景，用于区分与非弹窗内容，点击灰色区域也可以关闭弹窗。
2.需要一个关闭按钮和两个操作按钮，一个确定，一个取消。
3.弹窗内容：标题，内容区域，因为是自定义所以都使用了具名插槽，也可以设置默认的显示内容。
4.弹窗的显示位置，本次封装只考虑了居中与页面底部两个常用显示位置。

2、实战开发弹窗组件

2.1 子组件内容 popup.vue文件

<template>
	<view class="mark" v-if="isShow" @click="close">
		<view :class="bottom?'bottom':'center'" class="content" >
			<view @click="close">
				<image class="close" src="../static/close.png" ></image>
			</view>
			<slot name="title">
				<view class="title">子组件默认标题</view>
			<