图 详见源码 example 项目中当前模块示例
表单录入页面(简称：Page1)
<template>
<group title="模拟手机号充值 - 堆栈底-第一页" label-width="5em" class="bottom-group">
<box gap="10px 10px">
<x-input title="手机号" v-model="dataParams.phoneNumb"></x-input>
</box>
<box gap="10px 10px">
<x-button plain @click.native="submit()">点击充值</x-button>
<x-button plain @click.native="modify()">修改参数栈内参数对象</x-button>
</box>
</group>
</template><script type="text/ecmascript-6">
import demoMixin from '../demo-mixin'
import { XInput } from 'vux'
// 1.参数栈模块提供的一个**混入**组件，方便页面组件简化参数栈的api操作和开发，详见下面的`paramsStack mixin`说明
import { paramsStack } from 'vue-viewplus'
export default {
// 2.使用`paramsStack mixin`
mixins: [paramsStack, demoMixin],
components: {
XInput
},
data() {
return {
// 3.【可选】`paramsStack mixin`中定义的`data`属性，声明当前页面组件是参数栈的栈底，当当前页面被点击返回弹出的时候，插件会检测这个属性，如果为true，就清空参数栈
// isStackBottom: true,
// 4.自定义需要传递到下一个页面的参数
dataParams: {
phoneNumb: ''
}
}
},
methods: {
submit() {
this.$vp.psPageNext('/Demo/PageStack/Page2', {
params: this.dataParams
})
}
},
created() {
// 【可选】类似第三步
// this.isStackBottom = true
// 5.解析回传参数
if (!_.isEmpty(this.backParams)) {
this.dataParams.phoneNumb = this.backParams.phoneNumb
this.$vp.toast(`通过 backParams.phoneNumb 预填写页面`)
}
}
}
</script>
表单确认页面(简称：Page2)
<template>
<group label-width="15em" class="bottom-group">
<form-preview header-label="请确认订单信息" :body-items="list" ></form-preview>
<x-input title="请输出充值金额" v-model="dataParams.amount" style="margin-top: 10px"></x-input>
<box gap="10px 10px">
<flexbox>
<flexbox-item>
<x-button type="default" @click.native="replace()">确认</x-button>
</flexbox-item>
<flexbox-item>
