Skip to content

Commit b0c7cab

Browse files
author
kodo
committed
fix:修复父级DOM里含有input，无法聚焦的bug
1 parent 3e37786 commit b0c7cab

11 files changed

+171
-156
lines changed

‎.gitignore

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
11
# Created by .ignore support plugin (hsz.mobi)
2-
.idea
2+
.idea
3+
node_modules

‎README.MD

+5-138
Original file line numberDiff line numberDiff line change
@@ -6,146 +6,13 @@
66
77
## How To use
88

9-
> * ES6
109

11-
``` bash
12-
# install v-tap
13-
npm install v-tap --save;
1410

15-
# 请注意！是**v-tap** 不是 **vue-tap**
16-
```
17-
18-
```javascript
19-
import vueTap from 'v-tap';
20-
Vue.use(vueTap);
21-
```
22-
23-
> * 直接引入
24-
```html
25-
<script src="./vue.js"></script>
26-
<script src="./vue-tap.js"></script>
27-
```
28-
29-
30-
## Vue2.0
31-
32-
> Vue2.0的绑定形式略有不同 主要改为 `v-tap={ methods : xxx , paramA : a,paramB:b}` 的形式
33-
34-
35-
```html
36-
// 具体请看demo test-href.html
37-
<!--如果想要快速跳转直接写v-tap即可不用写任何参数-->
38-
<a href="http://www.baidu.com" v-tap>如果想要快速跳转直接写v-tap即可不用写任何参数</a>
39-
40-
<p v-tap.prevent="{ methods : scroll }">无法滑动页面</p>
41-
42-
<!-- 这样的a标签可以进行一些处理而不跳转 -->
43-
<a v-tap.prevent="{ methods : cant }" href="这是无法跳转的">这是无法跳转的</a>
44-
45-
<!--这样一样会直接快速跳转不会执行cant 除非设置了prevent-->
46-
<a href="aaa" v-tap="{ methods : cant }">can't</a>
47-
48-
<a v-tap="a++">v-tap="a++" 直接执行表达式在2.0里无法使用</a>
49-
50-
<a href="javascript:window.history.go(-1);" v-tap>我可以直接在href里写js代码 如history.go(-1)</a>
51-
52-
```
53-
54-
```javascript
55-
new Vue({
56-
el: "body",
57-
methods : {
58-
callback : function(params) {
59-
// params 可获取绑定时候带的参数
60-
console.log(params.event); // 原生事件
61-
console.log(params.tapObj); // 手指触摸的一些参数
62-
console.log(params.paramA); // 绑定时候传入的paramA
63-
console.log(params.paramB); // 绑定时候传入的paramB
64-
}
65-
}
66-
});
67-
```
68-
69-
## With parmas
70-
71-
```html
72-
<ul>
73-
<li v-for="(item,index) in list"
74-
v-tap="{ methods:args , index : index, item:item }"
75-
>
76-
{{item.name}}---{{item.age}}
77-
</li>
78-
</ul>
79-
```
80-
81-
```javascript
82-
args : function(params) {
83-
// v-for循环带参数的回调
84-
console.log('---params.event---',params.event)
85-
console.log('---params.tapObj---',params.tapObj);
86-
console.log('---params.index---',params.index)
87-
console.log('---params.el---',params.el)
88-
//params.tapObj 可获得 tap的一些参数
89-
//pageX,pageY,clientX,clientY,distanceX,distanceY
90-
//后面2个分别的手指可能移动的位置(以后可用于拓展手势)
91-
},
92-
```
93-
94-
95-
## Vue1.0
96-
97-
```html
98-
// 具体请看demo test-href.html
99-
<!--如果想要快速跳转直接写v-tap即可不用写任何参数-->
100-
<a href="http://www.baidu.com" v-tap>如果想要快速跳转直接写v-tap即可不用写任何参数</a>
101-
102-
<p v-tap.prevent="scroll">无法滑动页面</p>
103-
104-
<!-- 这样的a标签可以进行一些处理而不跳转 -->
105-
<a v-tap.prevent="callback" href="这是无法跳转的">这是无法跳转的</a>
106-
107-
<!--这样一样会直接快速跳转不会执行cant 除非设置了prevent-->
108-
<a href="aaa" v-tap="cant">can't</a>
109-
```
110-
111-
```javascript
112-
new Vue({
113-
el: "body",
114-
methods : {
115-
callback : function(e) {
116-
//不带参数指令,e为event对象
117-
e.preventDefault();
118-
console.log('---e---',e);
119-
console.log('---tapObj---', e.tapObj);
120-
}
121-
}
122-
});
123-
```
124-
125-
## With parmas
126-
127-
```html
128-
<ul>
129-
<li v-for="el in list"
130-
v-tap="args($index,el,$event)"
131-
>
132-
{{el.name}}---{{el.age}}
133-
</li>
134-
</ul>
135-
```
136-
137-
```javascript
138-
args : function(index,el,e) {
139-
// v-for循环带参数的回调
140-
console.log('---index---',index);
141-
console.log('---el---',el);
142-
console.log('---e---',e);
143-
console.log(e.tapObj);
144-
//e.tapObj 可获得 tap的一些参数
145-
//pageX,pageY,clientX,clientY,distanceX,distanceY
146-
//后面2个分别的手指可能移动的位置(以后可用于拓展手势)
147-
}
148-
```
11+
## Update
12+
13+
### 2017.06.17(fix)
14+
15+
> * 修复父级DOM里含有input，点击input无法聚焦的BUG
14916
15017
### 2017.03.16(fix)
15118

‎doc/use.MD

+142
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,142 @@
1+
## How To use
2+
3+
> * ES6
4+
5+
``` bash
6+
# install v-tap
7+
npm install v-tap --save;
8+
9+
# 请注意！是**v-tap** 不是 **vue-tap**
10+
```
11+
12+
```javascript
13+
import vueTap from 'v-tap';
14+
Vue.use(vueTap);
15+
```
16+
17+
> * 直接引入
18+
```html
19+
<script src="./vue.js"></script>
20+
<script src="./vue-tap.js"></script>
21+
```
22+
23+
24+
## Vue2.0
25+
26+
> Vue2.0的绑定形式略有不同 主要改为 `v-tap={ methods : xxx , paramA : a,paramB:b}` 的形式
27+
28+
29+
```html
30+
// 具体请看demo test-href.html
31+
<!--如果想要快速跳转直接写v-tap即可不用写任何参数-->
32+
<a href="http://www.baidu.com" v-tap>如果想要快速跳转直接写v-tap即可不用写任何参数</a>
33+
34+
<p v-tap.prevent="{ methods : scroll }">无法滑动页面</p>
35+
36+
<!-- 这样的a标签可以进行一些处理而不跳转 -->
37+
<a v-tap.prevent="{ methods : cant }" href="这是无法跳转的">这是无法跳转的</a>
38+
39+
<!--这样一样会直接快速跳转不会执行cant 除非设置了prevent-->
40+
<a href="aaa" v-tap="{ methods : cant }">can't</a>
41+
42+
<a v-tap="a++">v-tap="a++" 直接执行表达式在2.0里无法使用</a>
43+
44+
<a href="javascript:window.history.go(-1);" v-tap>我可以直接在href里写js代码 如history.go(-1)</a>
45+
46+
```
47+
48+
```javascript
49+
new Vue({
50+
el: "body",
51+
methods : {
52+
callback : function(params) {
53+
// params 可获取绑定时候带的参数
54+
console.log(params.event); // 原生事件
55+
console.log(params.tapObj); // 手指触摸的一些参数
56+
console.log(params.paramA); // 绑定时候传入的paramA
57+
console.log(params.paramB); // 绑定时候传入的paramB
58+
}
59+
}
60+
});
61+
```
62+
63+
## With parmas
64+
65+
```html
66+
<ul>
67+
<li v-for="(item,index) in list"
68+
v-tap="{ methods:args , index : index, item:item }"
69+
>
70+
{{item.name}}---{{item.age}}
71+
</li>
72+
</ul>
73+
```
74+
75+
```javascript
76+
args : function(params) {
77+
// v-for循环带参数的回调
78+
console.log('---params.event---',params.event)
79+
console.log('---params.tapObj---',params.tapObj);
80+
console.log('---params.index---',params.index)
81+
console.log('---params.el---',params.el)
82+
//params.tapObj 可获得 tap的一些参数
83+
//pageX,pageY,clientX,clientY,distanceX,distanceY
84+
//后面2个分别的手指可能移动的位置(以后可用于拓展手势)
85+
},
86+
```
87+
88+
89+
## Vue1.0
90+
91+
```html
92+
// 具体请看demo test-href.html
93+
<!--如果想要快速跳转直接写v-tap即可不用写任何参数-->
94+
<a href="http://www.baidu.com" v-tap>如果想要快速跳转直接写v-tap即可不用写任何参数</a>
95+
96+
<p v-tap.prevent="scroll">无法滑动页面</p>
97+
98+
<!-- 这样的a标签可以进行一些处理而不跳转 -->
99+
<a v-tap.prevent="callback" href="这是无法跳转的">这是无法跳转的</a>
100+
101+
<!--这样一样会直接快速跳转不会执行cant 除非设置了prevent-->
102+
<a href="aaa" v-tap="cant">can't</a>
103+
```
104+
105+
```javascript
106+
new Vue({
107+
el: "body",
108+
methods : {
109+
callback : function(e) {
110+
//不带参数指令,e为event对象
111+
e.preventDefault();
112+
console.log('---e---',e);
113+
console.log('---tapObj---', e.tapObj);
114+
}
115+
}
116+
});
117+
```
118+
119+
## With parmas
120+
121+
```html
122+
<ul>
123+
<li v-for="el in list"
124+
v-tap="args($index,el,$event)"
125+
>
126+
{{el.name}}---{{el.age}}
127+
</li>
128+
</ul>
129+
```
130+
131+
```javascript
132+
args : function(index,el,e) {
133+
// v-for循环带参数的回调
134+
console.log('---index---',index);
135+
console.log('---el---',el);
136+
console.log('---e---',e);
137+
console.log(e.tapObj);
138+
//e.tapObj 可获得 tap的一些参数
139+
//pageX,pageY,clientX,clientY,distanceX,distanceY
140+
//后面2个分别的手指可能移动的位置(以后可用于拓展手势)
141+
}
142+
```

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "v-tap",
3-
"version": "3.0.1",
3+
"version": "3.0.2",
44
"description": "a directive of vue.js",
55
"main": "vue-tap.js",
66
"repository": {

‎demo-2.0.html ‎test/demo-2.0.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@
44
<meta charset="UTF-8">
55
<title></title>
66
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
7-
<script src="vue2.0.js"></script>
87
<style>
98
body {
109
color: #fff;
@@ -68,7 +67,8 @@
6867
</div>
6968

7069
<script src="//cdn.bootcss.com/jquery/2.1.4/jquery.js"></script>
71-
<script src="vue-tap.js"></script>
70+
<script src="../vue2.0.js"></script>
71+
<script src="../vue-tap.js"></script>
7272
<script>
7373

7474
new Vue({

‎demo.html ‎test/demo.html

+2-3
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@
44
<meta charset="UTF-8">
55
<title></title>
66
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
7-
<script src="vue.js"></script>
87
<style>
98
body {
109
color: #fff;
@@ -65,8 +64,8 @@
6564
<a href="www.baidu.com" v-tap.prevent="callback">I'm a tag</a>
6665
<a href="test-href.html" v-tap>aaaaaaaaaa</a>
6766
<script src="//cdn.bootcss.com/jquery/2.1.4/jquery.js"></script>
68-
<script src="vue.js"></script>
69-
<script src="vue-tap.js"></script>
67+
<script src="../vue.js"></script>
68+
<script src="../vue-tap.js"></script>
7069
<script>
7170

7271
new Vue({

‎if-else.html ‎test/if-else.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -25,8 +25,8 @@ <h1>
2525
</li>
2626
</ul>
2727
</div>
28-
<script src="./vue2.0.js"></script>
29-
<script src="./vue-tap.js"></script>
28+
<script src="../vue2.0.js"></script>
29+
<script src="../vue-tap.js"></script>
3030
<script>
3131
new Vue({
3232
el : "#container",

‎list-test.html ‎test/list-test.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,8 @@
1717
主要是为了测试在生命周期中改变数据是否可以获取正常
1818
</pre>
1919
</div>
20-
<script src="vue2.0.js"></script>
21-
<script src="vue-tap.js"></script>
20+
<script src="../vue2.0.js"></script>
21+
<script src="../vue-tap.js"></script>
2222
<script>
2323
new Vue({
2424
el: "#container",

‎test-href-2.0.html ‎test/test-href-2.0.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -62,8 +62,8 @@
6262

6363
</div>
6464

65-
<script src="vue2.0.js"></script>
66-
<script src="vue-tap.js"></script>
65+
<script src="../vue2.0.js"></script>
66+
<script src="../vue-tap.js"></script>
6767
<script>
6868
var V = new Vue({
6969
el: "#app",

‎test-href.html ‎test/test-href.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -54,8 +54,8 @@
5454
<p>item19</p>
5555
<p>item20</p>
5656

57-
<script src="vue.js"></script>
58-
<script src="vue-tap.js"></script>
57+
<script src="../vue.js"></script>
58+
<script src="../vue-tap.js"></script>
5959
<script>
6060
var V = new Vue({
6161
el: "body",

0 commit comments

Comments
 (0)