Vue3使用contenteditable打造定制化输入

<template>
  <span contenteditable :innerHTML="content" @input="updateContent" class="custom-contenteditable"></span>
</template>

<script setup>
import { ref, watch } from 'vue';
const props = defineProps(['content']);
const emit = defineEmits(['update:content']);
​
const content = ref(props.content);
​
const updateContent = (event) => {
  event.target.innerText = event.target.innerText.replace(/\D/g, ''); // 过滤非数
  content.value = event.target.innerText;
  emit('update:content', Number(event.target.innerText));
};
​
watch(() => props.content, (newValue) => {
  content.value = newValue;
});
</script>

<style lang="scss" scoped>
.custom-contenteditable {
  box-sizing: border-box;
  border: 1px solid transparent;
  &:focus {
    outline: 0px;
    border: 1px solid rgb(24, 144, 255) !important;
  }
​
  &:hover {
    border: 1px dashed #aaaaaa;
    transition: all .5s;
  }
}
</style>

<ContentEditable v-model:content="item.data" />