项目遇到的常见问题

1、设置标题

import * as dd from "dingtalk-jsapi";
created() {
  this.setNavTitle("登录页");
}
/** 设置钉钉导航栏标题 */
setNavTitle(str = "") {
  dd.ready(() => {
    dd.biz.navigation.setTitle({
      title: str, // 控制标题文本，空字符串表示显示默认文本
    });
  });
}
destroyed() {
  this.setNavTitle("");
}

2、请空数组里的空对象

isEmpty(obj) {
  let empty = true;
  for (const key in obj) {
    if (obj[key] && obj[key].length > 0) {
      empty = false;
      break;
    }
  }
  return empty;
}
// 去除空对象
onFilter(array) {
  return array.filter(item => !this.isEmpty(item));
}
// 使用 this.onFilter(newArray)

3、数组去重

removalData(arrData) {
  const hash = {};
  arrData = arrData.reduce((item, next) => {
    // businessType是你要以什么属性去重
    // if (!hash[next.businessType]) {
    //   hash[next.businessType] = true;
    //   item.push(next);
    // }
    // return item;
    hash[next.key] ? "" : (hash[next.key] = true && item.push(next));
    return item;
  }, []);
  return arrData;
}

4、时间排序

1.倒序

sort(property) {
  return (a,b) => {
    return a[property] < b[property] ? 1 : -1;
  }
};

2.升序

sort(property) {
  return (a,b) => {
    return a[property] > b[property] ? 1 : -1;
  }
}

5、判断数组对象里的属性值是否重复

for (var i = 0; i < arr.length - 1; i++) {
  for (var j = i + 1; j < arr.length; j++) {
      if (arr[i].deptName === arr[j].deptName) {
        this.$showWarningMsg('事业部重名了，请重新输入')
          this.loading = false
          return false
      }
  }
}

6、时间选择

startDate = this.$moment(new Date()).format("YYYY-MM-DD"); // 当天
oneMonth = this.$moment(
  new Date().setTime(new Date().getTime() + 3600 * 1000 * 24 * 30)
).format("YYYY-MM-DD"); // 一个月
threeMonth = this.$moment(
  new Date().setTime(new Date().getTime() + 3600 * 1000 * 24 * 90)
).format("YYYY-MM-DD"); // 三个月
halfYear = this.$moment(
  new Date().setTime(new Date().getTime() + 3600 * 1000 * 24 * 180)
).format("YYYY-MM-DD"); // 半年
oneYear = this.$moment(
  new Date().setTime(new Date().getTime() + 3600 * 1000 * 24 * 365)
).format("YYYY-MM-DD"); // 1年

this.$moment().add(30, "d").format("YYYY-MM-DD") // 30天

7、数组去除重复的对象

objHeavy(arr) {
  const newArr = []; // 存新数组
  const obj = {}; // 存处理后转成字符串的对象
  for (let i = 0; i < arr.length; i++) {
    const keys = Object.keys(arr[i]);
    keys.sort(function (a, b) {
      return Number(a) - Number(b);
    });
    let str = "";
    for (let j = 0; j < keys.length; j++) {
      str += JSON.stringify(keys[j]);
      str += JSON.stringify(arr[i][keys[j]]);
    }
    if (!obj.hasOwnProperty(str)) {
      newArr.push(arr[i]);
      obj[str] = true;
    }
  }
  return newArr;
}

8、解决 ElementUI 导航栏重复点菜单报错问题

• 可以在 router 的配置文件中（router -> index.js）加上下面这句话

    const originalReplace = VueRouter.prototype.replace;
        VueRouter.prototype.replace = function replace(location) {
        return originalReplace.call(this, location).catch(err => err);
    };
  

9、HTML 中 input 输入框禁止复制粘贴剪切自动完成

• 禁止复制: oncopy="return false"

• 禁止粘贴: onpaste="return false"

• 禁止剪切: oncut="return false"

• 禁止右键弹出: oncontextmenu="return false"

• 关闭自动完成功能（缓存）:autocomplete="off"

• 自动获得焦点： autofocus="autofocus"

• 禁用自动更正: autocorrect="off"

• 来关闭键盘默认首字母大写(移动端)：autocapitalize="off"

• 不对元素的文本进行拼写检查：spellcheck="false"

  <input type="password" onpaste="return false" oncontextmenu="return false" oncopy="return false" oncut="return false" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" autofocus="autofocus"/>
  

  input type="number" 去除上下箭头

注意：在使用 element-UI 的 vue 项目中重写 el_input 样式要在全局中写，在 scoped 重谢这些样式不起作用！！

禁止滚轮滚动改变数值

使用 type="number"后滚动鼠标的滚轮可以改变数值。要想去掉这个效果可以添加@mousewheel.native.prevent 事件

<el-input v-model.number="addManger.mobile" type="number" placeholder="请输入" @mousewheel.native.prevent />

input type = number 禁止输入 e

onKeypress="return (/[d]/.test(String.fromCharCode(event.keyCode)))"

this.isPhone = /(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent); // 判断是否是苹果手机
// /android/i.test(navigator.userAgent) 是否是安卓手机

// e.returnValue = false; // 阻止默认事件
e.preventDefault();

滚动加载
原理就是监听页面滚动事件，分析 clientHeight、scrollTop、scrollHeight 三者的属性关系。

window.addEventListener('scroll', function() {
  const clientHeight = document.documentElement.clientHeight;
  const scrollTop = document.documentElement.scrollTop;
  const scrollHeight = document.documentElement.scrollHeight;
  if (clientHeight + scrollTop >= scrollHeight) {
    // 检测到滚动至页面底部，进行后续操作
      // ...
    }
  }, false)

1、缓存问题

父组件里

include = [];
@Project('Add')
Add(val) {
  const tmp = this.include.some(e => e === val);
  // 如果不存在则加入
  if(!tmp) {
    this.include.push(val)
  }
}
@Project('Detele)
Detele(val) {
  const tmp = this.include.findIndex(e => e === val);
  // 找不到会显示-1
  if(tmp !== -1) {
   this.include.splice(tmp,1)
  }
}

子组件里

@Inject('Add') Add;
created() {
  this.Add('需要缓存的 name')
}

2、有缓存的情况下返回到首页

// 1、挂载完成后，判断浏览器是否支持popstate
mounted() {
  if(window.history && window.history.pushState) {
    history.pushState(null,null,document.URL);
    window.addEventListener('popstate',this.goBack,false);
  }
}
destroyed() {
  // 2、页面销毁时，取消监听。否则其他vue路由页面也会被监听
  window.removeEventListener('popstate',this.goBack,false);
}
// 3、removeEventListener取消监听内容必须跟开启监听保持一致
goBack() {
  this.$router.push('/')
}
activated(){
  if(window.history && window.history.pushState) {
    history.pushState(null,null,document.URL);
    window.addEventListener('popstate',this.goBack,false);
  }
}
deactivated() {
  window.removeEventListener('popstate',this.goBack,false);
}

• 注意：没有缓存时 activated 和 deactivated 不需要

知识点

• 1、当活动历史记录条目更改时，将触发 popstate 事件
• 2、history 对象添加了两个新方法，history.pushState()和 history.replaceState(),用来在浏览历史中添加和修改记录

• history.pushState(state,title,url)
• state：一个与指定网址相关的状态对象，popstate 事件触发时，该对象会传入回调函数。如果不需要这个对象，此次可以填 null
• title: 新页面的表体，但是所有浏览器目前忽略这个值，因此这里可以填 null。
• url: 新的网址，必须与当前页面处在同一个域。浏览器的地址栏将显示这个网址
• 3、destroyed(生命周期) 实例销毁后调用
• 4、activated(生命周期) 被 keep-alive 缓存的组件激活时调用
• 5、deactivated(生命周期) 被 keep-alive 缓存的组件停用时调用

3、下载 excel 可共用

api

export function getPmprojectExport(data) {
  return request({
    url: "api/ProjectList/Export",
    method: "post",
    responseType: "blob",
    data,
  });
}

导出代码

const list = {};
getPmprojectExport(list).then(res => {
  const Blob = res.data;
  // 根据实际情况判断没有数据
  if (Blob.type === "application/json") {
    this.$message.error("目前没有数据");
  } else {
    const a = document.createElement("a");
    // a.download = `${Number(new Date())}.xlsx`;
    a.download = `${"项目列表"}.xlsx`;
    a.href = URL.createObjectURL(Blob);
    document.body.appendChild(a);
    a.click();
    a.remove();
  }
});

• 实际原理就是模拟 a 标签进行下载附件

4、动态表格

<el-table :data="tableData"
            border
            height="100%"
            v-loading="loading"
            elementLoadingText="努力加载中"
            elementLoadingSpinner="el-icon-loading"
            elementLoadingBackground="rgba(0, 0, 0, 0.8)"
            style=" 100%;">
    <el-table-column label="序号"
                    align="center"
                    width="70">
      <template #default="{$index}"><span>{{ $index + (form.pageNumber - 1) * form.pageSize + 1 }}
        </span></template>
    </el-table-column>
    <el-table-column v-for="item in columnList"
                    :key="item.id"
                    align="center"
                    :prop="item.prop"
                    :label="item.lable">
    </el-table-column>
    <el-table-column align="center"
                    prop="createTime"
                    label="日期">
          <template #default="{row,column}">
            <span>{{ row[column.property] ? $moment(row[column.property]).format('YYYY-MM-DD HH:mm:ss') : '' }}</span>
          </template>
    </el-table-column>
</el-table>