带弹出框的自定义导航页面

向右看齐 2021-09-07 06:17 467阅读 0赞

<template>
    	<view>
    		
    		<u-navbar title-color="#fff" back-icon-color="#fff" :is-fixed="isFixed" :is-back="true" :background="background" :title="title" :back-icon-name="backIconName" :back-text="backText">
    			<view class="navbar-right" slot="right" v-if="slotRight">
    				<view style="margin:5px 12px 0 0 ">
    					<image style="width:18.25px;height: 17.75px;" src="../../../../static/img/admin/search.png" mode="" @click="toggle('center')">
    					</image>
    				</view>
    			</view>
    		</u-navbar>
    
    		
    		<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 { data() { return { // 自定义导航栏 title: '待办事项', slotRight: true, backText: '', backIconName: 'nav-back', right: false, showAction: false, rightSlot: false, useSlot: false, background: { background: '#2E95FF' }, isBack: true, search: false, custom: false, isFixed: true, keyword: '', // #ifdef MP slotRight: false, // #endif // #ifndef MP slotRight: true, // #endif //自定义导航栏结束 } }, methods: { // 打开基础内容 toggle(type) { this.type = type this.$refs.popup.open() }, // 对话框取消按钮 dialogClose() { this.msgType = 'info' this.message = '点击了对话框的取消按钮' this.$refs.popup.close() }, } } </script>
    
    <style> .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>