通用性的问题总结

89 阅读3分钟

前言

该文章记录一些工作中遇到的问题,以及一些解决办法,慢慢将会添加更多问题,所有内容均从网上整理而来,加上自己的理解做一个整合,方便工作中使用。

1.input框的blur和click事件冲突

1)问题场景

当input框聚焦时,展示元素;当input框失去焦点时,隐藏元素;问题在于失去焦点时,无法触发click事件,因为input框的blur事件先触发。

2)解决办法

//如果没有点击事件,仅用css就能控制元素的显示和隐藏

//html
<input  placeholder="请输入信息" type="text">
<div class="tips"></div>

//css
input{
    xxxx
}
.tips{
    display:none;
    xxx;
}

input:focus + .tips{
    display:block;
}
//blur和click冲突时,使用JS手动调用 blur和focus事件

//vue 项目中
<input @focus="focus()" @blur="blur()"  placeholder="请输入信息" type="text">
<div class="tips"></div>

//js
focus() {
  document.querySelector('.tips').style.display = 'flex'
},
blur() {
  setTimeout(() => {
     document.querySelector('.tips').style.display = 'none'
  }, 100)
  //失去焦点时,必须要利用定时器,让元素慢点消失,简单测试了如果按住鼠标左边不松,超过定时器设置时间,那么点击事件还是不能触发
}

2.移动端点击input框放大页面

meta标签的作用是让当前viewport的宽度等于设备的宽度,同时不允许用户手动缩放。

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

//name为viewport的meta标签,content中有6个属性值
//widht、height 设置layout viewport的宽/高
//initial-scale 设置页面的初始缩放
//minimum-scale 允许用户的最小缩放值
//maximum-scale 允许用户的最大缩放值
//user-scalable 是否允许用户进行缩放,值为"no""yes", no 代表不允许,yes代表允许

meta的 viewport 深入理解

3.横向滚动问题

当一个元素容器内容过多,且不能换行,当显示不完时,可以滚动显示,且不显示滚动条。移动端不存在这个问题,隐藏了滚动条也可以滑动,但是PC端页面不行,需要鼠标滚轮配合js移动滚动条位置来实现。

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
</div>

.container {
    width: 1000px;
    height: 600px;
    outline: 5px solid #ec7270;
    /* 横向内容auto */
    overflow-x: auto;
    /* 禁止换行 */
    white-space: nowrap;
    
    /* 隐藏滚动条 */
    &::-webkit-scrollbar {
      display: none;
    }

    .item {
      /* 将子元素变成inline-block */
      display: inline-block;
      width: 300px;
      height: 400px;
      background-color: antiquewhite;
      margin-right: 30px;
      font-size: 60px;
    }
  }
<script>
  $('.container').on('mousewheel', (e) => {
    event.preventDefault();
    //mousewheel 事件是有兼容问题的,大概是火狐浏览器有问题
    //e返回的内容里 deltaY的正负表示-鼠标滚动的方向,其值就是滚动值
    //改变滚动条所在元素的scrollLeft就能实现滚动,当鼠标放在该元素上时,滚动鼠标滚轮即可
    document.querySelector('.container').scrollLeft += e.originalEvent.deltaY
  })
</script>

4.input换行显示

 // input框的type=textarea才能使用enter键回车 
 <el-input  type="textarea" v-model="name"></el-input>
 
 // 获取传入的值,使用css使用white-space: pre-line;
 

5.部分手机new Date("xxx").getTime()返回NaN

使用dayjs,可以避免兼容性问题。

6.按照node-sass报错

1.node.js和node-sass版本不匹配

解决方法:可以使用nvm切换不同版本的node.js

image.png

2.替换成淘宝源:npm config set registry https://registry.npmmirror.com

dart-sass来替换node-sass:

yarn: yarn add node-sass@yarn:dart-sass -D

npm: npm install node-sass@npm:dart-sass -D

官方源:registry.npmmirror.com/

淘宝源:registry.npmmirror.com

  • 注意:如果修改源失败,则手动修改
//.npmrc文件
registry=https://registry.npmmirror.com/
sass_binary_site=https://registry.npmmirror.com
//.yarnrc文件
registry "https://registry.npmmirror.com"
//.vuerc文件
{
  "useTaobaoRegistry": false,//设置为false
  "latestVersion": "5.0.8",
  "lastChecked": 1661148213333
}

7.移动端弹窗时禁止页面整体滚动

const handleTouchMove = e => {
  e.preventDefault(); // 阻止默认行为
};


if (payload.status) {
    document.addEventListener('touchmove', handleTouchMove, {
      passive: false,
    });
} else {
    document.removeEventListener('touchmove', handleTouchMove);
}

//在 JavaScript 中,`removeEventListener` 需要传入与 `addEventListener` 相同的函数引用。
//如果在添加和移除监听器时使用了不同的函数,移除操作将不会生效。