|
@@ -90,7 +90,6 @@ export default {
|
|
mounted() {
|
|
mounted() {
|
|
this.initData();
|
|
this.initData();
|
|
this.$refs.editor.addEventListener("paste", pasteHandle.bind(this));
|
|
this.$refs.editor.addEventListener("paste", pasteHandle.bind(this));
|
|
- this.$refs.editor.addEventListener("wheel", this.wheelEventHandle);
|
|
|
|
this.$refs.editor.addEventListener("click", this.clickEventHandle);
|
|
this.$refs.editor.addEventListener("click", this.clickEventHandle);
|
|
},
|
|
},
|
|
beforeDestroy() {
|
|
beforeDestroy() {
|
|
@@ -143,27 +142,7 @@ export default {
|
|
this.$emit("input", json);
|
|
this.$emit("input", json);
|
|
this.$emit("change", json);
|
|
this.$emit("change", json);
|
|
},
|
|
},
|
|
- wheelEventHandle(e) {
|
|
|
|
- // console.log(e);
|
|
|
|
- // console.dir(e.target);
|
|
|
|
- const el = e.target;
|
|
|
|
- if (el.tagName && el.tagName === "IMG") {
|
|
|
|
- e.preventDefault();
|
|
|
|
- e.stopPropagation();
|
|
|
|
- const shift = e.deltaY > 0;
|
|
|
|
- const newWidth =
|
|
|
|
- +getComputedStyle(el).width.replace("px", "") + (shift ? 1 : -1);
|
|
|
|
- // console.log(newWidth, el.naturalWidth);
|
|
|
|
- if (newWidth >= 16 && newWidth <= el.naturalWidth) {
|
|
|
|
- el.style.width = newWidth + "px";
|
|
|
|
- el.style.height =
|
|
|
|
- (newWidth / el.naturalWidth) * el.naturalHeight + "px";
|
|
|
|
- // el.setAttribute("width", newWidth);
|
|
|
|
-
|
|
|
|
- this.emitJSON();
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
|
|
+ // image resize
|
|
clickEventHandle(e) {
|
|
clickEventHandle(e) {
|
|
const el = e.target;
|
|
const el = e.target;
|
|
if (el.tagName && el.tagName === "IMG") {
|
|
if (el.tagName && el.tagName === "IMG") {
|