97 lines
2.2 KiB
Vue
97 lines
2.2 KiB
Vue
<template>
|
|
<div class="is-flex is-gap-1">
|
|
<div
|
|
v-if="picture"
|
|
class="image is-128x128 relative"
|
|
>
|
|
<NuxtImg :src="picture" />
|
|
<div class="absolute top-2 right-2">
|
|
<button
|
|
class="button is-small is-light is-danger"
|
|
@click="remove"
|
|
>
|
|
<span class="icon">
|
|
<Icon
|
|
name="material-symbols:delete-outline-rounded"
|
|
:size="20"
|
|
/>
|
|
</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div
|
|
v-else
|
|
@click="openImage()"
|
|
class="size-35 rounded-md is-clickable is-flex is-justify-content-center is-align-items-center"
|
|
style="border: 1px dashed var(--bulma-grey-light)"
|
|
>
|
|
<Icon
|
|
name="material-symbols:add-photo-alternate-outline-rounded"
|
|
:size="50"
|
|
class="has-text-grey-light"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<button
|
|
class="button is-medium is-light is-primary"
|
|
@click="openCamera()"
|
|
>
|
|
<span class="icon">
|
|
<Icon
|
|
name="material-symbols:photo-camera-outline-rounded"
|
|
:size="24"
|
|
/>
|
|
</span>
|
|
</button>
|
|
</div>
|
|
<Modal
|
|
@close="showmodal = undefined"
|
|
v-bind="showmodal"
|
|
v-if="showmodal"
|
|
@selectimage="selectImage"
|
|
/>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
props: ["file", "image", "show"],
|
|
data() {
|
|
return {
|
|
showmodal: undefined,
|
|
display: this.show || [],
|
|
picture: this.image || undefined,
|
|
vfile: undefined,
|
|
};
|
|
},
|
|
methods: {
|
|
openImage() {
|
|
this.showmodal = {
|
|
component: "media/Imagebox",
|
|
title: "Thư viện hình ảnh",
|
|
width: "90%",
|
|
vbind: { source: true },
|
|
};
|
|
},
|
|
selectImage(files) {
|
|
this.showmodal = undefined;
|
|
const v = files;
|
|
this.picture = `${this.$getpath()}download/?name=${v.file__file || v.file}&type=file`;
|
|
v.image = this.$copy(this.picture);
|
|
this.vfile = v;
|
|
this.$emit("picture", v);
|
|
},
|
|
remove() {
|
|
this.vfile = undefined;
|
|
this.picture = undefined;
|
|
},
|
|
openCamera() {
|
|
this.showmodal = {
|
|
component: "media/Camera",
|
|
width: "700px",
|
|
height: "auto",
|
|
};
|
|
},
|
|
},
|
|
};
|
|
</script>
|