插件名称 | vue-step-progress-indicator |
---|---|
发布时间 | 2021年4月6日 |
插件作者 | pokhrelashok |
一个简单但可自定义的步骤进度指示器,可用于在用户必须填写多步骤表单的情况下指示可用步骤。
# NPM
$ npm i vue-step-progress-indicator
1.导入并注册组件。
import VueStepProgressIndicator from "vue-step-progress-indicator";
components: {
VueStepProgressIndicator,
},
2.将组件添加到模板中,定义您自己的步骤,如下所示:
<vue-step-progress-indicator
:steps="[
'Step 1',
'Step 2',
'Step 3',
'Step 4',
'Done',
]"
:active-step="0"
:is-reactive="true"
@onStepChanged="onStepChanged"
@onEnterFinalStep="onEnterFinalStep"
/>
3.可用的组件道具。
steps: {
type: Array,
required: true,
},
activeStep: {
type: Number,
required: true,
},
isReactive: {
type: Boolean,
required: false,
default: false,
},
reactivityType: {
type: String,
required: false,
default: "all",
validator: (propValue) => {
const types = ["all", "backward", "forward", "single-step"];
return types.includes(propValue);
},
},
showLabel: {
type: Boolean,
required: false,
default: true,
},
showBridge: {
type: Boolean,
required: false,
default: false,
},
showBridgeOnSmallDevices: {
type: Boolean,
required: false,
default: true,
},
colors: {
type: Object,
required: false,
default: function () {
return {};
},
},
styles: {
type: Object,
required: false,
default: function () {
return {};
},
},
4.活动。