遇到的一些问题解决记录

451 阅读4分钟

2021/10/21 微信小程序 input 组件 手写输入法最后一个字节丢失

  • 通过 blur 事件在进行赋值

忘记时间了 解决web项目 输入框 密码框 浏览器自动填充问题

普通文本框添加 autocomplete="off",密码输入框添加 autocomplete="new-password"。
也可以直接在form上设置 autocomplete="off"

2020/5/27 (IE白屏问题)

  • IE浏览器上Vue项目显示白屏问题 解决办法: 在vue.config.js 中配置publicPath: "./"

2020/5/28 (VUE2 Router.go(0),ios刷新问题)

  • 苹果移动端浏览器上路由方法go(0)不能进行页面刷新操作 解决方法: 将go(0)替换成location.reload(false) false为简单刷新 true为硬刷新
  • 苹果移动端浏览器默认放大页面 解决方法: 在mate标签中设置用户禁止缩放 user-scalable=0
  • element 下拉框组件 问题描述: 在表格中做弹窗操作时,将选中表格项的对象赋值到弹窗表单中的表单对象由于对象中缺少了键然后进行了对缺少键赋值,导致下拉框选中出现无效 解决办法: 将赋值语法改为vue中的$set方法,这样具有响应式

2020/7/2 (tree不能从0开始)

  • element UI 的tree组件父节点id不能从0开始,否则会出现无法展开子节点的情况

2020/8/11 (中英文换行)

  • 元素盒子内中英文不能对齐换行解决办法: word-wrap: break-word;

    word-break: break-all;

2020/8/27 (下载图片会直接跳页面)

  • js下载文件存在的问题 问题描述:a标签下载jpg,png,txt这类文件时,会自动打开预览,不会直接下载 解决方案:

    let link = document.createElement('a')
          let url = 地址
          // 这里是将url转成blob地址,
          fetch(url).then(res => res.blob()).then(blob => { // 将链接地址字符内容转变成blob地址
            link.href = URL.createObjectURL(blob)
            console.log(link.href)
            link.download = 文件名
            document.body.appendChild(link)
            link.click()
          })
    

2020/9/14 (vant picker values报错问题)

  • h5 vue 框架 vant picker 选择器 当选项数组对项中带有values时会跟vant起冲突 解决方案: 将数组对象中的values替换为null 然后原来的值重新创建一个值接收

2020/10/22 (h5键盘弹起问题)

  • h5 移动端键盘弹起

    var wHeight = window.innerHeight //获取初始可视窗口高度
        let that = this
        window.addEventListener('resize', function() {
          //监测窗口大小的变化事件
          var hh = window.innerHeight //当前可视窗口高度
          // alert(hh + ',' + wHeight)
          if (wHeight > hh) {
            //可以作为虚拟键盘弹出事件
            that.shows = false
          } else {
            //可以作为虚拟键盘关闭事件
            that.shows = true
          }
          wHeight = hh
        })
    

2020/10/29 (get请求传参会将空格转成+号)

应该是编码格式问题,get请求编码为ASCII

2020/11/3 (swiper6 踩坑日志)

  1. swiper6 采用组件分包式管理 例:如需要一个自动播放效果则需将他引入然后通过swiper类解析

    // 引入swiper外部插件 小圆球 自动播放插件等等
    import { Swiper as SwiperClass, Pagination, Mousewheel, Autoplay, Navigation ,EffectFade,EffectCoverflow} from 'swiper/core'
    // swiper 解析类
    import getAwesomeSwiper from 'vue-awesome-swiper/dist/exporter'
    // swiper 样式
    import 'swiper/swiper-bundle.min.css'
    // 将swiper的轮播组件解析出来
    const { Swiper, SwiperSlide } = getAwesomeSwiper(SwiperClass)
    // 通过swiper类将组件注册
    SwiperClass.use([Pagination, Mousewheel, Autoplay,Navigation,EffectFade,EffectCoverflow])
    

2021/2/24 (display: inline-block 对齐问题)

问题描述: 2个div在一行 我都将其转为 inline-block 模式 然后发现 只要第一个div加一个文字 第二个div就会默认向第一个div盒子的底部对齐

解决办法: 给inline-blcok盒子给改成默认向顶部对齐 vertical-align: top

2021/3/14 (动态首页解决思路)

问题描述: 后台管理系统首页需要 根据后台返回的path路径 动态化配置

解决思路:首先将router文件夹中的 home 路由删除 然后通过后台返回的path在routes中找出对应的component 组成home对象 通过 router 官方API router.addRoute( parentName: '', router: {} ) 将home对象挂载在路由上 此时动态首页完成

// 此方案不行 最后还是进入首页 直接router.push(path) 了 ,暂时还没想到好的方案

2021/5/18 vite2.0 + vue3.0 踩坑记录

// main.ts
console.log(111)
app.mount('#app')
console.log(444)
​
// APP.vue
console.log(222)
export default defineComponent({
    setup() {
        console.log(333)
    }
});
​
// 222   111  333  444
//!! 注意: defineComponent上面的代码是最先执行的

2021/5/18 浏览器 addEventListen 事件执行机制

document.onclick = function () { console.log("Resize"); }
    function sleep(time) {
      var startTime = new Date().getTime() + parseInt(time, 10);
      while (new Date().getTime() < startTime) { }
    };
 sleep(5000);
 console.log("Done");
// 浏览器点击事件并不会和同步代码一起执行  而是放在队列后面执行

2021/6/11 vue@cli3 中如何拿到 public 目录

使用 process.env.BASE_URL process.env.BASE_URL 对应 vue.config.js 的 publicPath

2021/7/15 微信发送的代码 在窗口里面复制微信会对其进行处理 vscode 不具备更改能力

准确来说是空格字符兼容问题,一个是LF,一个是CRLF

2021/8/27 Array.prototype.fill 复杂类型指向问题

new Array(20).fill({isChecked: true}) 
// 注意这样写  每当改变 isChecked 所有的 isChecked 都会改变
// 因为fill创建出来的对象是指向同一片地址的

2021/9/16 HTML 不识别\n换行符

// 解决办法 给标签加上以下样式
white-space: pre-line

2021/10/12 uni-app for循坏中不能使用函数

2021/12/15 uni-app 直播组件问题

组件中不能使用 uni.createLivePusherContext(livePusherId, this)并不会生效 创建出来的实例并不能改变对应的组件

2022/1/3 vue中Object.prototype.toString.call(async () => {})不能识别问题

console.log(
    Object.prototype.toString.call(async () => {})
 );
 // 正常html中输出 [ object AsyncFunction ]
 // babel 装换后输出 [ object Function ]
 因为babel会帮我们把我们将代码转换为向下兼容的代码,自然我们的async函数就转为了普通function

参考链接