备忘——如何把div改造成输入框与做成vue组件之注册

原文地址：https://blog.csdn.net/qq_34629352/article/details/81708024
聊天应用中怎么把DIV改造成输入框！
效果实现：

这个组件是一位大佬写的，效果不错，拿来即用，
组件代码如下：

<template>
    <div class="edit-div"
         v-html="innerText"
         :contenteditable="canEdit"
         @focus="isLocked = true"
         @blur="isLocked = false"
         @input="changeText">
    </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(){
                this.$emit('input', this.$el.innerHTML);
            }
        }
    }
</script>
<style>
    .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>

这里可以保存到项目中的任意位置，名字由自己命名，接下来引用的时候，就带上自定义的名字：

import editor from '@/components/view/editor'

然后再

components:{editor},

最后在html里面使用组件：

 <editor  id="editor-" v-model="input_content" class="editor-" ></editor>

感谢 包磊磊的这篇文章：
https://blog.csdn.net/qq_34629352/article/details/81708024
https://blog.csdn.net/qq_34629352