容器元素的滾動條回到頂部

關閉再打開后,容器元素的滾動條回到頂部

解決方法:

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>

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/web/95937.shtml
繁體地址,請注明出處:http://hk.pswp.cn/web/95937.shtml
英文地址,請注明出處:http://en.pswp.cn/web/95937.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

分布式專題——2 深入理解Redis線程模型

1 Redis 簡介 1.1 Redis 是什么&#xff1f; Redis 全稱 Remote Dictionary Server&#xff08;遠程字典服務&#xff09;&#xff0c;是一個開源的高性能 Key-Value 數據庫&#xff1b; 官網&#xff1a;Redis - The Real-time Data Platform&#xff1b; 引用官網上的?個…

simd學習

如何查看cpu是否支持simd&#xff1f;# 檢查特定指令集 grep -o avx2 /proc/cpuinfo | head -1 # 檢查AVX2 grep -o sse4 /proc/cpuinfo | head -1 # 檢查SSE4 grep -o avx512 /proc/cpuinfo | head -1 # 檢查AVX512gcc編譯選項&#xff0c;增加支持simd-mavx2 -D__AVX2__SS…

LabVIEW汽車發動機振動測試

以某型號四缸汽油發動機為測試對象&#xff0c;借助 LabVIEW 平臺與高精度數據采集硬件&#xff0c;開展發動機全工況振動測試。通過實時采集缸體、曲軸箱關鍵部位振動信號&#xff0c;分析振動特征與故障關聯&#xff0c;驗證發動機運行穩定性&#xff0c;為后期優化設計提供數…

android 四大組件—Service

啟動服務startService//啟動服務&#xff0c;通過類名 Intent intent new Intent(this, WiFiAutoLinkService.class); startService(intent); //通過字符串啟動 Intent intent new Intent(); intent.setAction("com.launcher.app"); intent.setPackage("com.l…

https + 域名 + 客戶端證書訪問模式

項目使用金融云部署&#xff0c;對外暴露IP訪問&#xff0c;因安全合規要求必須使用域名訪問&#xff0c;但公司又不提供域名。故&#xff0c;改為 https 域名 客戶端證書雙向認證 訪問模式&#xff0c;大大提升安全性。 1. 密鑰文件類型 .key、.csr、.cer&#xff08;或 .cr…

ICPC 2023 Nanjing R L 題 Elevator

[ProblemDiscription]\color{blue}{\texttt{[Problem Discription]}}[Problem Discription] 來源&#xff1a;洛谷。侵權則刪。 [Analysis]\color{blue}{\texttt{[Analysis]}}[Analysis] 貪心。優先運送樓層高的貨物&#xff0c;在能裝下的情況下盡量多裝。 因為運送貨物的代價…

81-dify案例分享-零代碼用 Dify 使用夢 AI 3.0 多模態模型,免費生成影視級視頻

1.前言 即夢AI作為字節跳動旗下的AI繪畫與視頻生成平臺&#xff0c;近年來不斷推出新的模型和功能&#xff0c;以提升用戶體驗和創作能力。 即夢AI 3.0是即夢AI的最新版本&#xff0c;于2025年4月發布&#xff0c;標志著其在中文生圖模型上的重大升級。該版本不僅在中文生圖能…

SQL 進階指南:視圖的創建與使用(視圖語法 / 作用 / 權限控制)

在 SQL 操作中&#xff0c;你是否遇到過 “頻繁查詢多表關聯的固定結果”“不想讓他人看到表中的敏感字段” 這類問題&#xff1f;比如 “每周都要查‘技術部員工的姓名、職位、薪資’”&#xff0c;每次都寫多表關聯語句很麻煩&#xff1b;又比如 “給實習生開放數據查詢權限&…

【全部更新完畢】2025數學建模國賽C題思路代碼文章高教社杯全國大學生數學建模-NIPT 的時點選擇與胎兒的異常判定

B題全部更新完畢 包含完整的文章全部問題的代碼、結果、圖表 完整內容請看文末最后的推廣群NIPT 的時點選擇與胎兒的異常判定 摘要 在問題一中&#xff0c;我們以無創產前檢測&#xff08;NIPT&#xff09;數據為研究對象&#xff0c;圍繞“胎兒 Y 染色體濃度”(記為 (V)) 隨孕…

Redis(43)Redis哨兵(Sentinel)是什么?

Redis Sentinel&#xff08;哨兵&#xff09;是一種用于管理 Redis 實例的高可用性解決方案。它提供了監控、通知和自動故障轉移等功能&#xff0c;確保 Redis 服務在發生故障時能夠自動恢復&#xff0c;提供高可用性和可靠性。以下是詳細介紹 Redis Sentinel 的功能及其代碼示…

蓓韻安禧DHA純植物藻油純凈安全零添加守護母嬰健康

在母嬰健康領域&#xff0c;選擇合適的營養補充品至關重要。純植物藻油DHA源自純凈藻類&#xff0c;有效規避了海洋重金屬污染的風險&#xff0c;確保安全無隱患。配方堅持零添加香精、色素和防腐劑&#xff0c;避免不必要的化學物質攝入&#xff0c;讓媽媽和寶寶更安心。同時&…

釘釘 AI 深度賦能制造業 LTC 全流程:以釘釘宜搭、Teambition 為例

制造業 LTC 流程痛點剖析?在制造業&#xff0c;線索到現金&#xff08;LTC&#xff0c;Lead to Cash&#xff09;的全流程包含從潛在客戶線索的發現、商機培育、銷售轉化、訂單執行到最終收款的一系列復雜環節。傳統制造業在這一流程中面臨諸多挑戰&#xff1a;客戶需求的多樣…

理解UE4中C++17的...符號及enable_if_t的用法及SFINAE思想

下面是一段C17的代碼&#xff1a;//函數1&#xff1a;template <typename... BufferTypes,std::enable_if_t<std::conjunction<CanAppendBufferType<std::decay_t<BufferTypes>>...>::value> * nullptr> inline explicit FCompositeBuffer(Buff…

安全419正式公布《甲方安全建設精品采購指南》案例首推運營商行業數據安全核心推薦廠商

在數字經濟加速滲透與《網絡數據安全管理條例》全面實施的雙重背景下&#xff0c;運營商作為數據要素流通的核心樞紐&#xff0c;其安全防護體系建設已成為數字基礎設施保障的關鍵環節。近日&#xff0c;安全 419 正式公布《甲方安全建設精品采購指南》&#xff0c;從近 300 個…

基礎詞根-匯總

ros rus粗糙 ris cos cus cis切lite文字 late面 側面ven 來 cess走/agdotect 覆蓋 covercele 聚集 加速 gre 聚集&#xff0c;accumu聚集gress 抵達 靠近&#xff0c;aggressive侵略性humor humir 大地 土地chron 時間 time&#xff0c;宇宙的宙lumi 光lightviv vil volun vot/…

JVM中常見的GC垃圾收集器

文章目錄 目錄 1. Serial GC&#xff08;串行收集器&#xff09; 2. Parallel GC&#xff08;并行收集器&#xff09; 3. CMS&#xff08;Concurrent Mark-Sweep&#xff0c;并發標記 - 清除&#xff09; 4. G1&#xff08;Garbage-First&#xff0c;垃圾優先&#xff09; …

嵌入式C語言之鏈表冒泡排序

鏈表冒泡排序一是可以交換指針域的值&#xff0c;二是可以交換指針typedef struct st_node{int score;struce st_node *next;}Node,*LinkList;LinkList createList(){Node *head (Node *)malloc(sizeof(Node));if(NULL head){printf("內存分配失敗!"):return NULL;…

遠場代碼學習_FDTD_farfield

項目4.2 farfield3d - Script command在3D模擬中將給定的功率或場剖面監視器或直線數據集投射到遠場。返回電場強度|E| 2。語法描述 out farfield3d("mname",f, na, nb, illumination, periodsa, periodsb, index, direction)&#xff1b; 將給定的功率或場分布監…

Adobe Illustrator(Ai) 2022安裝教程與下載地址

Adobe Illustrator&#xff08;通常簡稱 AI&#xff09;是一款由 Adobe 公司開發的、基于矢量圖形的專業設計軟件。它與 Photoshop&#xff08;基于位圖/像素&#xff09;和 InDesign&#xff08;專注于頁面排版&#xff09;并稱為數字創意領域的“三巨頭”&#xff0c;是平面設…

小迪web自用筆記27

框架就是一些封裝好的東西*上節課補&#xff1a;JS負責美化框架的&#xff08;發送HTTP請求前端&#xff0c;js相當于前端并且附加上一些連接后端的功能。&#xff09;&#xff0c;JAVA是后端。PHPthink&#xff08;用的最多的框架&#xff09;URL&#xff1a;原&#xff1a;ht…