|  | @@ -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>
 |