vue实现进度条带指针

效果最终

复制代码
function calculatePointerPosition(value) {
    if (value < 2.6) return 12.5;  // 非常差位置
    if (value < 5.1) return 37.5;  // 较差位置
    if (value < 7.1) return 62.5;  // 良好位置
    return 90;  // 非常满意位置
}

function getStatusText(value) {
    if (value < 2.6) return '非常差';
    if (value < 5.1) return '较差';
    if (value < 7.1) return '良好';
    return '非常满意';
}

function getStatusColor(value) {
    if (value < 2.6) return '#F2F2F2';
    if (value < 5.1) return '#FF4D4F';
    if (value < 7.1) return '#FFAB2C';
    return '#67C23A';
}

function getProgressBackground(value) {
    if (value < 2.6) return 'linear-gradient(90deg, rgba(242,242,242,0) 0%, #F2F2F2 100%)';
    if (value < 5.1) return 'linear-gradient(90deg, rgba(255,77,79,0) 0%, #FF4D4F 100%)';
    if (value < 7.1) return 'linear-gradient(90deg, rgba(255,171,44,0) 0%, #FFAB2C 100%)';
    return 'linear-gradient(90deg, rgba(103,194,58,0) 0%, #67C23A 100%)';
}

function getStatusImage(value) {
    if (value < 2.6) return new URL(
        "../../../assets/images/tijian/gray.png",
        import.meta.url
    ).href;
    if (value < 5.1) return new URL(
        "../../../assets/images/tijian/error.png",
        import.meta.url
    ).href;
    if (value < 7.1) return new URL(
        "../../../assets/images/tijian/waring.png",
        import.meta.url
    ).href;
    return new URL(
        "../../../assets/images/tijian/success.png",
        import.meta.url
    ).href;
}

<!-- 进度条组件 -->
                <div style="padding: 20px; background: #fff; border-radius: 8px; margin-top: 20px;">
                    <!-- 指针在上方 -->
                    <div style="position: relative; height: 50px; margin-bottom: -5px;">
                        <img
                            :style="{
                                position: 'absolute',
                                left: `${(score/10)*100}%`,
                                bottom: '10px',
                                width: '60px',
                                height: '28px',
                                transform: 'translateX(-50%)'
                            }"
                            :src="getStatusImage(score)"
                        />
                    </div>
                    <!-- 进度条 -->
                    <div style="position: relative; height: 10px; background: #f0f0f0; border-radius: 5px;">
                        <div :style="{
                            position: 'absolute',
                            height: '100%',
                            width: `${(score/10)*100}%`,
                            borderRadius: '5px',
                            background: getProgressBackground(score)
                        }">
                        </div>
                    </div>
                    <!-- 状态值在下方 -->
                    <div style="margin-top: 10px; display: flex; justify-content: space-between;">
                        <span>非常差</span>
                        <span>较差</span>
                        <span>良好</span>
                        <span>非常满意</span>
                    </div>

                    <div style="margin-top: 30px; text-align: center; font-size: 14px;">
                        当前状态: <span :style="{ color: getStatusColor(score) }">{{ getStatusText(score) }}</span>
                    </div>
                </div>
相关推荐
Southern Wind16 分钟前
Vue 3 多实例 + 缓存复用:理念及实践
前端·javascript·vue.js·缓存·html
一大树31 分钟前
Vue3优化指南:少写代码,多提性能
vue.js
HuangYongbiao37 分钟前
Rspack 原理:webpack,我为什么不要你
前端
yinuo41 分钟前
前端项目开发阶段崩溃?试试这招“Node 内存扩容术”,立马复活!
前端
前端鳄鱼崽43 分钟前
【react-native-inspector】全网唯一开源 react-native 点击组件跳转到编辑器
前端·react native·react.js
用户984022766791843 分钟前
【React.js】渐变环形进度条
前端·react.js·svg
90后的晨仔44 分钟前
Webpack完全指南:从零到一彻底掌握前端构建工具
前端·vue.js
Holin_浩霖1 小时前
JavaScript 语言革命:ES6+ 现代编程范式深度解析与工程实践
前端
前端拿破轮1 小时前
从0到1搭一个monorepo项目(一)
前端·javascript·git
m0_741412241 小时前
大文件上传与文件下载
前端