工作遇到的问题总结（Vue）

àì夳堔傛蜴生んèń 2023-02-09 10:26 9阅读 0赞

## 工作遇到的问题总结（Vue） ##

1.在其他数据都是后台返回，循环出来的，只有一些静态图片的动态变化，给图片的src做三目运算，注意图片要用require引入!  
![方法部分][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvY29fOTk4_size_16_color_FFFFFF_t_70]2![代码部分][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvY29fOTk4_size_16_color_FFFFFF_t_70 1]  
2.在Vue中操作dom，或者有dom类型的操作出现，总会报一个，cannot set proprety ‘disabled’ of null的错，是函数的执行顺序问题  
处理:在Vue生命周期函数create里  
window.onload（）=->（）\{  
do something  
\}  
3.一个页面请求后台数据时会加载很慢，为了提高用户体验解决方法  
（1）加一个loading各个ui框架里面都有这种加载的组件  
（2）对一些不常用的组件可以按需引入，不一定非全局引入  
4.iOS的系统手机写input框后会出现掉不起软键盘，并且input的输入焦点乱跳问题，Vue项目用到了混合开发，input对iOS有300ms的延迟，解决方法如下  
单页面给input框加一个按键抬起事件

<input  type='text' @blur.prevent='inputBlur'>
    //方法
    inputBlur(){ 
      setTimeout(()=>{ 
         window.scrollTo(0,0)；
        },100)
       }

Vue项目整体设置如下图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvY29fOTk4_size_16_color_FFFFFF_t_70 2]  
5.利用vue做的微信公众号项目，当调整了手机微信整体大小后，整个样式错乱问题  
解决方法，限制用户随便调整此公众号的字体大小，写一个js文件，在全局main.js中引入  
如下图，注意weixinJSBridge写错了![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvY29fOTk4_size_16_color_FFFFFF_t_70 3]  
6.微信公众号的限制分享的js如下链接  
https://blog.csdn.net/z1010017573/article/details/103774310  
7.安装Vue环境时，node安装没安装在默认C盘时需要配置环境变量，环境安装好后，npm i  
会报错 处理过程 先清理一遍缓存 npm cache clear- -force 再npm i 再去启动

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvY29fOTk4_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200518155633939.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvY29fOTk4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvY29fOTk4_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200518155546518.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvY29fOTk4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvY29fOTk4_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/2020051816294932.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvY29fOTk4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvY29fOTk4_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200518165730890.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvY29fOTk4,size_16,color_FFFFFF,t_70