侧边栏壁纸
博主头像
猿哥

  • 累计撰写 1,975 篇文章
  • 累计创建 73 个标签
  • 累计收到 20 条评论

目 录CONTENT

文章目录
前端

Vue步骤图组件 jiuwei-stepview

猿哥
猿哥
2023-02-20 / 0 评论 / 0 点赞 / 306 阅读 / 2,231 字
" "

jiuwei-stepview

​​

5种基础案例.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：

自定义序号样式

  <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控制单元展开还是折叠

<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即可

  <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:

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

<stepview
          class="win-step"
          titleColor="#FF9B2C"
          :showTitle="false"
          :noCircle="true"
          cricleBgColor="white"
          cricleColor="#FF9B2C"
          titleSize="16px"
          titleDetailSize="14px"
          :titleWeight="500"
          :dataList="clientList"
        >
          <p style="font-size: 14px">
            投保前请仔细阅读《xxx条款》、《xxx须知》及<span
              style="color: #4865d9"
              @click="openClause"
              >《xxxx告知书》</span
            >
          </p>
    </stepview>
<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      clientList: [
        {
          title: '合作保险公司',
          detail: '该产品由xxx公司承保，由xxxx公司销售',
          showline: false,
          index: '1',
          showDetail: true
        },
        {
          title: '记录投保操作',
          detail: '为了保障您的权益，您的投保过程将被记录，该信息将被加密存储',
          showline: false,
          index: '2',
          showDetail: true
        },
        {
          title: '阅读保险条款',
          detail: '投保前请仔细阅读《xxx条款》、《xxx须知》及《xxxx告知书》',
          showline: false,
          index: '3',
          showDetail: false,
          showSolt: true
        }
      ],
    }
  }
}
</script>

npm 地址：https://www.npmjs.com/package/jiuwei-stepview

如有问题，请给我留言，我会尽力完善 ~ (≧▽≦)/~

收集到的问题：

Example5的插槽没有使用具名插槽，所以存在不能设置多个插槽的情况，已经将插件更新到1.0.2，修改为具名插槽，使用方式如下：

<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>

如果更新1.0.2不成功，或者更新不了，附上源码如下，可以粘贴到自己的项目里面，当成模板组件来用：（请确保项目已经安装了sass)
stepView.vue

<template>
  <div class="ky-book">
    <p class="book-title" v-if="showTitle">{{title}}</p>
    <div class="book-item" v-for="(item,index) in dataList" :key="item.title">
      <div class="item">
        <div class="item-left">
          <div class="lt-no-circle" v-if="noCircle" :style="{'background': cricleBgColor,'color':cricleColor}">{{ item.index }}</div>
          <div v-else-if="isLogistics">
               <div v-if="index !== 0" :class="{'logistics-num':true,'greenb':index === 0}" ></div>
               <i v-else class="iconfont icon-duigou1001" style="font-size: 12px;color:#07c160"></i>
          </div>
          <div class="lt-num" v-else  :style="{'background': cricleBgColor,'color':cricleColor,'font-size':cricleSize}">{{ isLogistics ? '' : item.index }}</div>
          <div class="lt-line" :class="{'logistics': isLogistics}" :style="{'background': cricleBgColor}" v-if="item.showline"></div>
        </div>
        <div class="item-right" >
          <p @click="openDetail(item,index)" :class="{'greenc':isLogistics && index === 0}" :style="{'color':titleColor,'font-size':titleSize,'font-weight':titleWeight}">{{ item.title }}</p>
          <p v-show="item.showDetail" :class="{'greenc':isLogistics && index === 0}" :style="{'font-size':titleDetailSize,'white-space':'pre-wrap'}">{{ item.detail }}</p>
          <slot v-if="item.showSolt" :name="item.soltName"></slot>
        </div>
      </div>
      <i
        v-if="showIcon" 
        @click="openDetail(item,index)" 
        :class="{'iconfont':true, 'icon-zhankai1002':item.showDetail, 'icon-zhankai1001':!item.showDetail}"
        style="font-size: 21px;color:#CCCCCC"
      ></i>
    </div>
  </div>
</template>
<script>
export default {
  name: 'stepview',
  props: {
    dataList: {
      type: Array,
      default: function() { return [] }
    },
    title: {
      type: String,
      default: ''
    },
    showIcon: {
      type: Boolean,
      default: false
    },
    showTitle: {
      type: Boolean,
      default: true
    },
    titleColor: {
      type: String,
      default: 'rgba(68, 68, 68, 0.8)'
    },
    cricleBgColor: {
      type: String,
      default: 'linear-gradient(204deg, #88cad1 0%, #61b3ba 100%)'
    },
    cricleColor: {
      type: String,
      default: 'white'
    },
    cricleSize: {
      type: String,
      default: '12px'
    },
    noCircle: {
      type: Boolean,
      default: false
    },
    titleSize: {
      type: String,
      default: '14px'
    },
    titleWeight: {
      type: Number,
      default: 600
    },
    titleDetailSize: {
      type: String,
      default: '13px'
    },
    isLogistics:  {
      type: Boolean,
      default: false
    },
  },

  data() {
    return {}
  },
  created() {},
  mounted() {},
  methods: {
    openDetail(i, index) {
      this.$emit('openDetail', i, index)
    }
  },
  computed: {}
}
</script>
<style lang="scss" scoped>
.ky-book {
  margin: 35px 17px;

  .book-title {
    font-size: 16px;
    font-weight: 600;
    color: #323232;
    margin-bottom: 16px;
  }
  .book-item {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    // background: olivedrab;
    // margin-bottom: 5px;
    text-align: left;
    .item {
      display: flex;
      flex-direction: row;
      .item-left {
        margin-right: 8px;
        .lt-num {
          width: 26px;
          height: 26px;
          background: linear-gradient(204deg, #88cad1 0%, #61b3ba 100%);
          border-radius: 13px;
          text-align: center;
          line-height: 26px;
          font-size: 12px;
          font-weight: bold;
          color: white;
        }
        .logistics-num{
          width: 6px;
          height: 6px;
          border-radius: 3px;
          background: rgb(189, 189, 189);
          margin-top: 10px;
        }
        .lt-no-circle{
          font-size: 18px;
          font-weight: bold;
          margin-top: 2px;
        }
        .lt-line {
          width: 2px;
          height: 100%;
          background: #53aab2;
          margin: 0 auto;
        }
        .logistics{
          width: 1px;
          height: 100%;
          background: #f0f0f0 !important;
          margin: 0 auto;
        }
      }
      .item-right {
        color: rgba(68, 68, 68, 0.8);
        padding-bottom: 20px;
        p:first-child {
          color: #444444;
          font-size: 14px;
          font-weight: 600;
          margin-bottom: 6px;
          margin-top: 0;
        }
      }
    }
    .greenc{
        color:  #07c160 !important;
    }
    .greenb{
        background: #07c160 !important;
    }
  }
}
</style>
0
本文链接： https://www.bigtspace.com/archives/10845.html
博主关闭了所有页面的评论