+53
-6
lines changedFilter options
+53
-6
lines changed Original file line number Diff line number Diff line change
@@ -7,6 +7,11 @@
7 7 8 8
export default new MdComponent({
9 9
name: 'MdButton',
10 +
data () {
11 +
return {
12 +
rippleActive: false
13 +
}
14 +
},
10 15
components: {
11 16
MdButtonContent
12 17
},
@@ -23,11 +28,22 @@
23 28
disabled: Boolean,
24 29
to: null
25 30
},
31 +
computed: {
32 +
rippleWorks () {
33 +
return this.mdRipple && !this.disabled
34 +
}
35 +
},
26 36
render (createElement) {
27 37
const buttonContent = createElement('md-button-content', {
28 38
attrs: {
29 39
mdRipple: this.mdRipple,
30 40
disabled: this.disabled
41 +
},
42 +
props: {
43 +
mdRippleActive: this.rippleActive
44 +
},
45 +
on: {
46 +
'update:mdRippleActive': active => this.rippleActive = active,
31 47
}
32 48
}, this.$slots.default)
33 49
let buttonAttrs = {
@@ -45,7 +61,33 @@
45 61
disabled: this.disabled,
46 62
type: !this.href && (this.type || 'button')
47 63
},
48 -
on: this.$listeners
64 +
on: {
65 +
...this.$listeners,
66 +
touchstart: event => {
67 +
if (!this.rippleWorks) {
68 +
return false
69 +
}
70 + 71 +
this.rippleActive = event
72 +
this.$listeners.touchstart && this.$listeners.touchstart(event)
73 +
},
74 +
touchmove: event => {
75 +
if (!this.rippleWorks) {
76 +
return false
77 +
}
78 + 79 +
this.rippleActive = event
80 +
this.$listeners.touchmove && this.$listeners.touchmove(event)
81 +
},
82 +
mousedown: event => {
83 +
if (!this.rippleWorks) {
84 +
return false
85 +
}
86 + 87 +
this.rippleActive = event
88 +
this.$listeners.mousedown && this.$listeners.mousedown(event)
89 +
}
90 +
}
49 91
}
50 92
let tag = 'button'
51 93
@@ -1,5 +1,5 @@
1 1
<template>
2 -
<md-ripple :md-disabled="!mdRipple || disabled">
2 +
<md-ripple :md-disabled="!mdRipple || disabled" :md-event-trigger="false" :md-active="mdRippleActive" @update:mdActive="active => $emit('update:mdRippleActive', active)">
3 3
<div class="md-button-content">
4 4
<slot />
5 5
</div>
@@ -16,6 +16,7 @@
16 16
},
17 17
props: {
18 18
mdRipple: Boolean,
19 +
mdRippleActive: [Boolean, Event],
19 20
disabled: Boolean
20 21
}
21 22
}
@@ -1,9 +1,9 @@
1 1
<template>
2 2
<div
3 3
:class="['md-ripple', rippleClasses]"
4 -
@touchstart.passive.stop="touchStartCheck"
5 -
@touchmove.passive.stop="touchMoveCheck"
6 -
@mousedown.passive.stop="startRipple">
4 +
@touchstart.passive="event => mdEventTrigger && touchStartCheck(event)"
5 +
@touchmove.passive="event => mdEventTrigger && touchMoveCheck(event)"
6 +
@mousedown.passive="event => mdEventTrigger && startRipple(event)">
7 7
<slot />
8 8
<md-wave v-for="ripple in ripples" :key="ripple.uuid" :class="['md-ripple-wave', waveClasses]" :style="ripple.waveStyles" @md-end="clearWave(ripple.uuid)" v-if="!isDisabled" />
9 9
</div>
@@ -23,7 +23,11 @@
23 23
props: {
24 24
mdActive: null,
25 25
mdDisabled: Boolean,
26 -
mdCentered: Boolean
26 +
mdCentered: Boolean,
27 +
mdEventTrigger: {
28 +
type: Boolean,
29 +
default: true
30 +
}
27 31
},
28 32
data: () => ({
29 33
ripples: [],
You can’t perform that action at this time.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4