-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.vue
96 lines (94 loc) · 2.7 KB
/
index.vue
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
<script>
import { debounce } from 'lodash';
export default {
name: 'Throttle',
data() {
return {
count: 0,
title: '',
config: {
click: { time: 1000 },
blur: { time: 5000 }
}
};
},
methods: {
handleClick() {
this.count++;
},
handleClickTwo() {
console.log('第二个点击');
},
handleChange(v) {
this.title = v;
},
handleDebounce: debounce(() => {
console.log('常规点击防抖');
}, 1000)
},
render() {
return (
<div>
<divider title="测试easy-used-throttle"></divider>
<easy-used-throttle events="blur" time={3000}>
<el-input onBlur={() => console.log('测试失去焦点')}></el-input>
</easy-used-throttle>
<divider title="原生debounce实现"></divider>
<el-button type="info" onClick={this.handleDebounce}>
常规防抖
</el-button>
<divider title="my-throttle组件:click事件"></divider>
<my-throttle time={1000} events="click">
<el-button type="primary" onClick={this.handleClick}>
{this.count}
</el-button>
</my-throttle>
<divider title="my-throttle组件:blur事件"></divider>
<my-throttle time={2000} events="blur">
<el-input
style={{ marginTop: '20px' }}
value={this.title}
onInput={this.handleChange}
onBlur={() => console.log('失去焦点')}
/>
</my-throttle>
<divider title="multi-throttle组件:内嵌一个slot"></divider>
<multi-throttle time={4000} events="click">
<el-button type="primary" onClick={this.handleClick}>
{this.count}
</el-button>
</multi-throttle>
<divider title="multi-throttle组件:内嵌多个组件"></divider>
<multi-throttle time={3000} events={this.config}>
<div>
ElButton组件按钮1:
<el-button type="primary" onClick={this.handleClick}>
{this.count}
</el-button>
</div>
<div>
原生组件-按钮2:
<button
style={{ padding: '4px 10px' }}
onClick={this.handleClickTwo}
>
{this.count}
</button>
</div>
<div>
<span>ElInput组件-Blur:</span>
<el-input
style={{ marginTop: '20px' }}
value={this.title}
onInput={this.handleChange}
onBlur={() => console.log('失去焦点')}
/>
</div>
</multi-throttle>
<hr />
</div>
);
}
};
</script>
<style lang="scss" scoped></style>