uni-app：uView弹出层的使用_uview 底部弹出view

一、简介

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

（一） 页面使用案例演示

1.点击按钮

<view class="qrcode" @click="open()">
	<image src="/static/images/qrcode.png" mode="aspectFit"></image>
</view>
1
2
3

2.弹出层【绑定一个布尔值的变量控制弹出层的打开和收起，这里设置的show】

<!-- 二维码的弹出层 -->
<u-popup :show="show" mask="true" mode="center">
	<view>
	<image src="../../static/images/close.png" mode="aspectFill" @click="close()" ></image>
		//这里面存放弹出的内容
	</view>
</u-popup>
1
2
3
4
5
6
7

3.open弹出层打开打开调用的方法

methods: {
	open() {
		this.show = true;
	},
	close() {
		this.show = false;
	}
}
1
2
3
4
5
6
7
8

4.其他参考

（二） 封装组件案例演示

1.点击按钮

<view class="qrcode" @click="open()">
	<image :src="$common.image('/static/images/qrcode.png')" mode="aspectFit" class="qrcodeSmall"></image>
</view>
1
2
3

2.封装弹出层组件

<template>
	<view>
		<!-- 二维码的弹出层 -->
		<u-popup :show="show" mask="true" mode="center" width="689rpx" height="689rpx">
			//这里面放内容
			//关闭按钮
			<image src="/static/images/close.png" mode="aspectFill" @click="close()" ></image>
		</u-popup>
	</view>
</template>

<script>
	export default {
		name:"qrcode",
		data() {
			return {
				show:false
			};
		},
		methods:{
			close() {
				this.show = false;
			},
		}
	}
</script>

<style lang="scss">

</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

3.引入、注册、使用组件

在需要使用的页面引入、注册、使用。
引入、注册：

//引入组件
<script>
	import qrcode from '@/components/qrcode/qrcode.vue'
	export default {
	    //注册组件
		components: {
			qrcode
		},
		data() {
			return {
			}
		},
		methods: {
			// 二维码弹出层
			open() {
				this.$refs.qrcode.show = true 
			},
		}
	}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

使用：

<view class="qrcode" @click="open()">
	<image :src="$common.image('/static/images/qrcode.png')" mode="aspectFit" class="qrcodeSmall"></image>
</view>
1
2
3

<template>
	<view class="content">
		<!-- 二维码弹层组件 -->
		<qrcode ref="qrcode"></qrcode>
	</view>
</template>
1
2
3
4
5
6

二、总结

ref的使用：
https://www.cnblogs.com/dianzan/p/12403353.html
弹出层:
https://www.uviewui.com/components/popup.html