更新记录

1.0（2023-08-14） 下载此版本

根据uni-steps 改造

平台兼容性

uni-app

插件简绍

实现原理

steps-image 是通过uni-step 改造而成

使用环境

经测试发现大部分浏览器都可以正常使用（微信，QQ，谷歌，火狐，safari）

插件使用

插件已支持 uni_modules 支持组件easycom，以下代码演示的是普通使用

<!-- HTML -->
    <UniStepsImage :datas="datas"
                   :active="datas.length"
                   :options="options"    ></UniStepsImage>

// js
import UniStepsImage from "@/components/stephen-uni-steps-image/uni-steps-image/uni-steps-image.vue"
    // 嫌路径长的话可以单独复制出来
export default {
        components: {
            UniStepsImage
        },
        data(){
            return {
                options:{
                    label:"title", //自定义名称
                    time:"time",//自定义时间名称
                    thumb:"thumb",//缩略图
                    imgUrl:"imgUrl",//预览图
                    description:'desc' ,//文本描述
                    timeOptions:{size:18,color:""}, //时间点颜色和大小
                    titleOptions:{size:14,color:""},//标题颜色和大小
                    descOptions:{size:14,color:"#ccc"},//描述颜色和大小
                },
                datas:[
                    {
                        thumb:"https://img1.baidu.com/it/u=3698355147,4173481165&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800" ,//缩略图
                        imgUrl:"https://img1.baidu.com/it/u=3698355147,4173481165&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800",//图片路径
                        title:"清风徐来十里香",
                        time:'2023-09-01 12:12:12',
                        label:"我是本身title",
                        desc:"清空万里随风飘"
                    }
                ]
            }
        }
        onLoad() {
            //模拟数据
            for(let i=0;i<10;i++){

                this.datas.push(this.datas[0])
            }
        },
    }

相关API

可传属性（Props）

label:"title", //自定义名称 time:"time",//自定义时间名称 thumb:"thumb",//缩略图 imgUrl:"imgUrl",//预览图 description:'desc' ,//文本描述 timeOptions:{size:14,color:""}, //时间点颜色和大小 titleOptions:{size:14,color:""},//标题颜色和大小 descOptions:{size:14,color:"#ccc"},//描述颜色和大小

插槽 （slot）