From fd1481651c82fc52ae3e74def49210d7ea2cee9a Mon Sep 17 00:00:00 2001 From: Lilit Date: Thu, 6 Aug 2020 14:38:51 +0400 Subject: [PATCH] Add identifier as prop #9 --- README.md | 3 ++- package.json | 2 +- src/Editor.vue | 22 ++++++++++++++++++---- 3 files changed, 21 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index 8d938b8..9e66a18 100644 --- a/README.md +++ b/README.md @@ -27,7 +27,7 @@ Then you'll be able to use Editor component. You must give your editor component ```ref```,which will help you to call the functions to set editor mode,clean objects or undo/redo your changes. ```vue - + mounted() { $this.$refs.editor.set(this.editor.mode,this.editor.options); @@ -41,6 +41,7 @@ mounted() { `ref` with the help of ref, you will control the editor +`editorId (optional)` will set editor id, allowing the use of multiple editors in the same component ## Function set(`type`,`params`) ##### With the set() function you choose editor's mode,which should get two parameters `type` and `params` Editor have 6 modes diff --git a/package.json b/package.json index c3c1988..42be7a2 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "vue-image-markup", - "version": "3.1.4", + "version": "3.1.5", "description": "vue-image-markup will provide you to edit uploaded image easily and save it.", "main": "src/Editor.vue", "repository": { diff --git a/src/Editor.vue b/src/Editor.vue index 4fda8b3..df48545 100644 --- a/src/Editor.vue +++ b/src/Editor.vue @@ -1,7 +1,6 @@ @@ -15,7 +14,18 @@ export default { name: 'Editor', - props: ['canvasWidth', 'canvasHeight'], + props: { + canvasWidth: { + type: [String,Number] + }, + canvasHeight: { + type: [String,Number] + }, + editorId: { + type: [String,Number], + default: 'c' + } + }, data() { return { canvas: null, @@ -42,7 +52,7 @@ }, mounted() { - this.canvas = new fabric.Canvas('c'); + this.canvas = new fabric.Canvas(this.editorId); this.canvas.setDimensions({width: this.canvasWidth, height: this.canvasHeight}); this.canvas.backgroundColor = "#fff"; let canvasProperties = {width: this.canvas.width, height: this.canvas.height} @@ -50,6 +60,10 @@ new CanvasHistory(this.canvas, currentCanvas); }, methods: { + changeColor(colorProperty) { + this.color = colorProperty; + this.set(this.currentActiveTool) + }, setBackgroundImage(imageUrl, backgroundColor = "#fff") { let img = new Image(); this.toDataUrl(imageUrl, (dataUri) => {