vue3步骤条带边框点击切换高亮

最新推荐文章于 2025-04-17 17:28:13 发布

真的不想哇

最新推荐文章于 2025-04-17 17:28:13 发布

阅读量351

点赞数 3

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/xiaoHelloWord/article/details/138350794

版权

本文描述了如何在Vue组件中使用SVG路径和clip-path属性创建一个可自定义的进度条，以及遇到的问题和解决方法，展示了如何通过状态管理控制边框颜色和文本显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述
如果是div使用clip-path: polygon(0% 0%, 92% 0%, 100% 50%, 92% 100%, 0% 100%, 8% 50%);进行裁剪加边框没实现成功。目前这个使用svg完成带边框的。
形状可自行更改path 标签里的 :d=“[num != 1 ? ‘M 0 0 L 160 0 L 176 18 L 160 38 L 0 38 L 15.5 18 Z’ : ‘M 0,0 L 160,0 L 176,18 L 160,38 L 0,38 Z’]”

<!-- 进度条 -->
<template>
  <div class="stepsBox">
    <div class="stepsContent">
        <svg width="176" height="38" viewBox="0 0 176 38"  v-for="num in stepsDesc.length" :key="num" @click="onChange(num)">
                <path  :d="[num != 1 ? 'M 0 0 L 160 0 L 176 18 L 160 38 L 0 38 L 15.5 18 Z' : 'M 0,0 L 160,0 L 176,18 L 160,38 L 0,38 Z']" 
                        :fill="[letIndex == num ? '#AC8757' : '#fff' ]

最低0.47元/天解锁文章