一、简介
uni搭配uView框架,uView框架弹出层,网址:https://www.uviewui.com/
(一) 页面使用案例演示
1.点击按钮
<view class="qrcode" @click="open()">
<image src="/static/images/qrcode.png" mode="aspectFit"></image>
</view>
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>
3.open弹出层打开打开调用的方法
methods: {
open() {
this.show = true;
},
close() {
this.show = false;
}
}
4.其他参考
(二) 封装组件案例演示
1.点击按钮
<view class="qrcode" @click="open()">
<image :src="$common.image('/static/images/qrcode.png')" mode="aspectFit" class="qrcodeSmall"></image>
</view>
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>
3.引入、注册、使用组件
在需要使用的页面引入、注册、使用。
引入、注册:
//引入组件
<script>
import qrcode from '@/components/qrcode/qrcode.vue'
export default {
//注册组件
components: {
qrcode
},
data() {
return {
}
},
methods: {
// 二维码弹出层
open() {
this.$refs.qrcode.show = true
},
}
}
</script>
使用:
<view class="qrcode" @click="open()">
<image :src="$common.image('/static/images/qrcode.png')" mode="aspectFit" class="qrcodeSmall"></image>
</view>
<template>
<view class="content">
<!-- 二维码弹层组件 -->
<qrcode ref="qrcode"></qrcode>
</view>
</template>
二、总结
ref的使用:
https://www.cnblogs.com/dianzan/p/12403353.html
弹出层:
https://www.uviewui.com/components/popup.html