vue3手写步骤条

最新推荐文章于 2024-08-01 17:54:29 发布
最新推荐文章于 2024-08-01 17:54:29 发布
阅读量989 收藏 1
点赞数
分类专栏： vue 文章标签： 前端 vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_52179917/article/details/126895000
版权

改写自：Vue步骤条（Steps）_theMuseCatcher的博客-CSDN博客_vue 步骤条

因目前使用技术栈为vue3 所以稍作修改：

修改过程中的问题：

1. ref响应式失效：ref之后，不会对变量直接进行更改，需要.value

2. props中的数据可以直接在页面元素中使用

自定义封装步骤条：

<template>
  <div class="m-steps-area">
    <div class="m-steps">
      <div
        :class="['m-steps-item',
          { 'finished': current > n,
            'process': current === n && n !== totalSteps,
            'last-process': current === totalSteps && n === totalSteps,
            'middle-wait': current < n && n !== totalSteps,
            'last-wait': current < n && n === totalSteps,
          }
        ]"
        v-for="n in totalSteps"
        :key="n"
        @click="onChange(n)">
        <div class="m-steps-icon">
          <span class="u-icon">{{ current }}</span>
        </div>
        <div class="m-steps-content">
          <div class="u-steps-title">{{ stepsLabel[n-1] || 'S ' + n }}</div>
          <!-- <div class="u-steps-description">{{ stepsDesc[n-1] || 'Desc ' + n }}</div> -->
        </div>
      </div>
    </div>
    <el-button @click="onChange">下一步</el-button>
  </div>
</template>
<script>
import { reactive,  toRefs,ref } from 'vue'

export default {
  props: {
    stepsLabel: { // 步骤title数组
      type: Array,
      default: () => {
        return []
      }
    },
    stepsDesc: { // 步骤description数组
      type: Array,
      default: () => {
        return []
      }
    },
    totalSteps: { // 总的步骤数
      type: Number,
      default: 3
    },
    currentStep: { // 当前选中的步骤
      type: Number,
      default: 1
    }
  },
 setup(prop){
  let state = reactive({
    
  }) 
  let current = ref(1)

  const onChange  = ()=>{ // 点击切换选择步骤
      
      // if (state.current < prop.totalSteps) {
      //   // console.log(state.current)
      //   state.current++
      // }else {
      //   state.current = 1
      // }

      if (current.value < prop.totalSteps) {
        // console.log(current)
        current.value++
      }else {
        // console.log('ll',current)
        current.value = 1
      }
      
    }
  return {
    ...toRefs(state),
    current,
    onChange
  }
 }
}
</script>
<style lang="scss" scoped>
.m-steps-area {
  width: 900px;
  margin: 0px auto;
  .m-steps {
    padding: 30px 0;
    display: flex;
    .m-steps-item {
      display: inline-block;
      flex: 1; // 弹性盒模型对象的子元素都有相同的长度，且忽略它们内部的内容
      text-align: left;
      overflow: hidden;
      font-size: 16px;
      line-height: 32px;
      .m-steps-icon {
        display: inline-block;
        margin-right: 8px;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        text-align: center;
      }
      .m-steps-content {
        display: inline-block;
        vertical-align: top;
        padding-right: 10px;
        .u-steps-title {
          position: relative;
          display: inline-block;
          padding-right: 16px;
        }
        .u-steps-description {
          font-size: 14px;
          max-width: 140px;
        }
      }
    }
    .finished {
      margin-right: 16px;
      cursor: pointer;
      // &:hover {
      //   .m-steps-content {
      //     .u-steps-title {
      //       color: #1890ff;
      //     }
      //     .u-steps-description {
      //       color: #1890ff;
      //     }
      //   }
      // }
      .m-steps-icon {
        background: #1890ff;
        border: 1px solid rgba(0,0,0,.25);
        border-color: #1890ff;
        .u-icon {
          color: #fff;
        }
      }
      .m-steps-content {
        color: rgba(0,0,0,.65);
        .u-steps-title {
          color: rgba(0,0,0,.65);
          &:after {
            background: #1890ff;
            position: absolute;
            top: 16px;
            left: 100%;
            display: block;
            width: 9999px;
            height: 1px;
            content: "";
          }
        }
        // .u-steps-description {
        //   color: rgba(17, 153, 67, 0.45);
        // }
      }
    }
    .process {
      margin-right: 16px;
      .m-steps-icon {
        background: #1890ff;
        border: 1px solid rgba(0,0,0,.25);
        border-color: #1890ff;
        .u-icon {
          color: #fff;
        }
      }
      .m-steps-content {
        color: rgba(0,0,0,.65);
        .u-steps-title {
          color: rgba(0,0,0,.85);
          &:after {
            background: #e8e8e8;
            position: absolute;
            top: 16px;
            left: 100%;
            display: block;
            width: 9999px;
            height: 1px;
            content: "";
          }
        }
        .u-steps-description {
          color: rgba(0,0,0,.65);
        }
      }
    }
    .last-process {
      margin-right: 0;
      .m-steps-icon {
        background: #1890ff;
        border: 1px solid rgba(0,0,0,.25);
        border-color: #1890ff;
        .u-icon {
          color: #fff;
        }
      }
      .m-steps-content {
        color: rgba(0,0,0,.65);
        .u-steps-title {
          color: rgba(0,0,0,.85);
        }
        .u-steps-description {
          color: rgba(0,0,0,.65);
        }
      }
    }
    .middle-wait {
      margin-right: 16px;
      cursor: pointer;
      &:hover {
        .m-steps-icon {
          border: 1px solid #1890ff;
          .u-icon {
            color: #1890ff;
          }
        }
        .m-steps-content {
          .u-steps-title {
            color: #1890ff;
          }
          .u-steps-description {
            color: #1890ff;
          }
        }
      }
      .m-steps-icon {
        background: #fff;
        border: 1px solid rgba(0,0,0,.25);
        .u-icon {
          color: rgba(0,0,0,.25);
        }
      }
      .m-steps-content {
        color: rgba(0,0,0,.65);
        .u-steps-title {
          color: rgba(0,0,0,.45);
          &:after {
            background: #e8e8e8;
            position: absolute;
            top: 16px;
            left: 100%;
            display: block;
            width: 9999px;
            height: 1px;
            content: "";
          }
        }
        .u-steps-description {
          color: rgba(0,0,0,.45);
        }
      }
    }
    .last-wait {
      margin-right: 0;
      cursor: pointer;
      &:hover {
        .m-steps-icon {
          border: 1px solid #1890ff;
          .u-icon {
            color: #1890ff;
          }
        }
        .m-steps-content {
          .u-steps-title {
            color: #1890ff;
          }
          .u-steps-description {
            color: #1890ff;
          }
        }
      }
      .m-steps-icon {
        background: #fff;
        border: 1px solid rgba(0,0,0,.25);
        .u-icon {
          color: rgba(0,0,0,.25);
        }
      }
      .m-steps-content {
        color: rgba(0,0,0,.65);
        .u-steps-title {
          color: rgba(0,0,0,.45);
        }
        .u-steps-description {
          color: rgba(0,0,0,.45);
        }
      }
    }
  }
}
</style>

引用步骤条组件：

<template>
<div class="index">
  <Steps :currentStep="1" :totalSteps="6" :stepsLabel="stepsLabel" :stepsDesc="stepsDesc"  />
  
</div>

穿越到未来calc
关注
专栏目录
Vue3 封装Step
m0_62747565的博客
02-27 239
如何自定义step呢
vue手写实现水平步骤条
qq_44711316的博客
11-05 821
组件 steps.vue <template> <div class="stepBox"> //开始 <div class="stepitem" style="width:100px"> <div class="img"></div> <div :class="activestep >= 1?'circle startendcircle startenda
Vue3步骤条（Steps）
Mr Dear的博客
04-06 7008
引导用户按照流程完成任务的导航步骤条，支持：两种标签放置位置；迷你版步骤条；垂直版步骤条；点状步骤条；并且可点击；总之，功能丰富，简单易用😁😁
vue3+Ts 按项目需求自定义van-steps步骤条
最新发布
weixin_56661895的博客
08-01 365
vue3+Ts 按项目需求自定义van-steps步骤条
Vue3手写steps步骤条
Quzq11的博客
01-23 827
【代码】Vue3手写steps步骤条。
vue自己手写的步骤条组件
weixin_45444673的博客
07-02 507
vue自己手写的步骤条组件，市面上的都不喜欢，满足不了功能，自己手写了个。
Vue3 封装多行步骤条
msysj1的博客
10-25 578
【代码】Vue3 封装多行步骤条。
vue 手写一个步骤条。
早晚的博客
09-15 595
vue 手写一个步骤条。
VUE中自定义步骤条
Accccce的博客
03-22 4394
vue中自定义步骤条
vue 步骤条 简单思路
Alice9969的博客
07-01 2098
参考 Ant Design Vue 步骤条思路，只输入一个步骤参数即可实现 参考地址：https://www.antdv.com/components/steps-cn/ 思路：循环步骤数组，当输入的步骤是3，小于3的是绿色（通过），等于3是红色（停止） 简约图： 代码： <!DOCTYPE html> <html> <head> <title>测试</title> <link rel="stylesheet" ...
vue实现竖式步骤条_手把手教你实现一个 Vue 进度条组件！
weixin_39986973的博客
12-19 4677
最近在个人的项目中，想对页面之间跳转的过程进行优化，想到了很多文档或 npm 等都用到的页面跳转进度条，于是便想自己去实现一个，特此记录。来看下 npm 搜索组件时候的效果：so 下面咱们一起动手实现一下呗。定义使用方式想实现一个组件的前提，一定要想好你的需求是什么，还要自己去定义一个舒服的使用方法，这其中也是有原则的，对使用者来说，使用方式越简单越好。那么对应的代价就是写这个组件的复杂度会变高。...
步骤条Demo
09-07
步骤条的示例代码，单独的步骤条的实例以及将步骤条应用到页面上的实例。
vue使用canvas实现移动端手写签名
10-14
<img v-bind:src="url" alt="vue使用canvas实现移动端手写签名"> 重写 保存签名 ``` 2. **Vue组件**： 在Vue组件中，我们需要定义一个名为`Draw`的类来处理Canvas上的绘制逻辑。这个类将包含用于开始、结束和绘制...
vue手写步骤条功能
焦虑的博客
01-19 1221
效果图： 可能代码质量也不太好 html代码： <div class="step"> <div> <div class="posit"> <div :class="'radius' + ' ' +(step>=1 ? 'speed-bg-color':'')"> <van-icon name="records" :color="step>=1?'#fff':''"/&
Vue手写模拟步骤条
qq_59626859的博客
03-14 459
第一步中其实还有个属性叫 background-position也可以移动背景图片，但是我图定位方便；如果要使用element的步骤条就需要强行修改样式，参考之前的那篇步骤条。这里我采用手写div。思路是给最外层的div一个左边框，给里面的step-item设置左边框为图片，通过定位来移动。其他样式属性我删掉了，只留了关键点；
vue-cli脚手架搭建时基础设置说明
m0_46694056的博客
10-05 415
基础选项 Check the features needed for your project: (✳) Babel //转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。 ( ) TypeScript// TypeScript是一个JavaScript（后缀.js）的超集（后缀.ts）包含并扩展了 JavaScript 的语法，需要被编译输出为 JavaScript在浏览器运行 ( ) Progressive Web App (PWA) Support// 渐进式Web应用程序 (✳) Rout
vue 自定义步骤条样式
Fxhani的博客
05-30 2763
1
Vue写步骤条
像鱼的博客
02-24 648
其实这个功能本身js方法不难，我花时间是在布局上。 <template> <div class="box-wrap"> <div class="wrap"> <div class="box" v-for="item in this.stepList" :key="item.id"> <div class="heng icon"> <div v-if="!item.done" class
vue实现步骤条
qq_48378883的博客
10-17 614
el-input v-model="registerForm.bussScope" type="textarea" :rows="7" auto-complete="off" placeholder="请输入经营范围" clearable />
vue3 手写日期选择器
10-08
手写Vue3日期选择器可以通过以下步骤实现： 1. 创建一个名为DatePicker的Vue组件。 2. 在组件中定义一个data属性，包含所需的日期数据，例如当前日期、选择的开始日期和结束日期。 3. 在模板中创建日期选择器的界面，包括一个日历表格和选择按钮。 4. 在方法中实现选择日期的逻辑。可以通过按钮点击事件或者直接在日历表格中选择日期来触发选择逻辑。在选择日期后，更新开始日期和结束日期的值。 5. 在组件中定义一个computed属性，用于计算并返回选择的日期范围。 6. 在模板中使用v-model指令将选择的日期范围绑定到父组件的数据上。 以下是一个简单的Vue3日期选择器的示例代码： ``` <template> <div> <input type="text" v-model="selectedRange" readonly> <button @click="showCalendar">选择日期</button> <div v-if="showCalendar"> <!-- 日历表格 --> </div> </div> </template> <script> import { ref, reactive, computed } from 'vue'; export default { setup() { // 数据初始化 const selectedRange = ref(''); const showCalendar = ref(false); const startDate = ref(null); const endDate = ref(null); // 显示日历 const showCalendar = () => { showCalendar.value = true; }; // 选择日期 const selectDate = (date) => { if (!startDate.value) { startDate.value = date; } else if (!endDate.value) { if (date > startDate.value) { endDate.value = date; } else { endDate.value = startDate.value; startDate.value = date; } } else { startDate.value = date; endDate.value = null; } }; // 计算选择的日期范围 const selectedRange = computed(() => { if (startDate.value && endDate.value) { return `${startDate.value} - ${endDate.value}`; } else if (startDate.value) { return startDate.value; } else { return ''; } }); return { selectedRange, showCalendar, selectDate }; } }; </script> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值