DeepSeek 助力 Vue 开发：打造丝滑的返回顶部按钮（Back to Top）

前言：哈喽，大家好，今天给大家分享一篇文章！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏+关注哦 💕

---

📚📗📕📘📖🕮💡📝🗂️✍️🛠️💻🚀🎉🏗️🌐🖼️🔗📊👉🔖⚠️🌟🔐⬇️·正文开始⬇️·🎥😊🎓📩😺🌈🤝🤖📜📋🔍✅🧰❓📄📢📈 🙋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()）操作