spring诸如方式_一个简单的步进器，具有诸如下一步，返回和结束之类的简单动作，可以执行简单的表格

spring诸如方式

Vue步进器。 (Stepper for Vue.)

A simple stepper with simple actions such as next, back and finish to perform simple forms.

一个简单的步进器，具有诸如下一步，返回和完成之类的简单动作，可以执行简单的表格。

View demo 查看演示 Download Source 下载源

安装 (Installation)

npm install vue-stepper --save

物产 (Properties)

Properties	Type	Values
`steps`	Array of Objects	Each object is a step that will be included in the stepper
`locale`	String	Default: `en`. Current options: `en`, `es`.
`top-buttons`	Boolean	Default: `false`. If `true` buttons on the header, at the start and the end of the steps, will be shown for better user experience.
`keep-alive`	Boolean	Default: `true`. If `true` step components won't be destroy in each step change, bue if `false` they will.

物产	类型	价值观
`steps`	对象数组	每个对象都是一个将包含在步进器中的步骤
`locale`	串	默认值： `en` 。当前选项： `en` ， `es` 。
`top-buttons`	布尔型	默认值： `false` 。如果标题的`true`按钮在步骤的开始和结束时显示，则可以提供更好的用户体验。
`keep-alive`	布尔型	默认值： `true` 。如果`true`步骤组件不会在每个步骤更改中被破坏，则将它们`false` 。

步骤对象属性 (Steps object properties)

Properties	Type	Values
`icon`	String	Ex.: `mail`. Name of icons that belong to material-icons library
`name`	String	Name of the step. Each step name MUST be unique
`title`	String	Title that will be displayed below the step, on bold.
`subtitle`	String	Subtitle displayed below the title.
`component`	Component	Imported component that will be show on the content area of the step.
`completed`	Boolean	If step is completed or not. If `TRUE` a `done` material icon will replace the one given before. Only mark as completed when you want to let know the user that the previous step has been completed

物产	类型	价值观
`icon`	串	例如： `mail` 。属于材料图标库的图标的名称
`name`	串	步骤名称。每个步骤的名称必须唯一
`title`	串	将在步骤下方以粗体显示的标题。
`subtitle`	串	字幕显示在标题下方。
`component`	零件	导入的组件将显示在步骤的内容区域中。
`completed`	布尔型	步骤是否完成。如果为`TRUE` ，则`done`材料图标将替换之前给出的图标。仅当您想让用户知道上一步已完成时才标记为已完成

步进器发出的事件 (Events emitted by stepper)

Event name	When
`completed-step`	Triggered when a step is completed. Completed meaning that current step has been left behind on the step list. Now you can mark your step object as completed if you desire it.
`active-step`	Current active step. It's `name` and `index` are exposed on the deployed payload.
`stepper-finished`	Event emitted when the user clicks the final button. Now it's time to execute a final callback method
`clicking-back`	Triggered when user clicks the back button to return to a previous step

活动名称	什么时候
`completed-step`	在完成步骤时触发。已完成表示当前步骤已留在步骤列表中。现在，您可以根据需要将步骤对象标记为已完成。
`active-step`	当前活动步骤。它的`name`和`index`显示在已部署的有效负载上。
`stepper-finished`	用户单击最终按钮时发出的事件。现在是时候执行最终的回调方法了
`clicking-back`	当用户单击后退按钮以返回上一步时触发

内容组件可以发出的事件 (Events that can be emitted by content component)

Event name	When
`can-continue`	By default the next button will be disabled until the event `can-continue` is triggered with an object containing the property `value`. `Value` accepts a boolean, if `true` next/finish button will be enabled if false disabled. On each next step `canContinue` variable will be set to false.
`change-next`	With this event you can change de state of the `clickedNext` prop that each step has. Just emit it with the following payload `{nextBtnValue: boolean}`

活动名称	什么时候
`can-continue`	默认情况下，下一个按钮将被禁用，直到使用包含属性`value`的对象触发事件`can-continue` 。 `Value`接受一个布尔值，如果`true`下一个/结束按钮，如果假禁用启用。在每个下一步中， `canContinue`变量都将设置为false。
`change-next`	通过此事件，您可以更改每个步骤具有的`clickedNext`道具的状态。只需使用以下有效负载`{nextBtnValue: boolean}`发出它

步骤组件的暴露道具 (Exposed props for step component)

Properties	Type	Values
`currentStep`	Object	Exposes current step for step component

物产	类型	价值观
`currentStep`	目的	公开步骤组件的当前步骤

例子 (Examples)

Template example

范本范例

<section class="section"><div class="container"><div class="columns"><div class="column is-8 is-offset-2"><horizontal-stepper :steps="demoSteps" @completed-step="completeStep"@active-step="isStepActive" @stepper-finished="alert">                     </horizontal-stepper></div></div></div>
</section>

Script example

脚本示例

import HorizontalStepper from 'vue-stepper';// This components will have the content for each stepper step.import StepOne from './StepOne.vue';import StepTwo from './StepTwo.vue';export default {components: {HorizontalStepper},data(){return {demoSteps: [{icon: 'mail',name: 'first',title: 'Sample title 1',subtitle: 'Subtitle sample',component: StepOne,completed: false},{icon: 'report_problem',name: 'second',title: 'Sample title 2',subtitle: 'Subtitle sample',component: StepTwo,completed: false}]}},methods: {// Executed when @completed-step event is triggeredcompleteStep(payload) {this.demoSteps.forEach((step) => {if (step.name === payload.name) {step.completed = true;}})},// Executed when @active-step event is triggeredisStepActive(payload) {this.demoSteps.forEach((step) => {if (step.name === payload.name) {if(step.completed === true) {step.completed = false;}}})},// Executed when @stepper-finished event is triggeredalert(payload) {alert('end')}}}

Example of component content that will be displayed on the first step (vuelidate used to validate form).

第一步将显示的组件内容示例(用于验证表单的vuelidate )。

Template

模板

<div style="padding: 2rem 3rem; text-align: left;"><div class="field"><label class="label">Username</label><div class="control"><input :class="['input', ($v.form.username.$error) ? 'is-danger' : '']" type="text" placeholder="Text input"v-model="form.username"></div><p v-if="$v.form.username.$error" class="help is-danger">This username is invalid</p></div><div class="field"><label class="label">Email</label><div class="control"><input :class="['input', ($v.form.demoEmail.$error) ? 'is-danger' : '']"  type="text" placeholder="Email input" v-model="form.demoEmail"></div><p v-if="$v.form.demoEmail.$error" class="help is-danger">This email is invalid</p></div><div class="field"><label class="label">Message</label><div class="control"><textarea :class="['textarea', ($v.form.message.$error) ? 'is-danger' : '']"  placeholder="Textarea" v-model="form.message"></textarea></div></div></div>

Javascript

Java脚本

import {validationMixin} from 'vuelidate'import {required, email} from 'vuelidate/lib/validators'export default {props: ['clickedNext', 'currentStep'],mixins: [validationMixin],data() {return {form: {username: '',demoEmail: '',message: ''}}},validations: {form: {username: {required},demoEmail: {required,email},message: {required}}},watch: {$v: {handler: function (val) {if(!val.$invalid) {this.$emit('can-continue', {value: true});} else {this.$emit('can-continue', {value: false});}},deep: true},clickedNext(val) {if(val === true) {this.$v.form.$touch();}}},mounted() {if(!this.$v.$invalid) {this.$emit('can-continue', {value: true});} else {this.$emit('can-continue', {value: false});}}}

翻译自: https://vuejsexamples.com/a-simple-stepper-with-simple-actions-such-as-next-back-and-end-to-perform-simple-forms/