suitDailog 步骤条

背景

常用步骤条

使用

<template>
  <view class="baseInfoWrapper">
    <suit-steps :list="list">
<!-- 	<template v-slot:item="{item}">
		   <text class="t-conten-text" >{{item.item.content }}aaaaaaaaaaaaa</text>
			</template> -->
		</suit-steps>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list:[]
    };
  },
  mounted() {
		this.list = [
	  	{
	  		date: '2021-5-13 12:56:15',
	  		name: '处置',
	  		idea: false,
				content:'待处置，剩余时长1h1111111111111111111111111111'
	  	},
	  	{
	  		date: '2021-5-14 12:56:15',
	  		name: '接收',
	  		idea: true,
				content:'系统接收到事件aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa'
	  	},
	  	{
	  		date: '2021-5-15 12:56:15',
	  		name: '发现',
	  		idea: true,
				content:'发现有人员在工地未佩戴安全帽，发出告警'
	  	}
	  ];
	},
  methods: {},
};
</script>

参数说明

属性

属性	描述	类型	可选值	默认值
list	数据列表	Array[]	—	[]
stepType	步骤条格式 数字或者为点	String	number/dot	dot
activeColor	激活颜色	String	—	#0060C7
defaultColor	默认颜色	String	—	#ffffff
activeDotWH	步骤条 激活圆圈宽高 单位rpx	Array[]	—	[20]
defaultDotWH	步骤条 默认圆圈宽高 单位rpx	Array[]	—	[16]
lineWidth	线的宽度 单位rpx	String | Number	—	2
tipContent	提示语	String	—	情况说明

list属性

属性	描述	类型	可选值	默认值
date	时间	String	—	—
name	标题	String	—	—
content	内容	String	—	—
idea	步骤终止高亮	String	—	—

slot

插槽	说明
item	内容插槽,这个内容是{item: list的属性, tipContent: 上面属性里面的}

源码及综合示例参考

组件源码 (opens new window)