0.2.2 • Published 3 years ago

v-custom-steps v0.2.2

Weekly downloads
2
License
MIT
Repository
github
Last release
3 years ago

v-custom-steps 步骤条

let widgetData =[
  {
    "key": "2019-01-01 17:36:00",
    "name": "系统损害",
    "value": 232
  },
  {
    "key": "2019-01-01 17:36:00",
    "name": "安装&植入",
    "value": 211
  },
  {
    "key": "2019-01-01 17:36:00",
    "name": "传送&系统损害系统损害系统损害系统损害系统损害系统损害系统损害系统损害系统损害系统损害系统损害系统损害",
    "value": 189
  }
]
let oDataAnyone =[
  {
    "name": "系统损害",
    "value": 232
  },
  {
    "name": "安装&植入",
    "value": 211
  },
  {
    "name": "传送&系统损害系统损害系统损害系统损害系统损害系统损害系统损害系统损害系统损害系统损害系统损害系统损害",
    "value": 189
  }
]

引导用户按照流程完成任务的分步导航条，可根据实际应用场景设定步骤，步骤尽量不少于 2 步。该组件内部有依赖postcss，使用的话需要安装相关依赖详情看最下方；

注意 该组件是要是使用flex布局，因此有兼容性问题

基础用法

步骤条组件, 仅需传递 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>

如下图:

ProgramProject

横竖式步骤条

需要指定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>

如下图:

ProgramProject

设置每个步骤条的间距

用设置 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>

如下图:

ProgramProject

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>

如下图:

ProgramProject

居中的步骤条

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>

如下图:

ProgramProject

步骤条的样式和事件

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

如下图:

ProgramProject

步骤条错位展示

错位展示的时候主要是数据格式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>

如下图:

ProgramProject

插槽事列

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

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

如下图:

ProgramProject

Props

参数说明类型可选值默认值
data数据Array-[]
direction攻击链方向Stringhorizontal/verticalvertical
configStyle样式配置项,注意: 外部传入值会与默认值进行merge操作Object---具体配置见下方configStyle
space每个 step 的间距，不填写将自适应间距。支持百分比。String-----
theme主题色String---''
align-center文字是否居中 只对 direction="horizontal" 时生效Booleantrue/falsefalse

configStyle

参数说明类型可选值默认值
mediumLineStyle中线样式Object---{ color: '#46A0D4', width: '4px' }
nodeLineStyle圆左右两边的线样式Object---{ color: '#46A0D4' }
textStyle文字的样式Object---{ fontSize: '16px',color: ' #259ee3' }
circleStyle圆的样式Object---

Events

事件名称说明回调参数
clickItem点击步骤条具体节点触发e(事件对象)item（当前项）, index（当前索引）

Slots

name说明
key通过 slot='"key"+index'设置每一个节点key的内容
value通过 slot='"value"+index'设置每一个节点value的内容
step通过 slot='"step"+index'设置每一个节点的内容

Build Setup

# install dependencies
npm install

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

# build for production with minification
npm run build

postcss相关配置和依赖

  • 在根目录下建 postcss.config.js文件内容如下：
module.exports = {
  plugins: {
    'postcss-import': {
      path: ['src/style']
    },
    'postcss-mixins': {
    },
    'postcss-preset-env': {
      features: {
        'custom-properties': {
          preserve: true
        },
        'color-mod-function': true
      }
    },
    'postcss-calc': {},
    'precss': {}
  }
}
  • package.json 依赖
    //devDependencies
  "postcss-calc": "^7.0.1",
  "postcss-import": "^12.0.1",
  "postcss-preset-env": "^6.5.0",
  "postcss-url": "^8.0.0",
  "precss": "^4.0.0"
 //dependencies
  "postcss-functions": "^3.0.0",
  "postcss-mixins": "^6.2.1"
  • webpack.config.js 文件配置
    //module.rules里添加
 module: {
  rules: [
    <!-- 添加配置的主要内容 start -->
    {
      test: /\.(css|postcss)$/,
      include: [path.resolve(__dirname, './src')],
      exclude: /node_modules/,
      use: [
          'vue-style-loader',
          {
              loader: 'css-loader',
              options: {
                  modules: false,
                  importLoaders: 1
              }
          },
          {
              loader: 'postcss-loader',
              options: {
                  plugins: [
                      require('postcss-import')(),
                      require('postcss-url')(),
                      require('autoprefixer')()
                  ]
              }
          }
      ]
  },
  <!-- 主要内容 end -->
  ...

yarn 和npm使用

//npm
npm i v-custom-steps
//yarn
yarn add v-custom-steps
import Vue from 'vue'
import vCustomSteps from 'v-custom-steps'

Vue.use(vCustomSteps)
vuestepscomponents
@ant-design/colorsdeepmergepostcss-functionspostcss-mixinsv-svg-chainvue
@infinitebrahmanuniverse/nolb-v-c@everything-registry/sub-chunk-3036v-svg-chain
0.2.2

3 years ago

0.2.1

5 years ago

0.2.0

5 years ago

0.1.9

5 years ago

0.1.8

5 years ago

0.1.7

5 years ago

0.1.6

5 years ago

0.1.5

5 years ago

0.1.4

5 years ago