uview2 - u-popup弹出层

简介

uni搭配uView框架，uView框架弹出层，网址：https://www.uviewui.com/

弹出层：https://www.uviewui.com/components/popup.html

（一） 页面案例演示

1、弹出层绑定事件，点击按钮触发

 <view class="btn" @click="show = true">打开弹出层</view>

2.弹出层（绑定一个布尔值的变量来控制弹出层的打开和关闭，这里设置的show）

//弹出层 mode可选 top、bottom、left、right、center
<view class="loginPopup" >
    <u-popup :show="show" mode="center" @close="close" @open="open" :safeAreaInsetBottom="false">
	    <image src="@/static/index/marshalling.png" mode="" style="width: 508rpx;height: 614rpx;"></image>
		<view class="loginPopup-style">
			<view class="login-title">你还未登录</view>
			<view class="login-title2">请先登录再进行操作</view>
		</view>
		<view class="btns">
		    <button class="btn1" type="default" @click="notYetLogin">暂不登录</button>
		    <button class="btn2" type="default"  @click="goLogin()">立即登录</button>
	    </view>
	</u-popup>
</view>

3、data里面定义变量show，弹出层默认为关闭状态，设置为false

data() {
	return {
		show: false,
	}
},

4、methods里面调用open() 和 close() 方法对弹出层的展开、隐藏进行操作

methods: {
	close() {
		this.show = false
	},
    open() {
        this.show = true
    },
	btnClick() {
		this.show = true
	},
}

（二）其他属性可参考 —— 官方API

（三）案例演示效果图