mpvue实现的步骤条组件

<template>
  <div class="tips-template">
    <div class="steps-left" v-if="direction % 2 === 1">
      <div class="base-transform-bg"></div>
      <div class="base-bg"></div>
      <div class="tips-transform-bg"></div>
      <div class="tips-bg"></div>
      <div class="tips-text">
        <div class="step-order"><slot name="stepsOrder">{{order}}.</slot></div>
        <div class="step-description"><slot name="stepText">{{title}}</slot></div>
      </div>
    </div>
    <div class="steps-right" v-if="direction % 2 === 0">
      <div class="base-transform-bg"></div>
      <div class="base-bg"></div>
      <div class="tips-transform-bg"></div>
      <div class="tips-bg"></div>
      <div class="tips-text">
        <div class="step-description"><slot name="stepText">{{title}}</slot></div>
        <div class="step-order"><slot name="stepsOrder">{{order}}.</slot></div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'tips',
    data () {
      return {
        order: '',
        title: ''
      }
    },
    props: {
      direction: {
        type: Number,
        required: true
      },
      order: {
        type: String,
        default: '',
        required: true
      },
      title: {
        type: String,
        default: '',
        required: true
      }
    }
  }
</script>

<style scoped lang="scss">
  .tips-template {
    .steps-left {
      position: absolute;
      z-index: 9;
      margin-top: -8px;
      margin-left: 16px;
      .base-transform-bg {
        width: 144px;
        height: 31px;
        background: #F7BF00  ;
        position: absolute;
        transform:skewX(10deg);
        margin-left: 3px;
        margin-top: 3px;
      }
      .base-bg {
        width: 144px;
        height: 31px;
        background: #F7BF00;
        position: absolute;
        margin-top: 3px;
      }
      .tips-transform-bg {
        width: 141px;
        height: 31px;
        background: #375289 ;
        position: absolute;
        transform:skewX(10deg);
        margin-left: 3px;
      }
      .tips-bg {
        width: 141px;
        height: 31px;
        background: #375289;
        position: absolute;
      }
      .tips-text {
        position: absolute;
        width: 140px;
        margin: auto;
        .step-order {
          display: inline-block;
          font-size: 18px;
          font-weight: 600;
          font-style: italic;
          color: #fff;
          margin-left: 12px;
        }
        .step-description {
          display: inline-block;
          font-size: 13px;
          color: #FFFFFF;
          letter-spacing: 1px;
          line-height: 31px;
          margin-left: 7px;
        }
      }
    }
    .steps-right {
      position: absolute;
      z-index: 9;
      margin-top: -8px;
      margin-left: 215px;
      .base-transform-bg {
        width: 144px;
        height: 31px;
        background: #F7BF00  ;
        position: absolute;
        transform:skewX(-10deg);
        margin-left: -3px;
        margin-top: 3px;
      }
      .base-bg {
        width: 144px;
        height: 31px;
        background: #F7BF00;
        position: absolute;
        margin-top: 3px;
      }
      .tips-transform-bg {
        width: 141px;
        height: 31px;
        background: #375289 ;
        position: absolute;
        transform:skewX(-10deg);
      }
      .tips-bg {
        width: 141px;
        height: 31px;
        background: #375289;
        position: absolute;
        margin-left: 3px;
      }
      .tips-text {
        position: absolute;
        width: 140px;
        margin: auto;
        .step-order {
          display: inline-block;
          font-size: 18px;
          font-weight: 600;
          font-style: italic;
          color: #fff;
          /*margin: 5px 0;*/
        }
        .step-description {
          display: inline-block;
          font-size: 13px;
          color: #FFFFFF;
          letter-spacing: 1px;
          line-height: 31px;
          margin-left: 14px;
          margin-right: 7px;
        }
      }
    }
   }
</style>

实现的效果是