Vue使用可编辑div进行数据双向绑定的尝试

Z时代
2024-01-10
分类：综合

vue

表单可以通过简单的v-model实现数据的双向绑定（value 的单向绑定 + onChange 事件侦听），实现所见即所得，但表单是限高的，在文本的输入过程中不能自增高度，因此想到使用div进行数据双向绑定；

为了实现View=>Model，需要一个可编辑的div，这里使用了contenteditable属性：

<!-- EditableDiv.vue -->
<template>
  <div ref="div" contenteditable="true"></div>
<template/>

v-model并不能直接在div上使用，我们通过mounted周期来模拟插值的过程：

// EditableDiv.vue
export default {
  props: [\'value\'], // 组件接受一个 value 属性用来在 div 中展示
  mounted() {
    this.setVal(this.value) // 将 value 注入 div 中
  },
  methods: {
    setVal(val) {
      this.$refs.div.innerHTML = val
    }
  },
  watch: {
    // 当 props.value 发生改变时 更新 div 中的值
    value(val) {
      this.setVal(this.value)
    }
  }
}

这样就实现了视图向数据的绑定。

在实现Model=>View的过程中，会有较多头疼的问题，这篇文章做了很好的总结，但最终还是无法做到像input一样真实的绑定，只是模拟了行为。

以下是通过blur事件实现的绑定，同样也是妥协后的结果

<!-- EditableDiv.vue -->
<!-- 为 div 绑定 blur 事件以更新value -->
<template>
  <div
    ref="div"
    contenteditable="true"
    @blur="$emit(\'update:value\', $event.target.innerHTML)"
  ></div>
</template>

在使用时通过sync修饰符：

<!-- Home.vue -->
<editable-div :value.sync="content" />

作者：DADFAD
链接：https://www.jianshu.com/p/70f592a28c2e
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

在项目中会遇到需要编辑单元格的双向绑定问题,v-model双向绑定会在添加contenteditable="true"属性后失效
解决方法如下,亲测好用(v-html和@blur实现):

<td class="width90" contenteditable="true" v-html="name3.LastProduct" @blur="name3.LastProduct=$event.target.innerText"></td>

完美好用!

https://www.cnblogs.com/zhoushuang0426/p/11422421.html

https://www.cnblogs.com/cx709452428/p/10600558.html

vue中用div的contenteditable属性实现v-for遍历，双向数据绑定的动态表格编辑

1.HTML部分

  <tr v-for="(item,index) in customerVisitList2" :key="index">
      <td class="customerName"><div class="divEdit" contenteditable="true" @blur="blurFunc($event,2,index,\'customerName\')">{{customerVisitList2[index].customerName}}</div></td>
      <td class="visitTime"><div class="divEdit" contenteditable="true" @blur="blurFunc($event,2,index,\'visitTime\')">{{customerVisitList2[index].visitTime}}</div></td>
      <td class="visitDesc"><div class="divEdit" contenteditable="true" @blur="blurFunc($event,2,index,\'visitDesc\')">{{customerVisitList2[index].visitDesc}}</div></td>
      <td class="operation textAlignCenter"><div class="divEdit"><span class="iconfont icon-shanchu hoverStyle" @click="removeCustomerVisit(2,index)"></span></div></td>                                
  </tr>

2.JS部分

        blurFunc(e,type,index,name){
　　　　　　　//失去焦点实现双向数据绑定
            let content = e.target.innerText
            e.target.innerText = \'\'
            if(type === 1){
                this.customerVisitList1[index][name] = content
            }else{
                this.customerVisitList2[index][name] = content
            }
            e.target.innerText = content
        },
        addCustomerVisit(type){
　　　　　　　　//添加行
            let index
            if(type === 1){
                this.customerVisitList1.push({customerType: \'oldCustomer\',customerName:\'\',visitTime:\'\',visitDesc:\'\'})
            }else{
                this.customerVisitList2.push({customerType: \'newCustomer\',customerName:\'\',visitTime:\'\',visitDesc:\'\'})
            }
        },
        removeCustomerVisit(type,index){
            //移除行
            if(type === 1){
                console.log(this.customerVisitList1)
                this.customerVisitList1.splice(index,1)
            }else{
                console.log(this.customerVisitList2)
                this.customerVisitList2.splice(index,1)
            }
        },

3.css部分（stylus）

.divEdit{
    outline: none    
}
.textAlignCenter{
    text-align: center
}
.listTable{
            padding 4px 10px 4px 4px
            font-size 11px
            width 100%
            td,th{
                padding-left 4px
                line-height 24px
                width 100%
            }
            .customerName{
                width 150px
            }
            .visitTime{
                width 120px
            }
            .visitDesc{
                width auto
            }
            .operation{
                width 34px
            }
        }