uniapp中popup组件中的使用以及坑

系统管理员 2023-01-02 03:19 2825阅读 0赞

实现效果：点击实现弹出层  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDA4MDcw_size_16_color_FFFFFF_t_70]  
根据插件市场的来![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDA4MDcw_size_16_color_FFFFFF_t_70 1]  
但是在引入的时候因为我位置不对，所以我引入的时候没按照图上面顺序引入 就报错click is not  
a function 什么的 百度半天也没找到什么原因 ，就在准备放弃的时候 准备删除引入的时候发现自己引入的错误了

后面放图片也报错，过了一会就不报错了？？？  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDA4MDcw_size_16_color_FFFFFF_t_70 2]  
change这个还挺有用的能够获取到你的type 中间还是底部弹出的一个状态  
![在这里插入图片描述][20210104152138395.png]  
最开始css样式怎么都搞不好，改变哪里的宽度都不行，于是f12  
![在这里插入图片描述][20210104152314672.png]  
一层层找，添加width属性一个个尝试，去组件里面找到对应的类，更改![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDA4MDcw_size_16_color_FFFFFF_t_70 3]  
后面不知道会出什么事情，先解决这个再说

<template>
    	<view>
    		<view style="background-color: #00B2EE;width: 100%;height: auto;">
    			<view style="display: flex;justify-content: space-between;padding: 20rpx;">
    				<view><uni-icons @click="open" style="color: #ffffff;font-size: 50rpx;" type="scan"></uni-icons></view>
    				<view>
    					<uni-icons style="color: #ffffff;font-size: 50rpx;" type="info"></uni-icons>
    					<uni-icons style="color: #ffffff;font-size: 50rpx;" type="settings"></uni-icons>
    				</view>
    			</view>
    		</view>
    		<view>
    			<uni-popup style="margin: 0 auto;"   ref="popup" type="center" @change="change">
    				<view style="height: auto;background-color: #FFFFFF;border-radius: 10rpx;text-align: center;line-height: 100rpx;">
    					<view>收款码</view>
    			
    			<view style="margin: 0 auto;">
    				<image style="width: 200rpx;height: 200rpx;" src="../../static/logo.png" mode=""></image>
    			</view>
    			<view>222</view>
    			<view>33</view>
    			</view>
    			</uni-popup></view>
    			
    		</view>
    	</view>
    </template>
    <script>
    import uniPopup from '../../components/uni-popup/uni-popup.vue';
    import uniPopupMessage from '../../components/uni-popup-message/uni-popup-message.vue';
    import uniPopupDialog from '../../components/uni-popup-dialog/uni-popup-dialog.vue';
    export default {
    	components: {
    		uniPopup,
    		uniPopupMessage,
    		uniPopupDialog
    	},
    	data() {
    		return {};
    	},
    
    	methods: {
    		change(e) {
    			console.log('popup ' + e.type + ' 状态', e.show)
    		},
    		open() {
    			this.$refs.popup.open();
    		}
    	}
    };
    </script>
    <style>
    	/* .uni-popup__wrapper-box[data-v-7da806a4]{
    		width: 90%;
    	} */
    	
    </style>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDA4MDcw_size_16_color_FFFFFF_t_70]: /images/20221120/aa59dacfb36f4275af422c6edd12a8e8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDA4MDcw_size_16_color_FFFFFF_t_70 1]: /images/20221120/a1072a5bf4cb4c33b03b0008b55dbfc9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDA4MDcw_size_16_color_FFFFFF_t_70 2]: /images/20221120/9caddb90968d4e3ca1e019b32fde23e0.png
[20210104152138395.png]: /images/20221120/befb50e97de541b6be33482283884572.png
[20210104152314672.png]: /images/20221120/186697ab75ea4447b484781f3c9b26f9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDA4MDcw_size_16_color_FFFFFF_t_70 3]: /images/20221120/d23d43ec1c044934bf5270a33e6c11ec.png