更新记录

2.0.0(2020-07-12) 下载此版本

优化兼容性 进度条改为自适应 增加内容显示行数控制 设置为0显示所有内容 同时进度条自适应

1.0.0(2020-03-28) 下载此版本

初次上传,后续改进


平台兼容性

更新说明

优化兼容性 进度条改为自适应 增加内容显示行数控制 设置为0显示所有内容 同时进度条自适应

安装

导入

在需要使用的文件中导入插件

import YSteps from '../../components/Y-Steps/Y-Steps.vue'
components: {
            YSteps
        }

参数

参数 类型 示例 说明 默认
infoList Array [{date:'2020-01',info:'内容'}] 显示的内容列表 []
color String #003300 节点中文字颜色 #fff
backgroundColor String #003300 进度点及节点背景颜色 #ff3838
lineNum Number 2 最多显示几行内容 0为显示全部内容 2为显示两行 超过两行显示... 0
@click 事件 点击某项内容触发事件 返回点击项的索引值 0-n

示例代码

<template>
    <view style="background-color: #f2f2f2;padding-top: 100rpx;">
        <YSteps lineNum='0' color='#fff' backgroundColor='#000fff' :infoList='list'></YSteps>
    </view>
</template>
<script>
    import YSteps from '../../components/Y-Steps/Y-Steps.vue'
    export default {
        components: {
            YSteps
        },
        data() {
            return {
                list: [
                        {
                            date: '2020-1-4',
                            info: '的'
                        },

                        {
                            date: '2020-1-4',
                            info: '看见阿萨德和封口机撒的护肤科技撒地方即可撒地方就开始'
                        },

                        {
                            date: '2020-1-4',
                            info: '这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容'
                        },
                        {
                            date: '2020-1-4',
                            info: '这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容'
                        },
                        {
                            date: '2020-1-4',
                            info: '这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容'
                        },
                        {
                            date: '2020-1-4',
                            info: '这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容'
                        },
                        {
                            date: '2020-1-4',
                            info: '这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容'
                        },
                        {
                            date: '2020-1-4',
                            info: '这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容'
                        },

                    ]
                };

        },
        methods: {

        }
    }
</script>

<style>

</style>

隐私、权限声明

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

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

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

许可协议

MIT协议

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