2021-09-22 前段常见问题总结

1.ES6的解构赋值

ES6的解构赋值能针对的只有最外层的数据给了新的地址，就是你改变最外层的数据时，你赋值的对象数据不会随着改变，但是如果有多层的时候，还是会改变，所以当有多层的时候就需要用到深拷贝。

2.深拷贝 clone()方法

/**
 * 深度克隆对象
 * @param obj
 * @returns {*}
 */
function clone(obj) {
    // 判断是否为空未定义
    if (null == obj || "object" != typeof obj) return obj;

    //  Date
    if (obj instanceof Date) {
        var copy = new Date();
        copy.setTime(obj.getTime());
        return copy;
    }

    //  Array
    if (obj instanceof Array) {
        var copy = [];
        for (var i = 0, len = obj.length; i < len; ++i) {
            copy[i] = clone(obj[i]);
        }
        return copy;
    }

    // Object
    if (obj instanceof Object) {
        var copy = {};
        for (var attr in obj) {
            if (obj.hasOwnProperty(attr)) copy[attr] = clone(obj[attr]);
        }
        return copy;
    }

    throw new Error("无法复制对象！不支持其类型。");
}

/**
 * 深拷贝对象
 * @param obj
 * @returns {any}
 */
export function cloneObj(obj) {
    return JSON.parse(JSON.stringify(obj))
}

3.在element ui中如何在table表单名字上加红色的*

第一步：在组件上的header-cell-class-name绑定个must，

 <el-table
    :header-cell-class-name='must'
    >

第二步:must函数中指定序列返回must类名

methods: {
	must(obj){
		if(obj.columnIndex == 1 || obj.columnIndex == 2 || obj.columnIndex == 4 || obj.columnIndex == 5) {
			return 'must';
		}
	}
}

第三步：用css的伪类元素插入*号

    > > > .el-table table th.must > div:before {
        content: '*';
        color: #F56C6C;
        margin-right: 4px;
    }

4.在文字旁边加这种线(用伪类元素加)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WcH8O0bl-1632281545170)(C:\Users\Administrator.SC-202107261607\AppData\Roaming\Typora\typora-user-images\1629422317769.png)]

  <div class="head-name">县级督学申请表</div>

       .head-name{
                /*border-left: 6px solid #0073E6;*/
                font-weight: bold;
                position: relative;
                padding-left: 10px;
                line-height: 16px;
                color: #333333;
            }
            .head-name:after {
                content: '';
                position: absolute;
                left: 0;
                /*top: auto;*/
                /*bottom: 5px;*/
                /*right: 0;*/
                height: 52%;
                width: 5px;
                background-color: #0073E6;
            }

5.scss选中第几个子元素

nth-child（n）、first-child、last-child用法
注：nth-child(n)选择器匹配父元素中的第n个子元素。 
n可以是一个数字，一个关键字，或者一个公式。

nth-child（n）用法： 
1、nth-child(3) 
表示选择列表中的第3个标签，代码如下：

li:nth-child(3){background:#fff}
1
2、nth-child(2n) 
表示选择列表中的偶数标签，即选择 第2、第4、第6…… 标签，代码如下：

li:nth-child(2n){background:#fff}
1
3、nth-child(2n-1) 
表示选择列表中的奇数标签，即选择 第1、第3、第5、第7……标签，代码如下：

li:nth-child(2n-1){background:#fff}
1
4、nth-child(n+3) 
表示选择列表中的标签从第3个开始到最后，代码如下：

li:nth-child(n+3){background:#fff}
1
5、nth-child(-n+3) 
表示选择列表中的标签从0到3，即小于3的标签，代码如下：

li:nth-child(-n+3){background:#fff}
1
6、nth-last-child(3) 
表示选择列表中的倒数第3个标签，代码如下：

li:nth-last-child(3){background:#fff}
1
first-child用法： 
1、first-child 
first-child表示选择列表中的第一个标签。代码如下：

li:first-child{background:#fff}
1
last-child用法： 
1、last-child 
last-child表示选择列表中的最后一个标签，代码如下：

li:last-child{background:#fff}

6. 如何代码打印对于内容

1.先把需要打印的东西另外开个窗口，
    print(item) {//打印
                let routeUrl = this.$router.resolve({
                    path:"/printBook",
                    query: {
                        ...item   //这个是通过路由传承
                    }
                });
                window.open(routeUrl.href, '_blank');
            },
2.再在新的界面里写你要打印的内容通过方法打印（在html上加个button按钮）
<el-button style="display: none" id="btn" type="primary">打印</el-button>
  mounted() {
    const btn = document.getElementById("btn");
    btn.addEventListener("click", function () {
      window.print();
      window.close();
    });
    let ev = new Event("click");
    setTimeout(() => {
      btn.dispatchEvent(ev);
    }, 100);
  },

7.DOM元素上还有很多方法

var btn=document.createElement("BUTTON");//创建一个按钮:
  let a = document.createElement("a");//创建一个a标签上传文件
    a.download = row.fileName;
    a.href = window.constants.EDU_DW_SERVICE_PREFIX + row.filePath;


1）创建新节点
createElement()   //创建一个具体的元素
createTextNode()   //创建一个文本节点

2）添加、移除、替换、插入
appendChild()      //添加
removeChild()      //移除
replaceChild()      //替换
insertBefore()      //插入
 
3）查找
getElementsByTagName()    //通过标签名称
getElementsByName()     //通过元素的Name属性的值

8.axios请求不同的传参方式

get请求 axios.get('/user?id=12345&name=user')
get请求 
// params参数必写 , 如果没有参数传{}也可以
axios.get('/user', {
    params: { 
       id: 12345，
       name: user
    }
})

delete请求 axios.delete('/user?id=12345&name=user')
delete请求 
// params参数必写 , 如果没有参数传{}也可以
axios.delete('/user', {
    params: { 
       id: 12345，
    }
})

post请求 axios.post('/user?id=12345&name=user')
post请求 
// params参数必写 , 如果没有参数传{}也可以
axios.post('/user', {
    data: { 
       id: 12345，
    }
})

put请求 axios.put('/user?id=12345&name=user')
put请求 
// params参数必写 , 如果没有参数传{}也可以
axios.put('/user', {
    params: { 
       id: 12345，
    }
})

9.前端静态换头像

<input
       :id="id"
       type="file"
       style="display: none"
       name="single"
       ref="fileBtn"
       accept="image/*"
       @change="onChange"
       />
/*通过点击按钮button 去触发input中的onChange上传图片*/
   <el-button 
              size="small" 
              type="primary" 
              :loading="loading"
              @click="handleOpenFile">
              <i class="fa fa-upload"/>
              添加图片
              </el-button>

   // 打开文件
            handleOpenFile() {
                const input = document.getElementById(this.id)
                // 点击input
                input.click()
            },

		 async onChange() {
                let that = this;
                // 获取上传的文件
                let inputFile = await that.$refs.fileBtn.files[0];
                let size = inputFile.size; // 读取文件的大小
                let maxSize = 100 * 1024 * 1024; // 限定最大文件的大小
                if (size > maxSize) {
                    alert("不能上传大于100M的图");
                } else {
                    let res;
                    if (inputFile) {
                        // 使用FileReader去读取file对象
                        const reader = new FileReader();
                        res = reader.readAsDataURL(inputFile);
                        let formData = new FormData();
                        formData.append("file", inputFile);
                        requestIntegration({
                            url: this.currentHost + "/uploadPhoto",
                            data: formData,
                            method: "post",
                            target: '.upload',
                        }).then((res) => {
                            that.formData.photoId = res.data.id;
                            that.formData.photoUrl = res.data.filePath;
                        })
                        reader.onloadend = function () {
                            // 把图片转base64
                            let strBase64 = reader.result.substring(0);
                            // 要展示的图
                            that.formData.headImger = strBase64;
                        };
                    } else {
                        alert("上传失败");
                    }
                }
            },

10.电脑端生成二维码

::本质就是把一个路由界面的地址生成二维码扫描二维码就是访问这个路由界面

npm 方式安装依赖

npm install --save ‘qrcodejs2’

引入包

import QRCode from 'qrcodejs2'

完整代码：

11.vue文本字符串复制

npm 方式安装依赖

npm install --save ‘ clipboard ’

引入包

  import Clipboard from 'clipboard'

完整代码：

<template>
  <div >
    <p>{{copyTxt}}</p>
    <button id="copy_text"
            :data-clipboard-text="copyTxt"
            @click="handleCopyFun">复制</button>
  </div>
</template>

<script>
import Clipboard from 'clipboard'
export default {
  data() {
    return {
      copyTxt: '即将复制的文本'
    }
  },
  method() {
    // 操作：点击了复制按钮
    handleCopyFun() {
      let clipboard = new Clipboard('#copy_text')
      clipboard.on('success', e => {
        alert('复制成功')
        clipboard.destroy() // 释放内存
      })
      clipboard.on('error', e => {
        // 不支持复制
        alert('该浏览器不支持自动复制')
        clipboard.destroy() // 释放内存
      })
    }
  }
}
</script>

12.vue项目如何把页面导出PDF文件

①.下载插件模块

npm install html2canvas jspdf --save

②.在需要的组件中引入插件

import html2canvas from 'html2canvas';
import jspdf from 'jspdf';

③.方法

  html标签
  <div id="pdfDom">
      
    要导出的内容  
    </div>


export default {
  data(){
     htmlTitle: '合同模板', //PDF文件命
  }, 
  created() {
     this.getPdf(this.htmlTitle)
  },
  methods: {
        exportExpFun() {//页面压缩pdf文件
            // let shareContent = document.body,//需要截图的包裹的（原生的）DOM 对象
            let shareContent = document.getElementById('pdfDom'),//需要截图的包裹的（原生的）DOM 对象
                width = shareContent.clientWidth, //获取dom 宽度
                height = shareContent.clientHeight, //获取dom 高度
                canvas = document.createElement("canvas"), //创建一个canvas节点
                scale = 1; //定义任意放大倍数 支持小数
            canvas.width = width * scale; //定义canvas 宽度 * 缩放
            canvas.height = height * scale; //定义canvas高度 *缩放
            canvas.style.width = shareContent.clientWidth * scale + "px";
            canvas.style.height = shareContent.clientHeight * scale + "px";
            canvas.getContext("2d").scale(scale, scale); //获取context,设置scale
            let opts = {
                scale: scale, // 添加的scale 参数
                canvas: canvas, //自定义 canvas
                logging: false, //日志开关，便于查看html2canvas的内部执行流程
                width: width, //dom 原始宽度
                height: height,
                useCORS: true, // 【重要】开启跨域配置
            };
            html2canvas(shareContent, opts).then(() => {
                let contentWidth = canvas.width;
                let contentHeight = canvas.height;
                //一页pdf显示html页面生成的canvas高度;
                let pageHeight = (contentWidth / 592.28) * 841.89;
                //未生成pdf的html页面高度
                let leftHeight = contentHeight;
                //页面偏移
                let position = 0;
                //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
                let imgWidth = 595.28;
                let imgHeight = (592.28 / contentWidth) * contentHeight;
                let pageData = canvas.toDataURL("image/jpeg", 1.0);
                // let PDF = new JsPDF("", "pt", "a4");  // a4纸纵向
                // let PDF = new JsPDF('landscape');  // 横向页面
                let arrDPI = this.js_getDPI(); //获取显示器DPI
                let dpiX = 96;
                let dpiY = 96;
                if (arrDPI.length > 0) {
                    dpiX = arrDPI[0];
                    dpiY = arrDPI[1];
                }
                //l:横向， p：纵向；单位： in:英寸，mm毫米；画布大小：a3,a4,leter,[]（当内容为数组时，为自定义大小）
                let PDF = new JsPDF("p", "in", [(contentWidth + 10) / dpiX, (contentHeight + 10) / dpiY]);  // 自定义页面大小
                if (leftHeight <= pageHeight) {
                    PDF.addImage(pageData, "JPEG", 5 / dpiX, 5 / dpiY);
                } else {
                    while (leftHeight > 0) {
                        PDF.addImage(pageData, "JPEG", 0, position);
                        leftHeight -= pageHeight;
                        position -= 841.89;
                        if (leftHeight > 0) {
                            PDF.addPage();
                        }
                    }
                }
                PDF.save(this.htmlTitle + ".pdf"); // 这里是导出的文件名
                this.exportExp = false;
            })
                .catch((res) => {
                console.log(res);
            })
        },
            //获取显示器DPI
            js_getDPI() {
                let arrDPI = new Array();
                if (window.screen.deviceXDPI != undefined) {
                    arrDPI[0] = window.screen.deviceXDPI;
                    arrDPI[1] = window.screen.deviceYDPI;
                } else {
                    let tmpNode = document.createElement("DIV");
                    tmpNode.style.cssText = "width:1in;height:1in;position:absolute;left:0px;top:0px;z-index:99;visibility:hidden";
                    document.body.appendChild(tmpNode);
                    arrDPI[0] = parseInt(tmpNode.offsetWidth);
                    arrDPI[1] = parseInt(tmpNode.offsetHeight);
                    tmpNode.parentNode.removeChild(tmpNode);
                }
                return arrDPI;
            },

 },

}

13.解决element下拉框选择，后端返回的是数字，但是下拉框选中的value要的字符串的数字，

  <el-select :disabled="auditShow" v-model="formData.gender" clearable
          placeholder="请选择性别" size="small"
          :style="{width: '100%'}">
              <el-option
        v-for="item in  learnInfo[10003]"
        :key="item.value"
        :label="item.name"
        :value="parseInt(item.value)">//parseInt吧value的字符串转为数字
            </el-option>
   </el-select>

14.把字符串时间转为时间戳

  birthday =  new Date( '1998/01/21 00:00:00').getTime()