自定义子组件的双向数据绑定----可编辑div

最新推荐文章于 2024-07-24 09:44:18 发布

cyl97

最新推荐文章于 2024-07-24 09:44:18 发布

阅读量379

点赞数

分类专栏： vue踩坑记录文章标签： vue vue.js

本文链接：https://blog.youkuaiyun.com/cyl97/article/details/114576129

版权

vue踩坑记录专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一个Vue子组件inputDiv，用于实现可编辑的DIV，并解决了输入顺序错乱的问题。通过自定义inputDiv组件，利用v-model实现了双向数据绑定，确保了光标位置正确及文本输入顺序正常。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue—可编辑div的双向数据绑定，解决输入顺序错乱问题

新建子组件inputDiv.vue:

<template>
  <div
    class="sessionListBox_footer_input"
    contenteditable="true"
    ref="inpMsgRef"
    v-text="msg"
    @input="inputMsg"
    @focus="isLocked = true"
    @blur="isLocked = false"
  >
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: this.value,
      isLocked: false
    }
  },
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  methods: {
    inputMsg() {
      this.$emit('input', this.$el.innerHTML)
    }
  },
  computed: {},
  watch: {
    value(n, o) {
      if (!this.isLocked || !this.msg) {
        this.msg = this.value
      }
    }
  }
}
</script>

<style lang="less" scoped>
  .sessionListBox_footer_input {
        width: 99%;
        height: 80%;
        text-align: left;
        padding-left: 1%;
        outline: none;
  }
</style>

父组件直接使用

```bash
      <inputDiv v-model="inpMsg"></inputDiv>

以上内容借鉴于：[1(https://blog.youkuaiyun.com/weixin_38500689/article/details/103270928)
已经解决了双向绑定数据后造成光标一直在处于第一个字符前面，输入顺序错乱的问题（如输入12345，得到54321）。
就我本人使用，还遇到了一点小问题，我的输入框一开始是隐藏的，每次当我关闭输入框，重新打开的时候，输入的第一个字符光标依然不能正常移动（输入12345，得到23451）。在父组件使用的时候，把双向绑定的初始值由空字符串’’ ===>变成带一个空格的空字符串’ ’