1.具体配置参考uni-pop组件,这里仅使用
<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>