Note: how to transform a div into an input box and register it as a vue component

Original address:
How to transform DIV into input box in chat application!
Effect realization:

This component was written by a big guy. It works well. It's ready to use,
The component code is as follows:

    <div class="edit-div"
         @focus="isLocked = true"
         @blur="isLocked = false"
    export default{
        name: 'editDiv',
        props: {
            value: {
                type: String,
                default: ''
            canEdit: {
                type: Boolean,
                default: true
            return {
                innerText: this.value,
                isLocked: false
        watch: {
                if (!this.isLocked || !this.innerText) {
                    this.innerText = this.value;
        methods: {
                this.$emit('input', this.$el.innerHTML);
    .edit-div {
        width: 100%;
        height: 100%;
        overflow: auto;
        word-break: break-all;
        outline: none;
        user-select: text;
        white-space: pre-wrap;
        text-align: left;
            user-modify: read-write-plaintext-only;
            &:empty:before {
                content: attr(placeholder);
                display: block;
                color: #ccc;

Here, you can save it to any location in the project. The name is named by yourself. Next, when you reference it, you will bring the user-defined Name:

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

Then again


Finally, use components in html:

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

Thanks to Bao Lei for this article:

Posted on Fri, 08 Nov 2019 15:06:12 -0500 by New Coder