vue3中，改造环形进度条Progress 组件——显示不同颜色

vue3中，改造环形进度条Progress 组件——显示不同颜色

效果

代码

1、引入页面

index.vue

<template> <div class="pitDownStatistics-box"> <titleHeader :title="title" /> <div class="pitDownStatistics-data"> <div class="pitDownStatistics-data-left"> <Torus :color="torusData.color" :percentage="torusData.percentage" :width="torusData.width" :title="torusData.title" :strokeWidth="torusData.strokeWidth" @click="handleAttendanceStatistics" ></Torus> </div> <div class="pitDownStatistics-data-right"> <ChartList :list="dataList" @click="handleAttendanceStatistics"></ChartList> </div> </div> </div> </template> <script setup lang="ts" name="pitDownStatistics"> import { ref } from "vue"; import Torus from "../components/torus.vue"; import titleHeader from "@/components/header/titleHeader.vue"; import ChartList from "../components/chartList.vue"; const title = ref("请假数据统计"); const torusData = ref({ color: "#00F0FF", percentage: 89, width: 130, title: "出勤率", strokeWidth: 8 }); const dataList = ref([ { title: "累计休假", value: 20, color: "#00F0FF", unit: "人次" }, { title: "累计缺勤", value: 30, color: "#FF5D5D", unit: "人次" }, { title: "累计迟到早退", value: 18, color: "#0075FF", unit: "人次" } ]); const handleAttendanceStatistics = () => { console.log("点击事件"); }; </script> <style scoped lang="scss"> .pitDownStatistics-data { display: flex; align-items: center; height: calc(100% - 54px); .pitDownStatistics-data-left { position: relative; flex: 1; height: 100%; justify-content: center; align-items: center; display: flex; } .pitDownStatistics-data-right { flex: 1; } } </style> 

2、进度条组件页面

src\views\attendance\components\torus.vue

<template> <div class="torus-box"> <el-progress type="circle" :percentage="props.percentage" :color="props.color" :stroke-width="props.strokeWidth" :width="props.width" > <template #default="{ percentage }"> <span class="percentage-value">{ 
  { percentage }}%</span> <span class="percentage-label">{ 
  { props.title }}</span> </template> </el-progress> </div> </template> <script setup lang="ts"> const props = defineProps({ color: { type: String, required: true, default: "#00FFBB" }, title: { type: String, required: true, default: "默认" }, percentage: { type: Number, required: true, default: 30 }, width: { type: Number, required: true, default: 120 }, strokeWidth: { type: Number, required: true, default: 8 } }); </script> <style scoped lang="scss"> .torus-box { position: relative; flex: 1; height: 100%; justify-content: center; align-items: center; display: flex; .percentage-value { color: rgba(255, 255, 255, 1); font-family: PingFang SC; font-weight: 500; font-size: 24px; display: block; margin-bottom: 2px; } .percentage-label { color: rgba(173, 185, 199, 1); font-family: PingFang SC; font-size: 12px; } } </style> 

3、title组件

src\components\header\titleHeader.vue

<template> <div class="header-container"> <div class="title-img"> <!-- title文字 --> <span>{ 
  { props.title }}</span> <!-- title单选 --> <slot name="right"></slot> <!-- title图片 --> <img @click="isDialog" class="header" :src="props.src" v-show="props.src != ''" /> </div> <div class="mark"> <slot name="mark" /> </div> </div> </template> <script lang="ts" setup> const props = defineProps({ src: { type: String, required: false, default: "" }, title: { type: String, required: true, default: "" } }); // 展示弹框 const emit = defineEmits(["is-dialog"]); const isDialog = () => { emit("is-dialog", ""); }; </script> <style lang="scss" scoped> .header-container { padding: 24px 24px 6px; .title-img { display: flex; font-family: "PingFang SC"; font-size: 22px; color: rgb(255 255 255 / 100%); align-items: center; > span { margin-right: auto; } > img { cursor: pointer; margin-left: 24px; height: 20px; } } } </style> 

4、不同颜色显示组件

src\views\attendance\components\chartList.vue

<template> <div class="chartList-box"> <div class="chartList-item" v-for="(item, index) in props.list" :key="index"> <div :style="{ 'border-color': item.color }"></div> <p>{ 
  { item.title }}</p> <span ><b :style="{ color: item.color }">{ 
  { item.value }}</b >{ 
  { item.unit }}</span > </div> </div> </template> <script setup lang="ts"> type listType = { title: string; value: number; color: string; unit: string; }; const props = defineProps({ list: { type: Array<listType>, required: true, default: () => { return [ { title: "默认", value: 12, color: "red", unit: "个" } ]; } } }); </script> <style scoped lang="scss"> .chartList-item { position: relative; display: flex; align-items: center; margin-right: 14%; margin-bottom: 14px; > div { width: 4px; height: 4px; border-radius: 50%; border: 2px solid; } > span { display: block; width: 100px; font-family: "PingFang SC"; font-size: 14px; color: #fff; text-align: right; > b { font-size: 20px; font-weight: 600; } } > p { width: 130px; margin-right: auto; margin-left: 8px; font-family: "PingFang SC"; font-size: 16px; color: #fff; } } .chartList-item:last-of-type { margin-bottom: 0; } .chartList-item::after { position: absolute; bottom: -5px; left: 3px; width: 100%; height: 1px; content: ""; background-color: rgba(219, 223, 241, 0.2); } </style> 

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/qdvuejs/10868.html