div contenteditable自定义组件

<template>
  <div class="edit-border" @blur="divBlur" @input="divInput" :contenteditable="!disabled" ref="ableRef"></div>
</template>
<script setup>
import { ref, onMounted, nextTick } from 'vue'
/*
    <input-textarea
        v-model:inputValue="value"
        disabled
        maxlength="3000"
        @divInput="divInput"
        @divBlur="divInput"
    >
    </input-textarea>
*/
const props = defineProps({
  inputValue: { type: [Number, String], default: '' },
  disabled: { type: Boolean, default: false },
  maxlength: { type: [Number, String], default: 3000 }
})
const emits = defineEmits(['update:inputValue', 'divBlur', 'divInput'])
const ableRef = ref(null)
function divInput() {
  // 限制输入字数
  if (ableRef.value.innerText.length > props.maxlength) {
    ableRef.value.innerText = ableRef.value.innerText.slice(0, props.maxlength)
    // 调整光标
    ableRef.value.focus()
    document.execCommand('selectAll', false, null)
    document.getSelection().collapseToEnd()
  }
  emits('update:inputValue', ableRef.value.innerText)
  emits('divInput', ableRef.value.innerText)
}
function divBlur() {
  emits('divBlur', ableRef.value.innerText)
}
onMounted(() => {
  nextTick(() => {
    ableRef.value.innerText = props.inputValue
  })
})
</script>
<style lang="scss" scoped>
.edit-border {
  cursor: pointer;
  border: 1px solid #eee;
  padding: 5px;
  border-radius: 4px;
  margin: 10px;
  text-align: left;
}
</style>