-
Notifications
You must be signed in to change notification settings - Fork 376
/
mpx-button.vue
146 lines (142 loc) · 3.36 KB
/
mpx-button.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
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
<script>
import getInnerListeners from '@mpxjs/webpack-plugin/lib/runtime/components/web/getInnerListeners'
export default {
name: 'mpx-button',
data () {
return {
hover: false
}
},
props: {
// todo 封装支持相关props
name: String,
size: {
type: String,
default: 'default'
},
type: {
type: String,
default: 'default'
},
plain: Boolean,
disabled: Boolean,
loading: String,
formType: String,
hoverClass: {
type: String,
default: 'button-hover'
},
hoverStopPropagation: {
type: Boolean,
default: false
},
hoverStartTime: {
type: Number,
default: 20
},
hoverStayTime: {
type: Number,
default: 70
}
},
computed: {
className () {
if (this.hoverClass && this.hoverClass !== 'none' && this.hover) {
return this.hoverClass
}
return ''
}
},
mounted () {
if (this.formType) {
this.$on('tap', () => {
if (this.form && this.form[this.formType]) {
this.form[this.formType]()
}
})
}
},
render (createElement) {
let mergeAfter
if (this.hoverClass && this.hoverClass !== 'none') {
mergeAfter = {
listeners: {
touchstart: this.handleTouchstart,
touchend: this.handleTouchend
},
force: true
}
}
const attrs = {
name: this.name
}
const data = {
class: ['mpx-button', this.className],
attrs,
on: getInnerListeners(this, {
mergeAfter,
// 由于当前机制下tap事件只有存在tap监听才会触发,为了确保该组件能够触发tap,传递一个包含tap的defaultListeners用于模拟存在tap监听
defaultListeners: {
tap () {
}
}
})
}
return createElement('div', data, this.$slots.default)
},
methods: {
handleTouchstart (e) {
if (e.__hoverStopPropagation) {
return
}
e.__hoverStopPropagation = this.hoverStopPropagation
clearTimeout(this.startTimer)
this.startTimer = setTimeout(() => {
this.hover = true
}, this.hoverStartTime)
},
handleTouchend () {
clearTimeout(this.endTimer)
this.endTimer = setTimeout(() => {
this.hover = false
}, this.hoverStayTime)
}
}
}
</script>
<style lang="stylus">
.mpx-button
position relative
display block
margin-left auto
margin-right auto
padding-left 14px
padding-right 14px
box-sizing border-box
font-size 18px
text-align center
text-decoration none
line-height 2.55555556
border-radius 5px
-webkit-tap-highlight-color transparent
overflow hidden
color #000
background-color #f8f8f8
&:after
content " "
width 200%
height 200%
position absolute
top 0
left 0
border 1px solid rgba(0, 0, 0, .2)
-webkit-transform scale(.5)
transform scale(.5)
-webkit-transform-origin 0 0
transform-origin 0 0
box-sizing border-box
border-radius 10px
&.button-hover
color rgba(0, 0, 0, .6)
background-color #dedede
</style>