Vue组件中contenteditable div元素实现双向数据绑定的教程

<!-- CommentSection.vue -->
<template>
    <div
        id="chatId"
        @input="handleChange"
        contenteditable="true"
        placeholder="Leave a message"
        class="overflow-hidden block mx-4 text-left p-2.5 w-full text-sm text-gray-900 bg-white rounded-2xl border border-gray-300 focus:ring-blue-500 focus:border-blue-500"
    />
</template>

<script>
export default {
  methods: {
    /**
     * 处理 div 内容变化事件
     * @param {Event} e - 原生 input 事件对象
     */
    handleChange (e) {
      // 获取 div 的最新文本内容
      const newContent = e.target.textContent;
      // 通过自定义事件 'value-div' 将内容发送给父组件
      this.$emit('value-div', newContent);
    }
  }
}
</script>

<style>
/* 样式用于在 div 为空且未聚焦时显示 placeholder */
#chatId[contenteditable="true"]:empty:not(:focus):before {
    content: attr(placeholder);
    color: #9ca3af; /* 示例颜色，可根据需求调整 */
}
</style>

<!--MainPage.vue-->
<template>
    <div>
        <!-- ... 其他内容 ... -->

        <!-- 监听 CommentSection 组件发出的 'value-div' 事件 -->
        <!-- 当事件触发时，将接收到的值赋给 comment 数据属性 -->
        <CommentSection @value-div="(value) => comment = value"/>

        <button @click="submitPost()"> Submit </button>

        <!-- ... 其他内容 ... -->
    </div>
</template>

<script>
import CommentSection from '@/components/CommentSection.vue'

export default{
  name: 'MainPage',
  data(){
      return{
        comment: '', // 用于存储评论内容的数据属性
      }
  },
  components: { CommentSection },
  methods:{
      submitPost(){
         console.log('提交的评论内容:', this.comment); // 提交时可获取到最新的评论内容
         // 可以在这里执行发送评论到后端的逻辑
      },
  },
}
</script>

<!-- CommentSection.vue -->
<template>
    <div
        id="chatId"
        @input="handleChange"
        contenteditable="true"
        :placeholder="placeholder"
        class="overflow-hidden block mx-4 text-left p-2.5 w-full text-sm text-gray-900 bg-white rounded-2xl border border-gray-300 focus:ring-blue-500 focus:border-blue-500"
        ref="editableDiv"
    />
</template>

<script>
export default {
  // 声明 modelValue prop，用于接收 v-model 绑定的值
  props: {
    modelValue: {
      type: String,
      default: ''
    },
    placeholder: {
      type: String,
      default: 'Leave a message'
    }
  },
  mounted() {
    // 初始化时设置 div 的内容，以支持 v-model 的初始值
    if (this.modelValue) {
      this.$refs.editableDiv.textContent = this.modelValue;
    }
  },
  methods: {
    handleChange (e) {
      // 发出 update:modelValue 事件，Vue 会自动更新 v-model 绑定的数据
      this.$emit('update:modelValue', e.target.textContent);
    }
  },
  watch: {
    // 监听 modelValue 变化，如果外部更新了 modelValue，则更新 div 的内容
    modelValue(newValue) {
      if (this.$refs.editableDiv.textContent !== newValue) {
        this.$refs.editableDiv.textContent = newValue;
      }
    }
  }
}
</script>

<style>
#chatId[contenteditable="true"]:empty:not(:focus):before {
    content: attr(placeholder);
    color: #9ca3af;
}
</style>

<!--MainPage.vue-->
<template>
    <div>
        <!-- ... 其他内容 ... -->

        <!-- 直接使用 v-model 绑定，组件内部已处理 modelValue 和 update:modelValue -->
        <CommentSection v-model="comment" placeholder="输入您的评论..."/>

        <button @click="submitPost()"> Submit </button>

        <!-- ... 其他内容 ... -->
    </div>
</template>

<script>
import CommentSection from '@/components/CommentSection.vue'

export default{
  name: 'MainPage',
  data(){
      return{
        comment: '初始评论内容', // 可以设置初始值
      }
  },
  components: { CommentSection },
  methods:{
      submitPost(){
         console.log('提交的评论内容:', this.comment);
      },
  },
}
</script>