uniapp中封装一个弹框组件

2022年7月10日08:17:58

1,准备组件popup

// components文件夹中popup组件<template><view><viewclass="show-box-bg wx-login-box"><viewclass="conten"><viewclass="titl">{{ popupMsg.title}}</view><viewclass="text">{{ popupMsg.content}}</view><viewclass="btn-box"><viewclass="cancel" @click='hidePopup("no")'>{{ popupMsg.cancel}}</view><viewclass="confirm" @click='hidePopup("yes")'>{{ popupMsg.confirm}}</view></view></view></view></view></template><script>exportdefault{//(1)子组件中,通过props接收到数据
		props:['popupMsg'],data(){return{}},
		methods:{
			hidePopup:function(type){//子组件中,使用$emit调用父组件自定义事件,还可以传参this.$emit('handlePopup', type)},}}</script><style scoped lang="scss">.wx-login-box{
		width:100%;
		position: fixed;
		top:0;
		left:0;
		height:100%;
		background-color:rgba(0,0,0,0.5);
		z-index:88;.conten{
			width:78%;
			background-color: #fff;
			z-index:99;
			position: absolute;
			top:50%;
			left:50%;
			transform:translate(-50%,-50%);
			border-radius:14upx;
			overflow: hidden;.titl{
				width:90%;
				height:110rpx;
				font-size:40rpx;
				padding:05%;
				line-height:140rpx;}.text{
				width:90%;
				font-size:28rpx;
				padding:05%;
				margin-bottom:40rpx;}.memberY{
				width:90%;
				font-size:28rpx;
				color: #FFCC00;
				padding:05%;
				text-align: center;}.memberB{
				width:90%;
				font-size:28rpx;
				color: #007AFF;
				padding:05%;
				text-align: center;}.btn-box{
				width:100%;
				height:90rpx;
				display: flex;
				border-top:2rpx solid #969696;.cancel{
					width:50%;
					height:100%;
					font-size:40rpx;
					color: #999;
					text-align: center;
					line-height:89rpx;
					border-right:2rpx solid #969696;}.confirm{
					width:50%;
					height:100%;
					font-size:40rpx;
					color: #ffcc00;
					text-align: center;
					line-height:99rpx;}}}}</style>

2,使用组件

// An highlighted block<template><viewclass="content"><button type='primary' @click='showPopup=true'>点击弹框</button><!--(3)使用--><popup:popupMsg="popupMsg" 
		@handlePopup='handleShowOrHidePopup'
		v-show="showPopup"/></view></template><script>//(1)引入import popupfrom'@/components/popup.vue';exportdefault{//(2)挂载
		components:{popup},data(){return{
				showPopup:false,
				popupMsg:{
					title:'这是标题',
					content:'这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容',
					cancel:'取消',
					confirm:'确定'},
				hotgoods:[{id:'01',title:'标题一'},{id:'02',title:'标题二'},],}},
		methods:{
			handleShowOrHidePopup:function(type){if(type=='yes'){
					console.log(type)this.showPopup=false}else{
					console.log(type)this.showPopup=false}},}}</script>
  • 作者:暖风阵阵
  • 原文链接:https://blog.csdn.net/weixin_46899191/article/details/117084766
    更新时间:2022年7月10日08:17:58 ,共 2144 字。