赶到周末，一鼓作气写一写。昨天说到使用electron打包pc端应用程序，其实还有很多不完善的地方，后期还会朝这个方向多写几篇，可能涉及到的有vue-electron 、electron热更新等。后者还未深接触，估计也要多看看文档了。
关于input控件的监听呢，也是之前有项目需求，专门到Vue.js多瞅了几眼。
进入正题，贴一段项目内关于input组件的代码。
<input id="spnm_input" v-model="input_value" @keyup="whichClick" @keyup.shift.56="shoukuanClick" v-focus v-select="{need:isNeedSelected_num}" ref="spnm_input" />
分析一下：
1.id 就不多说了。
2.v-model 在vue官方文档 表单输入绑定 章节有详细讲述。在这里呢使用 v-model给input绑定了input_value属性，首先在data内声明属性input_value:"" 最后在watch方法内监听，
watch:{//- 监听
input_value:function (new_value, old_value) {//新值、旧值
if(this.isNeedSelected_num&&(old_value!="/"&&old_value!="r"&&old_value!="R")){
this.isNeedSelected_num=false;
}
},
}
3.@keyup="whichClick"
这里就是实现每个键盘监听的方法，js内：
whichClick：function(e){
var keyCode=e.keyCode
}
每个键盘都有自己唯一的keyCode 例如比较常见的Enter键keycode就是13。这里还得说一下，笔记本键盘和台式机的键盘还是有点不同的，台式机有小键盘，笔记本是没有小键盘的。而且台式机使用的键盘backspace键和笔记本的delete键竟然keycode是相同的都是8.所以监听使用这两个键时需要注意一下。
4.@keyup.shift.56="shoukuanClick"
为什么要写这一个呢，主要是想说明一下，如果需要监听两个按键同时按下的情况。该方法就是监听shift+* ，*号keycode是56，举一反三类似于这样去监听
5. v-focus v-select="{need:isNeedSelected_num}"
这两个就涉及到了Vue自定义指令了，v-focus没有传参，后者v-select就传了个参数，需要再data内定义isNeedSelected_num:false属性
关于自定义指令，我就贴个项目内的一段代码吧：
directives: {
focus: {
// 指令的定义
inserted:function (el) {
el.focus()
}
},
select:{
update:function (el,binding) {
if (binding.value.need){
el.select();
}
}
}
},
这里注册的是局部指令，具体可以看Vue.js官方文档的自定义指令章节。先说说这两个指令的作用吧。
且看看v-focus指令的钩子函数 inserted内：el.focus()即聚焦的意思，所以加入该指令后页面一进来input即被选中光标闪烁。
v-select指令有参数传入 钩子函数 update内传入参数有(el binding),其中binding.value.need就可以拿到isNeedSelected_num的值，el.select()即文字被选中。其实传这个参数作用呢，也就是处理input输入的文本哪些需要被立即选中，哪些不需要，我是用bool值控制的。具体监听输入了哪些文本呢，在第2步骤内v-model就可以做到，即使用watch方法内input_value:function()监听新旧值变换。
6.ref="spnm_input"
在 JavaScript 中直接访问子组件，为此可以使用 ref 为子组件指定一个引用 ID，说个简单点例子：
console.log(this.$refs.spnm_input)//
console.log(document.getElementById('spnm_input'))//
这两种方法获得的都是Dom节点，而$refs相对document.getElementById的方法，会减少获取dom节点的消耗。
网友评论