vue simpleStep 步骤条

根据 https://blog.csdn.net/CSDN877425287/article/details/113197605 博客所得
在这里插入图片描述

<template>
  <!--步骤条-组件-->
  <div id="step-group" :style="{'--height': totalHeight+unit,'--width':totalWidth+unit,'--stepBorderColor':stepBorderColor}">
    <div class="step-item" v-for="(item,index) in stepList"

         :class="{'current-step':currentStep-1>=index&&stepList.length-1!=index,
             'current-step-n':currentStep-1<index&&stepList.length-1!=index,
             'last-step':currentStep-1>=index&&stepList.length-1==index}"

         :style="{'--height': totalHeight+unit,'--itemWidth':itemWidth+unit,
             '--triangle':-totalHeight+unit,'--line':-totalHeight-lienWidth+unit,
              '--triangleBorder':totalHeight/2+unit,
              '--processingFontColor':processingFontColor,'--processingFontColorN':processingFontColorN,
              '--processingBackground':processingBackground,'--stepBackground':stepBackground,'--lienColor':lienColor
             }">

      {{item}}

    </div>


  </div>
</template>

<script>
  export default {
    name: "SimpleStepBar",
    data() {
      return {}
    },
    props: {
      totalWidth: {//步骤条总宽度
        type: Number,
        default: '75'
      },
      totalHeight: {//步骤条总高度
        type: Number,
        default: '3'
      },
      itemWidth: {//步骤项宽度
        type: Number,
        default: '25.56'
      },
      unit: {//单位
        type: String,
        default: 'rem'
      },
      stepList: {//步骤内容
        type: Array,
        default: ["步骤1", "步骤2", "步骤3"]
      },
      currentStep: {//当前步骤
        type: Number,
        default: 1
      },
      lienWidth: {//线条宽度
        type: Number,
        default: 0.1
      },
      stepBackground: {//步骤条背景色
        type: String,
        default: '#FFFFFF'
      },
      stepBorderColor: {//步骤边框色
        type: String,
        default: '#E0E0E0'
      },
      lienColor: {//线条颜色
        type: String,
        default: "#cccccc"
      },
      processingFontColor: {//进行中字体颜色
        type: String,
        default: '#FFFFFF'
      },
      processingFontColorN: {//未进行字体颜色
        type: String,
        default: '#767676'
      },
      processingBackground: {//进行中背景颜色
        type: String,
        default: '#1390EA'
      },


    },
  }
</script>

<style lang="scss" scoped>
  #step-group {
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    margin-top: 1.63rem;
    width: var(--width);
    height: var(--height);
    display: flex;
    justify-content: flex-start;
    align-content: center;
    border: 1px var(--stepBorderColor) solid;
    border-radius: 4px;
    background: var(--stepBackground);

    .step-item {
      display: flex;
      justify-content: center;
      align-items: center;
      width: var(--itemWidth);
      height: var(--height);
      font-size: 1.25rem;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: var(--processingFontColorN);
      line-height: 1.75rem;
      letter-spacing: 1px;
      position: relative;
      background: var(--stepBackground);
    }

    .current-step {
      background: var(--processingBackground);
      color: var(--processingFontColor);
    }


    .current-step:before {
      position: absolute;
      right: var(--triangle);
      //right: -3rem;
      display: block;
      content: '';
      z-index: 12;
      border-right: var(--triangleBorder) solid transparent;
      border-top: var(--triangleBorder) solid transparent;
      border-bottom: var(--triangleBorder) solid transparent;
      border-left: var(--triangleBorder) solid var(--processingBackground);
    }

    .current-step:after {
      position: absolute;
      //right: -3.2rem;
      right: var(--line);
      top: 0rem;
      display: block;
      content: '';
      z-index: 10;

      border-right: var(--triangleBorder) solid transparent;
      border-top: var(--triangleBorder) solid transparent;
      border-bottom: var(--triangleBorder) solid transparent;
      border-left: var(--triangleBorder) solid var(--lienColor);
    }

    .current-step-n:before {
      position: absolute;
      //right: -3rem;
      right: var(--triangle);
      display: block;
      content: '';
      z-index: 12;
      border-right: var(--triangleBorder) solid transparent;
      border-top: var(--triangleBorder) solid transparent;
      border-bottom: var(--triangleBorder) solid transparent;
      border-left: var(--triangleBorder) solid var(--stepBackground);
    }

    .current-step-n:after {
      position: absolute;
      //right: -3.2rem;
      right: var(--line);
      top: 0rem;
      display: block;
      content: '';
      z-index: 10;
      border-right: var(--triangleBorder) solid transparent;
      border-top: var(--triangleBorder) solid transparent;
      border-bottom: var(--triangleBorder) solid transparent;
      border-left: var(--triangleBorder) solid var(--lienColor);

    }

    .last-step {
      background: var(--processingBackground);
      color: var(--processingFontColor);
    }
  }

</style>

用法

<simpleStep :totalWidth="1070" :totalHeight="54"
	:unit='"px"' :stepList="stepList" :currentStep="currentStep"
		 :itemWidth="356" :stepBackground="stepBackground"
		 :stepBorderColor="stepBorderColor" :processingBackground="processingBackground">
	</simpleStep>
	import simpleStep from '@/components/step-bar/step-bar'

记录一下,有备无患,哈哈

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue2的步骤Steps)是一种常用的UI组件,用于展示多个步骤的进度和状态。下面是使用Vue2步骤的一般步骤: 1. 首先,确保你已经安装了Vue.js和Vue2步骤的依赖包。可以通过npm或者yarn进行安装。 2. 在你的Vue组件中引入Vue2步骤的库文件。可以使用import语句将其引入到你的组件中。 3. 在Vue组件的template中,使用`<steps>`标签来创建步骤组件。可以通过设置不同的属性来定义步骤的样式和行为。 4. 在`<steps>`标签内部,使用`<step>`标签来定义每个步骤。可以设置不同的属性来定义每个步骤的标题、描述和状态。 5. 在Vue组件的script中,可以通过data属性来定义步骤的数据。例如,可以使用一个数组来存储每个步骤的信息。 6. 可以通过methods属性来定义一些方法,用于处理步骤的交互逻辑。例如,可以定义一个方法来处理点击某个步骤时的事件。 7. 最后,在Vue组件的style中,可以定义一些样式来美化步骤的外观。 这是一个简单的示例代码,展示了如何使用Vue2步骤: ```html <template> <div> <steps :current="currentStep"> <step title="Step 1" description="This is step 1"></step> <step title="Step 2" description="This is step 2"></step> <step title="Step 3" description="This is step 3"></step> </steps> </div> </template> <script> import { Steps, Step } from 'vue2-steps'; export default { components: { Steps, Step }, data() { return { currentStep: 0 }; }, methods: { handleStepClick(index) { this.currentStep = index; } } }; </script> <style> /* 样式定义 */ </style> ``` 这样,你就可以在你的Vue应用中使用步骤组件了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值