traffic-laser/src/views/tables/write/doc.vue

<!--  -->
<template>
  <div class="num-box">
    <span>第</span>
    <div class="input-box">{{ pageIndex + 1 }}</div>
    <span style="margin-right: 30px">页</span> <span>共</span>
    <div class="input-box">{{ page }}</div>
    <span>页</span>
  </div>

  <div class="write-box" id="view-container">
    <div class="content" :style="`height:${inputHeight}px;`" @click="goWrite">
      <!-- <div contenteditable v-html="text" :style="`height:${lineCount * 40}px;`" @keydown="hanlderWrite($event)" id="view-info"></div> -->
      <div :style="`transform:translateY(${pageIndex == 1 ? -400 : -400 - (pageIndex - 1) * inputHeight}px);`" id="view-info" v-html="text"></div>
      <div class="msg-box">{{ text }}</div>
      <div class="item" :style="`top:${index * 40}px;`" v-for="(i, index) in lineCount"></div>
    </div>
  </div>

  <div class="bottom-name">
    <span v-if="type == '1'">被询问人:</span>
    <span v-else>被讯问人:</span>
    <div style="flex: 1" contenteditable></div>
  </div>
</template>

<script setup>
import { reactive, ref, toRefs, onBeforeMount, onMounted, nextTick, defineProps, defineEmits } from 'vue';
import { router } from '@/router';

const props = defineProps({
  text: {
    type: String,
    default: '',
  },
  page: {
    type: Number,
    default: 1,
  },
  pageIndex: {
    type: Number,
    default: 1,
  },
});
const emits = defineEmits(['goWrite']);
const type = ref(router.currentRoute.value.query.type);
const lineCount = ref(1);
const inputHeight = ref(0);
const getLineCount = () => {
  let containerH = document.getElementById('view-container').clientHeight;
  let count = Math.floor(containerH / 40);
  lineCount.value = count;
  inputHeight.value = count * 40;
  // textAreaHeight.value = lineCount.value * 40;
};

const goWrite = () => {
  let text = window.getSelection();
  let textIndex = text.anchorOffset;
  emits('goWrite', { textIndex });
};

onMounted(async () => {
  await nextTick();
  getLineCount();
});
</script>
<style lang="scss" scoped>
div[contenteditable] {
  outline: none;
}
.bottom-name {
  width: 100%;
  height: 40px;
  line-height: 40px;
  margin: 28px auto 0;
  display: flex;
  font-size: 24px;
}
.num-box {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 10px;

  .input-box {
    width: 64px;
    height: 30px;
    line-height: 30px;
    border-bottom: 1px solid #000;
    text-align: center;
    margin: 0 5px;
  }
}
.write-box {
  width: 100%;
  // height: calc(100vh - 100px);
  height: 1080px;

  overflow: hidden;
  .content {
    overflow: hidden;
    padding-bottom: 5px;
    position: relative;
    font-size: 24px;
    .item {
      width: 100%;
      height: 40px;
      border-bottom: 1px solid #000;
      box-sizing: border-box;
      position: absolute;
      left: 0;
    }
    #view-info {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      // height: 100%;
      line-height: 40px;
      outline: none;
      resize: none;
      z-index: 2;
      overflow: hidden;
      white-space: pre-wrap;
    }
    .msg-box {
      min-height: 40px;
      white-space: pre-wrap;
      opacity: 0;
      position: absolute;
      width: 100%;
      line-height: 40px;
      z-index: 1;
    }
  }
}
</style>