uni-popup实现图片弹窗

萝莉洛伊

于 2024-05-10 16:18:30 发布

阅读量142

点赞数 2

分类专栏： vue上传修改头像文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/weixin_58771326/article/details/138667826

版权

vue上传修改头像专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<template>
    <view>  
    <view class='require' @click="openHi">
		照片要求
	</view>
	 <uni-popup class="finish-popup" ref="finish" type="center">
	       <view class="popup-box">
	         <view class="title-box">
				 <view class='text'>门禁照片要求</view>
				 <view class='close' @click="close">
					 <image class="logo" src="/static/images/close1.png" alt="image"></image>
				 </view>
				 </view>
			 <view class="images-box">
				  <image class="images" src='/static/images/canzhao.jpg' alt="image"></image>
			 </view>
	       </view>
		   
	     </uni-popup>
	</uni-popup>
       

    </view>
</template>
<script>
	import {uniPopup} from '@dcloudio/uni-ui'
    export default {
        data() {
            return {
				
            }
        },
        methods: {
            openHi(){
                    this.$refs.finish.open()
                 },
				 close(){
					this.$refs.finish.close() 
				 },
			
        }
    }
</script>

<style lang="scss" scoped>
.popup-box {
	width: 250px;
	height: 400px;
    text-align: center;
    background-color: white;
    border-radius: 10rpx;
    font-size: 28rpx;
  }
.images-box{
	width: 200px;
	height: 300px;
	margin-top: 30px;
	margin-left: 25px;
	.images{
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	
}
.title-box{
	width: 250px;
	height: 40px;
	border-bottom: 1px solid #f2f2f8;
	.text{
		width: 150px;
		height: 30px;
		float: left;
		margin-top: 5px;
		margin-left: 45px;
		line-height: 30px;
	}
	.close{
		width: 20px;
		height: 20px;
		float: left;
		margin-top: 10px;
		margin-left: 20px;
		.logo{
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}
	
}
</style>