浅谈Vue遇到的坑

最新推荐文章于 2025-06-20 09:50:27 发布

原创最新推荐文章于 2025-06-20 09:50:27 发布 · 1.4k 阅读

1 ·

CC 4.0 BY-SA版权

H5 专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍了使用Vue框架处理移动端开发中的常见问题，包括VantPopup弹出层与picker选择器的重置、Vueref绑定的正确使用、模拟点击事件实现element-ui upload组件上传功能、解决部分手机浏览器不兼容Vue的问题、以及ES6转换为ES5的方法，同时分享了处理手机返回键导致页面卡死的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.使用Vant Popup弹出层与picker选择器,由于不同事项使用同一个选择器，一个事项在选择器里选择item2,当popup设置showpopflag=false,隐藏，但再次弹出仍然对焦item2，没有重置。查找官网有defaultIndex属性，坑的是这个只针对多列联动，单层并不适用
解决方案：在外层设置div，使用v-if，进行重置

<div v-if="showpopflag">
				<van-popup v-model="showpopflag" position="bottom" :overlay="true">
					<div>
						<van-picker show-toolbar ref="picker" :columns="columns" visible-item-count='2' @cancel="onCancel" @confirm="onConfirm" />
					</div>
				</van-popup>
</div>

data:{
		columns:["测试1","测试2"],
}

2.Vue ref绑定，网上大多是this. $r e f s . i n p u t 1 . v a l u e = " 测试数据 "; 这是由于一个组件，当 i n p u t 置于 v - f o r 中，需要变成 t h i s .$ refs.input1[0]

<div>
	<input type="text" ref="input1" value="原始数据"/>
</div>
methods:{
		clicked(){
		    this.$refs.input1[0].value ="测试数据";
		}
}

3.Vue模拟点击事件并使用element-ui upload上传

<div class="common-textalign-center" @click="popupclicked(index)">
								<div v-if="item.substatus==''||(item.substatus!='窗口提交' && item.namelist.length==0)">
									<van-button type="primary">提交</van-button>
								</div>
							</div>

<!--用于模拟点击上传-->
						<div style="display: none;">
							<el-upload accept="*/*" show-file-list="false" action="../../upload" :on-preview="handlePreview" :before-upload="beforeUpload" multiple :limit="100" :on-exceed="handleExceed" :on-success="filesuccess" :on-error="fileerror" :file-list="fileList">
								<el-button id="elbutton" size="small" type="primary"></el-button>
							</el-upload>
						</div>

核心代码：

popupclicked(index){
	document.getElementById("elbutton").click();
}

4.Vue在部分手机无,效果
1）这是由于部分手机浏览器webview不兼容vue2.0，我使用了腾讯的X5内核替换了，但是X5也有个坑，就是有的手机不能加载成功，而且启动的时候会有4-6的白屏，因为他会寻找微信的X5内核共用，我已经弃坑
官网：https://x5.tencent.com/
有几点注意：
（1）.要完全按照官方文档添加.so文件 src/main/jniLibs/armeabi
（2）.模拟器无法加载。因为有的手机内核使用的CPU只支持x86，要在module gradle android添加如下，然后把.so 文件考到src/main/jniLibs/x86,没有就新建x86文件夹

ndk{abiFilters "armeabi","armeabi-v7a","x86","mips"}

（3）.判断内核是否加载成功，webView.getX5WebViewExtension()!=null 就是成功了
（4）.如果要保存cookie,记得替换cookie的包名

com.tencent.smtt.sdk.CookieManager cookieManager;

2）使用CrossWalk内核
（1）有个坑就是主页点击两次返回结束应用，但是onKeyDown还是会返回上一页。onKeyUp也没效果，必须使用dispatchKeyEvent监听

@Override
    public boolean dispatchKeyEvent(KeyEvent event) {
        if(event.getKeyCode()==KeyEvent.KEYCODE_BACK && event.getAction() == KeyEvent.ACTION_UP){
             getJsIframeUrl();
            return true;
        }
        return super.dispatchKeyEvent(event);
    }

private void getJsIframeUrl(){
        webView.evaluateJavascript("javascript:callJsiframeurl()", new ValueCallback<String>() {
            @Override
            public void onReceiveValue(String url) {           
                //是登录页跳转到主页
                if(url.contains("app/signup.html")){
                    tranToMain();
                    return;
                }
                if(webView.getNavigationHistory().canGoBack()){
                    webView.getNavigationHistory().navigate(
                            XWalkNavigationHistory.Direction.BACKWARD, 1);
                }
            }
        });
    }

5.ES6转换为ES5
1）直接修改Vue ES6语法为ES5,
可以在Babel官网直接转换：https://www.babeljs.cn/repl/ 勾选Line wrap和es2015
修改前：

setTimeout(()=> {}, 1000)

修改后：

setTimeout(function() {},1000)

修改前：

new Vue({
				el: '#app',
				data: {					
				},
				created() {				
				},
				methods: {
					parseidname(id, name) {
						this.id = id;
						this.name = name;
					},				
				},

			})

修改后:

new Vue({
				el: '#app',
				data: {					
				},
				created:function(){	
				},
				methods: {
					parseidname:function(id, name) {
						this.id = id;
						this.name = name;
					},				
				},

			})

2）导入Babel包，进行自动转换，但是页面显示会变慢
(1)在所有script之前导入babel.js

<script type="text/javascript" src="js/babel.js"></script>

(2)修改body里的type为text/babel
修改前：

<script type="text/javascript">
new Vue({});
</script>

修改后：

<script type="text/babel">
new Vue({});
</script>

我已上传babel.min.js文件
https://download.youkuaiyun.com/download/neabea2016/10741072

6.手机返回键，页面时而卡死
这是由于iframe内的跳转使用window.location.href ，应改为window.parent.location.href