v-custom-steps
v0.2.2
Published
vue 步骤条
Readme
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>如下图:
横竖式步骤条
需要指定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
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| ------------ | ------------------------------------------------------ | --------- | --------------------- | --------------------------- |
| data | 数据 | Array | - | [] |
| direction | 攻击链方向 | String | horizontal/vertical | vertical |
| configStyle | 样式配置项,注意: 外部传入值会与默认值进行merge操作 | Object | --- | 具体配置见下方configStyle |
| space | 每个 step 的间距，不填写将自适应间距。支持百分比。 | String | --- | -- |
| theme | 主题色 | String | --- | '' |
| align-center | 文字是否居中 只对 direction="horizontal" 时生效 | Boolean | true/false | false |
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 buildpostcss相关配置和依赖
- 在根目录下建
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-stepsimport Vue from 'vue'
import vCustomSteps from 'v-custom-steps'
Vue.use(vCustomSteps)