day174-contenteditable

要点

contenteditable
利用contenteditable来做行内编辑。与利用input的区别是,能够保留内容的样式,而input内输入的是纯文本。
这里依靠Vue2做了一个小组件。

应用

EditDiv组件

<!-- EditDiv Vue 2 contentEditable with v-model -->
<template>
<div
ref="diveditable"
contenteditable
v-on="listeners"
class="edit-div"
>
</div>
</template>

<script>
export default {
name: 'EditDiv',
props: {
value: {
type: String,
default: ''
}
},
data () {
return {}
},
computed: {
listeners () {
return { ...this.$listeners, input: this.onInput }
}
},
mounted () {
this.$refs.diveditable.innerText = this.value
},
methods: {
onInput (e) {
this.$emit('input', e.target.innerText)
}
},
created () {}
}
</script>
<style lang='less' scoped>
.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>
文章作者: lmislm
文章链接: http://lmislm.com/2019/07/06/2019-07-06/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 LMISLMのBlog