uview2 - u-popup弹出层
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
(三)案例演示效果图
更多推荐
所有评论(0)