2022-09-09 20:41:18 +00:00
< template >
< div >
2022-12-19 11:57:07 +00:00
< Head >
< Title > Vue Stepper Component < / Title >
< Meta name = "description" content = "Steps also known as Stepper, is an indicator for the steps in a workflow. Layout of steps component is optimized for responsive design." / >
< / Head >
2022-09-09 20:41:18 +00:00
< div class = "content-section introduction" >
< div class = "feature-intro" >
< h1 > Steps < / h1 >
< p > Steps components is an indicator for the steps in a wizard workflow . Example below uses nested routes with Steps . < / p >
< / div >
< AppDemoActions / >
< / div >
< div class = "content-section implementation" >
< div class = "card" >
2022-12-08 12:26:57 +00:00
< Steps :model ="items" aria -label = " Form Steps " / >
2022-09-09 20:41:18 +00:00
< / div >
< router -view v-slot ="{ Component }" :formData="formObject" @prev-page="prevPage($event)" @next-page="nextPage($event)" @complete="complete" >
< keep -alive >
< component :is ="Component" / >
< / k e e p - a l i v e >
< / r o u t e r - v i e w >
< / div >
< StepsDoc / >
< / div >
< / template >
< script >
import StepsDoc from './StepsDoc' ;
export default {
data ( ) {
return {
items : [
{
label : 'Personal' ,
to : '/steps'
} ,
{
label : 'Seat' ,
to : '/steps/seat'
} ,
{
label : 'Payment' ,
to : '/steps/payment'
} ,
{
label : 'Confirmation' ,
to : '/steps/confirmation'
}
] ,
formObject : { }
} ;
} ,
methods : {
nextPage ( event ) {
for ( let field in event . formData ) {
this . formObject [ field ] = event . formData [ field ] ;
}
this . $router . push ( this . items [ event . pageIndex + 1 ] . to ) ;
} ,
prevPage ( event ) {
this . $router . push ( this . items [ event . pageIndex - 1 ] . to ) ;
} ,
complete ( ) {
this . $toast . add ( { severity : 'success' , summary : 'Order submitted' , detail : 'Dear, ' + this . formObject . firstname + ' ' + this . formObject . lastname + ' your order completed.' } ) ;
}
2022-12-08 12:26:57 +00:00
} ,
components : {
StepsDoc : StepsDoc
2022-09-09 20:41:18 +00:00
}
} ;
< / script >
< style scoped lang = "scss" >
: : v - deep ( b ) {
display : block ;
}
: : v - deep ( . p - card - body ) {
padding : 2 rem ;
}
< / style >
