数字生活小程序
小程序
介绍开发设计运营

Modal 对话框 APP
该方法或组件支持移动端小程序调用
 PC
该方法或组件支持桌面端小程序调用

用作显示系统的重要信息，并请求用户进行操作反馈，eg：删除某个重要内容时，弹出 Modal 进行二次确认。

规则

  • 尽可能少用。Modal 会打断用户操作，只用在重要的时候。
  • 标题应该简明，不能超过 1 行；描述内容应该简明、完整，一般不多于 2 行。
  • 一般将用户最可能点击的按钮，放在右侧。另外，取消按钮应当始终放在左侧。

引入方式

数字生活小程序工程中，不需要 import，直接使用组件标签即可。

import { Modal, Dialog } from '@21cnfe/vui'
Vue.component('Modal', Modal)
Vue.component('Dialog', Dialog)
Vue.$Modal = Vue.prototype.$Modal = Dialog

代码演示

Modal 对话框 modals
全局调用方式 当对话框内容为纯展示，不涉及到数据操作，推荐使用全局调用的方式，根据使用类型展示相应对话框，content 填入弹出框内容
单按钮弹框（alert） 
this.$Modal.alert({
  title: 'alert',
  content: '<span>alert content</span>',
  submitText: 'ok',
  onSubmit: () => {
    console.log('ok')
  }
})
双按钮弹框（confirm） 
this.$Modal.confirm({
  title: 'confirm',
  content: '<span>confirm content</span>',
  submitText: 'ok',
  cancelText: 'cancel',
  onCancel: () => {
    console.log('cancel')
  },
  onSubmit: () => {
    console.log('ok')
  }
})
组件调用方式 当对话框内容带有复杂操作，推荐使用这种组件调用方式，通过插槽处理复杂操作
单按钮弹框（alert） 
<Modal type="alert" title="alert" submitText="ok" :visible="AlertVisible" @onSubmit="handleSubmit1">
  <div>alert content</div>
  <Checkbox /><span>自定义操作</span>
</Modal>
双按钮弹框（confirm） 
<Modal type="confirm" title="confirm" cancelText="cancel" submitText="ok" :visible="ConfirmVisible" @onSubmit="handleSubmit2" @onCancel="handleCancel">
  <div>confirm content</div>
  <Checkbox /><span>自定义操作</span>
</Modal>

API

属性 说明 类型 默认值
type 弹出框类型，可选值[alert,confirm] String alert
title 标题 String --
content 弹出框内容 String --
cancelText 取消按钮文本 String 取消
submitText 确认按钮文本 String 确定
submitDisable 提交按钮的disabled状态 Boolean false
appendToBody Modal 自身是否插入至 body 元素上 Boolean false
onCancel 取消按钮方法（全局调用方式传入方法） Function --
onSubmit 确认按钮方法（全局调用方式传入方法） Function --

Event(组件调用方式)

事件名称 说明 回调参数
onCancel 取消按钮点击回调函数 --
onSubmit 确认按钮点击回调函数 --
open modal打开的回调 --
opened modal打开动画结束时的回调 --
onClose modal关闭的回调 --
onClosed modal关闭动画结束时的回调 --

Slot

插槽名称 说明
匿名插槽 Modal匿名插槽,嵌入内容
  1. 1. Modal 对话框 APP 该方法或组件支持移动端小程序调用 PC 该方法或组件支持桌面端小程序调用
    1. 1.1. 规则
    2. 1.2. 引入方式
    3. 1.3. 代码演示
    4. 1.4. API
    5. 1.5. Event(组件调用方式)
    6. 1.6. Slot