49 lines
876 B
Vue
49 lines
876 B
Vue
<template>
|
|
<div class="row p-2">
|
|
<div
|
|
v-for="(item, index) in items"
|
|
:key="index"
|
|
class="col-md-3"
|
|
>
|
|
<div class="my-check v2">
|
|
<label
|
|
@click="emitEvent(item)"
|
|
:for="item.name"
|
|
><img
|
|
style="width: 100%"
|
|
:src="'https://cdn.magico.pl/pagebuilder/images/' + item.name + '.jpg'"
|
|
:alt="item.label"
|
|
/></label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import { ref } from "vue";
|
|
import grid from "./grid.js";
|
|
|
|
export default {
|
|
emits: ["choose"],
|
|
setup(props, { emit }) {
|
|
const items = ref(grid);
|
|
|
|
function emitEvent(item) {
|
|
emit("choose", item);
|
|
}
|
|
return { items, emitEvent };
|
|
},
|
|
};
|
|
</script>
|
|
<style>
|
|
.my-check input {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
opacity: 0;
|
|
}
|
|
|
|
.my-check label {
|
|
cursor: pointer;
|
|
}
|
|
</style>
|