forked from didi/mand-mobile
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.vue
More file actions
121 lines (107 loc) · 2.18 KB
/
index.vue
File metadata and controls
121 lines (107 loc) · 2.18 KB
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
<template>
<label
class="md-check"
:class="{
'is-disabled': disabled,
'is-checked': isChecked
}"
@click="$_onClick"
>
<div class="md-check-icon">
<md-icon :name="currentIcon" :size="size" :svg="iconSvg"/>
</div>
<div class="md-check-label" v-if="$slots.default || label">
<slot>{{ label }}</slot>
</div>
</label>
</template>
<script>import Icon from '../icon'
import checkMixin from './mixin'
export default {
name: 'md-check',
mixins: [checkMixin],
components: {
[Icon.name]: Icon,
},
props: {
name: {
default: true,
},
value: {
default: false,
},
size: {
type: String,
default: 'md',
},
label: {
type: String,
default: '',
},
disabled: {
type: Boolean,
default: false,
},
},
computed: {
isChecked() {
return this.value === this.name || (this.rootGroup && this.rootGroup.value.indexOf(this.name) !== -1)
},
currentIcon() {
return this.disabled ? this.iconDisabled : this.isChecked ? this.icon : this.iconInverse
},
},
inject: {
rootGroup: {default: null},
},
mounted() {
this.rootGroup && this.rootGroup.register(this)
},
destroyed() {
this.rootGroup && this.rootGroup.unregister(this)
},
methods: {
$_onClick() {
if (this.disabled) {
return
}
if (typeof this.name === 'boolean') {
this.$emit('input', !this.value)
} else if (this.isChecked) {
this.$emit('input', '')
if (this.rootGroup) {
this.rootGroup.uncheck(this.name)
}
} else {
this.$emit('input', this.name)
if (this.rootGroup) {
this.rootGroup.check(this.name)
}
}
},
},
}
</script>
<style lang="stylus">
.md-check
display flex
align-items center
margin-top v-gap-sm
margin-bottom v-gap-sm
&.is-checked
.md-check-icon
color check-color
&.is-disabled
.md-check-icon
.md-check-label
color color-text-disabled
.md-check-icon
position relative
color color-text-placeholder
.md-icon
display flex
.md-check-label
margin-left h-gap-sm
font-size inherit
</style>