1 | <template>
|
2 | <md-check-group
|
3 | ref="group"
|
4 | class="md-check-list"
|
5 | :class="{ 'is-align-center': alignCenter }"
|
6 | :value="value"
|
7 | @input="$_onInput"
|
8 | >
|
9 | <md-cell-item
|
10 | v-for="(item, index) in options"
|
11 | :key="index"
|
12 | class="md-check-item"
|
13 | :class="{
|
14 | 'is-checked': value.indexOf(item.value) !== -1,
|
15 | }"
|
16 | :title="hasSlot ? '' : (item.text || item.label)"
|
17 | :brief="hasSlot ? '' : item.brief"
|
18 | :disabled="item.disabled"
|
19 | @click="$_check(item, index)"
|
20 | >
|
21 | <template v-if="hasSlot">
|
22 | <slot :option="item" :index="index" :selected="value.indexOf(item.value) > -1"></slot>
|
23 | </template>
|
24 | <md-check
|
25 | v-if="!alignCenter"
|
26 | :name="item.value"
|
27 | :disabled="item.disabled"
|
28 | :size="iconSize"
|
29 | :icon="icon"
|
30 | :icon-inverse="iconInverse"
|
31 | :icon-disabled="iconDisabled"
|
32 | :icon-svg="iconSvg"
|
33 | :slot="iconPosition === 'right' ? 'right' : 'left'"
|
34 | />
|
35 | </md-cell-item>
|
36 | </md-check-group>
|
37 | </template>
|
38 |
|
39 | <script>
import Check from './index'
|
40 | import CheckGroup from './group'
|
41 | import CellItem from '../cell-item'
|
42 | import checkMixin from './mixin'
|
43 |
|
44 | export default {
|
45 | name: 'md-check-list',
|
46 |
|
47 | mixins: [checkMixin],
|
48 |
|
49 | components: {
|
50 | [Check.name]: Check,
|
51 | [CheckGroup.name]: CheckGroup,
|
52 | [CellItem.name]: CellItem,
|
53 | },
|
54 |
|
55 | props: {
|
56 | options: {
|
57 | type: Array,
|
58 | default() {
|
59 |
|
60 | return []
|
61 | },
|
62 | },
|
63 | value: {
|
64 | type: Array,
|
65 | default() {
|
66 |
|
67 | return []
|
68 | },
|
69 | },
|
70 | alignCenter: {
|
71 | type: Boolean,
|
72 | default: false,
|
73 | },
|
74 | isSlotScope: {
|
75 | type: Boolean,
|
76 | default: undefined,
|
77 | },
|
78 | },
|
79 |
|
80 | computed: {
|
81 | hasSlot() {
|
82 | return this.isSlotScope !== undefined ? this.isSlotScope : !!this.$scopedSlots.default
|
83 | },
|
84 | },
|
85 |
|
86 | methods: {
|
87 |
|
88 | $_check(option) {
|
89 | this.$refs.group.toggle(option.value)
|
90 | },
|
91 |
|
92 | $_onInput(value) {
|
93 | this.$emit('input', value)
|
94 | },
|
95 | },
|
96 | }
|
97 |
</script>
|
98 |
|
99 | <style lang="stylus">
|
100 | .md-check-item
|
101 | .md-check
|
102 | margin-top 0
|
103 | margin-bottom 0
|
104 | pointer-events none
|
105 | .md-cell-item-body.multilines .md-cell-item-title
|
106 | font-weight font-weight-medium
|
107 |
|
108 | .md-check-list.is-align-center
|
109 | .md-cell-item-content
|
110 | text-align center
|
111 | .md-cell-left,
|
112 | .md-cell-right
|
113 | display none
|
114 | </style>
|
115 |
|