简介

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

(三)案例演示效果图

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐