vue开发常用css，js（持续更新）

1、文字溢出显示三个点

text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;

2、input 框光标左边距

input{
    text-indent:15px
}

3、水平垂直居中常用写法

1）position属性实现

position: absolute;
left: 50%;
transform: translateX(-50%);

/* 垂直居中就设置 top*/
top: 50%;
transform: translateY(-50%);

2）flex属性实现

display: flex;
justify-content: center;//水平居中
align-items: center;//垂直居中

4、input框消除空格

这行代码直接写在input框上面，只要input 中的value出现了空格就会自动消除

onkeyup="this.value=this.value.replace(/[, ]/g,'')"

5、纯css实现箭头

再也不用担心iconfont格式的箭头显示不出来的问题了。
当然，下面的rpx 单位是uniapp 的响应式单位。可以换成px作为你自己的单位。
类名.down 就是向下的箭头，可以根据，自己想要的箭头指向进行改动，也就是利用旋转的方式哦

.arrow {
	border: solid black;
	 border-width: 0 3.84rpx 3.84rpx 0;
	 display: inline-block;
	 padding: 9rpx;
	 margin-left: 14rpx;
	 margin-bottom: 3px;
}
.down {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

6、箭头在上面的气泡样式，可以根据自己的实际设计调整

.tip {
	  position: relative;
	  top: 19.23rpx;
	  // bottom: 19px;
	  // right: 32px;
	  width: 100%;
	  height: 123.07rpx;
	  background:#C0EBF5;
	  border-radius: 19.23rpx;
	  z-index: 1;
	  display: flex;
	  align-items: center;
	  padding:  19.23rpx 21.15rpx 19.23rpx 15.38rpx;
	  box-sizing: border-box;
	}
	.tip::after {
	  content: "";
	  position: absolute;
	  top: -13.54rpx;
	  left: 28%;
	  display: block;
	  width: 0;
	  height: 0;
	  border-radius: 7.69rpx;
	  border:15.38rpx solid transparent;
	  border-left-color: #C0EBF5;
	  border-top-color: #C0EBF5;
	  transform: scaleX(0.8) rotate(45deg);
	}

7、实现加载中的样式不停转圈

备注：view组件是uniapp 中的，我们在其他地方写的时候也只需要把view替换成 div 这类似的 标签即可。

html：

<view class="pswp__preloader__icn">
	<view class="pswp__preloader__cut">
		<view class="pswp__preloader__donut"></view>
	</view>
</view>

css ：

.pswp__preloader__icn {
	opacity: 0.75;
	width: 24px;
	height: 24px;
	-webkit-animation: clockwise 500ms linear infinite;
	animation: clockwise 500ms linear infinite;
}

.pswp__preloader__cut {
	position: relative;
	width: 12px;
	height: 24px;
	overflow: hidden;
	position: absolute;
	top: 0;
	left: 0;
}

.pswp__preloader__donut {
	box-sizing: border-box;
	width: 24px;
	height: 24px;
	border: 2px solid #ffffff;
	border-radius: 50%;
	border-left-color: transparent;
	border-bottom-color: transparent;
	position: absolute;
	top: 0;
	left: 0;
	background: none;
	margin: 0;
	-webkit-animation: donut-rotate 1000ms cubic-bezier(0.4, 0, 0.22, 1) infinite;
	animation: donut-rotate 1000ms cubic-bezier(0.4, 0, 0.22, 1) infinite;
}

@-webkit-keyframes clockwise {
	0% {
		-webkit-transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
	}
}
@keyframes clockwise {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}
@-webkit-keyframes donut-rotate {
	0% {
		-webkit-transform: rotate(0);
	}
	50% {
		-webkit-transform: rotate(-140deg);
	}
	100% {
		-webkit-transform: rotate(0);
	}
}
@keyframes donut-rotate {
	0% {
		transform: rotate(0);
	}
	50% {
		transform: rotate(-140deg);
	}
	100% {
		transform: rotate(0);
	}
}

8、获取url 中的参数

备注：假设 当前的url 是 https://editor.csdn.net/md/?articleId=118931302；

 this.articleId=this.getQueryString('articleId')
console.log('created中打印：',this.articleId)//打印：118931302

getQueryString(name) {//获取链接中的参数
  var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
   var r = window.location.search.substr(1).match(reg);
   if (r != null) {
     return decodeURIComponent(r[2]);
   }
   return null;
 },

// 第二种实现方式
export function getQueryObject(url) {
  url = url == null ? window.location.href : url;
  const search = url.substring(url.lastIndexOf("?") + 1);
  const obj = {};
  const reg = /([^?&=]+)=([^?&=]*)/g;
  search.replace(reg, (rs, $1, $2) => {
    const name = decodeURIComponent($1);
    let val = decodeURIComponent($2);
    val = String(val);
    obj[name] = val;
    return rs;
  });
  return obj;
}

//第三种方式
export function param2Obj(url) {
  const search = decodeURIComponent(url.split("?")[1]).replace(/\+/g, " ");
  if (!search) {
    return {};
  }
  const obj = {};
  const searchArr = search.split("&");
  searchArr.forEach(v => {
    const index = v.indexOf("=");
    if (index !== -1) {
      const name = v.substring(0, index);
      const val = v.substring(index + 1, v.length);
      obj[name] = val;
    }
  });
  return obj;
}

9、监控键盘的事件

//将 keyDown() 方法在 mounted 生命周期中调用即可
mounted() {
    this.keyDown();
  },
// 监听键盘
    keyDown() {
      document.onkeydown = e => {
        console.log("键盘事件", e);
        //事件对象兼容
        let e1 =
          e || event || window.event || arguments.callee.caller.arguments[0];
        //键盘按键判断:左箭头-37;上箭头-38；右箭头-39;下箭头-40
        //左
        if (e1 && e1.keyCode == 37) {
          // 按下左箭头
        } else if (e1 && e1.keyCode == 39) {
          // 按下右箭头
        }
      };
    },

10、搜索结果高亮功能—不区分大小写显示

function heightLight(string,keyword) {
      let reg = new RegExp(keyword, "gi");
      string = string.replace(reg, function(txt) {
        return `${txt}`;
      });
      return string;
    }

11、文本转语音，浏览器阅读

var msg = new SpeechSynthesisUtterance("你好呀");
console.log(msg);
window.speechSynthesis.speak(msg);

12、获取鼠标选中的文本

 getSelectionText() {
	if(window.getSelection) {
		return window.getSelection().toString();
	} else if(document.selection && document.selection.createRange) {
		return document.selection.createRange().text;
	}
	return '';
}

13、根据正则截取字符串

如：“大家好，我是[停顿：0.5秒]佩奇”；
需要将 中括号以及中间内容替换成 空。

let str="大家好，我是[停顿：0.5秒]佩奇";
let reg = /\[停顿：(\d+).(\d+)秒\]/;
let newStr = str.replace(reg, "");
console.log("替换后的新值：",newStr);//大家好，我是佩奇

14、用CSS实现三角符号

口诀：盒子宽高均为零，三面边框皆透明。

div:after{
    position: absolute;
    width: 0px;
    height: 0px;
    content: " ";
    border-right: 100px solid transparent;
    border-top: 100px solid #ff0;
    border-left: 100px solid transparent;
    border-bottom: 100px solid transparent;
}

15、鼠标悬浮时以动画的形式放大盒子

	transition: all 0.5s;
    transform: scale(1.1);

16、隐藏滚动条

.app-transcribe::-webkit-scrollbar {
  display: none;
}

17、修改滚动条样式

 	&::-webkit-scrollbar {
      width: 6px;
      height: 6px;
      background: transparent;
    }
    &:hover::-webkit-scrollbar {
      display: block;
      width: 6px;
      height: 6px;
      background: transparent;
    }
    &:hover::-webkit-scrollbar-thumb {
      width: 4px;
      height: 50px;
      border-radius: 3px;
      background: #c1c1c1;
    }

    &:hover::-webkit-scrollbar-track {
      padding-left: 3px;
      width: 10px;
      border-left: 1px solid #dcdfe6;
      background: #ffffff;
      // box-shadow: inset 0 0 10px 10px #dcdfe6;
      border: solid 3px transparent;
    }

18、vue 自定义指令–滚动加载

import Vue from "[email protected]@vue";

Vue.directive("loadmore", {
  bind(el, binding) {
    const selectWrap = el.querySelector(".el-table__body-wrapper");
    selectWrap.addEventListener("scroll", function() {
      let sign = 1;
      const scrollDistance =
        this.scrollHeight - this.scrollTop - this.clientHeight;
      // console.log("滚动条的距离：", scrollDistance);
      if (scrollDistance <= sign) {
        binding.value();
      }
    });
  }
});

19、正则表达式

// 首字母大小
export function titleCase(str) {
  return str.replace(/( |^)[a-z]/g, L => L.toUpperCase());
}

// 下划转驼峰
export function camelCase(str) {
  return str.replace(/-[a-z]/g, str1 => str1.substr(-1).toUpperCase());
}

export function isNumberStr(str) {
  return /^[+-]?(0|([1-9]\d*))(\.\d+)?$/g.test(str);
}
//#号之间的内容替换为下划线
export function replaceUnderline(str) {
  if (!str) {
    return;
  }
  str = str.replace(/#(.*?)#/g, "____");
  return str;
}
// #号换为空格
export function replaceSpace(str) {
  if (!str) {
    return;
  }
  let reg = new RegExp("#", "g");
  let newMsg = str.replace(reg, " ");
  return newMsg;
}
// '#'号不能超过三对
export function limitFrequency(str) {
  if (
    str.toString(2).match(/#/g).length == 1 ||
    str.toString(2).match(/#/g).length == 3 ||
    str.toString(2).match(/#/g).length == 5
  ) {
    Message.error("'#'必须出现一对一对出现!");
  } else if (str.toString(2).match(/#/g).length > 6) {
    Message.error("'#'最多不能超过三对!");
  }
}
// 提取#之间的内容
export function extract(str) {
  let regex = /#(.*?)#/g;
  let currentResult;
  let results = [];
  while ((currentResult = regex.exec(str)) !== null) {
    results.push(currentResult[1]);
  }
  let reg = new RegExp(",", "g");
  let newMsg = JSON.stringify(results.toString()).replace(reg, "#");
  let solutionanswer = newMsg.replace(/^"|"$/g, "");
  return solutionanswer;
}
//  提示#只能出现3对
export function CropDialogueTo(str) {
  let strLength = str.toString(2).match(/#/g).length;
  if (strLength % 2 == 0 && strLength <= 6) {
    let answer = extract(str);
    return answer;
  } else if (strLength % 2 == 1 && strLength <= 6) {
    Message.error("'#'必须出现一对一对出现!");
    let answer = extract(str);
    return answer;
  } else if (strLength > 6) {
    Message.error("'#'最多不能超过三对!");
  }
}
// 数字格式化
export function toThousands(num) {
  return (num || 0).toString().replace(/(\d)(?=(?:\d{3})+$)/g, "$1,");
}
// 去除字符串中的空格和回车符

 export function clearSpace(num) {
  return (num || 0).toString().replace( /(^\s*)|(\s*$)|[\r\n]/g, "");
}

20、导出文件流 fileStream 文件流 name 文件名称带后缀

// 导出文件 fileStream 文件流 name 文件名称带后缀
export function exportFile(fileStream, name) {
  let blob = new Blob([fileStream], {
    type:
      "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8"
  });
  let downloadElement = document.createElement("a");
  let href = window.URL.createObjectURL(blob);
  downloadElement.href = href;
  downloadElement.download = name; // xxx.xls/xxx.xlsx
  document.body.appendChild(downloadElement);
  downloadElement.click();
  document.body.removeChild(downloadElement);
  window.URL.revokeObjectURL(href);
}

21、根据光标位置对字符串进行拆分

// 获取光标位置拆分2段 参数Dom节点id
export function cursorSplit(domId) {
  // //其他节点根据光标位置拆分
  // const selection = getSelection();
  // const cursor = selection.getRangeAt(0).startOffset;
  // const el = document.getElementById(domId);
  // const list = [];
  // const a = el.innerText.slice(0, cursor);
  // const b = el.innerText.slice(cursor);
  // list.push(a);
  // list.push(b);
  // return list;
  // 输入框根据光标位置拆分
  const elInput = document.getElementById(domId);
  const cursor = elInput.selectionStart;
  if (!cursor) return;
  const list = [];
  const a = elInput.value.slice(0, cursor);
  const b = elInput.value.slice(cursor);
  list.push(a);
  list.push(b);
  return list;
}

22、根据开始结束位置标注(gaoliang)字符串子串

remarkStr() {
      let dataStr =
        "Today is a nice day. is Are you ok?Today is a nice day. is Are you ok?Today is a nice day. is Are you ok?";
      let list = [
        { startIndex: 2, endIndex: 5 },
        { startIndex: 7, endIndex: 9 },
        { startIndex: 20, endIndex: 25 },
        { startIndex: 40, endIndex: 55 },
        { startIndex: 60, endIndex: 65 }
      ];
      let wordList = [];
      let str1 = dataStr.slice(0, list[0].startIndex);
      wordList.push(str1);
      let str2 = `${dataStr.slice(
        list[0].startIndex,
        list[0].endIndex
      )}`;
      wordList.push(str2);
      for (let i = 1; i < list.length; i++) {
        let str1 = dataStr.slice(list[i - 1].endIndex, list[i].startIndex);
        wordList.push(str1);
        let str2 = `${dataStr.slice(
          list[i].startIndex,
          list[i].endIndex
        )}`;
        wordList.push(str2);
      }
      let str3 = dataStr.substring(list[list.length - 1].endIndex);
      wordList.push(str3);
      console.log("word--->", wordList, wordList.join(""));
    },

23、CSS 强制换行

word-break: break-all;// 只对英文起作用，以字母作为换行依据。
word-wrap: break-word; //只对英文起作用，以单词作为换行依据。
white-space: pre-wrap; //只对中文起作用，强制换行。

24、vue 移动端项目，input 框被遮挡无法操作解决方案

let inputDom = document.getElementById("inputDom" + inx);
setTimeout(() => {
  inputDom.scrollIntoView(true); //关键行
  document.getElementById("inputDom" + inx).focus();
}, 1);

25、vue 2.x项目，npm install 时 报错，权限问题解决方法为： npm install --unsafe-perm=true --allow-root

26、Vue 中拖拽实现更换列表的顺序

<div class="itemBox" 
     v-for="(row,inx) in coursewareList" 
     :key="inx"
     draggable="true"
     @dragstart="handleDragStart($event, row)"
     @dragover.prevent="handleDragOver($event, row)"
     @dragenter="handleDragEnter($event, row)"
     @dragend="handleDragEnd($event, row)"
  >
 </div>

data() {
	return {
		ending: null,// 拖动结束后放置的位置
     	 dragging: null,//存放拖拽的元素
	}
},
methods:{
	/**
     * 拖拽盒子进行位置调整
     */
    handleDragStart(e, item) {
      console.log(e)
      this.dragging = item;
    },
    handleDragEnd() {//e, item
      if (this.ending.wareId === this.dragging.wareId) {
        return;
      }
      let newItems = [...this.coursewareList];
      const src = newItems.indexOf(this.dragging);
      const dst = newItems.indexOf(this.ending);
      newItems.splice(src, 1, ...newItems.splice(dst, 1, newItems[src]));
  
      this.coursewareList = newItems;
      let params = [];
      this.coursewareList.forEach(el => {
        params.push(el.wareId)
      })
      // 走后端接口，最终将真正的顺序存储到数据库中
      moveCourseware(params).then(res => {
        if(res.code !== 200) {
          this.$message.error(res.msg);
        } 
        // else {
        //   this.$message.success("操作成功！");
        // }
      })
      this.$nextTick(() => {
        this.dragging = null;
        this.ending = null;
      });
    },
    handleDragOver(e) {
      // 首先把div变成可以放置的元素，即重写dragenter/dragover
      // 在dragenter中针对放置目标来设置
      e.dataTransfer.dropEffect = "move";
    },
    handleDragEnter(e, item) {
      // 为需要移动的元素设置dragstart事件
      e.dataTransfer.effectAllowed = "move";
      this.ending = item;
    },
}

27、Flex 布局，使用 flex=1 占满盒子

描述： 右侧可以展开与收缩，宽度会改变，左侧的内容需要占满剩余的空间。
设置 左侧 设置 flex =1时候，width 需要设置为 0.否则右侧展开折叠再展开的时候，会超出屏幕范围。

28、Vue 中查找替换功能实现

html 结构：

 <div class="searchReplace">
    <div class="subTitle">查找内容div>
    <el-input
      style="width: 100%"
      placeholder="请输入需要更替掉的译文"
      v-model="searchTxt"
      @input="searchInputHandle"
    >
      <div slot="suffix" class="suffixBox">
        <div class="lastNextStyle">
          <i
            class="el-input__icon el-icon-caret-left"
            @click="lastSearch"
          >i>
          <span
            >{{ searchIndex + 1 }}<span>/span
            >{{ searchList.length }}span
          >
          <i
            @click="next()"
            class="el-input__icon el-icon-caret-right"
          >i>
        div>
      div>
    el-input>
    <div class="subTitle flex-row marginTop10">
      <span>区分大小写span>
      <el-switch
        size="small"
        active-color="#005FFF"
        v-model="caseSensitive"
        @change="changeCheck"
      >el-switch>
    div>
    <div class="subTitle">查找内容div>
    <el-input
      style="width: 100%"
      placeholder="请输入替换后的内容"
      v-model="replaceTxt"
    >el-input>
    <div class="marginTop10 flex-row flex-end">
      <div class="commonBtn hasBgBtn" @click="replaceAllHandle()">
        全部替换
      div>
      <div
        class="commonBtn defalutBorderBtn"
        style="margin-left: 10px"
        @click="replaceHandle"
      >
        替换
      div>
    div>
  div>

css 样式：

// 查找替换
.searchReplace {
  padding: 24px;
  box-sizing: border-box;
  .flex-end {
    justify-content: flex-end;
  }
  .subTitle {
    font-size: 14px;
    font-family: Source Han Sans CN-Medium, Source Han Sans CN;
    font-weight: 500;
    color: #484b4e;
    margin-bottom: 8px;
    span {
      margin-right: 8px;
    }
  }
  .marginTop10 {
    margin-top: 10px;
  }
}
.suffixBox {
  display: flex;
  flex-direction: row;
  align-items: center;
  .lastNextStyle {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    span {
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #1c2648;
    }
    i {
      cursor: pointer;
      color: #dbdbdb;
      font-size: 16px;
    }
  }
}
// 下面的是需要放到 非 scope 内
.actTxtBg {
  background: #ffe8be;
}
.selectTxtBg {
  background: #ffcf78;
} 

vue 的钩子中代码

data() {
	return {
	  caseSensitive: false, // 是否区分大小写
      searchTxt: null, // 查询的译文文本
      replaceTxt: null, // 替换的译文文本
      searchList: [], // 搜索到的数据列表
      searchIndex: -1, // 当前查找到的下标
	}
},
methods: {
// 查找input事件
// answerText  是查找时显示的 html 字符串， answer 是输入框的内容
    searchInputHandle(value) {
      //每次查找都初始化下标
      this.searchIndex = -1;
      this.selectList = [];
      if (!value) {
        this.tableData.forEach((el) => {
          el.isEditTxt = false;
          el.answerText = el.answer;
        });
        this.searchList = [];
      } else {
        this.onSearch();
      }
    },
    //开启大小写重新查找
    changeCheck() {
      this.onSearch();
    },
    // 查找译文内容
    onSearch() {
      this.searchList = [];
      let that = this;
      //区分大小写
      let searchTxt = this.searchTxt;
      searchTxt = this.caseSensitive ? searchTxt : searchTxt.toLowerCase();
      searchTxt = this.caseSensitive ? searchTxt : searchTxt.toLowerCase();
      that.tableData.forEach((el, i) => {
        el.isEditTxt = false; //隐藏输入框
        el.answerText = el.answer; //高亮之前初始化原始值
        if (
          el.answer &&
          (el.answer.includes(searchTxt) ||
            el.answer.toLowerCase().includes(searchTxt))
        ) {
          el.answerText = that.heightLight(el.answerText);
          if (searchTxt) {
            // 开始记录对象和位置
            let idx;
            idx = el.answer.indexOf(searchTxt);
            if (!this.caseSensitive) {
              idx = el.answer.toLowerCase().indexOf(searchTxt);
            }
            while (idx !== -1) {
              that.searchList.push([i, idx, "answer"]);
              idx = el.answer.indexOf(searchTxt, idx + searchTxt.length);
            }
          }
        }
      });
      if (searchTxt) {
        this.next();
      }
    },
    // 查找下一处
    next() {
      if (!this.searchTxt) return;
      //初始化查找下标
      if (this.searchIndex >= this.searchList.length - 1) {
        // this.$message.warning("当前已查找到最后一个");
        this.searchIndex = -1;
        // return;
      }
      this.searchIndex++;
      //查找下一个之前把包含查找内容的句段高亮
      this.tableData.forEach((el) => {
        el.answerText = el.answer; //高亮之前初始化原始值
        el.answerText = this.heightLight(el.answerText);
      });
      let find = this.searchList[this.searchIndex]; //查找的对象
      // console.log("find", find);
      if (find) {
        let inx = find[0]; //下标
        let start = find[1]; //开始位置
        let end = find[1] + this.searchTxt.length; //结束位置

        if (find[2] === "answer") {
          let answerText = this.tableData[inx].answer; //不添加标签的原文字
          this.tableData[inx].answerText = this.replacepos(
            answerText,
            start,
            end,
            `${this.searchTxt}`
          );
        }
      }
    },
    // 查找上一处
    lastSearch() {
      if (!this.searchTxt) return;
      //初始化查找下标
      if (this.searchIndex <= 0) {
        this.$message.warning("当前已查找到第一个");
        // this.searchIndex = this.searchList.length - 1;
        return;
      }
      this.searchIndex--;
      //查找下一个之前把包含查找内容的句段高亮
      this.tableData.forEach((el) => {
        el.answerText = el.answer; //高亮之前初始化原始值
        el.answerText = this.heightLight(el.answerText);
      });
      let find = this.searchList[this.searchIndex]; //查找的对象
      if (find) {
        let inx = find[0]; //下标
        let start = find[1]; //开始位置
        let end = find[1] + this.searchTxt.length; //结束位置
        if (find[2] === "answer") {
          let answerText = this.tableData[inx].answer; //不添加标签的原文字
          this.tableData[inx].answerText = this.replacepos(
            answerText,
            start,
            end,
            `${this.searchTxt}`
          );
        }
      }
    },
    //区分大小写的高亮显示
    heightLight(string) {
      if (!string) return;
      let reg = new RegExp(this.searchTxt, "gi");
      let reg2 = new RegExp(this.searchTxt, "g");
      string = string.replace(this.caseSensitive ? reg2 : reg, function (txt) {
        return `${txt}`;
      });
      return string;
    },
    //替换指定位置字符串-原文本、开始位置、结束位置、替换文本
    replacepos(text, start, end, replacetext) {
      return text.substring(0, start) + replacetext + text.substring(end);
    },
    // 替换事件
    replaceHandle() {
      if (!this.replaceTxt) return;
      let find = this.searchList[this.searchIndex]; //替换的对象
      if (find) {
        let inx = find[0]; //下标
        let start = find[1]; //开始位置
        let end = find[1] + this.searchTxt.length; //结束位置
        if (find[2] === "answer") {
          let text = this.tableData[inx].answer; //不添加标签的原文字
          let newTxt = this.replacepos(text, start, end, this.replaceTxt); //替换后的文本
          this.tableData[inx].answer = this.tableData[inx].answerText = newTxt;
        }
        this.searchIndex--;
        this.onSearch();
        this.saveAnswerStatus(this.tableData[inx], inx);
      }
    },
    // 全部替换事件
    replaceAllHandle() {
      if (!this.replaceTxt) {
        return;
      }
      this.tableData.forEach((el, inx) => {
        el.segStatus = true;
        if (el.answer) {
          el.answer = el.answer.replaceAll(this.searchTxt, this.replaceTxt);
          el.answerText = el.answerText.replaceAll(
            `${this.searchTxt}`,
            this.replaceTxt
          );
          el.answerText = el.answerText.replaceAll(
            `${this.searchTxt}`,
            this.replaceTxt
          );
          this.saveAnswerStatus(el, inx);
        }
      });
      this.searchIndex = -1;
      this.searchTxt = "";
      this.replaceTxt = "";
      this.onSearch();
    },
}

29、实现一个长字符串中包含数组内容部分高亮显示，数组中的字符串有包含的情况。

例： let str = “you are my good friend!”, answerItemList= [“you”,“good”,"good friend];
要求： 需要将数组中的内容在 str 中进行高亮显示。
代码实现：

let ansText= "you are my good friend!", answerItemList= ["you","good","good friend];
let list = [],
 temStr = "",
 flag = true,
 idex = 0,
 specialChar = "$$";
if (answerItemList.length) {
 flag = true;
 idex = 0;
 answerItemList.forEach((ite) => {
   let start = el.ansText.indexOf(ite);
   list.push({
     startIndex: start,
     endIndex: start + ite.length,
     txt: `${ite}`,
   });
 });
 for (let i = 0; i < ansText.length; i++) {
   temStr += specialChar + i + ansText[i];
 }
 list.forEach((it) => {
   let strIndex = temStr.indexOf(specialChar + it.startIndex);
   if (strIndex !== -1) {
     let strList = [];
     strList.push(temStr.slice(0, strIndex));
     strList.push(temStr.slice(strIndex));
     temStr = `${strList[0]}${strList[1]}`;
   }
 });
 list.forEach((it) => {
   let strIndex = temStr.indexOf(specialChar + it.endIndex);
   if (strIndex !== -1) {
     let strList = [];
     strList.push(temStr.slice(0, strIndex));
     strList.push(temStr.slice(strIndex));
     temStr = `${strList[0]}${strList[1]}`;
   }
 });
 while (flag) {
   if (temStr.indexOf(specialChar + idex) != -1) {
     temStr = temStr.replace(specialChar + idex, "");
   } else {
     flag = false;
   }
   idex++;
 }
ansTextHtml = temStr;
console.log(temStr);

30、前端（vue）导出 table 中的数据（xlsx）

1、安装依赖

npm i xlsx -D

2、使用插件

import { utils, writeFileXLSX } from 'xlsx';

/**
 * 导出当前页面前端数据，避免插入数据库失败时，客户数据未保存问题
 */
 outputExcel() {

    // 将表单数据转为sheet数据, xlsxData 为数组对象， key 是导出的excel 文件的表头
    let xlsxData = [];
    this.tableData.forEach(el => {
      xlsxData.push({
        id: el.id,
        "开始时间": el.startTimecode,
        "结束时间": el.endTimecode,
        "原文": el.transcribedSrcText,
        "第一种译文": el.firstTgtText,
        "第二种译文": el.secondTgtText,
      })
    })
    const ws = utils.json_to_sheet(xlsxData);
    // 生成一个workBook
    const wb = utils.book_new();
    // 将sheet数据加到workBook中
    utils.book_append_sheet(wb, ws, 'Data');
    // 写入数据到xlsx并且导出文件
    writeFileXLSX(wb, `当前页面数据存储.xlsx`)
 },

31、前端（vue）在线预览文件（后端给文件地址）

方法一： https://view.officeapps.live.com/op/view.aspx?src=

方法二：
https://view.xdocin.com/view?src=

注意： src 后面紧跟的地址就是外网可访问的文件地址

32、js 中正则表达式 如何替换除 p 标签以外的所有p字母，原来的 p标签保持原样不被修改

var html = '
这是一个例子
仅用于演示
p标签以外的p字母需要被替换
';
var replacedHtml = html.replace(/(<\/?p[^>]*>|p)/gi, function(match, p1) {
// match 和 p1 的值是一致的
  if (p1) {
    return match;
  } else {
    return match.replace(/p/gi, '替换');
  }
});
console.log(replacedHtml);

33、删除某一个文件夹下所有文件的命令

首先定位到需要被删除的文件夹
在命令窗口执行命令 DEL /F/Q/S *.* > NUL 即可

34、表格布局使 tr 标签中的 td 按照最一行中的最高的td 对齐

table-layout: fixed;
border-collapse: separate;

35、网页版适配手机： html ＜meta＞标签 name=“viewport“ content 详解

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

width:控制viewport的大小，可以指定的一个值，如果600,或者特殊的值，如device-width为设备
的宽度（单位为缩放为100%时的CSS的像素）。
height:和width相对应，指定高度。
initia-scale:初始缩放比例，也即是当页面第一次load的时候缩放比例。
maximum-scale:允许用户缩放到的最大比例。
minimum-scale:允许用户缩放到的最小比例。
user-scalable:用户是否可以手动缩放。

36、关闭谷歌chrome 浏览器的 cors 策略方法

地址栏输入 chrome://flags/#block-insecure-private-network-requests
找到图中的一项设置后修改为 Disabled ，点击 relaunch 按钮重启就好了，本方法适用于 公网ip访问 私有 ip 地址。