1、UTF-8解碼
decodeURIComponent()//解碼2、URL編碼與解碼
var url = "黃粱一夢 大夢一場空";
console.log(escape(url)); // 編碼
var url1 = escape(url)
console.log(unescape(url1)); // 解碼3、去掉哈希值 美化后的hash模式 路徑中不包含'#'
對于我們前端 非常簡單
在路由中 mode型別 改成history即可 但是實際上線的服務器需要后端配合 需要服務端統一4、檢測字串方法
startsWith() 檢索字串是否以某個字符開始
endsWith() 檢索字串是否以某個字符結尾
includes() 檢索字串是否包含某個字符5、列印功能
// 列印按鈕
<el-button style="float:right" type="primary">列印</el-button>
// 1、安裝插件 利用vue-print-nb列印
yarn add vue-print-nb
// 2、全域注冊該插件 掛載到Vue實體中
import Print from 'vue-print-nb' // 列印插件
Vue.use(Print)
// 3、掛載Vue實體之后 使用該插件 有一個指令供使用
v-print
// 4、具體使用
<el-button v-print="{ id: 'printbox' }" type="primary" size="small">列印</el-button>
// 5、給要列印的盒子指定 id
<div id="printbox"> 哪一塊需要列印 就在父元素盒子上加 指定id 和button按鈕的v-指令 相互對應6、生成二維碼
二維碼功能將來作業中也很常見, 我們需要根據資訊 或者 鏈接地址, 生成一個二維碼! 比如: 做地址分享, 做手機圖片預覽等
// 需求：點擊頭像 跳出彈窗 彈窗里裝著頭像生成的二維碼
1、安裝生成二維碼的插件 yarn add qrcode
// 插件的用法 QrCode.toCanvas(dom, info)
// 第一個引數 dom元素(標簽) 第二個引數上傳資訊
2、準備彈層
<!-- 分享展示, 預覽的二維碼的彈層 -->
<el-dialog title="頭像二維碼" :visible="showCodeDialog" @close="showCodeDialog = false">
<el-row type="flex" justify="center">
<canvas ref="myCanvas" /> // 拿到dom標簽
</el-row>
</el-dialog>
3、注冊點擊事件 彈出彈出層
<el-table-column label="頭像" prop="staffPhoto">
<template #default="{ row }">
<img v-imgerror="defaultImg" class="staff" :src="row.staffPhoto" alt="" @click="clickShowCodeDialog(row.staffPhoto)"> // 點擊事件
</template>
</el-table-column>
4、事件函式處理 注意這里要使用！！async和await 和 this.$nextTick()方法 因為vue異步處理和dom更新原因
// 點擊 頭像預覽二維碼事件
async clickShowCodeDialog(src) {
if (!src) return this.$message('請上傳頭像后再生成二維碼')
this.showCodeDialog = true
await this.$nextTick()
QrCode.toCanvas(this.$refs.myCanvas, src) // 生成二維碼
}7、臨時路徑地址
例如：面試題 可以做一個不經過服務器上傳，純前端實作照片上傳的本地預覽嗎？
使用URL.createObjectURL()創建一個圖片臨時路徑 路徑是以blob開頭的
所謂臨時路徑 如果頁面關閉 那么這個圖片路徑同時會失效
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 面試題: 可以做一個不經過服務器上傳, 純前端實作頭像上傳的本地預覽么?? 可以 -->
<input type="file">
<img src="" alt="">
<script>
const ipt = document.querySelector('input')
const img = document.querySelector('img')
ipt.addEventListener('change', function(e){
console.log(e.target.files[0]) // 1. 上傳的圖片檔案物件
// URL.createObjectURL(e.target.files[0]) //
// 2. 使用URL.createObjectURL()創建一個圖片臨時路徑, 路徑是以blob開頭的
// 臨時路徑: 創建這個臨時路徑的頁面關閉后, 這個路徑也就失效了
// console.log(URL.createObjectURL(e.target.files[0])) // 臨時路徑地址
const url = URL.createObjectURL(e.target.files[0])
// 3. 將img的src屬性賦值為臨時路徑地址
img.src = url
})
</script>
</body>
</html>8、input自動獲取焦點
在標簽上面直接添加autofocus樹形即可
<input type="text" autofocus />
在vue中或者使用 ref和$refs獲取input標簽 然后添加focus方法即可
<input type="text" :ref='aaaa' />
this.$refs.aaaa.focus()9、全域過濾器處理時間
// 1. 匯入Vue
import Vue from 'vue'
// 匯入格式化時間的模塊
import moment from 'moment'
// 定義全域的時間過濾器
Vue.filter('dateFormat',(v) => {
// 在過濾器的處理函式中，最后，必須 return 一個東西，這樣，才是一個合法的過濾器
return moment(v).format('YYYY-MM-DD')
})
<span>發表時間：{{ item.add_time | dateFormat }}</span>
也可以自定義：{{ item.add_time | dateFormat }}10、禁用輸入框輸入處理
<!-- 控制部門只能選擇 不能輸入
disabled 禁用
readonly 只讀
v-model 改成 :value系結 input是一個受控組件
-->
<el-input
:value="formData.departmentName"
style="width:50%"
placeholder="請選擇部門"
readonly
@click.native="showDepts"
/>偷閑發個文章~
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/304110.html
標籤：其他
上一篇：HTTP 快取機制
下一篇：js判斷哪行資料為空