Browse Source

修改EditDiv

gcj 3 years ago
parent
commit
205bde0cca
1 changed files with 60 additions and 59 deletions
  1. 60 59
      src/components/Adult/preview/EditDiv.vue

+ 60 - 59
src/components/Adult/preview/EditDiv.vue

@@ -1,67 +1,68 @@
 <template>
-    <div class="edit-div"
-         v-html="innerText"
-         :contenteditable="canEdit"
-         @focus="isLocked = true"
-         @blur="isLocked = false"
-         @input="changeText"
-         placeholder="输入">
-    </div>
+  <div
+    class="edit-div"
+    v-html="innerText"
+    :contenteditable="canEdit"
+    @focus="isLocked = true"
+    @blur="isLocked = false"
+    @input="changeText"
+    placeholder="输入"
+  ></div>
 </template>
 <script>
 export default {
-        name: 'editDiv',
-        props: {
-            value: {
-                type: String,
-                default: ''
-            },
-            canEdit: {
-                type: Boolean,
-                default: true
-            }
-        },
-        data(){
-            return {
-                innerText: this.value,
-                isLocked: false
-            }
-        },
-        watch: {
-            'value'(){
-                if (!this.isLocked || !this.innerText) {
-                    this.innerText = this.value;
-                }
-            }
-        },
-        methods: {
-            changeText(){
-                if(this.$el.innerHTML.length<210){
-                    this.$emit('input', this.$el.innerHTML);
-                }else{
-                    this.$el.innerHTML= this.$el.innerHTML.substring(0,210)
-                }
-            }
-        }
-    }
+  name: "editDiv",
+  props: {
+    value: {
+      type: String,
+      default: "",
+    },
+    canEdit: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  data() {
+    return {
+      innerText: this.value,
+      isLocked: false,
+    };
+  },
+  watch: {
+    value() {
+      if (!this.isLocked && !this.innerText) {
+        this.innerText = this.value;
+      }
+    },
+  },
+  methods: {
+    changeText() {
+      if (this.$el.innerHTML.length < 210) {
+        this.$emit("input", this.$el.innerHTML);
+      } else {
+        this.$el.innerHTML = this.$el.innerHTML.substring(0, 210);
+      }
+    },
+  },
+};
 </script>
 <style lang="scss" rel="stylesheet/scss">
-    .edit-div {
-        width: 100%;
-        height: 100%;
-        overflow: auto;
-        word-break: break-all;
-        outline: none;
-        user-select: text;
-        white-space: pre-wrap;
-        text-align: left;
-        &[contenteditable=true]{
-            user-modify: read-write-plaintext-only;
-            &:empty:before {
-                content: attr(placeholder);
-                display: block;
-                color: #ccc;
-            }
-        }
+.edit-div {
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  word-break: break-all;
+  outline: none;
+  user-select: text;
+  white-space: pre-wrap;
+  text-align: left;
+  &[contenteditable="true"] {
+    user-modify: read-write-plaintext-only;
+    &:empty:before {
+      content: attr(placeholder);
+      display: block;
+      color: #ccc;
     }
+  }
+}
 </style>