81 lines
1.9 KiB
Vue
81 lines
1.9 KiB
Vue
<template>
|
|
<div>
|
|
<div
|
|
class="image-container"
|
|
v-if="picture"
|
|
>
|
|
<img
|
|
:src="picture"
|
|
style="max-height: 250px !important"
|
|
/>
|
|
<div class="image-label">
|
|
<span
|
|
class="is-clickable"
|
|
@click="remove()"
|
|
>
|
|
<SvgIcon v-bind="{ name: 'bin.svg', type: 'danger', size: 30 }"></SvgIcon>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div
|
|
style="width: 130px; border-style: dashed; border-width: 1px"
|
|
v-else
|
|
>
|
|
<a @click="openImage()"><SvgIcon v-bind="{ name: 'image.svg', type: 'grey', size: 120 }"></SvgIcon></a>
|
|
</div>
|
|
<div class="mt-2">
|
|
<a @click="openCamera()">
|
|
<SvgIcon v-bind="{ name: 'camera.svg', type: 'dark', size: 28 }"></SvgIcon>
|
|
</a>
|
|
</div>
|
|
<Modal
|
|
@close="showmodal = undefined"
|
|
v-bind="showmodal"
|
|
v-if="showmodal"
|
|
@selectimage="selectImage"
|
|
></Modal>
|
|
</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;
|
|
let v = files;
|
|
this.picture = `${this.$path()}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",
|
|
title: "Chụp ảnh",
|
|
width: "650px",
|
|
};
|
|
},
|
|
},
|
|
};
|
|
</script>
|