Spaces:
Running
Running
File size: 2,594 Bytes
b456468 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 | <template>
<div ref="tuiImageEditor" style="width: 100%; height: 100%"></div>
</template>
<script>
import ImageEditor from 'tui-image-editor';
const includeUIOptions = {
includeUI: {
initMenu: 'filter',
},
};
const editorDefaultOptions = {
cssMaxWidth: 700,
cssMaxHeight: 500,
};
export default {
name: 'TuiImageEditor',
props: {
includeUi: {
type: Boolean,
default: true,
},
options: {
type: Object,
default() {
return editorDefaultOptions;
},
},
},
mounted() {
let options = this.options;
if (this.includeUi) {
options = Object.assign(includeUIOptions, this.options);
}
this.editorInstance = new ImageEditor(this.$refs.tuiImageEditor, options);
this.addEventListener();
},
destroyed() {
Object.keys(this.$listeners).forEach((eventName) => {
this.editorInstance.off(eventName);
});
this.editorInstance.destroy();
this.editorInstance = null;
},
methods: {
addEventListener() {
Object.keys(this.$listeners).forEach((eventName) => {
this.editorInstance.on(eventName, (...args) => this.$emit(eventName, ...args));
});
},
getRootElement() {
return this.$refs.tuiImageEditor;
},
invoke(methodName, ...args) {
let result = null;
if (this.editorInstance[methodName]) {
result = this.editorInstance[methodName](...args);
} else if (methodName.indexOf('.') > -1) {
const func = this.getMethod(this.editorInstance, methodName);
if (typeof func === 'function') {
result = func(...args);
}
}
return result;
},
getMethod(instance, methodName) {
const { first, rest } = this.parseDotMethodName(methodName);
const isInstance = instance.constructor.name !== 'Object';
const type = typeof instance[first];
let obj;
if (isInstance && type === 'function') {
obj = instance[first].bind(instance);
} else {
obj = instance[first];
}
if (rest.length > 0) {
return this.getMethod(obj, rest);
}
return obj;
},
parseDotMethodName(methodName) {
const firstDotIdx = methodName.indexOf('.');
let firstMethodName = methodName;
let restMethodName = '';
if (firstDotIdx > -1) {
firstMethodName = methodName.substring(0, firstDotIdx);
restMethodName = methodName.substring(firstDotIdx + 1, methodName.length);
}
return {
first: firstMethodName,
rest: restMethodName,
};
},
},
};
</script>
|