35 lines
1.1 KiB
Vue
35 lines
1.1 KiB
Vue
<template>
|
|
<div class="aa-checkcard-grid" :style="{ gridTemplateColumns: 'repeat(' + cols + ', 1fr)' }">
|
|
<div class="aa-checkcard" v-for="(o, i) in options" :key="i"
|
|
:class="{ 'is-selected': value.indexOf(o.value) >= 0 }" @click="toggle(o.value)">
|
|
<div class="aa-checkcard-icon" v-if="o.icon">{{ o.icon }}</div>
|
|
<div class="aa-checkcard-body">
|
|
<div class="aa-checkcard-title">{{ o.label }}</div>
|
|
<div class="aa-checkcard-desc" v-if="o.desc">{{ o.desc }}</div>
|
|
</div>
|
|
<div class="aa-checkcard-mark"></div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'AaCheckboxCard',
|
|
props: {
|
|
options: { type: Array, default: function () { return []; } },
|
|
value: { type: Array, default: function () { return []; } },
|
|
cols: { type: Number, default: 3 }
|
|
},
|
|
methods: {
|
|
toggle: function (v) {
|
|
var arr = this.value.slice();
|
|
var idx = arr.indexOf(v);
|
|
if (idx >= 0) arr.splice(idx, 1); else arr.push(v);
|
|
this.$emit('input', arr);
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style src="./CheckboxCard.css"></style>
|