editable image add image icon
This commit is contained in:
parent
e9b6b90816
commit
4b215617f1
@ -1070,9 +1070,11 @@ div.editable-image{
|
||||
text-align: center;
|
||||
transition: all 0.2s ease-in-out;
|
||||
position: relative;
|
||||
>span{
|
||||
>svg{
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
width:50px; height:50px;
|
||||
color: #333;
|
||||
}
|
||||
cursor: pointer;
|
||||
box-sizing: border-box;
|
||||
@ -1081,6 +1083,9 @@ div.editable-image{
|
||||
}
|
||||
|
||||
}
|
||||
div.delete-btn{
|
||||
cursor: pointer;
|
||||
}
|
||||
input[type="file"]{
|
||||
display: none;
|
||||
}
|
||||
|
@ -59,6 +59,7 @@ export default {
|
||||
<section class="entite">
|
||||
<section v-if="entite.image.length || entite.can_update" class="image">
|
||||
<ImageEditable
|
||||
:can_update="entite.can_update"
|
||||
:image="entite.image"
|
||||
:data="{
|
||||
entitytype: 'node',
|
||||
|
@ -9,16 +9,19 @@ import { UserStore } from '@stores/user'
|
||||
|
||||
import SvgIcon from '@jamescoyle/vue-icon';
|
||||
import { mdiTrashCanOutline } from '@mdi/js';
|
||||
import { mdiImagePlus } from '@mdi/js';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
can_update: Boolean,
|
||||
image: Object,
|
||||
data: Object
|
||||
},
|
||||
emits: ['updated'],
|
||||
data(){
|
||||
return {
|
||||
mdiTrashCanOutline_path: mdiTrashCanOutline
|
||||
mdiTrashCanOutline_path: mdiTrashCanOutline,
|
||||
mdiImagePlus_path: mdiImagePlus
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@ -121,13 +124,15 @@ export default {
|
||||
<img :src="image[0].url" :alt="image[0].alt"/>
|
||||
<figcaption v-if="image[0].alt">{{ image[0].alt }}</figcaption>
|
||||
</figure>
|
||||
<svg-icon type="mdi" :path="mdiTrashCanOutline_path" @click="onDeleteImg" />
|
||||
<div v-if="can_update" @click="onDeleteImg" class="delete-btn">
|
||||
<svg-icon type="mdi" :path="mdiTrashCanOutline_path" />
|
||||
</div>
|
||||
</template>
|
||||
<!-- with out img -->
|
||||
<template v-else>
|
||||
<template v-else-if="can_update">
|
||||
<div @click="addImage" class="btn">
|
||||
|
||||
<span>ajouter une image</span>
|
||||
<svg-icon type="mdi" :path="mdiImagePlus_path" @click="onDeleteImg" />
|
||||
<!-- <span>ajouter une image</span> -->
|
||||
</div>
|
||||
<input ref="image_input" type="file" accept ="image/jpeg, image/png, image/jpg" @input="onInput">
|
||||
</template>
|
||||
|
Loading…
x
Reference in New Issue
Block a user