Vue使用div模拟input框，并实现vue双向绑定

最新推荐文章于 2025-02-26 14:48:53 发布

壮乡码农

最新推荐文章于 2025-02-26 14:48:53 发布

阅读量3.1k

点赞数 4

文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/yuwusheng18/article/details/121230450

版权

这篇博客介绍了如何利用HTML的contenteditable属性将div转化为可编辑区域，通过设置属性和监听input、focus、blur事件，实现内容的实时更新与编辑状态的控制。示例代码展示了在Vue中应用这一特性的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

利用div的contenteditable属性，该属性设置为true可以使div可以进行编辑

<template>
    <div class="h-edit-head-content-title edit-div" contenteditable="true" v-text="content"
         @input="changeText"
         @focus="isLocked = true"
         @blur="isLocked = false"
    >
    </div>
</template>

<script>
    module.exports ={
        name: 'editor',
        props: ['value'],
        model: {
            prop: 'value',
            event: 'input',
        },
        data() {
            return {
                content: this.value, //编辑器内容
                isLocked: false
            }
        },
        methods: {
            changeText(){

                //this.content = this.$el.innerHTML;
                this.$emit('input',this.$el.innerHTML);
            }
        }, watch: {
            'value'(){
                if (!this.isLocked || !this.content) {
                    this.content = this.value;
                    //console.log(this.content);
                }
            }
        }

    }
</script>


<style >

    .params .el-form-item__content{
        line-height: 0px !important;
        position: relative;
        font-size: 14px;
    }

    .edit-div {
        width: 100%;
        height: 100%;
        overflow: auto;
        word-break: break-all;
        outline: none;
        user-select: text;
        white-space: pre-wrap;
        text-align: left;
    }
    .edit-div[contenteditable=true] {
        user-modify: read-write-plaintext-only;
    }
    .edit-div[contenteditable=true]:empty:before {
        content: attr(placeholder);
        display: block;
        color: #ccc;
    }
</style>