目錄

• • • 1、文字溢出顯示三個點
    • 2、input 框光標左邊距
    • 3、水平垂直居中常用寫法
    • • 1）position屬性實現(xiàn)
      • 2）flex屬性實現(xiàn)
    • 4、input框消除空格
    • 5、純css實現(xiàn)箭頭
    • 6、箭頭在上面的氣泡樣式，可以根據自己的實際設計調整
    • 7、實現(xiàn)加載中的樣式不停轉圈
    • • 備注：view組件是uniapp 中的，我們在其他地方寫的時候也只需要把view替換成 div 這類似的 標簽即可。
    • 8、獲取url 中的參數
    • • 備注：假設 當前的url 是 https://editor.csdn.net/md/?articleId=118931302；
    • 9、監(jiān)控鍵盤的事件
    • 10、搜索結果高亮功能---不區(qū)分大小寫顯示
    • 11、文本轉語音，瀏覽器閱讀
    • 12、獲取鼠標選中的文本
    • 13、根據正則截取字符串
    • 14、用CSS實現(xiàn)三角符號
    • 15、鼠標懸浮時以動畫的形式放大盒子
    • 16、隱藏滾動條
    • 17、修改滾動條樣式
    • 18、vue 自定義指令--滾動加載
    • 19、正則表達式
    • 20、導出文件流 fileStream 文件流 name 文件名稱帶后綴
    • 21、根據光標位置對字符串進行拆分
    • 22、根據開始結束位置標注(gaoliang)字符串子串
    • 23、CSS 強制換行
    • 24、vue 移動端項目，input 框被遮擋無法操作解決方案
    • 25、vue 2.x項目，npm install 時 報錯，權限問題解決方法為： `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 框光標左邊距

input{text-indent:15px }

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

1）position屬性實現(xiàn)

position: absolute; left: 50%; transform: translateX(-50%);/* 垂直居中就設置 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)箭頭

再也不用擔心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、實現(xiàn)加載中的樣式不停轉圈

備注：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)//打印：118931302getQueryString(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;}, // 第二種實現(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 生命周期中調用即可 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、搜索結果高亮功能—不區(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、文本轉語音，瀏覽器閱讀

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實現(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、鼠標懸浮時以動畫的形式放大盒子

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、正則表達式

// 首字母大小 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("'#'必須出現(xiàn)一對一對出現(xiàn)!");} 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; } // 提示#只能出現(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("'#'最多不能超過三對!");} } // 數字格式化 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.xlsxdocument.body.appendChild(downloadElement);downloadElement.click();document.body.removeChild(downloadElement);window.URL.revokeObjectURL(href); }

21、根據光標位置對字符串進行拆分

// 獲取光標位置拆分2段 參數Dom節(jié)點id export function cursorSplit(domId) {// //其他節(jié)點根據光標位置拆分// 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 = `<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;// 只對英文起作用，以字母作為換行依據。 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 中拖拽實現(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,// 拖動結束后放置的位置dragging: null,//存放拖拽的元素} }, methods:{/*** 拖拽盒子進行位置調整*/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)})// 走后端接口，最終將真正的順序存儲到數據庫中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 中查找替換功能實現(xiàn)

html 結構：

<div class="searchReplace"><div class="subTitle">查找內容</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">查找內容</div><el-inputstyle="width: 100%"placeholder="請輸入替換后的內容"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 內 .actTxtBg {background: #ffe8be; } .selectTxtBg {background: #ffcf78; }

vue 的鉤子中代碼

data() {return {caseSensitive: false, // 是否區(qū)分大小寫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;//區(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;//初始化查找下標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,`<span class="selectTxtBg">${this.searchTxt}</span>`);}}},// 查找上一處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,`<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;},//替換指定位置字符串-原文本、開始位置、結束位置、替換文本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(`<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();}, }

總結

以上是生活随笔為你收集整理的vue开发常用css，js（持续更新）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。