关于contenteditable = true中光标异常判定的解决方法

<template>
    <div class="edit-div"
         v-html="innerText"
         :contenteditable="canEdit"
         @focus="isLocked = true"
         @blur="isLocked = false"
         @input="changeText">
    </div>
</template>

我使用的是Vue这是模板代码

<script type="text/ecmascript-6">
    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(){
                setTimeout(() => {
                    // 在父组件中给予空格,因为在contenteditable存在首次输入光标对象判断异常,在插入数据前进行取出空格
                    this.$emit('input', this.$el.innerHTML.trim());
                }, 5);
            },
        }
    }
</script>

这是JavaScript代码

 

<style lang="scss" scoped type="text/css">
    .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>

 

我的解决办法就是,使用该组件时,v-model绑定数据传值给该组件,父组件数据给数据加空格

类似以下部分

data(){
    return {
        test: " "
    }
}