前言：哈嘍，大家好，今天給大家分享一篇文章！并提供具體代碼幫助大家深入理解，徹底掌握！創作不易，如果能幫助到大家或者給大家一些靈感和啟發，歡迎收藏+關注哦 💕

---

📚📗📕📘📖🕮💡📝🗂???🛠?💻🚀🎉🏗?🌐🖼?🔗📊👉🔖??🌟🔐??·正文開始??·🎥😊🎓📩😺🌈🤝🤖📜📋🔍?🧰?📄📢📈 🙋0??1??2??3??4??5??6??7??8??9??🔟🆗*??#??

DeepSeek 助力 Vue 開發：打造絲滑的返回頂部按鈕（Back to Top）

📚前言

2023 年 11 月 2 日：發布首個開源代碼大模型 DeepSeek Coder，支持多種編程語言的代碼生成、調試和數據分析任務。這一模型的發布，標志著 DeepSeek 在大語言模型領域邁出了重要的第一步。它為開發者提供了強大的代碼生成工具，能夠幫助開發者快速生成高質量的代碼，提高開發效率。同時，該模型的開源策略也吸引了眾多開發者的關注和參與，為 DeepSeek 在開源社區中積累了良好的口碑。

2024 年 5 月：發布第二代開源混合專家（MoE）模型 DeepSeek-V2，總參數達 2360 億，推理成本降至每百萬 token 僅 1 元人民幣。DeepSeek-V2 采用了創新的架構，例如注意力機制方面的 MLA（多頭潛在注意力）和前饋網絡方面的 DeepSeekMoE 架構等，以實現具有更高經濟性的訓練效果和更高效的推理。該模型的 API 定價僅為每百萬 tokens 輸入 1 元、輸出 2 元，價格僅為 GPT-4 Turbo 的百分之一，引發了中國 AI 大模型的價格戰。這一模型的發布，展示了 DeepSeek 在模型架構和成本控制方面的創新能力，使得大語言模型的應用成本大幅降低，為更多企業和開發者使用大語言模型提供了可能。

📚進入安裝好的DeepSeek

0基礎3步部署自己的DeepSeek安裝步驟

打開搭建好的DeepSeek應用。

進入應用。

📚頁面效果

📚指令輸入

功能要有
container（按鈕容器，支持輸入html,默認是一個↑箭頭，container居中顯示在按鈕中）
size（按鈕大小，類型是string，可選值是 small[20x20]px normal[40x40]px big[60x60]px）
right(控制其顯示位置，距離頁面右邊距， 類型 string，默認40px)
bottom(控制其顯示位置，距離頁面底部距離， 類型 string，默認40px)
下面是現有目錄
vueAndDeepseek/
├── src/ # 源代碼目錄
│ ├── assets/ # 靜態資源
│ │ ├── base.css
│ │ ├── main.css
│ │ └── logo.svg
│ ├── components/ # 組件目錄
│ │ ├── HelloWorld.vue
│ │ ├── TheWelcome.vue
│ │ ├── WelcomeItem.vue
│ │ ├── Progress/
│ │ │ └── Progress.vue
│ │ ├── Accordion/
│ │ ├── BackToTop/
│ │ ├── Timeline/
│ │ ├── Tabs/
│ │ └── icons/
│ ├── router/ # 路由配置
│ │ └── index.js
│ ├── stores/ # Pinia 狀態管理
│ │ └── counter.js
│ ├── views/ # 頁面組件
│ │ ├── ProgressView.vue
│ │ ├── TabsView.vue
│ │ ├── TimelineView.vue
│ │ ├── BackToTopView.vue
│ │ ├── AccordionView.vue
│ │ └── AboutView.vue
│ ├── App.vue # 根組件
│ └── main.js # 應用入口
├── public/ # 公共資源目錄
├── index.html # HTML 模板
├── package.json # 項目配置
├── vite.config.js # Vite 配置
└── node_modules/ # 依賴包目錄

📚think

好吧，我現在需要幫助用戶解決在他們的Vue項目中實現一個自定義按鈕容器的問題。根據用戶提供的信息，功能要求包括支持內聯HTML、默認顯示一個↑箭頭，并且容器要居中顯示在按鈕中。此外，還有size屬性來控制按鈕大小，分別是small、normal和big，對應的尺寸為20x20px、40x40px和60x60px。另外，right和bottom屬性可以控制按鈕距離頁面右邊和底部的距離，分別默認為40px。

首先，我需要明確用戶的項目結構，他們已經有一個 Vue 和 Nuxt 項目結構。主要關注點在components目錄下的自定義組件實現上。用戶可能已經有部分代碼，但需要補充或修正。

我應該從創建一個新的Vue組件開始，這個組件將是容器，名為ButtonContainer.vue。該組件需要接受 props，包括size、right、bottom和children（用于內聯的HTML內容）。

接下來，我會設計這個組件的模板結構。在模板中，我需要使用vue-iuion這個庫中的div作為容器，因為它可以在Flex布局中居中內容。設置類名，比如container，內部又有button-container來控制按鈕的位置。

然后，我需要處理size屬性，將其轉換為具體的px值，并應用到對應的樣式類上，比如使用sizes-classes：比如small對應 text-20、normal對應text-40，big對應text-60。同樣地，right和bottom屬性也要轉換成數值并作為CSS變量。

另外，我需要確保容器能夠居中顯示，所以可能會設置container的內邊距，并使用flexbox或grid布局來中心對齊內容。此外，還需處理不同size情況下的尺寸，比如small時，整個容器大小是20x20，而button-container則可能根據內容自動調整。

在樣式部分，我需要定義base.css和main.css，以支持這些樣式類。比如，設置button-container的內邊距，以及如何居中顯示。這可能涉及到position: absolute、right和bottom屬性的應用，并結合 viewport的位置來確定相對定位。

我還應該考慮在組件內部添加一些條件判斷，比如根據size的不同，選擇不同的文本大小。或者，更好的方式是將size映射到不同的類名，這樣可以避免在每個標簽上多次添加樣式。

最后，我需要確保用戶能夠正確地使用這個組件。比如，在其他Vue組件中導入并使用它，并傳遞所需的屬性。例如：

<TheWelcome>
<ButtonContainer :size="small" :right="40" :bottom="40">
<p>這是一個內聯的按鈕容器</p>
</ButtonContainer>
</TheWelcome>

可能需要注意的是，如果用戶沒有安裝vue-iuion庫，那么組件在運行時會報錯，因此我應該提醒他們確保安裝了必要的依賴。

總結一下，我需要創建一個組件，處理props，并通過樣式實現size、right和bottom的控制，同時確保內容居中顯示。接下來，我應該寫出詳細的步驟，并確保代碼部分正確無誤。

📘根據您的需求，我為您創建了一個BackToTop組件。以下是實現步驟和代碼：

1. 創建組件文件
   在 components/BackToTop/BackToTop.vue 中添加：

<template><div class="back-to-top":style="positionStyle"@click="scrollToTop"><slot><div class="default-container">↑</div></slot></div>
</template><script setup>
import { computed } from 'vue';const props = defineProps({size: {type: String,default: 'normal',validator: (v) => ['small', 'normal', 'big'].includes(v)},right: {type: String,default: '40px'},bottom: {type: String,default: '40px'}
});const sizeMap = {small: '20px',normal: '40px',big: '60px'
};const positionStyle = computed(() => ({right: props.right,bottom: props.bottom,width: sizeMap[props.size],height: sizeMap[props.size]
}));const scrollToTop = () => {window.scrollTo({top: 0,behavior: 'smooth'});
};
</script><style scoped>
.back-to-top {position: fixed;display: flex;align-items: center;justify-content: center;cursor: pointer;background: #ffffff;border: 1px solid #e0e0e0;border-radius: 50%;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);transition: transform 0.2s ease,box-shadow 0.2s ease;
}.back-to-top:hover {transform: translateY(-2px);box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}.default-container {font-size: 1.5em;font-weight: bold;user-select: none;
}
</style>

2. 創建示例頁面
   在 views/BackToTopView.vue 中添加：

<template><div class="demo-container"><h1>返回頂部組件演示</h1><div class="scroll-content"><!-- 長內容用于滾動測試 --><div v-for="n in 100" :key="n">{{ n }}</div></div><!-- 默認樣式 --><BackToTop /><!-- 小尺寸 --><BackToTop size="small" bottom="100px" /><!-- 自定義位置和內容 --><BackToTop size="big"right="60px"bottom="120px"><div class="custom-content"><svg ...>自定義SVG圖標</svg></div></BackToTop></div>
</template><script setup>
import BackToTop from '@/components/BackToTop/BackToTop.vue';
</script><style scoped>
.scroll-content {height: 200vh;padding: 20px;background: linear-gradient(to bottom, #ffffff, #f0f0f0);
}.custom-content {display: flex;align-items: center;justify-content: center;width: 100%;height: 100%;color: #2196f3;font-size: 24px;
}
</style>

3. 配置路由
   在 router/index.js 中添加路由：

{path: '/back-to-top',name: 'BackToTop',component: () => import('@/views/BackToTopView.vue')
}

📘組件特性說明：

1. 定位系統

• 使用 position: fixed 實現固定定位
• 通過 props 接收 right/bottom 值（支持所有CSS單位）

2. 尺寸系統

• 預設三種尺寸（small/normal/big）
• 使用尺寸映射表實現快速配置

3. 內容擴展

• 使用默認插槽支持HTML內容
• 默認顯示簡潔的箭頭符號
• 支持通過插槽完全自定義內容

4. 交互優化

• 懸停浮動效果（transform + box-shadow）
• 平滑滾動動畫（behavior: ‘smooth’）
• 點擊狀態反饋（cursor: pointer）

5. 視覺優化

• 圓形邊框（border-radius: 50%）
• 微投影設計（box-shadow）
• 抗鋸齒處理（user-select: none）

使用建議：

1. 基礎用法

<BackToTop />

2. 自定義位置

<BackToTop right="5%" bottom="10%" />

3. 自定義內容

<BackToTop><div class="custom"><img src="@/assets/arrow-up.svg"><span>TOP</span></div>
</BackToTop>

4. 響應式適配

<BackToTop :right="isMobile ? '10px' : '40px'":bottom="isMobile ? '10px' : '40px'"
/>

該組件已實現您要求的所有功能，并額外添加了懸停動效和視覺優化。通過組合使用props和插槽，可以靈活適應各種使用場景。

📚代碼測試

示例代碼中有個svg 無路徑，換成了📘，其他正常

📚頁面效果

📚自己部署 DeepSeek 安裝地址

藍耘元生代智算云平臺地址:https://cloud.lanyun.net/#/registerPage?promoterCode=07100c37a0

📚相關文章

?

———— 相　關　文　章 ————

?

1. 0基礎3步部署自己的DeepSeek安裝步驟

2. DeepSeek 助力 Vue 開發：打造絲滑的步驟條

3. DeepSeek 助力 Vue 開發：打造絲滑的進度條

4. 自己部署 DeepSeek 助力 Vue 開發：打造絲滑的標簽頁（Tabs）

5. 自己部署 DeepSeek 助力 Vue 開發：打造絲滑的折疊面板（Accordion）

6. 自己部署 DeepSeek 助力 Vue 開發：打造絲滑的時間線（Timeline ）

到此這篇文章就介紹到這了,更多精彩內容請關注本人以前的文章或繼續瀏覽下面的文章，創作不易，如果能幫助到大家,希望大家多多支持寶碼香車~💕，若轉載本文，一定注明本文鏈接。

---

更多專欄訂閱推薦：
👍 html+css+js 絢麗效果
💕 vue
?? Electron
?? js
📝 字符串
?? 時間對象（Date()）操作