vue-steps-k v0.1.3

v-steps 步骤条

引导用户按照流程完成任务的分步导航条，可根据实际应用场景设定步骤，步骤尽量不少于 2 步。

基础用法

步骤条组件, 仅需传递 data即可。

    <el-row  type="flex" justify="center"  style="height: 600px;  background:rgba(1, 3, 46, 1)" >
      <el-col :span="16">
       <idss-db-step :data='widgetData' style='background: rgba(255,255,255,0.05)'>
       </idss-db-step>
      </el-col>
    </el-row>

横竖式步骤条

需要指定direction的值、分别为horizontal是水平方向，'vertical'是垂直方向，默认的是垂直

<el-row  style="height: 500px;  background:rgba(1, 3, 46, 1)">
  <el-col :span="12"  style="height:100%; border-right: 1px dashed darkviolet;">
  <idss-db-step  :data="widgetData"    direction="horizontal" style='background: rgba(255,255,255,0.05)'></idss-db-step>
  </el-col>
  <el-col :span="12" style="height:100%; ">
  <idss-db-step  :data="widgetData" direction="vertical" style='background: rgba(255,255,255,0.05)'></idss-db-step>
  </el-col>
</el-row>

设置每个步骤条的间距

用设置 space='200'来设置步长，每个 step 的间距，不填写将自适应间距。支持百分比。

    <el-row class='mypage' type="flex" justify="center"  style="height: 500px;  background:rgba(1, 3, 46, 1)" >
      <el-col :span="20">
       <idss-db-step :data='widgetData'  space='33%'  direction="horizontal" style='background: rgba(255,255,255,0.05)'>
       </idss-db-step>
      </el-col>
    </el-row>

:::

theme换肤步骤条

设置 theme='#800080'来换肤，configStyle和theme都设置的时候优先configStyle。

    <el-row class='mypage' type="flex" justify="center"  style="height: 500px;  background:rgba(1, 3, 46, 1)" >
      <el-col :span="20">
       <idss-db-step :data='widgetData'   theme="#1890ff"  :configStyle='config2'  direction="horizontal" style='background: rgba(255,255,255,0.05)'>
       </idss-db-step>
      </el-col>
    </el-row>
<script>
 export default {
  data() {
    return {
      config2:{
          circleStyle:{
            color: 'rgb(239, 13, 239)'
          }
      },
    }
  },

}
</script>

居中的步骤条

align-center 文字是否居中 只对布局为 direction="horizontal" 时生效

    <el-row class='mypage' type="flex" justify="center"  style="height: 500px;  background:rgba(1, 3, 46, 1)" >
      <el-col :span="20">
       <idss-db-step :data='widgetData'  align-center  direction="horizontal" style='background: rgba(255,255,255,0.05)'>
       </idss-db-step>
      </el-col>
    </el-row>

步骤条的样式和事件

设置configStyle可以对步骤条上的dom更改样式，通过@clickItem="testClick"来处理点击事件，注意修改 mediumLineStyle中线的宽的的时候也要相对应的改变圆的大小

    <el-row class='mypage' type="flex" justify="center"  style="height: 500px;  background:rgba(1, 3, 46, 1)" >
      <el-col :span="20">
       <idss-db-step :data='widgetData'  @clickItem="testClick"   :configStyle='config1'   direction="horizontal" style='background: rgba(255,255,255,0.05)'>
       </idss-db-step>
      </el-col>
    </el-row>
    <script>
 export default {
  data() {
    return {
      config1:{
        // 中线的样式
         mediumLineStyle: {
            color: '#fff',
            width: '8px'
          },
          // 圆左右两边的线样式
          nodeLineStyle: {
            color: 'yellow'
          },
          // 文字的样式
          textStyle: {
            color: 'green'
          },
          // 圆的样式
          circleStyle: {
            width: '100px',
            height: '100px',
            lineHeight: '100px',
            backgroundColor: 'pink',
            boxShadow: '0px 0px 15px orange inset',
            color: 'purple'
          }
      },
    }
  },
  methods: {
    testClick(e, item, index) {
        console.log('点击操作~~', e, item, index)
    }
  }
}
</script>

步骤条错位展示

错位展示的时候主要是数据格式data的差别

    <el-row class='mypage' type="flex" justify="center"  style="height: 500px;  background:rgba(1, 3, 46, 1)" >
      <el-col :span="20">
       <idss-db-step :data='oDataAnyone'   direction="horizontal" style='background: rgba(255,255,255,0.05)'>
       </idss-db-step>
      </el-col>
    </el-row>

插槽事列

注意多个插槽展示内容时插槽名称为插槽名称+插槽位置，详情看事列

    <el-row class='mypage' type="flex" justify="center"  style="height: 800px;  background:rgba(1, 3, 46, 1)" >
      <el-col :span="20">
       <idss-db-step :data='widgetData'   style='background: rgba(255,255,255,0.05);color:#fff' >
         <template slot='key0'><span style='font-size:30px'>我是插槽key1的内容</span></template>
         <template slot='key1'><span>我是插槽key2的内容</span></template>
         <template slot='key2'><span>我是插槽key3的内容</span></template>
         <template slot='value0'><span>插槽value1的内容</span></template>
         <template slot='value1'><span>插槽value2的内容</span></template>
         <template slot='value2'><span>插槽value3的内容</span></template>
         <template slot='step0'><span>111</span></template>
         <template slot='step1'><span>222</span></template>
         <template slot='step2'><span>333</span></template>
       </idss-db-step>
      </el-col>
    </el-row>

:::

Props

configStyle

Events

Slots

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

For detailed explanation on how things work, consult the docs for vue-loader.