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

本文链接：https://blog.youkuaiyun.com/qq_33650655/article/details/145615550

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

共同探索软件研发！敬请关注【宝码香车】
关注描述

csdngif标识

📚📗📕📘📖🕮💡📝🗂️✍️🛠️💻🚀🎉🏗️🌐🖼️🔗📊👉🔖⚠️🌟🔐⬇️·正文开始⬇️·🎥😊🎓📩😺🌈🤝🤖📜📋🔍✅🧰❓📄📢📈 🙋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 在模型架构和成本控制方面的创新能力，使得大语言模型的应用成本大幅降低，为更多企业和开发者使用大语言模型提供了可能。

📚页面效果

页面效果

📚指令输入

功能要有
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组件。以下是实现步骤和代码：

创建组件文件
在 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>

创建示例页面
在 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>

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

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

📘组件特性说明：

定位系统

使用 position: fixed 实现固定定位
通过 props 接收 right/bottom 值（支持所有CSS单位）

尺寸系统

预设三种尺寸（small/normal/big）
使用尺寸映射表实现快速配置

内容扩展

使用默认插槽支持HTML内容
默认显示简洁的箭头符号
支持通过插槽完全自定义内容

交互优化

悬停浮动效果（transform + box-shadow）
平滑滚动动画（behavior: ‘smooth’）
点击状态反馈（cursor: pointer）

视觉优化

圆形边框（border-radius: 50%）
微投影设计（box-shadow）
抗锯齿处理（user-select: none）

使用建议：

基础用法

<BackToTop />

自定义位置

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

自定义内容

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

响应式适配

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

该组件已实现您要求的所有功能，并额外添加了悬停动效和视觉优化。通过组合使用props和插槽，可以灵活适应各种使用场景。

📚代码测试

示例代码中有个svg 无路径，换成了📘，其他正常

📚页面效果

页面效果

📚相关文章

———— 相　关　文　章 ————

到此这篇文章就介绍到这了,更多精彩内容请关注本人以前的文章或继续浏览下面的文章，创作不易，如果能帮助到大家,希望大家多多支持宝码香车~💕，若转载本文，一定注明本文链接。

整理不易，点赞关注宝码香车

更多专栏订阅推荐：
👍 html+css+js 绚丽效果
💕 vue
✈️ Electron
⭐️ js
📝 字符串
✍️ 时间对象（Date()）操作