项目问题汇总 bugs

关于 sass-loader 版本不同vue.config.js中css loaderOptions配置问题

sass-loader 版本不同， loaderOptions 中属性值不同：

sass-loader V8- data sass-loader V8 prependData sass-loader V10- additionalData

  css: {
    loaderOptions: {
      sass: {
        additionalData: "@import \"@/assets/styles/element-variables.scss\";"
      }
    }
  },

样式冲突

如下方式 import 引入的 index 样式会污染全局

/* 冲突 */
<style scoped> @import "./index.css"; </style>
/* 解决 */
<style src="./index.css"> </style>

| 返回上一页

$router.back(-1)

问题：当在portal中打开两个页签，在页签一操作列表到详情，从页签二操作另一列表到详情，再从页签一详情使用上述回退方法并不会返回页签一列表，而是会返回页签二列表

| 静态资源

public 里的静态图片替换不生效->修改文件名

| placeholder 垂直居中

当设置 input 的 placeholder 字体大小与 input 字体大小不一致的时候，placeholder 不能垂直居中。解决：通过设置 placeholder 的 top

 input {
    &::placeholder {
      position: relative;
      top: -0.01rem;
    }
  }

| past 监听

document.getElementById("myInput").addEventListener("paste", function (e) {
  if (!(e.clipboardData && e.clipboardData.items)) {
    return;
  }
  for (var i = 0, len = e.clipboardData.items.length; i < len; i++) {
    var item = e.clipboardData.items[i];
    if (item.kind === "string") {
      // 复制字符串
      item.getAsString(function (str) {
        console.log(str);
      });
    } else if (item.kind === "file") {
      // 系统截图
      var f = item.getAsFile();
      console.log(f);
      var reader = new FileReader();
      reader.readAsDataURL(f);
      reader.onload = (result) => {
        console.log("reader.onload -> result", result);
        this.clipImgUrl = result.target.result; //获取到base64格式图片
        var image = new Image();
        image.src = this.clipImgUrl;
        image.onload = () => {
          console.log("image.onload -> e", image.width, image.height);
        };
      };
    }
  }
});

| $set

// 事例一：数组赋值
this.inList.map(item=>{
  item["outs"] = false
})
// 数据变化，视图不变
click(index){
  this.$set(this.inList[index],"outs", !this.inList[index].outs)
}
// 事例二：数组赋值
this.inList.map(item=>{
  this.$set(item,"outs", false)
})
// 数据变化，视图改变
click(index){
  this.$set(this.inList[index],"outs", !this.inList[index].outs)
}


// 事例三：数组赋值
list.map((ele, index) => {
  ele.outs = false;
})
this.inList = list; // 触发click，视图不变
this.inList = JSON.parse(JSON.stringify(list)); // 触发click，视图改变
click(index){
  this.$set(this.inList[index],"outs", !this.inList[index].outs)
}

| iview 表单校验

表单校验默认 String 类型，若未设置 type，获取数字、数组等类型，校验不通过详见：表单校验

| v-for key 值引起的问题

注意：两层循环遍历时，要保持 key 值唯一。

| 禁止 IOS 长按弹出复制

input,
textarea {
  -webkit-user-select: auto;
  /*webkit浏览器*/
  -webkit-user-select: auto;
  /*webkit浏览器*/
  -webkit-touch-callout: none;
  /*系统默认菜单被禁用*/
  -webkit-user-select: none;
  /*webkit浏览器*/
  -khtml-user-select: none;
  /*早期浏览器*/
  -moz-user-select: none;
  /*火狐*/
  -ms-user-select: none;
  /*IE10*/
  user-select: none;
}

| 图片实现动画进度条

div.active {
  animation: loadingMove 2s linear infinite both;
}
/* 1.62rem 图片宽度 */
@keyframes loadingMove {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 1.62rem 0;
  }
}

| 解决项目中图片路径不同，名称相同时，线上图片引用错误问题

{
    test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
    loader: 'url-loader',
    options: {
        limit: 10000,
        // name: utils.assetsPath('img/[name].[ext]')   修改前
        name: utils.assetsPath('img/[name].[hash:7].[ext]') // 修改后
    }
}

| JS 引入

在一个 js 文件引入另一个 js 文件 document.write("<script language=javascript src='http://pv.sohu.com/cityjson?ie=utf-8'></script>");

| 机型兼容

https 路径请求 http 接口，导致页面空白 IOS 弹性-滑倒底部，导致列表无法滑动 IOS 高版本-history.back() 返回不刷新页面

| 节流防抖

节流（throttle）：指定时间内不允许再次触发（函数在一段时间内的多次调用，仅第一次有效）

防抖（debounce）：函数在一段时间内的多次调用，仅使得最后一次调用有效。

// 节流时间戳版
function throttle(func, delay) {
    var last = 0;
    return function () {
        var now = Date.now();
        if (now >= delay + last) {
            func.apply(this, arguments);
            last = now;
        } else {
            console.log("距离上次调用的时间差不满足要求哦");
        }
    }
}
// 节流定时器版
function throttle(func, delay) {
    var timer = null;
    return function () {
        if (!timer) {
            func.apply(this, arguments);
            timer = setTimeout(() => {
                timer = null;
            }, delay);
        } else {
            console.log("上一个定时器尚未完成");
        }
    }
}

// 防抖
function debounce(func, delay) {
    var timeout;
    return function() {
        clearTimeout(timeout);
        timeout = setTimeout(()=>{
            func.apply(this, arguments);
        }, delay);
    }
}