37 lines
No EOL
1.2 KiB
Vue
37 lines
No EOL
1.2 KiB
Vue
|
|
<template>
|
|
<div class="image-picker">
|
|
<div>
|
|
<img v-if="image && image !== 'none'" :src="image" :class="imageClass" alt="Image Preview">
|
|
</div>
|
|
<button class="button" type="button" v-on:click="showImageManager">Select Image</button>
|
|
<br>
|
|
<button class="text-button" v-on:click="reset" type="button">Reset</button> <span class="sep">|</span> <button class="text-button neg" v-on:click="remove" type="button">Remove</button>
|
|
<input type="hidden" :name="name" :id="name" v-model="image">
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
module.exports = {
|
|
props: ['currentImage', 'name', 'imageClass'],
|
|
data: function() {
|
|
return {
|
|
image: this.currentImage
|
|
}
|
|
},
|
|
methods: {
|
|
showImageManager: function(e) {
|
|
var _this = this;
|
|
ImageManager.show(function(image) {
|
|
_this.image = image.url;
|
|
});
|
|
},
|
|
reset: function() {
|
|
this.image = '';
|
|
},
|
|
remove: function() {
|
|
this.image = 'none';
|
|
}
|
|
}
|
|
};
|
|
</script> |