-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
102 lines (100 loc) · 5.52 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>keyfocus</title>
<link rel="stylesheet" href="./highlight-9.12.0.min.css">
</head>
<body>
<script src="./vue.js"></script>
<script src="./vue-gridkeyfocus.js"></script>
<script src="./jquery-1.11.1.min.js"></script>
<script src="./highlight-9.12.0.min.js"></script>
<div id="app">
<h2>表格快捷键例子</h2>
<h5>顺向快捷键：ctrl/enter键</h5>
<h5>逆向快捷键：ctrl+tab/ctrl+enter键</h5>
<div class="padding_class" v-gridkeyfocus="gridKeyFlag" :data-current="current3" data-prefix="table_">
<table>
<tr v-for="(item,index) in tbData" :key="item.id">
<td><input v-model="item.text" :ref="`table_${index}`" @focus="current3=`table_${index}[0]`"></td>
<td><input :disabled="item.text3Disabeld" v-model="item.text3" :ref="`table_${index}`" @focus="current3=`table_${index}[1]`"></td>
<td><input v-model="item.text2" :ref="`table_${index}`" @focus="current3=`table_${index}[2]`"></td>
</tr></table>
</div>
<h3>源码</h3>
<div class="padding_class font_big">
<pre><code>
<div class="padding_class" v-gridkeyfocus="gridKeyFlag" :data-current="current3" data-prefix="table_">
<table>
<tr v-for="(item,index) in tbData" :key="item.id">
<td><input v-model="item.text" :ref="`table_${index}`" @focus="current3=`table_${index}[0]`"></td>
<td><input :disabled="item.text3Disabeld" v-model="item.text3" :ref="`table_${index}`" @focus="current3=`table_${index}[1]`"></td>
<td><input v-model="item.text2" :ref="`table_${index}`" @focus="current3=`table_${index}[2]`"></td>
</tr></table>
</div>
data() {
return {
tbData:[{text:"",text2:"",text3:"",text3Disabeld:false,id:1},{text:"",text2:"",text3:"",text3Disabeld:true,id:2},{text:"",text2:"",text3:"",text3Disabeld:false,id:3}],
gridKeyFlag:false,
current3:1
}
},
</code></pre>
</div>
<h3>原理</h3>
<div class="padding_class">
<p>1：通过 v-gridkeyfocus 绑定了该节点的 keyup事件</p>
<p>2：通过 data-current的值 确定当前焦点的位置，同时通过 focus()方法对下一个进行定位</p>
<p>3：提供了定位前的一些方法，通过这些方法可以控制 要从哪里定位到哪里，自定义式的进行跳转（默认是按顺序进行的）</p>
<p>4：可以设置 disabled 属性，控制要不要跳过当前控件的定位</p>
</div>
<h3>属性</h3>
<div class="padding_class">
<table width="100%">
<thead>
<tr>
<th>参数</th><th>说明</th><th>类型</th><th>可选值</th><th>默认</th>
</tr>
</thead>
<tbody>
<tr><td>v-gridkeyfocus="gridKeyFlag"</td><td>用于更新表格快捷键的（比如表格添加行后）</td><td>Boolean</td><td>true/false</td><td>-</td></tr>
<tr><td>data-prefix</td><td>用于拼接ref名称时的前缀，默认为'keyRef_'</td><td>string</td><td>-</td><td>'keyRef_'</td></tr>
<tr><td>:data-current</td><td>当前焦点的位置(必填)</td><td>string</td><td>-</td><td>-</td></tr>
<tr><td>:before-next</td><td>顺向定位之前事件(注意：阻止默认，必须返回false)</td><td>function。返回参数：1.current代表还没有定位前的焦点的位置,2.vm代表即将定位的组件的vm；3.rowdata当前行数据（只有设置:data-rowdata属性才有效）；4.e</td><td>-</td><td>-</td></tr>
<tr><td>:after-next</td><td>顺向定位之后事件</td><td>function。返回参数：1.vm代表即将定位的组件的vm；2.rowdata当前行数据（只有设置:data-rowdata属性才有效）；3.e</td><td>-</td><td>-</td></tr>
<tr><td>:before-prev</td><td>逆向定位之前事件(注意：阻止默认必须返回false)</td><td>function.返回参数：1.current代表还没有定位前的焦点的位置；2.vm代表即将定位的组件的vm；3.rowdata当前行数据（只有设置:data-rowdata属性才有效）；4.e</td><td>-</td><td>-</td></tr>
<tr><td>:after-prev</td><td>逆向定位之后事件</td><td>function。返回参数：1.vm代表即将定位的组件的vm；2.rowdata当前行数据（只有设置:data-rowdata属性才有效）；3.e</td><td>-</td><td>-</td></tr>
</tbody>
</table>
</div>
</div>
<script>
new Vue({
el: '#app',
data() {
return {
tbData:[{text:"",text2:"",text3:"",text3Disabeld:false,id:1},{text:"",text2:"",text3:"",text3Disabeld:true,id:2},{text:"",text2:"",text3:"",text3Disabeld:false,id:3}],
isPay: false,
gridKeyFlag:false,
current3:1
}
},
mounted(){
setTimeout(()=>{
console.log("sss");
this.gridKeyFlag=!this.gridKeyFlag;
},2000);
$('pre code').each(function(i, block) {
hljs.highlightBlock(block);
});
}
})
</script>
</body>
<style>
.padding_class{padding: 30px 20px;}
h5{margin: 5px 20px;}
.font_big{font-size: 18px;}
</style>
</html>