键盘事件
- 在
js
中我们通常通过绑定一个事件,去获取按键的编码,再通过event
中的keyCode
属性去获得编码 - 如果我们需要实现固定的键才能触发事件时就需要不断的判断,其实很麻烦
let button = document.querySelector('button')
button.onkeyup = function (e) {
console.log(e.key)
if (e.keyCode == 13) {
console.log('我是回车键')
}
}
vue
中给一些常用的按键提供了别名,我们只要在事件后加上响应的别名即可vue
中常见别名有:up/向上箭头
、down/向下箭头
、left/左箭头
、right/右箭头
、space/空格
、tab/换行
、esc/退出
、enter/回车
、delete/删除
// 只有按下回车键时才会执行 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.自定义键名=键码
的方式去进行定义
// 只有按下回车键时才会执行send方法
<input v-on:keydown.autofelix="send" type="text">
// 13是回车键的键码,将他的别名定义为autofelix
Vue.config.keyCodes.autofelix=13
🎈 图片预览
- 在项目中我们经常需要使用到图片预览,
viewerjs
是一款非常炫酷的图片预览插件 - 功能支持包括图片放大、缩小、旋转、拖拽、切换、拉伸等
- 安装
viewerjs
扩展
参考vue实战视频讲解:进入学习
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, '图片显示结束')