鍵盤事件
- 在
中我們通常通過綁定一個事件,去擷取按鍵的編碼,再通過js
中的event
屬性去獲得編碼keyCode
- 如果我們需要實作固定的鍵才能觸發事件時就需要不斷的判斷,其實很麻煩
let button = document.querySelector('button')
button.onkeyup = function (e) {
console.log(e.key)
if (e.keyCode == 13) {
console.log('我是Enter鍵')
}
}
-
中給一些常用的按鍵提供了别名,我們隻要在事件後加上響應的别名即可vue
-
中常見别名有:vue
、up/向上箭頭
、down/向下箭頭
、left/左箭頭
、right/右箭頭
、space/空格
、tab/換行
、esc/退出
、enter/回車
delete/删除
// 隻有按下Enter鍵時才會執行 send 方法
<input v-on:keyup.enter="send" type="text">
- 對于
中未提供别名的鍵,可以使用原始的Vue
值去綁定,所謂key
值就是key
所獲得的值event.key
- 如果
值是單個字母的話直接使用即可,如果是由多個單詞組成的駝峰命名,就需要将其拆開,用key
連接配接-
// 隻有按下q鍵時才會執行send方法
<input v-on:keyup.Q="send" type="text">
// 隻有按下capslock鍵時才會執行send方法
<input v-on:keyup.caps-lock="send" type="text">
- 對于系統修飾符
、ctrl
、alt
這些比較複雜的鍵使用而言,分兩種情況shift
- 因為這些鍵可以在按住的同時,去按其他鍵,形成組合快捷鍵
- 當觸發事件為
時,我們可以直接按下修飾符即可觸發keydown
- 當觸發事件為
時,按下修飾鍵的同時要按下其他鍵,再釋放其他鍵,事件才能被觸發。keyup
// keydown事件時按下alt鍵時就會執行send方法
<input v-on:keydown.Alt="send" type="text">
// keyup事件時需要同時按下組合鍵才會執行send方法
<input v-on:keyup.Alt.y="send" type="text">
- 當然我們也可以自定義按鍵别名
- 通過
的方式去進行定義Vue.config.keyCodes.自定義鍵名=鍵碼
// 隻有按下Enter鍵時才會執行send方法
<input v-on:keydown.autofelix="send" type="text">
// 13是Enter鍵的鍵碼,将他的别名定義為autofelix
Vue.config.keyCodes.autofelix=13
🎈 圖檔預覽
- 在項目中我們經常需要使用到圖檔預覽,
是一款非常炫酷的圖檔預覽插件viewerjs
- 功能支援包括圖檔放大、縮小、旋轉、拖拽、切換、拉伸等
- 安裝
擴充viewerjs
npm install viewerjs --save
- 引入并配置功能
//引入
import Vue from 'vue';
import 'viewerjs/dist/viewer.css';
import Viewer from 'v-viewer';
//按需引入
Vue.use(Viewer);
Viewer.setDefaults({
'inline': true,
'button': true, //右上角按鈕
"navbar": true, //底部縮略圖
"title": true, //目前圖檔标題
"toolbar": true, //底部工具欄
"tooltip": true, //顯示縮放百分比
"movable": true, //是否可以移動
"zoomable": true, //是否可以縮放
"rotatable": true, //是否可旋轉
"scalable": true, //是否可翻轉
"transition": true, //使用 CSS3 過度
"fullscreen": true, //播放時是否全屏
"keyboard": true, //是否支援鍵盤
"url": "data-source",
ready: function (e) {
console.log(e.type, '元件以初始化');
},
show: function (e) {
console.log(e.type, '圖檔顯示開始');
},
shown: function (e) {
console.log(e.type, '圖檔顯示結束');
},
hide: function (e) {
console.log(e.type, '圖檔隐藏完成');
},
hidden: function (e) {
console.log(e.type, '圖檔隐藏結束');
},
view: function (e) {
console.log(e.type, '視圖開始');
},
viewed: function (e) {
console.log(e.type, '視圖結束');
// 索引為 1 的圖檔旋轉20度
if (e.detail.index === 1) {
this.viewer.rotate(20);
}
},
zoom: function (e) {
console.log(e.type, '圖檔縮放開始');
},
zoomed: function (e) {
console.log(e.type, '圖檔縮放結束');
}
})
- 使用圖檔預覽插件
- 單個圖檔使用
<template>
<div>
<viewer>
<img :src="cover" style="cursor: pointer;" height="80px">
</viewer>
</div>
</template>
<script>
export default { data() { return { cover: "//www.autofelix.com/images/cover.png"
} }}
</script>
- 多個圖檔使用
<template>
<div>
<viewer :images="imgList">
<img v-for="(imgSrc, index) in imgList" :key="index" :src="imgSrc" />
</viewer>
</div>
</template>
<script>
export default { data() { return { imgList: [ "//www.autofelix.com/images/pic_1.png", "//www.autofelix.com/images/pic_2.png", "//www.autofelix.com/images/pic_3.png", "//www.autofelix.com/images/pic_4.png", "//www.autofelix.com/images/pic_5.png"
] } }}
</script>
🎈 跑馬燈
- 這是一款好玩的特效技巧
- 比如你在機場接人時,可以使用手機跑馬燈特效,成為人群中最靓的仔
- 跑馬燈特效其實就是将最前面的文字删除,添加到最後一個,這樣就形成了文字移動的效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>跑馬燈</title>
<style type="text/css">
#app { padding: 20px; } </style>
</head>
<body>
<div id="app">
<button @click="run">應援</button>
<button @click="stop">暫停</button>
<h3>{{ msg }}</h3>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
new Vue({ el: "#app", data: { msg: "飛兔小哥,飛兔小哥,我愛飛兔小哥~~~", timer: null // 定時器
}, methods: { run() { // 如果timer已經指派就傳回
if (this.timer) return; this.timer = setInterval(() => { // msg分割為數組
var arr = this.msg.split(''); // shift删除并傳回删除的那個,push添加到最後
// 把數組第一個元素放入到最後面
arr.push(arr.shift()); // arr.join('')吧數組連接配接為字元串複制給msg
this.msg = arr.join(''); }, 100) }, stop() { //清除定時器
clearInterval(this.timer); //清除定時器之後,需要重新将定時器置為null
this.timer = null; } } })
</script>
</html>
🎈 倒計時
- 對于倒計時技巧,應用的地方很多
- 比如很多搶購商品的時候,我們需要有一個倒計時提醒使用者開搶時間
- 其實就是每隔一秒鐘,去重新計算一下時間,并指派到
中DOM
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>倒計時</title>
</head>
<body>
<div id="app">
<div>搶購開始時間:{{count}}</div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
new Vue({ el: "#app", data() { return { count: '', //倒計時
seconds: 864000 // 10天的秒數
} }, mounted() { this.Time() //調用定時器
}, methods: { // 天 時 分 秒 格式化函數
countDown() { let d = parseInt(this.seconds / (24 * 60 * 60)) d = d < 10 ? "0" + d : d let h = parseInt(this.seconds / (60 * 60) % 24); h = h < 10 ? "0" + h : h let m = parseInt(this.seconds / 60 % 60); m = m < 10 ? "0" + m : m let s = parseInt(this.seconds % 60); s = s < 10 ? "0" + s : s this.count = d + '天' + h + '時' + m + '分' + s + '秒'
}, //定時器沒過1秒參數減1
Time() { setInterval(() => { this.seconds -= 1
this.countDown() }, 1000) }, } })
</script>
</html>
🎈 自定義右鍵菜單
- 在項目中,我們有時候需要自定義滑鼠右鍵出現的選項,而不是浏覽器預設的右鍵選項
- 對于如何實作右鍵菜單,在
中其實很簡單,隻要使用Vue
插件即可vue-contextmenujs
- 安裝
插件vue-contextmenujs
npm install vue-contextmenujs
- 引入
//引入
import Vue from 'vue';
import Contextmenu from "vue-contextmenujs"
Vue.use(Contextmenu);
- 使用方法
- 可以使用
可以給選項添加圖示<i class="icon"></i>
- 可以使用
标簽自定義選項的樣式style
- 可以使用
屬性禁止選項可以點選disabled
- 可以使用
設定選項的下劃線divided:true
- 可以使用
設定子選項children
<style>
.custom-class .menu_item__available:hover,
.custom-class .menu_item_expand {
background: lightblue !important;
color: #e65a65 !important;
}
</style>
<template>
<div style="width:100vw;height:100vh" @contextmenu.prevent="onContextmenu"></div>
</template>
<script>
import Vue from 'vue'
import Contextmenu from "vue-contextmenujs"
Vue.use(Contextmenu); export default { methods: { onContextmenu(event) { this.$contextmenu({ items: [ { label: "傳回", onClick: () => { // 添加點選事件後的自定義邏輯
} }, { label: "前進", disabled: true }, { label: "重載", divided: true, icon: "el-icon-refresh" }, { label: "列印", icon: "el-icon-printer" }, { label: "翻譯", divided: true, minWidth: 0, children: [{ label: "翻譯成中文" }, { label: "翻譯成英文" }] }, { label: "截圖", minWidth: 0, children: [ { label: "截取部分", onClick: () => { // 添加點選事件後的自定義邏輯
} }, { label: "截取全屏" } ] } ], event, // 滑鼠事件資訊
customClass: "custom-class", // 自定義菜單 class
zIndex: 3, // 菜單樣式 z-index
minWidth: 230 // 主菜單最小寬度
}); return false; } } };
</script>
🎈 列印功能
- 對于網頁支援列印功能,在很多項目中也比較常見
- 而 Vue 中使用列印功能,可以使用
插件vue-print-nb
- 安裝
插件vue-print-nb
npm install vue-print-nb --save
- 引入列印服務
import Vue from 'vue'
import Print from 'vue-print-nb'
Vue.use(Print);
- 使用
- 使用
指令即可啟動列印功能v-print
<div id="printStart">
<p>紅酥手,黃縢酒,滿城春色宮牆柳。</p>
<p>東風惡,歡情薄。</p>
<p>一懷愁緒,幾年離索。</p>
<p>錯、錯、錯。</p>
<p>春如舊,人空瘦,淚痕紅浥鲛绡透。</p>
<p>桃花落,閑池閣。</p>
<p>山盟雖在,錦書難托。</p>
<p>莫、莫、莫!</p>
</div>
<button v-print="'#printStart'">列印</button>
🎈 JSONP請求
-
是jsonp
的主要方式之一解決跨域
- 是以學會在
中使用vue
其實還是很重要的jsonp
- 安裝
擴充jsonp
npm install vue-jsonp --save-dev
- 注冊服務
// 在vue2中注冊服務
import Vue from 'vue'
import VueJsonp from 'vue-jsonp'
Vue.use(VueJsonp)
// 在vue3中注冊服務
import { createApp } from 'vue'
import App from './App.vue'
import VueJsonp from 'vue-jsonp'
createApp(App).use(VueJsonp).mount('#app')
- 使用方法
- 需要注意的是,在使用
請求資料後,回調并不是在jsonp
中執行then
- 而是在自定義的
中執行,并且需要挂載到callbackName
對象上window
<script>
export default {
data() {...},
created() {
this.getUserInfo()
},
mounted() {
window.jsonpCallback = (data) => {
// 傳回後回調
console.log(data)
}
},
methods: {
getUserInfo() {
this.$jsonp(this.url, {
callbackQuery: "callbackParam",
callbackName: "jsonpCallback"
})
.then((json) => {
// 傳回的jsonp資料不會放這裡,而是在 window.jsonpCallback
console.log(json)
})
}
}
}
</script>