jiuwei-stepview

这是一款步骤视图，可以展示步骤说明，两个序号之间连接线条或者不带线条，也可以通过数据控制展开合起。提供五种案例，您也可以自定义更多样式，不需要冗余的代码，一行代码即可实现，数据控制一切。

jiuwei-stepview can show the description of each step, connecting lines between two serial numbers or without lines. You can use data to control its unfolding or closing. No need for redundant code, a line of code is enough, data control everything.

Example diagram

示例截图↓

https://jiuwei-picture.oss-cn-hangzhou.aliyuncs.com/basic/38/bf6986d70eb14467abcc02f8a27d2c4b.png

Install

# 使用yarn安装
yarn add jiuwei-stepview

# 使用npm安装 
npm install jiuwei-stepview --save 

Attributes

| 参数 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | dataList | 显示的数据 | array | — | | title | 一级标题 | string | — | | showIcon | 是否显示展开图标 | boolean | false | | showTitle | 是否显示一级标题 | boolean | true | | titleColor | 二级标题字体颜色 | string | rgba(68, 68, 68, 0.8) | | titleSize | 二级标题字体大小 | string | 14px | | titleWeight | 二级标题字体粗细 | number | 600 | | noCircle | 是否显示序号 | boolean | false | | cricleBgColor | 序号背景颜色 | string | linear-gradient(204deg, #88cad1 0%, #61b3ba 100%) | | cricleColor | 序号字体颜色 | string | white | | cricleSize | 序号字体大小 | string | 12px | | titleDetailSize | 三级标题字体大小 | string | 13px | | isLogistics| 是否使用物流模板 | boolean | false |

Steps Events

| 事件名 | 说明 | 回调函数 | | --- | --- | --- | | openDetail | 点击步骤的标题或图标时触发 | item | — |

Step Slots

| 名称 | 位置 | | --- | --- | | 任何标签 | 描述文本区域 |

Usage

main.js

 import stepview from 'jiuwei-stepview'
 Vue.use(stepview)

Example1：

自定义序号样式

You can customize the style of serial number by setting these props

  <stepview :dataList="stepList" cricleSize="23px" cricleBgColor="white" cricleColor="orange"  title="理赔流程"></stepview>

<script>
export default {
 name: 'HelloWorld',
 data () {
   return {
       stepList: [
       {
         title: '报案流程',
         detail:
           '拨打全国统一客服热线 xxxx进行报案，或关注“xxxx”官方微信公众号在线报案',
         showline: true,
         index: '1',
         showDetail: true
       },
       {
         title: '提交资料',
         detail: '按照xxxx官方微信、官网的要求，提供所需理赔资料',
         showline: true,
         index: '2',
         showDetail: true
       },
       {
         title: '资料审核',
         detail:
           '在您提交的理赔材料真实齐全的情况下，xxxx理赔专员会尽快进行内部审核工作',
         showline: true,
         index: '3',
         showDetail: true
       },
       {
         title: '理赔款支付',
         detail: '审核通过后，理赔金会支付到您提供的账户',
         showline: false,
         index: '4',
         showDetail: true
       }
     ],
   }
 }
}
</script>

Example2：

带有展开和收起图标，通过数据源的showDetail控制单元展开还是折叠

If you use Example2, it has the expand and collapse icons. You can control the cell expansion or collapse through the showdetail of the dataList

<stepview
      :dataList="questionList"
      title="常见问题"
      @openDetail="openDetail"
      :showIcon="true"
    ></stepview>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
       questionList: [
        {
          title: '本产品的交费方式是月交还是年交？',
          detail:
            '您可选择年交或月交。需要提醒的是，月交方式，首期保费先交两个月，第二个月不扣，从第三个月开始自动划扣。',
          showline: false,
          index: 'Q1',
          showDetail: true
        },
        {
          title: '本产品的产品类型是？',
          detail: '属于长期重疾险。',
          showline: false,
          index: 'Q2',
          showDetail: false
        },
        {
          title: '产品对职业的要求是什么？',
          detail: '本产品能承保的职业类别为1-4类。',
          showline: false,
          index: 'Q3',
          showDetail: false
        },
       ],
    }
  },
  methods:{
    openDetail(item) {
      this.$set(item, 'showDetail', !item.showDetail)
    },
  }
}
</script>

Example3：

  <stepview :dataList="stepList" title="理赔流程"></stepview>

<script>
export default {
 name: 'HelloWorld',
 data () {
   return {
       stepList: [
       {
         title: '报案流程',
         detail:
           '拨打全国统一客服热线 xxxx进行报案，或关注“xxxx”官方微信公众号在线报案',
         showline: true,
         index: '1',
         showDetail: true
       },
       {
         title: '提交资料',
         detail: '按照xxxx官方微信、官网的要求，提供所需理赔资料',
         showline: true,
         index: '2',
         showDetail: true
       },
       {
         title: '资料审核',
         detail:
           '在您提交的理赔材料真实齐全的情况下，xxxx理赔专员会尽快进行内部审核工作',
         showline: true,
         index: '3',
         showDetail: true
       },
       {
         title: '理赔款支付',
         detail: '审核通过后，理赔金会支付到您提供的账户',
         showline: false,
         index: '4',
         showDetail: true
       }
     ],
   }
 }
}
</script>

Example4：

物流跟踪模板，只需要将isLogistics设置为true即可

You can use the logistics tracking module as long as you set :isLogistics='true'

  <stepview :dataList="cityList" :isLogistics="true"  title="物流跟踪"></stepview>

<script>
export default {
 name: 'HelloWorld',
 data () {
   return {
     cityList: [
       {
         title: '【城市】物流状态1',
         detail:
           '2016-07-12 12:40',
         showline: true,
         index: '1',
         showDetail: true
       },
       {
         title: '【城市】物流状态',
         detail: '2016-07-11 10:00',
         showline: true,
         index: '2',
         showDetail: true
       },
       {
         title: '快件已发货',
         detail:
           '2016-07-10 09:30',
         showline: false,
         index: '3',
         showDetail: true
       }
     ],
   }
 }
}
</script>

Example5:

使用插槽自定义描述文本内容，插入超链接或者图片

You can use slots to customize the content of the description text, and you can insert hyperlinks or pictures

<stepview
          class="win-step"
          titleColor="#FF9B2C"
          :showTitle="false"
          :noCircle="true"
          cricleBgColor="white"
          cricleColor="#FF9B2C"
          titleSize="16px"
          titleDetailSize="14px"
          :titleWeight="500"
          :dataList="clientList"
        >
          <template v-slot:step1>
          <p style="font-size: 14px">
           该产品由<span
              style="color: red"
              @click="openClause"
              >xxx</span
            >公司承保，由xxxx公司销售
          </p>
        </template>
        <template v-slot:step3>
          <p style="font-size: 14px">
            投保前请仔细阅读《xxx条款》、《xxx须知》及<span
              style="color: #4865d9"
              @click="openClause"
              >《xxxx告知书》</span
            >
          </p>
        </template>
    </stepview>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      clientList: [
        {
          title: '合作保险公司',
          detail: '该产品由xxx公司承保，由xxxx公司销售',
          showline: false,
          index: '1',
          showDetail: false,
          showSolt: true,   // 是否使用插槽
          soltName: 'step1' // 插槽名称(必须)
        },
        {
          title: '记录投保操作',
          detail: '为了保障您的权益，您的投保过程将被记录，该信息将被加密存储',
          showline: false,
          index: '2',
          showDetail: true
        },
        {
          title: '阅读保险条款',
          detail: '投保前请仔细阅读《xxx条款》、《xxx须知》及《xxxx告知书》',
          showline: false,
          index: '3',
          showDetail: false,
          showSolt: true,
          soltName: 'step3'
        }
      ],
    }
  }
}
</script>

如有问题，请到简书给我留言，我会尽力完善~(≧▽≦)/~ https://www.jianshu.com/p/69b536fd1875