业务场景：在表单的输入框中input的元素中由于输入内容过长并不能很好的实现填写内容拖拉效果，便于检查用户输入是否出错
input的视觉效果
实现效果：能够自由拖拽查看填写内容
动态效果图就不放了，手机太low录屏效果差
div模拟input的视觉效果
先看下代码结构class=inputContent的元素设置contenteditable属性为true并给此元素绑定input事件，内部再嵌套一个p元素
p元素来作为可以编辑内容的包裹元素
<div id="simulation">
<div class="fr-cell">
<span class="fr-cell-title">户籍地址：
<div class="fr-cell-value">
<div class="inputContent" ref="editor" contenteditable="true" @input="changeText">
<p></p>
</div>
</div>
</div>
</div>
再来看看style样式class=inputContent的宽度要比父元素大，并将父元素宽度固定
#simulation .fr-cell {
height: 50px;
padding: 0 20px;
box-sizing: border-box;
background-color: #fff;
display: flex;
align-items: center;
font-size: 15px;
color: #333;
}
#simulation .fr-cell-title{
margin-right: 10px;
}
#simulation .fr-cell-value{
flex: 1;
display: flex;
align-items: center;
height: 50px;
overflow-x: scroll;
overflow-y: hidden;
}
#simulation .fr-cell-value .inputContent{
outline: none;
height: 24px;
line-height: 24px;
width: 200%;
white-space: nowrap;
}
#simulation .inputContent p{
margin: 0;
padding: 0;
height: 24px;
line-height: 24px;
}
最后是js代码：
<script>
export default {
name: 'simulation',
data () {
return {
val: 'Lorem ipsum'
}
},
mounted () {
this.$refs.editor.firstChild.innerText = this.val
},
methods: {
changeText (e) {
this.val = e.target.firstChild.innerText
}
}
}
</script>
重点：在于使用contenteditable属性的内部添加一个p元素来放置编辑的内容，若没有内部没有p元素则会出现我们熟悉的contenteditable属性元素的光标问题。
