<template> <div class="div-input" :class="value.length > 0 ? 'placeholder_hide' : ''" :style="{'min-width': minWidth}" :contenteditable="input" :placeholder="placeholder" @focus="ischecked = true" @blur="blurFn" @input="inputFn" v-html="text"></div> </template> <script> export default { name: 'DivInput', props: { input: { type: Boolean, default: true }, minWidth: { type: String, default: '2.2em' }, placeholder: { type: String, default: 'asdasdasda' }, value: { type: String, default: '' } }, data () { return { ischecked: false, text: this.value } }, mounted () { }, watch: { value () { // 解决光标跳动BUG if (!this.ischecked) { this.text = this.value } } }, methods: { inputFn (e) { const val = e.target.innerHTML this.$emit('input', val) }, blurFn (e) { this.ischecked = false this.text = this.value e.view.blur() } } } </script> <style lang="scss"> .div-input { display: inline-block; min-width: 4em; border-bottom: 1px solid #ccc; outline: none; padding: 0 5px; &:focus{ border-color: #333; } &:before { content: attr(placeholder); white-space: nowrap; width: 100%; color: #aaa; z-index: 0; cursor: text; } &.placeholder_hide { &:before { display: none; } } } </style><template> <div class="div-input" :class="value.l
阅读背景：
vue中使用 contenteditable 制作输入框并使用v-model做双向绑定
来源：互联网
分享到：
