Element Plus 实例详解（六）___Progress 进度条

我会带着你远行 2024-03-24 08:21 17阅读 0赞

## Element Plus 实例详解（六）\_\_\_Progress 进度条 ##

**本文目录：**

一、前言

二、搭建Element Plus试用环境

1、搭建Vue3项目（基于Vite + Vue）

2、安装Element Plus

三、Element Plus Progress 进度条功能试用

1、直线进度条

2、进度条内显示百分比标识

3、环形进度条

4、仪表盘形进度条

5、自定义内容

6、自定义进度条的颜色

7、动画进度条

四、官方资料中的各参数说明

五、总结

--------------------

## 一、前言 ##

Element Plus Progress 进度条，用于展示操作进度，告知用户当前状态和预期。

## 二、搭建Element Plus试用环境 ##

### 1、搭建Vue3项目（基于Vite + Vue） ###

安装时请选择支持Typescript，本实例我安装在（C:\\00program\\vue\\vuelearn\\vueviteproject1）目录中，具体方法详见下面文章：

[vue3 项目搭建教程（基于create-vue，vite，Vite + Vue）https://blog.csdn.net/weixin\_69553582/article/details/129630880][vue3 _create-vue_vite_Vite _ Vue_https_blog.csdn.net_weixin_69553582_article_details_129630880]

安装完成后打开浏览器：[http://localhost:5173/][http_localhost_5173] ,能正常显示欢迎页面：

### 2、安装Element Plus ###

>  *  **NPM：**npm install element-plus --save

详细参考：

[Element Plus 实例详解系列（一）\_\_安装设置![icon-default.png_t_N2N8][]https://blog.csdn.net/weixin\_69553582/article/details/129701286][Element Plus _icon-default.png_t_N2N8_https_blog.csdn.net_weixin_69553582_article_details_129701286]

## 三、Element Plus Progress 进度条功能试用 ##

### 1、直线进度条 ###

>  *  Progress 组件设置 percentage 属性即可，表示进度条对应的百分比。
> 
>  *  该属性必填，并且必须在 0-100 的范围内。
>  *  可以通过设置 format 来自定义文字显示的格式。

实现效果：

![c2e8a746df2b4418bc4ee3805fa6ee2a.jpeg][]

完整代码：

<template>
        <div class="demo-progress">
            <h3>Progress 进度条</h3>
            <el-progress :percentage="50" :stroke-width="10"/>
            <el-progress :percentage="100" :stroke-width="10" :format="format" />
            <el-progress :percentage="100" :stroke-width="10" status="success" />
            <el-progress :percentage="100" :stroke-width="10" status="warning" />
            <el-progress :percentage="50" :stroke-width="10" status="exception" />
        </div>
    </template>
    
    <script lang="ts" setup>
        const format = (percentage) => (percentage === 100 ? 'Full' : `${percentage}%`)
    </script>
    
    <style scoped>
        .demo-progress .el-progress--line {
            margin-bottom: 35px;
            width: 350px;
        }
    </style>

### 2、进度条内显示百分比标识 ###

>  *  百分比不占用额外控件，适用于文件上传等场景。
>  *  Progress 组件可通过 stroke-width 属性更改进度条的高度，
>  *  可通过 text-inside 属性来改变进度条内部的文字。

实现效果：

![3e7ff85b033c4933b11da1ea1bcec61a.jpeg][]

完整代码：

<template>
        <div class="demo-progress">
            <h3>进度条内显示百分比标识</h3>
            <el-progress :text-inside="true" :stroke-width="28" :percentage="70" />
            <el-progress :text-inside="true"
                         :stroke-width="28"
                         :percentage="100"
                         status="success" />
            <el-progress :text-inside="true"
                         :stroke-width="28"
                         :percentage="80"
                         status="warning" />
            <el-progress :text-inside="true"
                         :stroke-width="28"
                         :percentage="50"
                         status="exception"/>
        </div>
    </template>
    
    <style scoped>
        .demo-progress .el-progress--line {
            margin-bottom: 15px;
            width: 350px;
            padding:10px;
        }
    </style>

### 3、环形进度条 ###

>  *  Progress 组件可通过 type 属性来指定使用环形进度条
>  *  还可以通过 width 属性来设置其大小。

实现效果：

![1d95802d2faf427483fce12ee41f3ea2.jpeg][]

完整代码：

<template>
        <div class="demo-progress">
            <h3>环形进度条</h3>
            <el-progress type="circle" :percentage="0" :stroke-width="10" />
            <el-progress type="circle" :percentage="35" :stroke-width="10" />
            <el-progress type="circle" :percentage="100" :stroke-width="10" status="success" />
            <el-progress type="circle" :percentage="70" :stroke-width="10" status="warning" />
            <el-progress type="circle" :percentage="50" :stroke-width="10" status="exception" />
        </div>
    </template>
    <style scoped>
        .demo-progress .el-progress--line {
            margin-bottom: 15px;
            width: 450px;
        }
    
        .demo-progress .el-progress--circle {
            margin-right: 15px;
        }
    </style>

### 4、仪表盘形进度条 ###

>  *  可以指定 type 属性到 dashboard 使用控制面板进度栏。

实现效果：

![bd3900019de841a987d11a56a5a8312f.gif][]

完整代码：

<template>
        <div class="demo-progress">
            <h3>仪表盘形进度条</h3>
            <el-progress type="dashboard" :percentage="percentage" :color="colors" :stroke-width="10"/>
            <el-progress type="dashboard" :percentage="percentage2" :color="colors" :stroke-width="10"/>
            <div>
                <el-button-group>
                    <el-button :icon="Minus" @click="decrease" />
                    <el-button :icon="Plus" @click="increase" />
                </el-button-group>
            </div>
        </div>
    </template>
    
    <script lang="ts" setup>
        import { onMounted, ref } from 'vue'
        import { Minus, Plus } from '@element-plus/icons-vue'
    
        const percentage = ref(10)
        const percentage2 = ref(0)
    
        const colors = [
            { color: '#f56c6c', percentage: 20 },
            { color: '#e6a23c', percentage: 40 },
            { color: '#5cb87a', percentage: 60 },
            { color: '#1989fa', percentage: 80 },
            { color: '#6f7ad3', percentage: 100 },
        ]
    
        const increase = () => {
            percentage.value += 10
            if (percentage.value > 100) {
                percentage.value = 100
            }
        }
        const decrease = () => {
            percentage.value -= 10
            if (percentage.value < 0) {
                percentage.value = 0
            }
        }
        onMounted(() => {
            setInterval(() => {
                percentage2.value = (percentage2.value % 100) + 10
            }, 400)
        })
    </script>
    <style scoped>
        .demo-progress .el-progress--line {
            margin-bottom: 15px;
            width: 300px;
            padding:10px;
        }
    
        .demo-progress .el-progress--circle {
            margin-right: 15px;
        }
    </style>

### 5、自定义内容 ###

>  *  通过默认插槽添加自定义内容。

实现效果：

![f46df58001cd4680ac3040d96f40f6f7.jpeg][]

完整代码：

<template>
        <div class="demo-progress">
            <h3>自定义内容</h3>
            <el-progress :percentage="80" :stroke-width="10">
                <el-button text>Content</el-button>
            </el-progress>
            <el-progress :text-inside="true"
                         :stroke-width="30"
                         :percentage="50"
                         status="exception">
                <span>Content</span>
            </el-progress>
            <el-progress type="circle" :percentage="100" status="success" :stroke-width="10">
                <el-button type="success" :icon="Check" circle />
            </el-progress>
            <span>通过默认插槽</span>
            <el-progress type="dashboard" :percentage="70" :stroke-width="10">
                <template #default="{ percentage }">
                    <span class="percentage-value">{
       { percentage }}%</span>
                    <span class="percentage-label">Progressing</span>
                </template>
            </el-progress>
        </div>
    </template>
    
    <script lang="ts" setup>
        import { Check } from '@element-plus/icons-vue'
    </script>
    
    <style scoped>
        .percentage-value {
            display: block;
            margin-top: 10px;
            font-size: 28px;
        }
    
        .percentage-label {
            display: block;
            margin-top: 10px;
            font-size: 12px;
        }
    
        .demo-progress .el-progress--line {
            margin-bottom: 15px;
            width: 450px;
            padding: 10px;
        }
    
        .demo-progress .el-progress--circle {
            margin-right: 15px;
        }
    </style>

### 6、自定义进度条的颜色 ###

>  *  可以通过 color 属性来设置进度条的颜色。
>  *  该属性可以接受十六进制颜色值，函数和数组。

实现效果：

![9a47586041f340ee9445a0370c7342d5.jpeg][]

完整代码：

<template>
        <div class="demo-progress" >
            <h3>自定义进度条的颜色</h3>
            <el-progress :percentage="percentage" :stroke-width="20" :color="customColor" />
    
            <el-progress :percentage="percentage" :stroke-width="20" :color="customColorMethod" />
    
            <el-progress :percentage="percentage" :stroke-width="20" :color="customColors" />
            <el-progress :percentage="percentage" :stroke-width="20" :color="customColors" />
            <div>
                <el-button-group>
                    <el-button :icon="Minus" @click="decrease" />
                    <el-button :icon="Plus" @click="increase" />
                </el-button-group>
            </div>
        </div>
    </template>
    
    <script lang="ts" setup>
        import { ref } from 'vue'
        import { Minus, Plus } from '@element-plus/icons-vue'
    
        const percentage = ref(45)
        const customColor = ref('#409eff')
    
        const customColors = [
            { color: '#b6ff00', percentage: 20 },
            { color: '#e6a23c', percentage: 40 },
            { color: '#5cb87a', percentage: 60 },
            { color: '#1989fa', percentage: 80 },
            { color: '#6f7ad3', percentage: 100 },
        ]
    
        const customColorMethod = (percentage: number) => {
            if (percentage < 30) {
                return '#909399'
            }
            if (percentage < 70) {
                return '#e6a23c'
            }
            return '#67c23a'
        }
        const increase = () => {
            percentage.value += 10
            if (percentage.value > 100) {
                percentage.value = 100
            }
        }
        const decrease = () => {
            percentage.value -= 10
            if (percentage.value < 0) {
                percentage.value = 0
            }
        }
    </script>
    <style scoped>
        .demo-progress .el-progress--line {
            margin-bottom: 15px;
            width: 350px;
            padding: 10px;
            
        }
    </style>

### 7、动画进度条 ###

>  *  使用 intermediate 属性来设置不确定的进度，
>  *  duration 来控制动画持续时间。

实现效果：

![99b952abe00d487d890f98da742e2756.gif][]

完整代码：

<template>
        <div class="demo-progress">
            <h3>动画进度条</h3>
            <el-progress :percentage="50" :indeterminate="true" :stroke-width="20"/>
            <el-progress :percentage="100" :format="format" :indeterminate="true" :stroke-width="20"/>
            <el-progress :percentage="100"
                         status="success"
                         :indeterminate="true"
                         :duration="5" :stroke-width="20"/>
            <el-progress :percentage="100"
                         status="warning"
                         :indeterminate="true"
                         :duration="1" :stroke-width="20"/>
            <el-progress :percentage="50" status="exception" :indeterminate="true" :stroke-width="20"/>
        </div>
    </template>
    
    <script lang="ts" setup>
        const format = (percentage) => (percentage === 100 ? 'Full' : `${percentage}%`)
    </script>
    <style scoped>
        .demo-progress .el-progress--line {
            margin-bottom: 15px;
            width: 350px;
        }
    </style>

## 四、官方资料中的各参数说明 ##

Attributes属性

<table> 
 <thead> 
  <tr> 
   <th style="text-align:center;width:124px;">属性名</th> 
   <th style="text-align:center;width:218px;">说明</th> 
   <th style="text-align:center;width:156px;">类型</th> 
   <th style="text-align:center;">可选值</th> 
   <th style="text-align:center;">默认值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td style="width:124px;">percentage</td> 
   <td style="width:218px;">百分比，<strong>必填</strong></td> 
   <td style="width:156px;">number</td> 
   <td>(0-100)</td> 
   <td>0</td> 
  </tr> 
  <tr> 
   <td style="width:124px;">type</td> 
   <td style="width:218px;">进度条类型</td> 
   <td style="width:156px;">string</td> 
   <td>line/<br> circle/<br> dashboard</td> 
   <td>line</td> 
  </tr> 
  <tr> 
   <td style="width:124px;">stroke-width</td> 
   <td style="width:218px;">进度条的宽度</td> 
   <td style="width:156px;">number</td> 
   <td>—</td> 
   <td>6</td> 
  </tr> 
  <tr> 
   <td style="width:124px;">text-inside</td> 
   <td style="width:218px;">进度条显示文字内置在进度条内（仅 <code>type</code> 为 'line' 时可用）</td> 
   <td style="width:156px;">boolean</td> 
   <td>—</td> 
   <td>false</td> 
  </tr> 
  <tr> 
   <td style="width:124px;">status</td> 
   <td style="width:218px;">进度条当前状态</td> 
   <td style="width:156px;">string</td> 
   <td>success/<br> exception/<br> warning</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td style="width:124px;">indeterminate</td> 
   <td style="width:218px;">是否为动画进度条</td> 
   <td style="width:156px;">boolean</td> 
   <td>-</td> 
   <td>false</td> 
  </tr> 
  <tr> 
   <td style="width:124px;">duration</td> 
   <td style="width:218px;">控制动画进度条速度</td> 
   <td style="width:156px;">number</td> 
   <td>-</td> 
   <td>3</td> 
  </tr> 
  <tr> 
   <td style="width:124px;">color</td> 
   <td style="width:218px;">进度条背景色 进度条背景色 （会覆盖 <code>status</code> 状态颜色）</td> 
   <td style="width:156px;">string/<br> function/<br> array</td> 
   <td>—</td> 
   <td>''</td> 
  </tr> 
  <tr> 
   <td style="width:124px;">width</td> 
   <td style="width:218px;">环形进度条画布宽度（只在 type 为 circle 或 dashboard 时可用）</td> 
   <td style="width:156px;">number</td> 
   <td>—</td> 
   <td>126</td> 
  </tr> 
  <tr> 
   <td style="width:124px;">show-text</td> 
   <td style="width:218px;">是否显示进度条文字内容</td> 
   <td style="width:156px;">boolean</td> 
   <td>—</td> 
   <td>true</td> 
  </tr> 
  <tr> 
   <td style="width:124px;">stroke-linecap</td> 
   <td style="width:218px;">circle/dashboard 类型路径两端的形状</td> 
   <td style="width:156px;">string</td> 
   <td>butt/<br> round/<br> square</td> 
   <td>round</td> 
  </tr> 
  <tr> 
   <td style="width:124px;">format</td> 
   <td style="width:218px;">指定进度条文字内容</td> 
   <td style="width:156px;">function(percentage)</td> 
   <td>—</td> 
   <td>—</td> 
  </tr> 
 </tbody> 
</table>

###  ###

### Slots ###

<table> 
 <thead> 
  <tr> 
   <th>名称</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>default</td> 
   <td>自定义内容，参数为 <code>{ percentage }</code></td> 
  </tr> 
 </tbody> 
</table>

###  ###

## 五、总结 ##

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> </td> 
   <td><a href="https://blog.csdn.net/weixin_69553582/article/details/129701286" title="Element Plus 实例详解（一）__安装设置" rel="nofollow">Element Plus 实例详解（一）__安装设置</a></td> 
  </tr> 
  <tr> 
   <td>2</td> 
   <td><a href="https://blog.csdn.net/weixin_69553582/article/details/129761751" title="Element Plus 实例详解（二）___Button 按钮" rel="nofollow">Element Plus 实例详解（二）___Button 按钮</a></td> 
  </tr> 
  <tr> 
   <td>3</td> 
   <td><a href="https://blog.csdn.net/weixin_69553582/article/details/129761595" title="Element Plus 实例详解（三）___Date Picker 日期选择" rel="nofollow">Element Plus 实例详解（三）___Date Picker 日期选择</a></td> 
  </tr> 
  <tr> 
   <td>4</td> 
   <td><a href="https://blog.csdn.net/weixin_69553582/article/details/129768910" title="Element Plus 实例详解（四）___Border 边框" rel="nofollow">Element Plus 实例详解（四）___Border 边框</a></td> 
  </tr> 
  <tr> 
   <td>5</td> 
   <td><a href="https://blog.csdn.net/weixin_69553582/article/details/129775254" title="Element Plus 实例详解（五）___Scrollbar 滚动条" rel="nofollow">Element Plus 实例详解（五）___Scrollbar 滚动条</a></td> 
  </tr> 
  <tr> 
   <td>6</td> 
   <td><a href="https://blog.csdn.net/weixin_69553582/article/details/129775343" title="Element Plus 实例详解（六）___Progress 进度条" rel="nofollow">Element Plus 实例详解（六）___Progress 进度条</a></td> 
  </tr> 
  <tr> 
   <td>7</td> 
   <td>Element Plus 实例详解（七）___</td> 
  </tr> 
  <tr> 
   <td>8</td> 
   <td>Element Plus 实例详解（八）___</td> 
  </tr> 
  <tr> 
   <td>9</td> 
   <td>Element Plus 实例详解（九）___</td> 
  </tr> 
  <tr> 
   <td>10</td> 
   <td>Element Plus 实例详解（十）___</td> 
  </tr> 
  <tr> 
   <td>11</td> 
   <td>Element Plus 实例详解（十一）___</td> 
  </tr> 
  <tr> 
   <td>12</td> 
   <td>Element Plus 实例详解（十一）___</td> 
  </tr> 
  <tr> 
   <td></td> 
   <td></td> 
  </tr> 
 </tbody> 
</table>

**推荐阅读：**

<table> 
 <tbody> 
  <tr> 
   <td>31</td> 
   <td><a href="https://blog.csdn.net/weixin_69553582/article/details/129701286" rel="nofollow"><img alt="" height="84" src="https://img-blog.csdnimg.cn/d4d0260274074d5e96ddfa8810ade053.png" width="150"></a></td> 
   <td> <p></p> <p><a href="https://blog.csdn.net/weixin_69553582/article/details/129701286" title="Element Plus 实例详解（一）___安装设置" rel="nofollow">Element Plus 实例详解（一）___安装设置</a></p> </td> 
  </tr> 
  <tr> 
   <td>30</td> 
   <td> <p><img alt="" height="84" src="https://img-blog.csdnimg.cn/c0f74fbb8d534b17964693dba9e1494f.png" width="150"></p> </td> 
   <td><a href="https://blog.csdn.net/weixin_69553582/article/details/129584587" title="Vue3安装配置、开发环境搭建(组件安装卸载)（图文详细）" rel="nofollow">Vue3安装配置、开发环境搭建(组件安装卸载)（图文详细）</a></td> 
  </tr> 
  <tr> 
   <td>29</td> 
   <td><img alt="" height="84" src="https://img-blog.csdnimg.cn/37d6aa3e03e241fa8db72ccdfb8f716b.png" width="150"></td> 
   <td> <p><a href="https://blog.csdn.net/weixin_69553582/article/details/129233327" title="SVG实例详解系列（一）(svg概述、位图和矢量图区别（图解）、SVG应用实例）" rel="nofollow">SVG实例详解系列（一）(svg概述、位图和矢量图区别（图解）、SVG应用实例）</a></p> </td> 
  </tr> 
  <tr> 
   <td>28</td> 
   <td><img alt="" height="84" src="https://img-blog.csdnimg.cn/6824ba7870344be68efb5c5f4e1dbbcf.png" width="150"></td> 
   <td> <p><a href="https://blog.csdn.net/weixin_69553582/article/details/129053793" title="查看jdk安装路径，在windows上实现多个java jdk的共存解决办法，安装java19后终端乱码的解决" rel="nofollow">查看jdk安装路径，在windows上实现多个java jdk的共存解决办法，安装java19后终端乱码的解决</a></p> </td> 
  </tr> 
  <tr> 
   <td>27</td> 
   <td><img alt="bba02a1c4617422c9fbccbf5325850d9.png" height="84" src="https://img-blog.csdnimg.cn/bba02a1c4617422c9fbccbf5325850d9.png" width="150"></td> 
   <td> <p><a href="https://blog.csdn.net/weixin_69553582/article/details/128999468" title="别具一格，原创唯美浪漫情人节表白专辑，(复制就可用)（html5,css3,svg)表白爱心代码(1)" rel="nofollow">别具一格，原创唯美浪漫情人节表白专辑，(复制就可用)（html5,css3,svg)表白爱心代码(1)</a></p> </td> 
  </tr> 
  <tr> 
   <td>26</td> 
   <td><img alt="fea225cb9ec14b60b2d1b797dd8278a2.png" height="84" src="https://img-blog.csdnimg.cn/fea225cb9ec14b60b2d1b797dd8278a2.png" width="150"></td> 
   <td> <p><a href="https://blog.csdn.net/weixin_69553582/article/details/128699908" title="2023年春节祝福第二弹——送你一只守护兔，让它温暖每一个你【html5 css3】画会动的小兔子，炫酷充电，字体特" rel="nofollow">2023年春节祝福第二弹——送你一只守护兔，让它温暖每一个你【html5 css3】画会动的小兔子，炫酷充电，字体特</a></p> </td> 
  </tr> 
  <tr> 
   <td>25</td> 
   <td><img alt="1f53fb9c6e8b4482813326affe6a82ff.png" height="84" src="https://img-blog.csdnimg.cn/1f53fb9c6e8b4482813326affe6a82ff.png" width="150"></td> 
   <td> <p><a href="https://blog.csdn.net/weixin_69553582/article/details/128581968" title="2023春节祝福系列第一弹（上）（放飞祈福孔明灯，祝福大家身体健康）（附完整源代码及资源免费下载）" rel="nofollow">2023春节祝福系列第一弹（上）（放飞祈福孔明灯，祝福大家身体健康）（附完整源代码及资源免费下载）</a></p> </td> 
  </tr> 
  <tr> 
   <td>24</td> 
   <td><img alt="6176c4061c72430eb100750af6fc4d0e.png" height="84" src="https://img-blog.csdnimg.cn/6176c4061c72430eb100750af6fc4d0e.png" width="150"></td> 
   <td> <p><a href="https://blog.csdn.net/weixin_69553582/article/details/128425770?spm=1001.2014.3001.5502" title="HTML+CSS+svg绘制精美彩色闪灯圣诞树，HTML+CSS+Js实时新年时间倒数倒计时(附源代码)" rel="nofollow">HTML+CSS+svg绘制精美彩色闪灯圣诞树，HTML+CSS+Js实时新年时间倒数倒计时(附源代码)</a></p> </td> 
  </tr> 
  <tr> 
   <td>23</td> 
   <td><img alt="17b403c4307c4141b8544d02f95ea06c.png" height="84" src="https://img-blog.csdnimg.cn/17b403c4307c4141b8544d02f95ea06c.png" width="150"></td> 
   <td> <p><a href="https://blog.csdn.net/weixin_69553582/article/details/128368639" title="草莓熊python绘图（春节版，圣诞倒数雪花版）附源代码" rel="nofollow">草莓熊python绘图（春节版，圣诞倒数雪花版）附源代码</a></p> </td> 
  </tr> 
  <tr> 
   <td>22</td> 
   <td><img alt="5d409c8f397a45c986ca2af7b7e725c9.png" height="84" src="https://img-blog.csdnimg.cn/5d409c8f397a45c986ca2af7b7e725c9.png" width="150"></td> 
   <td> <p><a href="https://blog.csdn.net/weixin_69553582/article/details/128296176" title="【程序人生】卡塔尔世界杯元素python海龟绘图（附源代码），世界杯主题前端特效5个（附源码）" rel="nofollow">【程序人生】卡塔尔世界杯元素python海龟绘图（附源代码），世界杯主题前端特效5个（附源码）</a></p> </td> 
  </tr> 
  <tr> 
   <td>21</td> 
   <td><img alt="0a4256d5e96d4624bdca36433237080b.png" height="84" src="https://img-blog.csdnimg.cn/0a4256d5e96d4624bdca36433237080b.png" width="150"></td> 
   <td> <p><a href="https://blog.csdn.net/weixin_69553582/article/details/127941542" title="python爱心源代码集锦（18款）" rel="nofollow">python爱心源代码集锦（18款）</a></p> </td> 
  </tr> 
  <tr> 
   <td>20</td> 
   <td><img alt="4d9032c9cdf54f5f9193e45e4532898c.png" height="84" src="https://img-blog.csdnimg.cn/4d9032c9cdf54f5f9193e45e4532898c.png" width="150"></td> 
   <td> <p><a href="https://blog.csdn.net/weixin_69553582/article/details/128141522" title="巴斯光年python turtle绘图__附源代码" rel="nofollow">巴斯光年python turtle绘图__附源代码</a></p> </td> 
  </tr> 
  <tr> 
   <td>19</td> 
   <td><img alt="074cd3c255224c5aa21ff18fdc25053c.png" height="84" src="https://img-blog.csdnimg.cn/074cd3c255224c5aa21ff18fdc25053c.png" width="150"></td> 
   <td> <p><a href="https://blog.csdn.net/weixin_69553582/article/details/128015962" title="Three.js实例详解___旋转的精灵女孩(附完整代码和资源)（一）" rel="nofollow">Three.js实例详解___旋转的精灵女孩(附完整代码和资源)（一）</a></p> </td> 
  </tr> 
  <tr> 
   <td>18</td> 
   <td><img alt="daecd7067e7c45abb875fc7a1a469f23.png" height="84" src="https://img-blog.csdnimg.cn/daecd7067e7c45abb875fc7a1a469f23.png" width="150"></td> 
   <td> <p><a href="https://blog.csdn.net/weixin_69553582/article/details/127799077" title="草莓熊python turtle绘图代码（玫瑰花版）附源代码" rel="nofollow">草莓熊python turtle绘图代码（玫瑰花版）附源代码</a></p> </td> 
  </tr> 
  <tr> 
   <td>17</td> 
   <td><img alt="fe88b78e78694570bf2d850ce83b1f69.png" height="84" src="https://img-blog.csdnimg.cn/fe88b78e78694570bf2d850ce83b1f69.png" width="150"></td> 
   <td> <p><a href="https://blog.csdn.net/weixin_69553582/article/details/127799004" title="立体多层玫瑰绘图源码__玫瑰花python 绘图源码集锦" rel="nofollow">立体多层玫瑰绘图源码__玫瑰花python 绘图源码集锦</a></p> </td> 
  </tr> 
  <tr> 
   <td>16</td> 
   <td><img alt="c5feeb25880d49c085b808bf4e041c86.png" height="84" src="https://img-blog.csdnimg.cn/c5feeb25880d49c085b808bf4e041c86.png" width="150"></td> 
   <td> <p><a href="https://blog.csdn.net/weixin_69553582/article/details/127505979" title="皮卡丘python turtle海龟绘图（电力球版）附源代码" rel="nofollow">皮卡丘python turtle海龟绘图（电力球版）附源代码</a></p> </td> 
  </tr> 
  <tr> 
   <td>15</td> 
   <td><img alt="38266b5036414624875447abd5311e4d.png" height="84" src="https://img-blog.csdnimg.cn/38266b5036414624875447abd5311e4d.png" width="150"></td> 
   <td> <p><a href="https://blog.csdn.net/weixin_69553582/article/details/127582251" title="【CSDN云IDE】个人使用体验和建议（含超详细操作教程）（python、webGL方向)" rel="nofollow">【CSDN云IDE】个人使用体验和建议（含超详细操作教程）（python、webGL方向)</a></p> </td> 
  </tr> 
  <tr> 
   <td>14</td> 
   <td><img alt="03ed644f9b1d411ba41c59e0a5bdcc61.png" height="84" src="https://img-blog.csdnimg.cn/03ed644f9b1d411ba41c59e0a5bdcc61.png" width="150"></td> 
   <td> <p><a href="https://blog.csdn.net/weixin_69553582/article/details/127131591" title="草莓熊python turtle绘图（风车版）附源代码" rel="nofollow">草莓熊python turtle绘图（风车版）附源代码</a></p> </td> 
  </tr> 
  <tr> 
   <td>13</td> 
   <td><img alt="09e08f86f127431cbfdfe395aa2f8bc9.png" height="84" src="https://img-blog.csdnimg.cn/09e08f86f127431cbfdfe395aa2f8bc9.png" width="150"></td> 
   <td> <p><a href="https://blog.csdn.net/weixin_69553582/article/details/126624379" title="用代码过中秋，python海龟月饼你要不要尝一口？" rel="nofollow">用代码过中秋，python海龟月饼你要不要尝一口？</a></p> </td> 
  </tr> 
  <tr> 
   <td>12</td> 
   <td><img alt="40e8b4631e2b486bab2a4ebb5bc9f410.png" height="84" src="https://img-blog.csdnimg.cn/40e8b4631e2b486bab2a4ebb5bc9f410.png" width="150"></td> 
   <td> <p><a href="https://blog.csdn.net/weixin_69553582/article/details/126365799" title="《 Python List 列表全实例详解系列（一）》__系列总目录、列表概念" rel="nofollow">《 Python List 列表全实例详解系列（一）》__系列总目录、列表概念</a></p> </td> 
  </tr> 
  <tr> 
   <td>11</td> 
   <td><img alt="938bc5a8bb454a41bfe0d4185da845dc.jpeg" height="84" src="https://img-blog.csdnimg.cn/938bc5a8bb454a41bfe0d4185da845dc.jpeg" width="150"></td> 
   <td> <p><a href="https://blog.csdn.net/weixin_69553582/article/details/126110424?spm=1001.2014.3001.5502" title="用代码写出浪漫__合集（python、matplotlib、Matlab、java绘制爱心、玫瑰花、前端特效玫瑰、爱心）" rel="nofollow">用代码写出浪漫__合集（python、matplotlib、Matlab、java绘制爱心、玫瑰花、前端特效玫瑰、爱心）</a></p> </td> 
  </tr> 
  <tr> 
   <td>10</td> 
   <td><img alt="0f09e73712d149ff90f0048a096596c6.png" height="84" src="https://img-blog.csdnimg.cn/0f09e73712d149ff90f0048a096596c6.png" width="150"></td> 
   <td> <p><a href="https://blog.csdn.net/weixin_69553582/article/details/126006585" title="Python函数方法实例详解全集(更新中...)" rel="nofollow">Python函数方法实例详解全集(更新中...)</a></p> </td> 
  </tr> 
  <tr> 
   <td>9</td> 
   <td><img alt="93d65dbd09604c4a8ed2c01df0eebc38.png" height="84" src="https://img-blog.csdnimg.cn/93d65dbd09604c4a8ed2c01df0eebc38.png" width="150"></td> 
   <td> <p><a href="https://blog.csdn.net/weixin_69553582/article/details/125986622" title="matplotlib 自带绘图样式效果展示速查（28种，全）" rel="nofollow">matplotlib 自带绘图样式效果展示速查（28种，全）</a></p> </td> 
  </tr> 
  <tr> 
   <td>8</td> 
   <td><img alt="aa17177aec9b4e5eb19b5d9675302de8.png" height="84" src="https://img-blog.csdnimg.cn/aa17177aec9b4e5eb19b5d9675302de8.png" width="150"></td> 
   <td> <p><a href="https://blog.csdn.net/weixin_69553582/article/details/125776190" title="手机屏幕坏了____怎么把里面的资料导出（18种方法）" rel="nofollow">手机屏幕坏了____怎么把里面的资料导出（18种方法）</a></p> </td> 
  </tr> 
  <tr> 
   <td>7</td> 
   <td><img alt="1750390dd9da4b39938a23ab447c6fb6.jpeg" height="84" src="https://img-blog.csdnimg.cn/1750390dd9da4b39938a23ab447c6fb6.jpeg" width="150"></td> 
   <td> <p><a href="https://blog.csdn.net/weixin_69553582/article/details/125532836" title="2023年3月TIOBE 指数头条：编程语言 Go 进入 TIOBE 指数前 10 名，多家权威机构____编程语言排行榜__薪酬状" rel="nofollow">2023年3月TIOBE 指数头条：编程语言 Go 进入 TIOBE 指数前 10 名，多家权威机构____编程语言排行榜__薪酬状</a></p> </td> 
  </tr> 
  <tr> 
   <td>6</td> 
   <td><img alt="dc8796ddccbf4aec98ac5d3e09001348.jpeg" height="103" src="https://img-blog.csdnimg.cn/dc8796ddccbf4aec98ac5d3e09001348.jpeg" width="150"></td> 
   <td> <p><a href="https://blog.csdn.net/weixin_69553582/article/details/125403845" title="Python中Print()函数的用法___实例详解(全，例多）" rel="nofollow">Python中Print()函数的用法___实例详解(全，例多）</a></p> </td> 
  </tr> 
  <tr> 
   <td>5</td> 
   <td><img alt="1ab685d264ed4ae5b510dc7fbd0d1e55.jpeg" height="103" src="https://img-blog.csdnimg.cn/1ab685d264ed4ae5b510dc7fbd0d1e55.jpeg" width="150"></td> 
   <td> <p><a href="https://blog.csdn.net/weixin_69553582/article/details/125289540" title="色彩颜色对照表（一）(16进制、RGB、CMYK、HSV、中英文名)" rel="nofollow">色彩颜色对照表（一）(16进制、RGB、CMYK、HSV、中英文名)</a></p> </td> 
  </tr> 
  <tr> 
   <td>4</td> 
   <td><img alt="80007dbf51944725bf9cf4cfc75c5a13.png" height="84" src="https://img-blog.csdnimg.cn/80007dbf51944725bf9cf4cfc75c5a13.png" width="150"></td> 
   <td> <p><a href="https://blog.csdn.net/weixin_69553582/article/details/124966437" title="Node.js (v19.1.0npm 8.19.3) vue.js安装配置教程（超详细）" rel="nofollow">Node.js (v19.1.0npm 8.19.3) vue.js安装配置教程（超详细）</a></p> </td> 
  </tr> 
  <tr> 
   <td>3</td> 
   <td><img alt="c6374d75c29942f2aa577ce9c5c2e12b.png" height="103" src="https://img-blog.csdnimg.cn/c6374d75c29942f2aa577ce9c5c2e12b.png" width="150"></td> 
   <td> <p><a href="https://blog.csdn.net/weixin_69553582/article/details/124893550" title="Tomcat 启动闪退问题解决集（八大类详细）" rel="nofollow">Tomcat 启动闪退问题解决集（八大类详细）</a></p> </td> 
  </tr> 
  <tr> 
   <td>2</td> 
   <td><img alt="5218ac5338014f389c21bdf1bfa1c599.png" height="103" src="https://img-blog.csdnimg.cn/5218ac5338014f389c21bdf1bfa1c599.png" width="150"></td> 
   <td> <p><a href="https://blog.csdn.net/weixin_69553582/article/details/124893517" title="Tomcat端口配置（详细）" rel="nofollow">Tomcat端口配置（详细）</a></p> </td> 
  </tr> 
  <tr> 
   <td>1</td> 
   <td><img alt="fffa2098008b4dc68c00a172f67c538d.png" height="103" src="https://img-blog.csdnimg.cn/fffa2098008b4dc68c00a172f67c538d.png" width="150"></td> 
   <td> <p><a href="https://blog.csdn.net/weixin_69553582/article/details/124845408" title="tomcat11、tomcat10 安装配置（Windows环境）（详细图文）" rel="nofollow">tomcat11、tomcat10 安装配置（Windows环境）（详细图文）</a></p> </td> 
  </tr> 
 </tbody> 
</table>

[vue3 _create-vue_vite_Vite _ Vue_https_blog.csdn.net_weixin_69553582_article_details_129630880]: https://blog.csdn.net/weixin_69553582/article/details/129630880
[http_localhost_5173]: http://localhost:5173/
[icon-default.png_t_N2N8]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/6291161b614042758a689a5ff492d4d2.png
[Element Plus _icon-default.png_t_N2N8_https_blog.csdn.net_weixin_69553582_article_details_129701286]: https://blog.csdn.net/weixin_69553582/article/details/129701286
[c2e8a746df2b4418bc4ee3805fa6ee2a.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/d122d2f302f44e4ab9db49f799e1ada8.png
[3e7ff85b033c4933b11da1ea1bcec61a.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/3d72b3bd80b24da5a24a509b02e9ec08.png
[1d95802d2faf427483fce12ee41f3ea2.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/c35166cdb2f6425b9ffa06fa017eca70.png
[bd3900019de841a987d11a56a5a8312f.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/9aa190b2f44b4cd9b5bb644f57d6ec3b.png
[f46df58001cd4680ac3040d96f40f6f7.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/d399dbb7888a4176befc7ab356cfefbd.png
[9a47586041f340ee9445a0370c7342d5.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/cae7e51426ff466eb09b2a114071e559.png
[99b952abe00d487d890f98da742e2756.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/5de71e4b633843458cb79f102bed3d23.png