更新记录

1.0.0(2023-08-08) 下载此版本

init


平台兼容性

Vue2 Vue3
×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.4.15 app-vue
钉钉小程序 快手小程序 飞书小程序 京东小程序
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari

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: 对应的插槽

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

暂无用户评论。

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问