day175-contenteditable(2)

要点

contenteditable
这里是contentedtable的第二种写法。

应用

VEdit组件

VEdit vue2 实现 div contenteditable=”true” 类似于 v-model 的效果

  • 参考
    https://segmentfault.com/a/1190000008261449#articleHeader1
    <template>
    <div
    ref="diveditable"
    v-html="innerText"
    :contenteditable="canEdit"
    @input="changeText"
    @focus="isLocked = true"
    @blur="isLocked = false"
    class="v-edit"
    >
    </div>
    </template>

    <script>
    export default {
    name: 'VEdit',
    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)
    }
    },
    created () {}
    }

    </script>
    <style lang='less' scoped>
    .v-edit {
    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>
文章作者: lmislm
文章链接: http://lmislm.com/2019/07/07/2019-07-07/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 LMISLMのBlog