更新记录

1.0.0（2023-08-08） 下载此版本

init

平台兼容性

qian_steps

正常使用

<template>
  <view>
    <qian-step :options="options"></qian-step>
  </view>
</template>

<script>
import qianStep from '../components/step.vue'
export default {
  components: {
    qianStep,
  },
  data() {
    return {
      title: 'Hello',
      options: [
        {
          title: '离离原上草，一岁一枯荣',
          content: '离离原上草离离原上草离离原上草离离原上草',
          time: '2023-9-9',
        },
        {
          title: '野火烧不尽，春风吹又生',
          content:
            '野火烧不尽，春风吹又生野火烧不尽，春风吹又生野火烧不尽，春风吹又生野火烧不尽，春风吹又生野火烧不尽，春风吹又生野火烧不尽，春风吹又生',
          time: '2023-9-9',
          url: require('../../static/logo.png'),
        },
        {
          title: '远芳侵古道，晴翠接荒城',
          content: '远芳侵古道，晴翠接荒城远芳侵古道，晴翠接荒城',
          time: '2023-9-9',
        },
      ],
    }
  },
  props: {},
  methods: {},
  onLoad() {},
}

slot 使用

<template>
  <view>

    <qian-Step :options='options'>
      <template v-slot:left='{index}'>
        <view class="circle2"></view>
        <view class="line" v-if="index != options.length-1"></view>
      </template>
      <template v-slot:right='{item}'>
        <text style="font-size:30rpx;font-weight:700">{{item.title}}</text>
        <view class="setp_label" style="padding:10rpx;font-size:24rpx">
          <view>
            {{item.content }}
          </view>
          <view v-if="item.url" style="margin-top:20rpx">
            <img :src="item.url" alt="" srcset="">
          </view>
        </view>
        <view class="setp_label" style="font-size:26rpx;text-align:right">
          <view>{{item.time}}</view>
        </view>
      </template>

    </qian-Step>
  </view>
</template>

<script>
import qianStep from '../components/step.vue'
export default {
  components: {
    qianStep,
  },
  data() {
    return {
      title: 'Hello',
      options: [
        {
          title: '离离原上草，一岁一枯荣',
          content: '离离原上草离离原上草离离原上草离离原上草',
          time: '2023-9-9',
        },
        {
          title: '野火烧不尽，春风吹又生',
          content:
            '野火烧不尽，春风吹又生野火烧不尽，春风吹又生野火烧不尽，春风吹又生野火烧不尽，春风吹又生野火烧不尽，春风吹又生野火烧不尽，春风吹又生',
          time: '2023-9-9',
          url: require('../../static/logo.png'),
        },
        {
          title: '远芳侵古道，晴翠接荒城',
          content: '远芳侵古道，晴翠接荒城远芳侵古道，晴翠接荒城',
          time: '2023-9-9',
        },
      ],
    }
  },
  props: {},
  methods: {},
  onLoad() {},
}
</script>
<style>
.circle2 {
  width: 40rpx;
  height: 40rpx;
  background-image: url('../../static/logo.png');
  background-repeat: no-repeat;
  background-size: 40rpx 40rpx;
}
.line {
  width: 2rpx;
  height: 100%;
  margin-left: 20rpx;
  display: flex;
  flex-direction: column;
  flex: 1;
  background-color: #999;
}
</style>

配置项说明

options: 渲染的数据--数组 activeFiled: 需要设置激活样式和激活的哪一个index--对象 slot:left/right: 对应的插槽