容器元素的滚动条回到顶部

关闭再打开后，容器元素的滚动条回到顶部

解决方法：

1、通过打开开发者工具（F12），找到滚动条所属元素为 el-textarea__inner，其父类 class="el-textarea content"

2、代码，通过元素的方法 scrollTo(0, 0) 让滚动条回到顶部

TypeScript 复制代码

<script setup lang="ts" name="BaseShowContentDialog">
/**
 * 显示内容模态框组件
 */
defineOptions({ name: "BaseShowContentDialog" });
import { nextTick, ref } from "vue";

interface Props {
  /** 标题 */
  title?: string;
  /** 内容 */
  content?: string;
}
const props = withDefaults(defineProps<Props>(), { title: "", content: "" });
// 对话框显示标识
const dialogVisible = ref(false);

// 显示对话框
const showDialog = async () => {
  dialogVisible.value = true;

  // 滚动条回到顶部，通过开发者工具追查到滚动条对应的组件元素是 el-input，以应的原始元素是 textarea，其子类 class="el-textarea__inner"
  // 等待 DOM 渲染完毕
  await nextTick();
  // 指定元素（.content .el-textarea__inner，其中 .content 是指定的父类类名，.el-textarea__inner 是子类类名）的滚动条滚动到顶部
  (document.querySelector(".content .el-textarea__inner") as HTMLElement)?.scrollTo(0, 0);
};

// 关闭对话框
const closeDialog = () => {
  dialogVisible.value = false;
};

defineExpose({ showDialog });
</script>

<template>
  <div>
    <el-dialog
      :title="props.title"
      width="800px"
      top="0vh"
      style="border-radius: 10px"
      center
      v-model="dialogVisible"
      :close-on-press-escape="true"
      :close-on-click-modal="false"
      :show-close="false"
      draggable
      @closed="closeDialog">
      <template #>
        <el-input class="content" type="textarea" v-model="props.content" rows="26" readonly />
      </template>
      <template #footer>
        <div>
          <el-button type="primary" @click="closeDialog">关闭</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped lang="scss">
.content {
  // white-space: pre-wrap的作用是保留空格，并且除了碰到源码中的换行和会换行外，还会自适应容器的边界进行换行。
  white-space: pre-wrap;
}
</style>