uniapp微信小程序自定义弹窗组件

需求:

写一个能够复用的弹窗组件,内容包括: "标题","图片","描述内容","按钮". 且按钮可能会有多中功能(比如: 点击按钮可能只是关闭弹窗,或者关闭弹窗并跳转)

准备:

1.创建弹窗组件 popup-view

实现:

1.小编这里考虑组件全局都有可能会用到,就在主包的components文件夹下创建popup-view组件

2.组件内容编写

<template>
	<view>
		<uni-popup ref="alertDialog" type="center" :is-mask-click="params.mask">
				<view class="prompt" :style="'width:'+params.dialogWidth">
					<!-- 一级标题 -->
					<view v-if="params.hTitle"  class="first-title font-size30" :style="'color:'+params.hTitleColor">
						<text>{{ params.hTitle }}</text>
					</view>
					<!-- 提示图片 -->
					<view class="tupian" v-if="params.imgSrc">
						<image class="img" :src="params.imgSrc" mode="widthFix"></image>
					</view>
					<!-- 二级标题 -->
					<view v-if="params.mTitle"  class="second-title font-size30" :style="'color:'+params.mTitleColor">
						<text>{{ params.mTitle }}</text>
					</view>
		            <!-- 描述内容 -->
					<view  class="item-text-sec">
						<text class="item-text4 font-size26" :style="'color:'+params.descColor">{{ params.describe }}</text>
					</view>
					<!-- 功能按钮 -->
					<view v-if="params.btnText" class="btn-content">
						<button hover-class="btn-hover"  class="btn font-size28" @click="bintap(params.btnUrl)">{{ params.btnText }}</button>	
					</view>
				</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		name:"popup-view",
		data() {
			return {
				defaultParams: { // 默认参数
					dialogWidth: '440rpx', // 弹窗宽度
					hTitle: '', // 一级标题
					hTitleColor: '#333333', // 一级标题颜色
					imgSrc: '', // 提示图片
					mTitle: '', // 二级标题
					mTitleColor: '#333333', // 二级标题颜色
					describe: '', // 描述文本内容 兼容/n换行
					descColor: '#333333',
					btnText: '', // 按钮类型
					btnUrl: '', // 按钮跳转路径
					jumpType: 'navigateTo', // 跳转类型api 可选值[ 'navigateTo', 'redirectTo', 'reLaunch', 'switchTab', 'navigateBack' ]
					mask: false,
				},
				params: { // 弹窗显示参数
					dialogWidth: '440rpx', // 弹窗宽度
					hTitle: '', // 一级标题
					hTitleColor: '#333333', // 一级标题颜色
					imgSrc: '', // 提示图片
					mTitle: '', // 二级标题
					mTitleColor: '#333333', // 二级标题颜色
					describe: '', // 描述文本内容 兼容/n换行
					descColor: '#333333',
					btnText: '', // 按钮类型
					btnUrl: '',
					jumpType: 'navigateTo', // 跳转类型api
					mask: false
				},
				
			};
		},
		methods:{
			bintap(url){
				this.$refs.alertDialog.close();
				
				// 如果存在跳转的url就跳转
				if(url || this.params.jumpType==='navigateBack'){
					switch (this.params.jumpType){
						case 'redirectTo':
							// 关闭当前页面，跳转到应用内的某个页面。
							uni.redirectTo({ url })
							break;
						case 'reLaunch':
							// 关闭所有页面，打开到应用内的某个页面
							uni.reLaunch({ url })
							break;
						case 'switchTab':
							// 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。
							uni.switchTab({ url })
							break;
						case 'navigateBack':
							uni.navigateBack()
							break;
						default:
							// 保留当前页面 跳转到其他页面
							uni.navigateTo({ url }) 
							break;
					}
				}
			},
			// 打开弹窗
			openPopup(parameter={}){
				/* 对其参数进行赋值, 如果没有则使用原来的参数 */
				Object.keys(this.params).forEach((key)=>{
					this.params[key]= parameter[key] || this.defaultParams[key]
				})
				// console.log('弹窗配置参数',this.params);
				this.$refs.alertDialog.open();
			},
			// 关闭弹窗
			closePopup(){
				this.$refs.alertDialog.close();
			}
		}
	}
</script>

<style scoped lang="scss">
  .prompt{
	  margin:0rpx;
	  padding:20rpx 0rpx 20rpx 0rpx;
	  background: #FFFFFF;
	  border-radius: 20rpx;
	  position: relative;
	  z-index: 99;
	  .first-title{
		  margin-bottom:20rpx;
		  padding: 20rpx 30rpx 0rpx 30rpx;
		  text-align: center;
		  font-weight: bold;
	  }
	  .tupian{
		  text-align: center;
		.img{
			 padding-top:20rpx;
			 width: 252rpx;
			 height: 188rpx;
		}  
	  }
	  .second-title{
		  padding: 20rpx 38rpx 20rpx 38rpx;
		  text-align: center;
		  font-weight: bold;
	  }
	  .item-text-sec{
		      padding:0 38rpx 20rpx 38rpx;
	  		  display: flex;
	  		  justify-content: center;
	  		  .item-text4{
	  			  font-weight: 500;
	  			  color: #333333;
	  			  max-width:390rpx; 
	  		  }
	  }
	  .btn-content{
		 padding-bottom: 20rpx;
			.btn{
			  width:366rpx;
			  height:60rpx;
			  background: #ff007f;
			  border-radius: 8rpx;
			  display: flex;
			  justify-content: center;
			  align-items:center;
			  font-weight: bold;
			  color: #FFFFFF;
			}  
			.btn-hover{
				background-color: #0d706b;
			}
	  }
	  
  }
</style>

使用

在需要使用的直接使用 ref 调用openPopup()方法

html部分

<!--直接引入使用 ref绑定一个组件别名-->
<popup-view ref="popupView"></popup-view>

js代码部分

// 注意data 里的参数如果跟组件中defaultParams的参数值相同的话就不用传了或者直接不写
// 属性不传自动使用默认参数值
const data= {
	dialogWidth: '440rpx', // 弹窗宽度
	hTitle: '', // 一级标题
	hTitleColor: '#333333', // 一级标题颜色
	imgSrc: '', // 提示图片
	mTitle: '', // 二级标题
	mTitleColor: '#333333', // 二级标题颜色
	describe: '', // 描述文本内容 兼容/n换行
	descColor: '#333333',
	btnText: '', // 按钮类型
	btnUrl: '', // 按钮跳转路径
	jumpType: 'navigateTo', // 跳转类型api 可选值[ 'navigateTo', 'redirectTo', 'reLaunch', 'switchTab', 'navigateBack' ]
	mask: false,
}
// 通过$refs.别名.方法名()  就是调用子组件方法的方式 
this.$refs.popupView.openPopup(data)

一个简单的弹窗组件，样式布局根据自己的需求调整

有不足之处可评论指出，及时更改

觉得还不错，对你有用的话 就留下你的赞，收藏方便找到

不喜勿喷！文章来源地址https://www.toymoban.com/news/detail-766764.html

到了这里，关于uniapp微信小程序自定义弹窗组件的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！