vue开发常用css，js（持续更新）
生活随笔
收集整理的這篇文章主要介紹了
vue开发常用css，js（持续更新）
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
目錄
- 1、文字溢出顯示三個點
- 2、input 框光標(biāo)左邊距
- 3、水平垂直居中常用寫法
- 1）position屬性實現(xiàn)
- 2）flex屬性實現(xiàn)
- 4、input框消除空格
- 5、純css實現(xiàn)箭頭
- 6、箭頭在上面的氣泡樣式，可以根據(jù)自己的實際設(shè)計調(diào)整
- 7、實現(xiàn)加載中的樣式不停轉(zhuǎn)圈
- 備注：view組件是uniapp 中的，我們在其他地方寫的時候也只需要把view替換成 div 這類似的 標(biāo)簽即可。
- 8、獲取url 中的參數(shù)
- 備注：假設(shè) 當(dāng)前的url 是 https://editor.csdn.net/md/?articleId=118931302；
- 9、監(jiān)控鍵盤的事件
- 10、搜索結(jié)果高亮功能---不區(qū)分大小寫顯示
- 11、文本轉(zhuǎn)語音，瀏覽器閱讀
- 12、獲取鼠標(biāo)選中的文本
- 13、根據(jù)正則截取字符串
- 14、用CSS實現(xiàn)三角符號
- 15、鼠標(biāo)懸浮時以動畫的形式放大盒子
- 16、隱藏滾動條
- 17、修改滾動條樣式
- 18、vue 自定義指令--滾動加載
- 19、正則表達(dá)式
- 20、導(dǎo)出文件流 fileStream 文件流 name 文件名稱帶后綴
- 21、根據(jù)光標(biāo)位置對字符串進行拆分
- 22、根據(jù)開始結(jié)束位置標(biāo)注(gaoliang)字符串子串
- 23、CSS 強制換行
- 24、vue 移動端項目，input 框被遮擋無法操作解決方案
- 25、vue 2.x項目，npm install 時 報錯，權(quán)限問題解決方法為： `npm install --unsafe-perm=true --allow-root`
- 26、Vue 中拖拽實現(xiàn)更換列表的順序
- 27、Flex 布局，使用 flex=1 占滿盒子
- 28、Vue 中查找替換功能實現(xiàn)
1、文字溢出顯示三個點
text-overflow: ellipsis; overflow: hidden; white-space: nowrap;2、input 框光標(biāo)左邊距
input{text-indent:15px }3、水平垂直居中常用寫法
1）position屬性實現(xiàn)
position: absolute; left: 50%; transform: translateX(-50%);/* 垂直居中就設(shè)置 top*/ top: 50%; transform: translateY(-50%);2）flex屬性實現(xiàn)
display: flex; justify-content: center;//水平居中 align-items: center;//垂直居中4、input框消除空格
這行代碼直接寫在input框上面，只要input 中的value出現(xiàn)了空格就會自動消除
onkeyup="this.value=this.value.replace(/[, ]/g,'')"5、純css實現(xiàn)箭頭
再也不用擔(dān)心iconfont格式的箭頭顯示不出來的問題了。
當(dāng)然，下面的rpx 單位是uniapp 的響應(yīng)式單位。可以換成px作為你自己的單位。
類名.down 就是向下的箭頭，可以根據(jù)，自己想要的箭頭指向進行改動，也就是利用旋轉(zhuǎn)的方式哦
6、箭頭在上面的氣泡樣式，可以根據(jù)自己的實際設(shè)計調(diào)整
.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、實現(xiàn)加載中的樣式不停轉(zhuǎn)圈
備注：view組件是uniapp 中的，我們在其他地方寫的時候也只需要把view替換成 div 這類似的 標(biāo)簽即可。
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 中的參數(shù)
備注：假設(shè) 當(dāng)前的url 是 https://editor.csdn.net/md/?articleId=118931302；
this.articleId=this.getQueryString('articleId') console.log('created中打印：',this.articleId)//打印：118931302getQueryString(name) {//獲取鏈接中的參數(shù)var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");var r = window.location.search.substr(1).match(reg);if (r != null) {return decodeURIComponent(r[2]);}return null;}, // 第二種實現(xiàn)方式 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、監(jiān)控鍵盤的事件
//將 keyDown() 方法在 mounted 生命周期中調(diào)用即可 mounted() {this.keyDown();}, // 監(jiān)聽鍵盤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、搜索結(jié)果高亮功能—不區(qū)分大小寫顯示
function heightLight(string,keyword) {let reg = new RegExp(keyword, "gi");string = string.replace(reg, function(txt) {return `<span style="background:#FFE8BE;">${txt}</span>`;});return string;}11、文本轉(zhuǎn)語音，瀏覽器閱讀
var msg = new SpeechSynthesisUtterance("你好呀"); console.log(msg); window.speechSynthesis.speak(msg);12、獲取鼠標(biāo)選中的文本
getSelectionText() {if(window.getSelection) {return window.getSelection().toString();} else if(document.selection && document.selection.createRange) {return document.selection.createRange().text;}return ''; }13、根據(jù)正則截取字符串
如：“大家好，我是[停頓：0.5秒]佩奇”；
需要將 中括號以及中間內(nèi)容替換成 空。
14、用CSS實現(xiàn)三角符號
口訣：盒子寬高均為零，三面邊框皆透明。
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、鼠標(biāo)懸浮時以動畫的形式放大盒子
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 "_vue@2.6.14@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、正則表達(dá)式
// 首字母大小 export function titleCase(str) {return str.replace(/( |^)[a-z]/g, L => L.toUpperCase()); }// 下劃轉(zhuǎn)駝峰 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); } //#號之間的內(nèi)容替換為下劃線 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("'#'必須出現(xiàn)一對一對出現(xiàn)!");} else if (str.toString(2).match(/#/g).length > 6) {Message.error("'#'最多不能超過三對!");} } // 提取#之間的內(nèi)容 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; } // 提示#只能出現(xiàn)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("'#'必須出現(xiàn)一對一對出現(xiàn)!");let answer = extract(str);return answer;} else if (strLength > 6) {Message.error("'#'最多不能超過三對!");} } // 數(shù)字格式化 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、導(dǎo)出文件流 fileStream 文件流 name 文件名稱帶后綴
// 導(dǎo)出文件 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.xlsxdocument.body.appendChild(downloadElement);downloadElement.click();document.body.removeChild(downloadElement);window.URL.revokeObjectURL(href); }21、根據(jù)光標(biāo)位置對字符串進行拆分
// 獲取光標(biāo)位置拆分2段 參數(shù)Dom節(jié)點id export function cursorSplit(domId) {// //其他節(jié)點根據(jù)光標(biāo)位置拆分// 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;// 輸入框根據(jù)光標(biāo)位置拆分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、根據(jù)開始結(jié)束位置標(biāo)注(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 = `<span style="color:red">${dataStr.slice(list[0].startIndex,list[0].endIndex)}</span>`;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 = `<span style="color:red">${dataStr.slice(list[i].startIndex,list[i].endIndex)}</span>`;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;// 只對英文起作用，以字母作為換行依據(jù)。 word-wrap: break-word; //只對英文起作用，以單詞作為換行依據(jù)。 white-space: pre-wrap; //只對中文起作用，強制換行。24、vue 移動端項目，input 框被遮擋無法操作解決方案
let inputDom = document.getElementById("inputDom" + inx); setTimeout(() => {inputDom.scrollIntoView(true); //關(guān)鍵行document.getElementById("inputDom" + inx).focus(); }, 1);25、vue 2.x項目，npm install 時 報錯，權(quán)限問題解決方法為： npm install --unsafe-perm=true --allow-root
26、Vue 中拖拽實現(xiàn)更換列表的順序
<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,// 拖動結(jié)束后放置的位置dragging: null,//存放拖拽的元素} }, methods:{/*** 拖拽盒子進行位置調(diào)整*/handleDragStart(e, item) {console.log(e)this.dragging = item;},handleDragEnd() {//e, itemif (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)})// 走后端接口，最終將真正的順序存儲到數(shù)據(jù)庫中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中針對放置目標(biāo)來設(shè)置e.dataTransfer.dropEffect = "move";},handleDragEnter(e, item) {// 為需要移動的元素設(shè)置dragstart事件e.dataTransfer.effectAllowed = "move";this.ending = item;}, }27、Flex 布局，使用 flex=1 占滿盒子
描述： 右側(cè)可以展開與收縮，寬度會改變，左側(cè)的內(nèi)容需要占滿剩余的空間。
設(shè)置 左側(cè) 設(shè)置 flex =1時候，width 需要設(shè)置為 0.否則右側(cè)展開折疊再展開的時候，會超出屏幕范圍。
28、Vue 中查找替換功能實現(xiàn)
html 結(jié)構(gòu)：
<div class="searchReplace"><div class="subTitle">查找內(nèi)容</div><el-inputstyle="width: 100%"placeholder="請輸入需要更替掉的譯文"v-model="searchTxt"@input="searchInputHandle"><div slot="suffix" class="suffixBox"><div class="lastNextStyle"><iclass="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>區(qū)分大小寫</span><el-switchsize="small"active-color="#005FFF"v-model="caseSensitive"@change="changeCheck"></el-switch></div><div class="subTitle">查找內(nèi)容</div><el-inputstyle="width: 100%"placeholder="請輸入替換后的內(nèi)容"v-model="replaceTxt"></el-input><div class="marginTop10 flex-row flex-end"><div class="commonBtn hasBgBtn" @click="replaceAllHandle()">全部替換</div><divclass="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 內(nèi) .actTxtBg {background: #ffe8be; } .selectTxtBg {background: #ffcf78; }vue 的鉤子中代碼
data() {return {caseSensitive: false, // 是否區(qū)分大小寫searchTxt: null, // 查詢的譯文文本replaceTxt: null, // 替換的譯文文本searchList: [], // 搜索到的數(shù)據(jù)列表searchIndex: -1, // 當(dāng)前查找到的下標(biāo)} }, methods: { // 查找input事件 // answerText 是查找時顯示的 html 字符串， answer 是輸入框的內(nèi)容searchInputHandle(value) {//每次查找都初始化下標(biāo)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();},// 查找譯文內(nèi)容onSearch() {this.searchList = [];let that = this;//區(qū)分大小寫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;//初始化查找下標(biāo)if (this.searchIndex >= this.searchList.length - 1) {// this.$message.warning("當(dāng)前已查找到最后一個");this.searchIndex = -1;// return;}this.searchIndex++;//查找下一個之前把包含查找內(nèi)容的句段高亮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]; //下標(biāo)let start = find[1]; //開始位置let end = find[1] + this.searchTxt.length; //結(jié)束位置if (find[2] === "answer") {let answerText = this.tableData[inx].answer; //不添加標(biāo)簽的原文字this.tableData[inx].answerText = this.replacepos(answerText,start,end,`<span class="selectTxtBg">${this.searchTxt}</span>`);}}},// 查找上一處lastSearch() {if (!this.searchTxt) return;//初始化查找下標(biāo)if (this.searchIndex <= 0) {this.$message.warning("當(dāng)前已查找到第一個");// this.searchIndex = this.searchList.length - 1;return;}this.searchIndex--;//查找下一個之前把包含查找內(nèi)容的句段高亮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]; //下標(biāo)let start = find[1]; //開始位置let end = find[1] + this.searchTxt.length; //結(jié)束位置if (find[2] === "answer") {let answerText = this.tableData[inx].answer; //不添加標(biāo)簽的原文字this.tableData[inx].answerText = this.replacepos(answerText,start,end,`<span class="selectTxtBg">${this.searchTxt}</span>`);}}},//區(qū)分大小寫的高亮顯示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 `<span class="actTxtBg">${txt}</span>`;});return string;},//替換指定位置字符串-原文本、開始位置、結(jié)束位置、替換文本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]; //下標(biāo)let start = find[1]; //開始位置let end = find[1] + this.searchTxt.length; //結(jié)束位置if (find[2] === "answer") {let text = this.tableData[inx].answer; //不添加標(biāo)簽的原文字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(`<span class="actTxtBg">${this.searchTxt}</span>`,this.replaceTxt);el.answerText = el.answerText.replaceAll(`<span class="selectTxtBg">${this.searchTxt}</span>`,this.replaceTxt);this.saveAnswerStatus(el, inx);}});this.searchIndex = -1;this.searchTxt = "";this.replaceTxt = "";this.onSearch();}, }總結(jié)
以上是生活随笔為你收集整理的vue开发常用css，js（持续更新）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Spring事务和MySQL事务详解面试
- 下一篇： Vue 中 qrcode.vue 生成二