Vue3 Element Plus 使用el-progress实现【动态渐变色】环形进度条 - 附完整示例

Element Plus

基于 Vue 3，面向设计师和开发者的组件库

 效果

一、介绍

 1、官方文档

一个 Vue 3 UI 框架 | Element Plus

一个 Vue 3 UI 框架 | Element PlusA Vue 3 based component library for designers and developershttps://element-plus.org/zh-CN/

2、官方示例

​​

二、准备工作

1、安装依赖包

# NPM
$ npm install element-plus --save

# Yarn
$ yarn add element-plus

# pnpm
$ pnpm install element-plus

 2、示例版本 

"element-plus": "2.5.5",

三、使用步骤

1、element-plus自动导入

首先你需要安装unplugin-vue-components 和 unplugin-auto-import这两款插件

npm install -D unplugin-vue-components unplugin-auto-import

然后把下列代码插入到你的 Vite 或 Webpack 的配置文件中

Vite

// vite.config.ts
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  // ...
  plugins: [
    // ...
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
})

注：完整引入 / 按需导入 / 手动导入等方式请参照下方链接配置

快速开始 | Element Plus

2、使用el-progress

<div class="progress-demo">
  <svg width="0" height="0">
    <defs>
      <linearGradient :id="dynamicGradientId" x1="0%" y1="0%" x2="100%" y2="0%">
        <stop offset="0%" :style="`stop-color: ${startColor}`" />
        <stop offset="100%" :style="`stop-color: ${endColor}`" />
      </linearGradient>
    </defs>
  </svg>

  <el-progress
    type="circle"
    :percentage="percentage"
    :stroke-width="8"
    :color="`url(#${dynamicGradientId})`"
  />
</div>

3、使用Math.random() + Math.floor()

const percentage = ref(60)
const dynamicGradientId = ref('gradient-' + Math.random().toString(36).substr(2, 5));

const startColor = computed(() => {
  // 根据百分比计算起始颜色
  const g = Math.floor(255 * (1 - percentage.value / 100));
  return `rgb(255, ${g}, 0)`;
});

const endColor = computed(() => {
  // 根据百分比计算结束颜色
  const r = Math.floor(255 * (percentage.value / 100));
  return `rgb(${r}, 0, 255)`;
});

四、完整示例

<template>
  <div class="progress-demo">
    <svg width="0" height="0">
      <defs>
        <linearGradient :id="dynamicGradientId" x1="0%" y1="0%" x2="100%" y2="0%">
          <stop offset="0%" :style="`stop-color: ${startColor}`" />
          <stop offset="100%" :style="`stop-color: ${endColor}`" />
        </linearGradient>
      </defs>
    </svg>

    <el-progress
      type="circle"
      :percentage="percentage"
      :stroke-width="8"
      :color="`url(#${dynamicGradientId})`"
    />
  </div>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue'
const percentage = ref(60)
const dynamicGradientId = ref('gradient-' + Math.random().toString(36).substr(2, 5));

const startColor = computed(() => {
  // 根据百分比计算起始颜色
  const g = Math.floor(255 * (1 - percentage.value / 100));
  return `rgb(255, ${g}, 0)`;
});

const endColor = computed(() => {
  // 根据百分比计算结束颜色
  const r = Math.floor(255 * (percentage.value / 100));
  return `rgb(${r}, 0, 255)`;
});

// 为了展示动态效果使用了setTimeout()套娃, 正式使用时请勿模仿！！！
setTimeout(() => {
  percentage.value = 20
  setTimeout(() => {
    percentage.value = 96
    setTimeout(() => {
      percentage.value = 1
    }, 1000);
  }, 1000);
}, 1000);
</script>

欢迎关注VX公众号：前端小知识营地