關閉再打開后,容器元素的滾動條回到頂部
解決方法:
1、通過打開開發者工具(F12),找到滾動條所屬元素為?el-textarea__inner,其父類?class="el-textarea content"
2、代碼,通過元素的方法?scrollTo(0, 0) 讓滾動條回到頂部
<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"centerv-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>