Js知识点&&Vue知识点&&长期总结

前言

• 由于本人用Vue开发，所以js和vue就不细化了，本文主要是工作中或平时遇到的一些JS相关问题&&VUE相关问题。
• 末尾会贴前端业内有交流氛围好的微信群的二维码，互相进步。

知识点

1.修改百度地图覆盖物层级

修改百度地图的标点的层级
// 修改小黄点的默认z-index
 window.map.getPanes().labelPane.style["z-index"] = 350;

2.修改vue-seamless-scroll的点击事件加不上

• 用插件vue-seamless-scroll
• 解决：冒泡点击
• 父亲ul加点击事件 儿子绑定个 li :index=“idx” ， li里面的儿子给css的不可选中

let index=Number(event.target.getAttribute("index"))
let item = this.boxListData[index];

.item-container {
   display: flex;
   padding: 8px 16px 8px 0;
   height: 50px;
   box-sizing: border-box;
   div,
   img {
       pointer-events: none;  //  让鼠标事件失效（链接、点击等事件）
       CSS 属性指定在什么情况下 ， 某个特定的图形元素是否可以成为鼠标事件的 target。
   }
}
_______________________________________________
bubblingClick(event) {
            let index = Number(event.target.getAttribute("index"));
            let item = this.boxListData[index];
            // console.log(item,"冒泡点击");

            if (this.type === "person") {
                if (!item.per_id)
                    return this.$message({
                        type: "warning",
                        message: "暂无人员数据"
                    });
                sessionStorage.setItem("from", "一r一d");
                sessionStorage.setItem("type", "1");
                this.$router.push({
                    name: "person-detail",
                    query: { id: item.per_id, len: 1 }
                });
            } else {
                this.$router.push({
                    name: "car-info",
                    params: { id: item.per_id }
                });
                sessionStorage.setItem("from", "一r一d");
                sessionStorage.setItem("type", "1");
            }
        },

3.Vue根文件(html)的title取值

<%= VUE_APP_PROJECT_TITLE%>

4.Vue组件封装经常用的.sync

• 深入理解vue 修饰符sync【 vue sync修饰符示例】

5.vue中跳转新页面

            // let newpage = this.$router.resolve({
            //     path: "/group-chat",
            //     query: {
            //         idMessage: JSON.stringify(val)
            //     }
            // });
            // window.open(newpage.href, "_blank");

6.监听$route

• 有时候，我们需要根据路由的跳转来做一些事情，比如：封装面包屑，又或者导航菜单的刷新状态不变

  watch: {
            $route(a) {
                console.log(a);
            }
        }

7.Input上传文本(兼容）

• Input.files[0].text IE没有text方法

        //上传
        upload() {
            let Input = document.createElement("input");
            Input.type = "file";
            Input.accept = ".txt";

            Input.addEventListener("change", async e => {
                if(Input.files[0]?.text){
                    // 1  谷歌
                    const text = await Input.files[0].text();
                    this.params.paramValue = text;
                    this.fileType = 1;
                    Input = null;
                }else{
                    // 兼容IE
                    var file = event.target.files[0];
                    var reader = new FileReader();
                    reader.onload = event=>{
                    // 文件里的文本会在这里被打印出来
                    // console.log(event.target.result);
                    // console.log(reader.result);
                        this.params.paramValue =event.target.result;
                        this.fileType = 1;
                        Input = null;
                    };
                    reader.readAsText(file,'UTF-8');
                }
            });

            Input.click();
        },

8.表单内input上传，校验不自己变化

   //上传
   upload() {
       
       let Input = document.createElement("input");
       Input.type = "file";
       Input.accept = ".xls";

       Input.addEventListener("change", e => {
           this.formValidate.file = Input.files[0];
           const extension =  this.formValidate.file.name.substring(this.formValidate.file.name.lastIndexOf('.')+1);
           if ("xls" !== extension && "xlsx" !== extension) {
               this.$Message.error("选择Excel格式的文件导入！");
               this.formValidate.file = "";
           }
           Input = null;
       });

       Input.click();
   },
     
     自定义校验 -> 手动执行校验就好了-》事件

9.input光标自动聚焦

• 当页面加载时，该元素将获得焦点 (注意：autofocus 在移动版 Safari 上不工作)。事实上，只要你在打开这个页面后还没点击过任何内容，这个输入框就应当还是处于聚焦状态。现在让我们用指令来实现这个功能：

// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})

如果想注册局部指令，组件中也接受一个 directives 的选项：

directives: {
  focus: {
    // 指令的定义
    inserted: function (el) {
      el.focus()
    }
  }
}

然后你可以在模板中任何元素上使用新的 v-focus property，如下：

<input v-focus>

• 弹窗类里的 input 也可以 这样 ， 一般采用指令

    <Input
                        ref="inputOne"
                        v-model.trim="formValidate.name"
                        v-mark-input-clear-focus
                        placeholder="请输入任务名"
                        :maxlength="30"
                        clearable
                    />
   watch: {
        show(){
            this.$nextTick(()=>{
                this.$refs.inputOne.focus();
            });
        }
    },

10.input框clear后，自动聚焦

• input必须有 @on-clear 方法

 <Input v-mark-input-clear-focus clearable />
 
export const MarkInputClearFocus = {
    bind(el, binding, vnode) { // 1-被绑定
        vnode.componentInstance.$on('on-clear', () => {
            vnode.componentInstance.focus();
        });
    }
};

• vue自定义指令VNode详解
  

11.表单内input的规则

  ruleValidate: {
                file: [
                    {
                        required: true,
                        validator: (rule, value, callback) => {
                            if (!value) {
                                callback(new Error("请导入文件"));
                            } else {
                                callback();
                            }
                        },
                        trigger: "change"
                    }
                ],

12.input内容去除前后中间空格

  			 // 去除input的空格
            this.params.paramValue=this.params.paramValue.replace(/\s*/g,"");

13.ui组件的form表单进入退出验证和内容置空

resetFields	对整个表单进行重置，将所有字段值重置为空并移除校验结果
 this.$refs.formValidate.resetFields();
 <Form ref="formValidate"
                  :model="formValidate"

14.滚轮事件

        // 滚轮
        scrollFunc(e) {
            e = e || window.event;
            console.dir(e);
            if (e.wheelDelta) {
                //判断浏览器IE，谷歌滑轮事件
                if (e.wheelDelta > 0) {
                    //当滑轮向上滚动时
                    // alert("上滚");
                }
                if (e.wheelDelta < 0) {
                    //当滑轮向下滚动时
                    // alert("下滚");
                }
            } else if (e.detail) {
                //Firefox滑轮事件
                if (e.detail > 0) {
                    //当滑轮向下滚动时
                    // alert("下滚");
                }
                if (e.detail < 0) {
                    //当滑轮向上滚动时
                    // alert("上滚");
                }
            }
        },

                
                /*注册事件*/
                /*IE、Opera注册事件*/
                if (document.attachEvent) {
                    outer1.attachEvent("onmousewheel", self.scrollFunc);
                }
                //Firefox使用addEventListener添加滚轮事件
                if (document.addEventListener) {
                    //firefox
                    outer1.addEventListener(
                        "DOMMouseScroll",
                        self.scrollFunc,
                        false
                    );
                }
                //Safari与Chrome属于同一类型
                outer1.onmousewheel = self.scrollFunc;
                console.dir(outer1);

15.table中保存空格

// table 空格
// /deep/ .ivu-table-row {
//     & > td:nth-child(4) {
//         span {
//             white-space: pre-wrap;//保留空白符序列，但是正常地进行换行。
//         }
//     }
// }

16.年月日-时间补零

• 大多数公司，都会有自己封装的utils，也可以采用moment.js或者day.js，处理日期

   			// 现在现在年月日时间补零
            const dateTransform = date => {
                const tmp = date.split('\/');
                if(tmp.length === 1){
                    return date;
                }
                if (tmp[1].length !== 2) {
                    tmp[1] = '0' + tmp[1];
                }
                if (tmp[2].length !== 2) {
                    tmp[2] = '0' + tmp[2];
                }
                return tmp.join('-');
            };
            let taskStartTimeStr= dateTransform(new Date().toLocaleDateString())||[];

17.运算符

从ES7开始，我们可以使用幂运算符 ** 作为求幂的简写，相对之前的Math.pow(2, 3) 更加快捷。

• ?. 和 ?? 都可以了解下 > > JS中常用的运算符

18.图片src成功失败加载

• 我代码截取的部分，所处环境没有介绍，下面会讲懒加载

         // 取得img标签中的src对应的链接
         let srcReg = /src=[\'\"]?([^\'\"]*)[\'\"]?/i;
         const img=new Image();
         img.src=res?.obj.match(srcReg)[1];
         return new Promise((resolve)=>{
             img.onload=()=>{
                 return resolve(res?.obj.match(srcReg)[1]);
             };
             img.onerror=()=>{
                 return resolve(require('@/assets/images/data-query/icon_defeated.png'));
             };
         });
  

19.图片src懒加载

• 指令版

图片预加载，src配置
<img v-mark-img-pre-load="historyItem.imgUrl"  src="../../icon-default.png" alt="">
//historyItem.imgUrl  真实路径的src地址
//src="../../icon-default.png"  根据需求赋值对应的加载失败的图片

export const MarkImgPreLoad = {
    bind: function (el, binding, vnode) {
        if (binding.value) {
            const img  = new Image();
            img.src    = binding.value || '';
            // 图片成功加载后，改变src值
            img.onload = () => {
                el.src = binding.value;
            };
        }

    }

};

• 非指令版
  自己改改，或者去百度吧，Hhhh,或者参考上面-> 18.图片src成功失败加载

20.下载文件

• 一般项目都会有下载excel等需求
• 下载存放在后台的文件

  import { baseURL } from 'mn-common/lib/config'
  
  export const downloadCleanModelFile = `${baseURL}/${prefix}/downloadCleanModelFile.do?fileType=`
  
  // window.open(ApiCleaningModelManagement.downloadCleanModelFile + tag, '_blank')
  
  let elLink = document.createElement('a')
  elLink.href = ApiCleaningModelManagement.downloadCleanModelFile + tag
  elLink.download = ''
  elLink.click()
  elLink = null
  

• 下载存放在前端的文件
  • 把需要下载的excel，放到vue项目的public文件夹下新创建的文件夹，记得excel文件名要英文
    

	download(tag) {
            let url = null
            if (tag === '1') {
                url = '/data/gdpysgx.xlsx'
            } else if (tag === '2') {
                url = '/data/gpzywys.xlsx'
            }
            let elLink = document.createElement('a')
            elLink.href = url
            //可以把下载时文件的名字，改成中文
            if (tag === '1') {
                elLink.download = 'xxxx关系.xlsx'
            } else if (tag === '2') {
                elLink.download = 'xxxx映射.xlsx'
            }
            elLink.click()
            elLink = null
        },

21.销毁事件(不用钩子函数）

		// 销毁前执行
        this.$on("hook:beforeDestroy",()=>{
            boxOffset.removeEventListener("scroll", this.handleScroll);
        });

22.class和style的书写方式

Class 与 Style 绑定参考

class
	数组语法：
	<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
	在数组语法中也可以使用对象语法：
	<div v-bind:class="[{ activeClass: isActive }, errorClass]"></div>
style
	对象语法：
	<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
	数组语法：
	<div v-bind:style="[baseStyles, overridingStyles]"></div>

23.render

• 字符串模板的代替方案，允许你发挥 JavaScript 最大的编程能力。该渲染函数接收一个 createElement 方法作为第一个参数用来创建 VNode。
• 如果组件是一个函数组件，渲染函数还会接收一个额外的 context 参数，为没有实例的函数组件提供上下文信息。
• 渲染函数 & JSX

//params.row, params.index 
{
    
    
                    title: "操作",
                    align: "center",
                    render: (h, params) => {
    
    
                        return h(
                            "span",
                            {
    
    
                                style: {
    
    
                                    cursor: !params.row.opId
                                        ? "no-drop"
                                        : "pointer"
                                }
                            },
                            [
                                h(
                                    "span",
                                    {
    
    
                                        style: {
    
    
                                            "white-space": "nowrap",
                                            color: "rgb(45, 140, 240)",
                                            "pointer-events": !params.row.opId
                                                ? "none"
                                                : "",
                                            "text-decoration": "underline"
                                        },
                                        on: {
    
    
                                            click: e => {
    
    
                                                this.operation(params.row);
                                            }
                                        }
                                    },
                                    "提取"
                                )
                            ]
                        );
                    }
                }

JSX

  {
    
    
                    title: "操作",
                    width: 100,
                    type: true,
                    align: "center",
                    render: (h, {
    
     row }) => {
    
    
                        let number;
                        let value;
                        if (row.submitStatus) {
    
    
                            number = +row.submitStatus;
                            value =
                                number === 0
                                    ? "未提交"
                                    : number === 1
                                        ? "已提交"
                                        : number === -1
                                            ? "提交失败"
                                            : "-";
                        } else {
    
    
                            number = 0;
                            value = "提交";
                        }
                        console.log(number);

                        return (
                            <div style="white-space: nowrap;">
                                {
    
    this.tabType === 1 && (
                                    <span
                                        class={
    
    {
    
    
                                            "ly-btn-group-inline__item ly-color-link-fff": true,
                                            historical: number !== 0
                                        }}
                                        style="margin-right:16px"
                                    >
                                        <span
                                            class={
    
    {
    
     disabled: number !== 0 }}
                                            onClick={
    
    () =>
                                                this.submit(row, number)
                                            }
                                        >
                                            {
    
    value}
                                        </span>
                                    </span>
                                )}
                                <Poptip
                                    confirm
                                    width="200"
                                    popper-class="keyword-mgt-poptip"
                                    placement="bottom"
                                    title="确定删除该数据吗？"
                                    on-on-ok={
    
    () => this.del(row)}
                                >
                                    <span class="ly-btn-group-inline__item ly-color-link-gray">
                                        删除
                                    </span>
                                </Poptip>
                            </div>
                        );
                    }
                }

24.初始化、清空、重置input和table等

• 把上面参数放在一个对象里
• vm.$options 用于当前 Vue 实例的初始化选项。需要在选项中包含自定义 property 时会有用处：

            params: {
                bgwjStart: '',
                bgjEnd: '',
                brId: '',
                cyjlx: '',
                bjxx: '',
                pageNum: 1,
                pageSize: 30,
            },
            
        //清空,重置
        handleClear() {
            this.params = this.$options.data().params
        },

25.双滚动条（一个滚动到底，继续滚动，大的不滚动）

• 在这个框中滚动到底，继续滚动。页面的滚动条也不会继续滚动
• 利用滚动到底，禁止滚动事件滚动
  • 长dom的高 - 有滚动条dom的高 - 滚动条上偏移量 <=0 证明到底
• 利用滚动到头，禁止滚动事件滚动
  • 有滚动条的dom的滚动条上偏移量< =0 证明到头

   let boxUl = document.querySelector(".ul");//有滚动条的dom
   let box = document.querySelector("ul");//有滚动条里面的长dom

   box.onmousewheel = (e) => {
       const offsetHeight = box.offsetHeight;
       const scrollTopUl = boxUl.scrollTop;
       const offsetHeightUl = boxUl.offsetHeight;
       const number = offsetHeight - offsetHeightUl - scrollTopUl;
       e = e || window.event;
       if (e.wheelDelta) {
           //判断浏览器IE，谷歌滑轮事件
           if (e.wheelDelta > 0 && scrollTopUl > 0) {
               //当滑轮向上滚动时
               console.log("上滚");
               // alert("上滚");
               return true
           }
           if (e.wheelDelta < 0 && number > 0) {
               //当滑轮向下滚动时
               // alert("下滚");
               return true
           }
       } else if (e.detail) {
           //Firefox滑轮事件
           if (e.detail > 0 && number > 0) {
               //当滑轮向下滚动时
               // alert("下滚");
               return true
           }
           if (e.detail < 0 && scrollTopUl > 0) {
               //当滑轮向上滚动时
               // alert("上滚");
               return true
           }
       }
       return false
   }