uni-popup 弹出框组件（整理方便复用）

蔚落 2021-09-07 06:16 1864阅读 0赞

1.具体配置参考uni-pop组件，这里仅使用![效果图][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hb3hpYW9oZWlf_size_16_color_FFFFFF_t_70]

<template>
    	<view>
    		
    		<view class="chooise-icon" @click="toggle('center')">
    			<image src="../../../../static/img/home/ycyx_chooise.png" mode=""></image>
    		</view>
    
    		
    		<uni-popup ref="popup" :animation="false">
    			<view class="popup-content" style="margin-top:-20px;">
    				<view class="popup-date">
    					<view class="pop-child-content">
    
    					</view>
    					
    				</view>
    				
    				<view class="button-bottom">
    					<view class="popup-btn">
    						<button @click="dialogClose()">取消</button>
    					</view>
    					<view class="popup-btn popup-btn2">
    						<button>查询</button>
    					</view>
    				</view>
    			</view>
    		</uni-popup>
    	</view>
    </template>

<script>
    	export default { 
    		name: "baclog-now",
    		data() { 
    			return { }
    		},
    		methods: { 
    			// 打开基础内容
    			toggle(type) { 
    				this.type = type
    				this.$refs.popup.open()
    			},
    			// 对话框取消按钮
    			dialogClose() { 
    				this.msgType = 'info'
    				this.message = '点击了对话框的取消按钮'
    				this.$refs.popup.close()
    			},
    		}
    </script>

/* pupup */
    	.popup-date { 
    		/* width: 630rpx; */
    		width: 100%;
    		height: 850rpx;
    	}
    	
    	.popup-content { 
    		background-color: #fff;
    		width: 630rpx;
    		height: 950rpx;
    		/* margin-top: 30px; */
    	}
    	
    	.button-bottom { 
    		width: 630rpx;
    		height: 100rpx;
    		display: flex;
    		justify-content: end;
    		align-items: flex-end;
    		background: #007AFF;
    	}
    	
    	.popup-btn { 
    	
    		width: 100%;
    		height: 100rpx;
    		background: #007AFF;
    	}
    	
    	.popup-btn button { 
    		border-radius: 0px 0px 0px 0px;
    		height: 100rpx;
    	
    		border: 1px solid #007AFF;
    		background: #ccc;
    		color: #FFFFFF;
    		border: none;
    	}
    	
    	.popup-btn2 button { 
    		border-radius: 0px 0px 0px 0px;
    		height: 100rpx;
    		border: 1px solid #007AFF;
    		background: #007AFF;
    		color: #FFFFFF;
    		border: none;
    	}
    	
    	button { 
    		border: none;
    	}
    </style>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hb3hpYW9oZWlf_size_16_color_FFFFFF_t_70]: /images/20210827/a771d2bf0f6444bbb61dd1a5c191ad33.png

发表评论取消回复

表情：

评论列表（有 0 条评论，1864人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue封装弹出框组件

[https://www.jb51.net/article/173269.htm][https_www.jb51.net_article_173269.htm] [http

爱被打了一巴掌/ 2023年06月28日 06:12/ 0 赞/ 59 阅读

相关 js 弹出框

js提示框弹出带有取消按钮 function delcfm() { if (!confirm("确认要退出？")) {

Myth丶恋晨/ 2023年05月30日 03:56/ 0 赞/ 99 阅读

相关 bootstrap弹出框

要想使用Bootstrap Popover（弹出框）则必须引入其依赖的文件: jquery.js这个必须的(还是要写在其他js前面,bootstrap是依赖jquery的哦)

约定不等于承诺〃/ 2022年08月23日 14:00/ 0 赞/ 443 阅读

相关用vue实现各类弹出框组件

简单介绍一下vue中常用dialog组件的封装：实现动态传入内容，实现取消，确认等回调函数。首先写一个基本的弹窗样式，如上图所示。在需要用到弹窗的地方中引入组件：

绝地灬酷狼/ 2022年05月09日 12:34/ 0 赞/ 692 阅读

相关 JavaScript弹出框

提到弹出框，首先想到的alert()了，其次想到的也还是alert（），其实在js中有三种弹出框，下面我们一一说明。 1，仅确定。即：对话框界面上只有确定

忘是亡心i/ 2021年10月13日 04:17/ 0 赞/ 623 阅读

相关 uni-popup 弹出框组件（整理方便复用）

1.具体配置参考uni-pop组件，这里仅使用![效果图][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6

蔚落/ 2021年09月07日 06:16/ 0 赞/ 1865 阅读

相关 flutter 弹出框方法组件AlertDialog、选择弹出框方法组件SimpleDialog、底部选择弹出框方法组件showModalBottomSheet、悬浮框组件

在方法中设置,弹出框组件都是Future类型即promise对象弹出框方法组件: showDialog(

水深无声/ 2021年07月25日 02:21/ 0 赞/ 1316 阅读

相关 electron 弹出框

1、引入弹出框主线程:const {dialog}=require('electron'); 渲染进程:const {dialog}=requir

旧城等待，/ 2021年07月24日 19:25/ 0 赞/ 1160 阅读

相关 rn 弹出框组件Alert、悬浮信息组件ToastAndroid

弹出框 Alert 用法: Alert.alert('标题内容','中心内容',[ {'按钮1名称',onPre

蔚落/ 2021年07月24日 14:33/ 0 赞/ 1540 阅读

相关 PopupWindow弹出框

使用PopupWindow实现一个悬浮框，悬浮在Activity之上，显示位置可以指定首先创建pop_window.xml： <?xml version="1.0" ...

测试账号/ 2021年01月07日 04:36/ 1 赞/ 880 阅读