前端小用散记

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

提示：这里可以添加本文要记录的大概内容：

例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、el-dialog

嵌套 dialog 在el低版本中父子级嵌套的dialog 蒙版与层级会有问题。
如果项目需求中需要，并嵌套层级不多做平级处理分为两个独立dialog即可,待el版本高时在考虑做父子嵌套dialog。

二、v-if 与 v-show

v-if 在很多条件下会有问题，如数据值没清空留存等，如v-if出现问题尝试换成v-show

三、拷贝文字

http://www.clipboardjs.cn/

四、三角样式及定位实现

.modelState{
    width: 0; 
    height: 0;
    border-width: 40px;
    border-style: solid;
    border-color: transparent #0099CC transparent transparent;
    transform: rotate(-225deg);
    position:absolute;
    top:-40px;
    right: -40px;
}
.modelStateTxtNo{
    height: 30px;
    position:absolute;
    top:9px;
    right: 4px;
    -webkit-transform: rotate(45deg);
}
.modelStateTxt{
    height: 30px;
    position:absolute;
    top:8px;
    right: 9px;
    -webkit-transform: rotate(45deg);
}

五、鼠标小手

style="cursor:pointer;"

六、往请求头里配置参数

axios.defaults.headers.common[‘xxx’] = ‘xxx’;

七、关于请求头和url的一些操作

function getUrlParam(name) {
  let reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)’);//构建正则
  let r = window.location.search.substr(1).match(reg);//通过正则检索出url
  if (r != null) return decodeURI(r[2]); return null;//如果不为空return出解码后的url 为空吐空
}

if (getUrlParam('token') != null) {//如果getUrlParam方法出来的值不为空
  axios.defaults.headers.common['vk-home-token'] = getUrlParam('token’);//请求头内加vk-home-token与其值
  console.log(getUrlParam('token'));
}

八、深拷贝

数组赋值后，后值修改前值也跟着改变bug 赋值是用深克隆
利用JOSN转换

this.modelEditingData = JSON.parse(JSON.stringify(data));

九、因为对象的特殊机制，数据修改页面有可能不同步

想办法裁切一下并回复数据，以此起到激活作用

xxxx.splice(i, 1, e);

十、隐藏el-table 的所有边框和背景图 通过( >>> )穿透设置样式

.table {
  margin-top: 20px;
  border:0;
}

.table >>> .is-center {
  border:0;
}
.el-table::after {
  background-color:rgb(255, 255, 255)
}
.el-table::before{
  background-color:rgb(255, 255, 255)
}
.table >>> .el-table__header-wrapper .cell{
  background:rgb(255, 255, 255);
}
.table >>> .el-table__header-wrapper th{
  background:rgb(255, 255, 255);
}

十一、Video.js

<template>
    <div class="videoWarp">
        <div class="video">
            <video class="video-js borderRad" id="myVideo" @click="play" :poster="sao" @ended="ended">
                <source :src="src" type="video/mp4">
            </video>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            src: require('@/assets/video/ceshi.mp4'), // video播放视频地址
            sao: require('@/assets/imgs/arrow/sao.jpg'), // video播放前置图片
            myPlay: null, // video Dom
            playStuta: true // video 播放状态
        }
    },
    mounted() {
        this.myPlay = document.getElementById('myVideo'); // 获取video
    },
    methods: {
        play() { // 点击屏幕触发方法
            if ( this.playStuta === true ){
                this.myPlay.play(); // 播放
                this.playStuta = false;
            } else {
                this.myPlay.pause(); // 暂停
                this.playStuta = true;
            }
        },
        ended(val) { // 播放结束
            if (val.type === 'ended') {
                this.playStuta = true; // 重置播放状态
                this.myPlay.load(); // 重置video
            }
        }
    }
}
</script>

<style scoped>
.videoWarp {
    height: 410px;
    padding: 0 20px 20px 20px;
}
.video {
    height: 410px;
    background: #F1F1F1;
}
.borderRad {
    width: 100%;
    height: 410px;
    border-radius: 10px;
    box-shadow: 0px 0px 32px 0px rgba(39, 39, 39, 0.17);
}
</style>

十二、Video.js

mounted() {
        window.addEventListener('scroll', this.onScroll);
    },
    destroyed(){
        // 关闭滚动事件
        window.removeEventListener('scroll', ( this.onScroll));
    },

  onScroll(){
            // 可滚动容器的高度
            let innerHeight = this.$refs.scroll.clientHeight;
            // 屏幕尺寸高度
            let outerHeight = document.documentElement.clientHeight;
            // 可滚动容器超出当前窗口显示范围的高度
            let scrollTop = document.documentElement.scrollTop;
            // 避免切换时读取到异常高度
            if (scrollTop == 0){
                innerHeight = 10000
            }
            // scrollTop在页面为滚动时为0，开始滚动后，慢慢增加，滚动到页面底部时，出现innerHeight < (outerHeight + scrollTop)的情况，严格来讲，是接近底部。
            if ( this.isLoad ){
                if (innerHeight <= outerHeight + scrollTop ){
                    // 此处添加自定义操作
                    this.loadMoreText = '加载中...';
                    this.currentPage = this.currentPage + 1;
                    setTimeout(() => {
                        this.getProductListData(this.tagStatus, this.currentPage);
                        this.loadMoreText = '上拉加载更多';
                    }, 1000)
                }
            }
        },

十三、纯前端导出

判断要导出的节点中是否有fixed的表格，如果有，转换excel时先将该dom移除，然后append回去
依赖：一个xlsx 还有 firesaver

let fix = document.querySelector(".el-table__fixed-right");
let wb;
if (fix) {
	wb = XLSX.utils.table_to_book( 
		document.querySelector("#comboTableData").removeChild((fix)));
             document.querySelector("#comboTableData").appendChild(fix);
} else {
	//"#outTableData用来放导出的table 设置为display：none
       wb = XLSX.utils.table_to_book(document.querySelector("#outTableData"),{ raw: true });
}
                    
for (let key in wb.Sheets.Sheet1) {
	if ( key.substr(0, 1) === wb.Sheets.Sheet1["!ref"].split(":")[1].substr(0, 1) ) {
		delete wb.Sheets.Sheet1[key];
       }
}
// 此处蛇者导出的excel宽度
wb.Sheets.Sheet1['!cols'] = [ // wpx设置列宽为xx像素//wch设置列宽为xx字符
	 { wpx: 125 }, 
       { wpx: 125 }, 
       { wpx: 125 }, 
       { wpx: 150 },  
       { wpx: 200 },  
];
let wbout = XLSX.write(wb, {
	bookType: "xlsx",
      bookSST: true,
      type: "array"
});
try {
	var blob = new Blob([wbout], {type: "atext/plain;charset=utf-8"});
       saveAs(blob, "反馈审核信息.xlsx");
} catch (e) {
       if (typeof console !== "undefined") console.log(e, wbout);
}
this.dialogVisible1 = false
 return wbout;

十四、获取默认配置

this.$config

十五、移动端字体问题

在做手机端web的时候发现css中设置的同样字体大小的两块内容，实际显示的字体大小差异明显！测试后发现字体大小会随着文本块中文本内容数量的变动而变动。网上查阅资料发现是chrome对字体优化导致的，在css中加入如下代码后问题

-webkit-text-size-adjust: none;
text-size-adjust: none;

PS：还有一种方式是将display设置为inline-block

十六、打包利用contenthash解决缓存问题配置

vue脚手架 vue-cli3 HCIT-APP_WEB项目下 vue.config.js 配置参考
打包配置（利用contenthash解决缓存问题配置）

const mode = process.env.NODE_ENV  获取项目环境
const isDev = mode === 'development'  判断是否为本地环境

module.exports 当前模块属性 也就是 实际配置对象

module.exports = {
  ......
  chainWebpack: config => {
    ......
    if (!isDev) {  非本地环境
      config.plugin('extract-css').tap(args => [{  提取所有css文件
        filename: 'css/[name].[contenthash].css' 将跟随内容变化的contenthash放入css文件名
      }])
      config.output.filename('js/[name].[contenthash].js').chunkFilename('js/[name].[contenthash].js').end() 与上述css同理
    }
  }
  publicPath: './' // 公共路径
  ......
}

十七、回车键刷新页面

vue项目中 在输入框输入字符并按下回车键搜索时，不会进行搜索， 而是会刷新页面。
后来发现 只有页面中只有一个input时 才会出现此问题，经查阅得知，是因为当form表单中只有一个input时，按下回车建会自动触发页面的提交功能， 所以会产生刷新页面的行为

解决方法
在el-form中加入 

<el-form :inline="true" label-suffix="：" @submit.native.prevent>
      <el-form-item label="用户名">
        <el-input v-model.trim="queryData.username" @keydown.enter.native="fetchData" clearable placeholder="请输入用户名"/>
      </el-form-item>
        ......
</el-form>

@submit: 表单提交
.native 绑定系统原生事件
.prevent 提交以后不刷新页面

十八、全局挂载方法

例

import pageNation from '@/components/Pagination'
Vue.component('pageNation', pageNation)

import { getItems } from '@/utils/costum'
Vue.prototype.getItems = getItems

总结

记录一些开发中常用/不常用的代码片段，提升工作效率。