Modal

弹出层 / Modal弹出页组件

补充

Model组件用于当前页面的补充, 相当于在当前页面上再来弹一个页面, 这里并不改变路由, 但是会改变H5 history的popstate, 每打开一个Modal则新增一个历史记录, 可以通过后退关闭最后一次打开的modal.

注意点

在modal中如果跳转到另一页之前希望能先关闭当前modal再操作
modal不会再url中留下记录
modal只是装菜的盘子, 盘子中的菜通过component传入, 数据通过data传入,
- this.$options.$data.username 获取数据
- this.username 也能获取到数据, 注意别冲突
onDismiss会在modal关闭后触发.
开启的页面就是完整的Page页面, 别无其他

动画

mode有自己的默认动画, 但是如果想自定义动画, 可以在mode中传入你自定义的动画名称. 另外, 默认自带的动画animateName有:

空: 下部向上渐变
zoom: 缩放
fade: 渐变
fade-right: 右侧向左渐变

源码:: modal/index.js , line 1

用法 / Usages

// 开启
openModal () {
       this.$modal.present({
         animateName: 'zoom',
         component: modalPageComponent,
         data: {hello: 'Page1Data'},
         showBackdrop: true,
         enableBackdropDismiss: true,
         onDismiss (data) {
           console.debug('得到了modal1的关闭信息')
           console.debug(JSON.stringify(data))
         }
   })
},

// 关闭
closeModal () {
       this.$modal.dismiss({
         result: 'modal 1 dismissed success!'
       })
}

方法 / Methods

(inner) dismiss(dataBackopt, changeLocalHistoryopt)

源码:: modal/index.js , line 157

全局注册dismiss方法
dismiss关闭最后一次打开的Modal, 并执行onDismiss函数, 就酱, 因为, modal是覆盖式的显示在页面上, 即使给定关闭的modal名字, 也无使用意义.
dataBack数据将由外部onDismiss接收

参数 / Parameters:

Name	Type	Attributes	Default	Description
`dataBack`	*	<optional>		modal调用dismiss传递向外的数据
`changeLocalHistory`	Boolean	<optional>	`true`	是否改变本地历史记录, 默认为true

(inner) present(options)

源码:: modal/index.js , line 108

开启Modal方法
如果不懂想下: 桌子(页面)/菜盘(modal)/菜(template)的关系, 开启后获取Modal实例, 并将template初始化后挂在到Modal上, 然后注册urlChange事件. 在之后记录开启的Modal信息,
然后执行modal实例的_present开启.

示例 / Example

传入参数示例:
{
 component:require('*.vue'),  // modal页面
 data:{...},            // 传给modal的数据
 onDismiss(data){....},      // 关闭model执行的操作, data是关闭时传入的参数
}

子页面通过
- this.$options.$data.username 获取数据
- this.username 也能获取到数据, 注意别冲突

参数 / Parameters:

Name Type Description

options

Object

Properties

Name	Type	Attributes	Default	Description
`animateName`	String	<optional>		modal开闭动画, 可以是: 空/zoom/fade/fade-enter
`component`	object			modal页面, 不支持异步
`data`	object	<optional>		传给modal的数据, 数据会写到component的data属性中, 当然, 这个是响应式的.
`onDismiss`	function	<optional>		关闭model执行的操作, data是关闭时传入的参数
`showBackdrop`	Boolean	<optional>	`true`	显示backdrop
`enableBackdropDismiss`	Boolean	<optional>	`true`	点击backdrop是否关闭

IOS Android QRCode

扫码预览