轻松打造自己风格的弹框组件，让你的页面与众不同

前言

开发中，弹框组件已成为不可或缺的一部分，它可以用于提示用户、展示信息、确认操作等。但是，我们是否有过这样的疑问：为什么我们总是使用别人写好的弹框组件呢？为什么我们不能自己动手写一个呢？今天，我将带领大家一分钟快速学习如何自定义弹框组件，不管你是使用 vue、小程序还是 uniapp，都能轻松上手！

---

实现思路

其实弹框是一个非常基础且简单的组件，要想实现这个功能核心就是通过一个标识去控制弹框出现的时机，再用事件绑定控制其动态的显隐即可。话不多说，下面直接实战。

---

vue 实现代码

<template>
  <div>
    <div class="vueDemo">
      <button @click="vueToMdel">点击打开弹窗</button>
      <!-- 弹框内容 -->
      <div class="vueMdelBox">
        <div :hidden="!vueShowModel" class="vueContant">
          <div class="vueTitle">标题</div>
          <div class="vueDetail">内容可能过于基础，但对于刚入门的人来说或许是一个窗口</div>
          <!-- 确定取消按钮 -->
          <div class="vueBtn">
            <p @click="vueShowModel = false">取消</p>
            <p @click="confirm">确定</p>
          </div>
        </div>
        <!-- 背景黑色蒙版 -->
        <div class="vueBgdCol" :hidden="!vueShowModel" @click="vueShowModel = false"></div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      vueShowModel: false, //默认不显示
    };
  },
  methods: {
    // 点击按钮打开弹框
    vueToMdel() {
      this.vueShowModel = true;
    },
    // 点击确定按钮模态框消失
    confirm() {
      this.vueShowModel = false;
    },
  },
};
</script>
<style scoped>
.vueBgdCol {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: black;
  z-index: 99;
  -moz-opacity: 0.6;
  opacity: 0.6;
  filter: alpha(opacity=88);
}

.vueContant {
  padding: 10px 0px 0px 0px;
  position: fixed;
  top: 36%;
  left: 50%;
  width: 80%;
  margin-left: -40%;
  background-color: white;
  z-index: 100;
  overflow: auto;
  border-radius: 10px;
}

.vueTitle {
  display: flex;
  justify-content: center;
  font-weight: bold;
}

.vueDetail {
  font-size: 14px;
  color: #646566;
  display: flex;
  justify-content: center;
  padding: 16px;
}

.vueBtn {
  display: flex;
}

.vueBtn p {
  width: 50%;
  padding: 5% 0%;
  font-weight: bold;
  text-align: center;
  border-top: 1px solid #ebedf0;
}

.vueBtn p:last-child {
  color: #ee0a24;
  border-left: 1px solid #ebedf0;
}
</style>

---

vue 实现效果

---

小程序

wxml

<button bindtap="miniToMdel">点击打开弹窗</button>
<!-- 黑色背景蒙版 -->
<view class="miniBgdCol" bindtap="miniHideModal" wx:if="{{miniShowModal}}"></view>
<!-- 弹框内容 -->
<view class="modalDialog" wx:if="{{miniShowModal}}">
    <view class="miniTitle">确认退款</view>
    <view class="miniWhether">是否确认申请退款？</view>
    <!-- 取消确定按钮 -->
    <view class="miniBtn">
        <button class="cancel" bindtap="cancel">取消</button>
        <button class="confirm" bindtap="confirm">确定</button>
    </view>
</view>

---

js

Page({
    data: {
        miniShowModal: false, //默认隐藏弹框
    },
    //点击按钮弹出弹框
    miniToMdel() {
        this.setData({
            miniShowModal: true
        })
    },
    // 点击确定按钮时关闭弹框
    confirm() {
        this.closeOn()
    },
    //点击蒙版时关闭按钮
    miniHideModal: function () {
        this.closeOn()
    },
    //点击取消按钮时关闭弹框
    cancel() {
        this.closeOn()
    },
    // 关闭事件方法
    closeOn() {
        this.setData({
            miniShowModal: false
        })
    },
})

---

wxss

.miniBgdCol {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: #000;
    opacity: 0.6;
    overflow: hidden;
    z-index: 0;
}

.modalDialog {
    width: 80%;
    position: fixed;
    top: 32%;
    left: 50%;
    z-index: 9;
    margin-left: -40%;
    background: #f9f9f9;
    border-radius: 20rpx;
}

.miniTitle {
    font-size: 32rpx;
    font-weight: 600;
    color: #252525;
    padding: 24rpx 0rpx;
    border-bottom: 2rpx solid #EEEEEE;
    display: flex;
    justify-content: center;
}

.miniWhether {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 28rpx;
    color: #252525;
    padding: 40rpx 0rpx;
}

.miniBtn {
    display: flex;
    justify-content: center;
    padding: 10px 0rpx 30rpx 0rpx;
}

button::after {
    border-width: 0
}

.miniBtn button {
    padding: 0rpx 100rpx;
    border-radius: 36rpx;
    font-size: 28rpx;
}

.miniBtn button:first-child {
    border: 2rpx solid #979797;
    color: #5e5e5e;
}

.miniBtn button:last-child {
    background: #FED10A;
}

---

小程序实现效果

---

uniapp

uniapp 实现这个操作只需要将上面 vue 与小程序的代码结合起来即可，因为 uniapp 是基于小程序的标签和 vue 的语法。

<template>
	<view class="uniappDemo">
		<button @tap="uniappModel">点击打开弹窗</button>
		<!-- 弹框内容 -->
		<view class="uniappBox">
			<view :hidden="!uniappShowModel" class="uniappContant">
				<view class="uniappTitle">完善地址</view>
				<view class="uniappNotice">请完善收货地址!</view>
				<!-- 确定取消按钮 -->
				<view class="uniappBtn">
					<view @tap="uniappShowModel = false">取消</view>
					<view @tap="confirm()">确定</view>
				</view>
			</view>
			<!-- 背景黑色蒙版 -->
			<view class="uniappBgdCol" :hidden="!uniappShowModel" @tap="uniappShowModel = false"></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				uniappShowModel: false, //默认不显示
			};
		},
		methods: {
			uniappModel() {
				this.uniappShowModel = true
			},
			// 点击确定按钮模态框消失
			confirm() {
				this.uniappShowModel = false
			}
		},
	}
</script>

<style scoped>
	.uniappBgdCol {
		position: fixed;
		top: 0%;
		left: 0%;
		width: 100%;
		height: 100%;
		background-color: black;
		z-index: 99;
		-moz-opacity: 0.6;
		opacity: .6;
		filter: alpha(opacity=88);
	}

	.uniappContant {
		position: fixed;
		top: 36%;
		left: 50%;
		width: 80%;
		margin-left: -40%;
		background-color: white;
		z-index: 100;
		border-radius: 10rpx;
	}

	.uniappTitle {
		display: flex;
		justify-content: center;
		font-size: 32rpx;
		font-weight: bold;
		color: #161303;
		font-size: 28rpx;
		padding: 20rpx 0rpx;
		border-bottom: 2rpx solid #EEEEEE;
		;
	}

	.uniappNotice {
		font-size: 28rpx;
		color: #121212;
		display: flex;
		justify-content: center;
		padding: 40rpx 0rpx;
	}

	.uniappBtn {
		display: flex;
		justify-content: space-between;
	}

	.uniappBtn view {
		width: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 4% 0%;
		font-size: 28rpx;
	}

	.uniappBtn view:first-child {
		background-color: rgb(254, 250, 230);
		border-radius: 0rpx 0rpx 0rpx 10rpx;
	}

	.uniappBtn view:last-child {
		background-color: rgb(254, 209, 10);
		border-radius: 0rpx 0rpx 10rpx 0rpx;
	}
</style>

---

uniapp 实现效果