DeepSeek 助力 Vue 开发：打造丝滑的进度条

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

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

csdngif标识

目录

  • DeepSeek 助力 Vue 开发：打造丝滑的进度条
    • 📚前言
    • 📚页面效果
    • 📚指令输入
    • 📚think
      • 📘组件代码
      • 📘使用说明
      • 📘组件属性说明：
      • 📘示例
      • 📘其他说明
    • 📚实际操作
    • 📚整理后主要代码
      • 📘定义组件 Progress.vue
      • 📘调用 ProgressView.vue
    • 📚页面效果
    • 📚DeepSeek安装地址

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

DeepSeek 助力 Vue 开发：打造丝滑的进度条

📚前言

在科技飞速发展的今天，人工智能（AI）无疑是最为耀眼的领域之一。从最初的概念提出到如今广泛应用于各个行业，AI 的发展历程充满了突破与变革，深刻地改变了我们的生活和工作方式。

人工智能的起源可以追溯到 20 世纪中叶，1956 年的达特茅斯会议正式确立了 “人工智能” 这一术语，标志着该领域的诞生。此后，AI 经历了多个发展阶段，包括早期的专家系统、机器学习，以及近年来取得重大突破的深度学习。在深度学习的推动下，AI 在图像识别、语音识别、自然语言处理等领域取得了惊人的成果，如 AlphaGo 战胜围棋世界冠军李世石，智能语音助手在日常生活中的广泛应用等，这些都让人们切实感受到了 AI 的强大力量。

0基础DeepSeek安装步骤

打开搭建好的DeepSeek应用。

DeepSeek应用

进入应用。

进入应用

📚页面效果

页面效果

📚指令输入

已经通过npm create vue@latest创建好了基于Vue3的项目，并能正常运行起来，请帮我用 Vue3的组合式API 生成一个 进度条（Progress Bar）功能，所有代码都保存在components下的一个文件夹中。新功能要有num（修改进度条的进度，支持数字输入和百分比输入和分数输入,默认20%）color（自定义颜色，默认#E94242这个颜色）height(自定义，默认4px)
下面是现有目录
vueAndDeepseek/
├── src/ # 源代码目录
│ ├── assets/ # 静态资源
│ │ ├── base.css
│ │ ├── main.css
│ │ └── logo.svg
│ ├── components/ # 组件目录
│ │ ├── HelloWorld.vue
│ │ ├── TheWelcome.vue
│ │ ├── WelcomeItem.vue
│ │ └── icons/
│ ├── router/ # 路由配置
│ │ └── index.js
│ ├── stores/ # Pinia 状态管理
│ │ └── counter.js
│ ├── views/ # 页面组件
│ │ ├── HomeView.vue
│ │ └── AboutView.vue
│ ├── App.vue # 根组件
│ └── main.js # 应用入口
├── public/ # 公共资源目录
├── index.html # HTML 模板
├── package.json # 项目配置
├── vite.config.js # Vite 配置
└── node_modules/ # 依赖包目录

📚think

好，我现在需要帮用户在基于Vue3的项目中使用组合式API生成一个进度条组件。用户已经创建了项目，并且能够正常运行，接下来要实现进度条的功能，同时代码要放在components下的文件夹内。用户提到新功能需要有num、color和height三个属性，分别对应修改进度的数字输入、自定义颜色以及高度，默认值分别是20%、#E94242和4px。

首先，我应该考虑如何在Vue3中使用组合式API来实现这个进度条。组合式API通常意味着使用 ref 和 computed 属性，以及可能的用到用法约束（Use Cases）模式。但因为用户要求生成一个组件，所以我需要将这些逻辑封装在一个可重用的组件中。

接下来，我需要设计这个Progress组件的结构。它应该有三个主要属性：num、color 和 height。为了方便用户输入，我可能会将num设置为双向绑定的，允许用户输入数字、百分比或者分数。我需要考虑如何处理这些输入，并转化为适当的值，比如将百分比和分数转换为小于100的数值。

然后是颜色的自定义功能。color属性可以接受十六进制字符串，默认使用#E94242。为了让用户更直观地选择颜色，我可能会添加一个颜色选择器组件，或者在 UI 中提供输入框，让用户直接输入颜色代码。

高度的设置相对简单，只需将其作为一个数值属性绑定即可。默认为4px，可以通过样式控制其高度。

接下来是组件的显示部分。进度条需要有动态宽度，这可以通过计算num的百分比来实现。当num超过100时，可能需要进行约束或提示用户输入正确范围内的值。

在组件的模板中，我会使用一个 div 来表示整个容器，然后另一个div作为实际的进度条，根据计算的宽度来设置它的宽度，同时添加一些样式，如rounded或者阴影，以增强视觉效果。

为了使组件更易于使用和自定义，我可能还需要提供额外的属性，比如vertical（是否垂直方向），以及class和style属性，这样用户可以根据需求进行样式扩展。此外，可以考虑在组件内部处理数值格式问题，例如自动添加百分号或限制小数位数。

然后，我会将这个Progress.vue文件放置在components目录下，确保其他页面或组件都可以使用它。为了方便用户使用，我还可能提供一个example.vue文件，展示如何在主应用中使用该进度条组件，并说明各个属性的用法。

最后，在生成代码时，我会注意遵循 Vue3 的最佳实践，合理利用组合式API，同时保持代码的简洁和可维护性。测试不同输入情况，如数字、百分比和分数，以及颜色是否正确应用，以及进度条是否按比例显示，是非常重要的。此外，我还会确保默认值被正确设置，以免用户在使用时遇到意外问题。

总结一下，我的步骤是：定义组件属性，处理输入逻辑，计算宽度，创建DOM结构，并提供样式，同时确保组件易于集成和自定义。这样，用户就能根据需求轻松修改进度条的外观和行为了。

好的，我将帮助你创建一个基于 Vue 3 的组合式 API 进度条（Progress Bar）组件，并将其保存在 components 文件夹中。

📘组件代码

<template>
  <div class="progress-container">
    <div 
      class="progress-bar" 
      :style="{
        width: `${getPercentage}!important`,
        height: `${height}px`
      }"
    >
      <!-- 可以添加一些额外的样式 -->
      <div class="progress">
        <!-- 这里可以有更多的内容 -->
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { ref, computed } from 'vue'

export default defineComponent({
  name: 'Progress',
  props: {
    num: {
      type: Number,
      default: 20,
      validator: (value) => value >= 0 && value <= 100
    },
    color: {
      type: String,
      default: '#E94242'
    },
    height: {
      type: Number,
      default: 4
    }
  },
  setup() {
    const progressRef = ref(num())

    // 计算百分比数值
    const getPercentage = computed(() => {
      if (typeof num === 'number') {
        return num()
      } else if (typeof num === 'string' && num.includes('%')) {
        // 如果是百分比符号，需要进行处理
        // 例如：num = "55%" ，则转换为55
        const percentageValue = parseFloat(num.replace('%', ''))
        return typeof percentageValue === 'number' ? percentageValue : 0
      } else if (typeof num === 'string' && num.includes('/')) {
        // 如果是分数符号，例如："1/2" 对应50%
        const fractionValue = parseFloat(num.replace('/', ''))
        return fractionValue * 100 || 0
      }
      return 20
    })

    // 输入处理函数
    function num() {
      let value = num.value

      // 如果是百分比符号，提取数值部分
      if (value?.includes('%')) {
        value = parseFloat(value.replace('%', ''))
      } else if (value?.includes('/')) {
        value = parseFloat(value.replace('/', ''))
      }

      // 保持在 0 到 100 之间
      return Math.min(Math.max(value, 0), 100)
    }

    return { progressRef, getPercentage }
  }
})
</script>

<style lang="postcss">
.progress-container {
  /* 添加一些默认样式 */
}

.progress-bar {
  /* 根据需要添加其他样式 */
  background-color: v-bind(color);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
  height: v-bind(height);
}

.progress {
  /* 这是进度条的实际内容，可以在这里添加更多内容 */
  height: 100%;
  background-color: white;
  transition: width 0.3s ease-in-out;
}
</style>

📘使用说明

将上述组件注册到你的 Vue 应用中，并按照以下方式使用：

<!-- 在 App.vue 中导入 -->
<template>
  <Progress 
    :num="20" 
    :color="'#E94242'" 
    :height="4"
  />
</template>

📘组件属性说明：

  1. num：进度条的当前数值，可以是数字、百分比（%）或分数（如 “1/2”）。默认值为 20。

    • 如果是百分比符号 %，则会自动提取数值部分（例如 "55%" 会被解析为 55）。
    • 如果是分数符号 /，则会将其转换为小数形式（例如 "1/2" 会被转换为 0.5 即 50%）。

  2. color：自定义进度条的颜色，使用十六进制格式。默认值为 #E94242。

  3. height：进度条的高度（在 px 为单位）。默认值为 4。

📘示例

  1. 完整的数值：

    <Progress :num="75" />

  2. 百分比符号：

    <Progress :num="'85%'" />

  3. 分数符号：

    <Progress :num="'1/2'" />  <!-- 将被解析为 50% -->

  4. 自定义颜色和高度：

    <Progress 
  :num="30" 
  :color="'#00ff00'" 
  :height="8"
/>

📘其他说明

  • 数值会自动被限制在 0 到 100 之间。
  • 如果你需要更复杂的行为或样式，可以根据需要扩展组件代码。

希望这个组件能满足你的需求！如果有任何问题，欢迎随时告诉我。

📚实际操作

控制台会有一个 defineComponent的报错

📚整理后主要代码

代码结构

📘定义组件 Progress.vue

<script setup>
import { computed } from 'vue'

const props = defineProps({
  num: {
    type: [Number, String],
    default: 20,
    validator: (value) => {
      if (typeof value === 'number') {
        return value >= 0 && value <= 100
      }
      if (typeof value === 'string') {
        if (value.includes('%')) {
          const num = parseFloat(value)
          return !isNaN(num) && num >= 0 && num <= 100
        }
        if (value.includes('/')) {
          const [num, den] = value.split('/').map(Number)
          return !isNaN(num) && !isNaN(den) && den !== 0 && (num / den) * 100 <= 100
        }
      }
      return false
    }
  },
  color: {
    type: String,
    default: '#E94242'
  },
  height: {
    type: [Number, String],
    default: 4
  }
})

const progress = computed(() => {
  const val = props.num
  if (typeof val === 'number') {
    return Math.min(100, Math.max(0, val))
  }
  if (typeof val === 'string') {
    if (val.includes('%')) {
      return Math.min(100, Math.max(0, parseFloat(val)))
    }
    if (val.includes('/')) {
      const [num, den] = val.split('/').map(Number)
      return Math.min(100, Math.max(0, (num / den) * 100))
    }
  }
  return 20
})
</script>
<template>
  <div class="progress" :style="{ height: typeof height === 'number' ? `${height}px` : height}">
    <div
        class="progress-bar"
        :style="{
        width: `${progress}%`,
        backgroundColor: color,
        height: typeof height === 'number' ? `${height}px` : height
      }"
    ></div>
  </div>
</template>
<style scoped>
.progress {
  width: 100%;
  background: #ebeef5;
  border-radius: 10px;
  overflow: hidden;
}

.progress-bar {
  transition: width 0.6s ease;
}
</style>

📘调用 ProgressView.vue

在这里插入图片描述

<script setup>
import Progress from '../components/Progress/Progress.vue'
</script>

<template>
  <main>
    <h1>1.直接调用 <code>&lt;Progress /&gt;</code></h1>
    <Progress/>


    <h1 class="mt10">2. 数字输入, 参数60,是60% <p><code>&lt;Progress :num="60"/&gt; </code></p></h1>
    <Progress :num="60"/>


    <h1 class="mt10">3. 带2个参数,改变长度和颜色。<p><code>&lt;Progress :num="30" :color="'#41B883'"/&gt; </code></p> </h1>
    <Progress :num="30" :color="'#41B883'"/>


    <h1 class="mt10">4.百分比输入时不加:号 <p><code>&lt;Progress num="75%"/&gt; </code></p> </h1>
    <Progress num="75%" />             <!-- 百分比输入 -->


    <h1 class="mt10">5.分数输入时不加:号 <p><code>&lt;Progress num="3/4"/&gt; </code></p> </h1>
    <Progress num="3/4"/>            <!-- 分数输入 -->


    <h1 class="mt10">6.自定义颜色时不加:号 <p><code>&lt;Progress :num="80" color="blue"/&gt; </code></p> </h1>
    <Progress :num="80" color="blue"/> <!-- 自定义颜色 -->


    <h1 class="mt10">7.自定义高度 <p><code>&lt;Progress :num="40" :height="8"/&gt; </code></p> </h1>
    <Progress :num="40" :height="8"/>  <!-- 自定义高度 -->
  </main>
</template>
<style>
.mt10{
  margin-top: 10px;
}
</style>

📚页面效果

页面效果

📚DeepSeek安装地址

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

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

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

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/968903.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

编译和链接【四】链接详解

编译和链接【四】链接详解

文章目录 编译和链接【四】链接详解前言系列文章入口符号表和重定位表链接过程分段组装符号决议重定位 编译和链接【四】链接详解 前言 在我大一的时候&#xff0c; 我使用VC6.0对C语言程序进行编译链接和运行 &#xff0c; 然后我接触了VS&#xff0c; Qt creator等众多IDE&…
阅读更多...
LeetCode每日精进：876.链表的中间结点

LeetCode每日精进：876.链表的中间结点

题目链接&#xff1a;876.链表的中间结点 题目描述&#xff1a; 给你单链表的头结点 head &#xff0c;请你找出并返回链表的中间结点。 如果有两个中间结点&#xff0c;则返回第二个中间结点。 示例 1&#xff1a; 输入&#xff1a;head [1,2,3,4,5] 输出&#xff1a;[3,4,5…
阅读更多...
数据结构——结构体位域、typedef类型重定义、宏、共用体union、枚举、虚拟内存划分

数据结构——结构体位域、typedef类型重定义、宏、共用体union、枚举、虚拟内存划分

一、结构体位域 1.1 结构体位域的基础 结构体位域&#xff1a;把结构体字节大小扣到极致的一个类型&#xff0c;以bit单位 格式&#xff1a;struct 位域体名{数据类型 位域名:位域大小;数据类型 位域名:位域大小;...};解析&#xff1a;位域体名&#xff1a;可有可无&#xff…
阅读更多...
CZML 格式详解，javascript加载导出CZML文件示例

CZML 格式详解，javascript加载导出CZML文件示例

示例地址&#xff1a;https://dajianshi.blog.csdn.net/article/details/145573994 CZML 格式详解 1. 什么是 CZML&#xff1f; CZML&#xff08;Cesium Zipped Markup Language&#xff09;是一种基于 JSON 的文件格式&#xff0c;用于描述地理空间数据和时间动态场景。它专…
阅读更多...
SQL递归技巧

SQL递归技巧

1.读样例 with recursive cet_dpt(id, parent_id, path, org_category, level,depart_name) as (select id ,parent_id,depart_name as path,org_category,1 as level,sd.depart_namefrom isolarerp.sys_depart sdwhere del_flag 0and sd.org_code A09B15union al…
阅读更多...
django配置跨域

django配置跨域

1、第一种 from django.views.decorators.csrf import csrf_exemptcsrf_exempt第二种 安装 pip install django-cors-headers在配置文件settings.py进入 INSTALLED_APPS [..."corsheaders", # 添加 ]MIDDLEWARE [corsheaders.middleware.CorsMiddleware, # 添加…
阅读更多...
设置mysql的主从复制模式

设置mysql的主从复制模式

mysql设置主从复制模式似乎很容易&#xff0c;关键在于1&#xff09;主库启用二进制日志&#xff0c;2&#xff09;从库将主库设为主库。另外&#xff0c;主从复制&#xff0c;复制些什么&#xff1f;从我现在获得的还很少的经验来看&#xff0c;复制的内容有表&#xff0c;用户…
阅读更多...
蓝耘智算平台：开启企业级 DeepSeek 智能助手的搭建捷径

蓝耘智算平台：开启企业级 DeepSeek 智能助手的搭建捷径

文章目录 一、深度解密 DeepSeek 技术矩阵1.1 模型架构创新1.2 核心能力全景 二、私有化部署&#xff1a;企业的明智之选2.1 企业级部署场景2.2 硬件选型策略 三、蓝耘平台&#xff1a;部署全流程大揭3.1 环境准备阶段Step 1&#xff1a;访问蓝耘智算云官网完成企业认证Step 2&…
阅读更多...
Android原生的HighCPU使用率查杀机制

Android原生的HighCPU使用率查杀机制

摘要 原生的HighCPU使用率查杀机制是基于读取/proc/pid/stat中的utime stime后&#xff0c;根据CPU使用率 (utime stime / totalTime)*100%进行实现&#xff0c;当检测后台进程的CPU使用率超过阈值时&#xff0c;执行查杀和统计到电池数据中。 细节点&#xff1a; 1. 原生根…
阅读更多...
数据库安全、分布式数据库、反规范化等新技术（高软19）

数据库安全、分布式数据库、反规范化等新技术（高软19）

系列文章目录 3.7数据库安全、分布式数据库、反规范化等新技术 前言 本节数据库安全、分布式数据库、反规范化等新技术相关概念与技术。 一、数据库 1.数据库安全 2.数据库备份 二、分布式数据库 1.数据库分布 2.数据仓库 3.数据仓库结构 4.商业智能&#xff08;BI&#xf…
阅读更多...
数据结构实现顺序表的尾插，尾删，按值查找/修改/删除，按下标查找/增加/删除

数据结构实现顺序表的尾插，尾删，按值查找/修改/删除，按下标查找/增加/删除

头文件&#xff1a;head.h #ifndef __HEAD_H__ #define __HEAD_H__#include <stdio.h> #include <string.h> #include <stdlib.h> #define MAXSIZE 20enum num {success,false-1};typedef int datatype;typedef struct {int len;datatype data[MAXSIZE]; }S…
阅读更多...
新手自学：如何用gromacs对简单分子复合物进行伞形采样

新手自学：如何用gromacs对简单分子复合物进行伞形采样

1、建立体系： 1、将蛋白的pdb文件转化为gmx： gmx pdb2gmx -f 2BEG_model1_capped.pdb -ignh -ter -o complex.gro 这个网页可以实现将多肽序列转化为pdb： ProBuilder On-line 这个教程的蛋白2BFG包含两条链（chain A和B） 在生成的topol文件中，增加如下的内容，效果就…
阅读更多...
2025 BabitMF 第一期开源有奖活动正式开启 ！

2025 BabitMF 第一期开源有奖活动正式开启 ！

为了促进开源社区的交流与成长&#xff0c;字节跳动开源的多媒体处理框架 BabitMF &#xff08;GitHub - BabitMF/bmf: Cross-platform, customizable multimedia/video processing framework. With strong GPU acceleration, heterogeneous design, multi-language support, e…
阅读更多...
Ollama 自定义导入模型

Ollama 自定义导入模型

文章目录 一、从 GGUF 导入1.1 CCUF 介绍1.2 导入方式 二、由模型直接导入2.1 模型下载2.2 使用 llama.cpp 进行转换&#xff08;1&#xff09;克隆 llama.cpp 库到本地&#xff0c;并安装相关库&#xff08;2&#xff09;环境验证&#xff08;3&#xff09;执行转换程序 2.3 使…
阅读更多...
J6 X8B/X3C切换HDR各帧图像

J6 X8B/X3C切换HDR各帧图像

1、OV手册上的切换命令 寄存器为Ox5074 各帧切换&#xff1a; 2、地平线control tool实现切换命令 默认HDR模式出图&#xff1a; HCG出图&#xff1a; LCG出图 SPD出图 VS出图
阅读更多...
GESP5级语法知识（十一）：高精度算法（一）

GESP5级语法知识（十一）：高精度算法（一）

高精度加法&#xff1a; #include<iostream> #include<string> #include<algorithm> using namespace std; const int N501;//高精度数的最长长度 //c[]a[]b[]:高精度加法方案一&#xff1a;对应位相加&#xff0c;同时处理进位 void h_add_1(int a[],int b…
阅读更多...
【Git版本控制器】：第二弹——工作区，暂存区，版本库，

【Git版本控制器】：第二弹——工作区，暂存区，版本库，

&#x1f381;个人主页&#xff1a;我们的五年 &#x1f50d;系列专栏&#xff1a;Linux网络编程 &#x1f337;追光的人&#xff0c;终会万丈光芒 &#x1f389;欢迎大家点赞&#x1f44d;评论&#x1f4dd;收藏⭐文章 ​ 相关笔记&#xff1a; https://blog.csdn.net/djd…
阅读更多...
Transformer 模型介绍（一）——综述

Transformer 模型介绍（一）——综述

Transformer 是一种完全基于注意力机制的神经网络模型&#xff0c;首次在2017年的论文《Attention Is All You Need》中提出。该模型最初用于机器翻译任务&#xff0c;并在特定任务中表现优于谷歌的其他神经网络机器翻译模型。Transformer 也是 Seq2Seq&#xff08;序列到序列&…
阅读更多...
【Linux】多线程 -＞ 从线程概念到线程控制

【Linux】多线程 -＞ 从线程概念到线程控制

线程概念 在一个程序里的一个执行路线就叫做线程&#xff08;thread&#xff09;。更准确的定义是&#xff1a;线程是“一个进程内部的控制序列”。一切进程至少都有一个执行线程。线程在进程内部运行&#xff0c;本质是在进程地址空间内运行。在Linux系统中&#xff0c;在CPU眼…
阅读更多...
.NET Web-静态文件访问目录浏览

.NET Web-静态文件访问目录浏览

一、Web根目录访问 创建wwwroot文件夹app.UseStaticFiles(); // 启⽤静态⽂件中间件url/路径 进行访问 二、Web根目录之外的文件 app.UseStaticFiles(new StaticFileOptions {FileProvider new PhysicalFileProvider(Path.Combine(builder.Environment.ContentRootPath,&qu…
阅读更多...
最新文章

Copyright @ 2022~2023