DialogPlugin

简介

一个实用好看又可高度定制的模态弹窗，动效体验感爆棚，还新增加了主题及风格等功能，后续还会实现更多的功能以满足更多场景。

预览

引用

复制代码const dialogModule = uni.requireNativePlugin("Chen-Dialog")

showModal(OBJECT,CACLLBACK)

显示模态弹窗，可以只有一个确定按钮，也可以同时有确定和取消按钮。 OBJECT参数说明

参数	类型	必填	说明	平台差异说明
theme	String	否	弹窗主题（auto、light、dark），默认为 auto 跟随系统主题	iOS暂不可跟随系统主题，默认为light
style	String	否	弹窗风格（Material、iOS），默认为Material风格	iOS仅有iOS风格
title	String	否	提示的标题
content	String	否	提示的内容
showCancel	Boolean	否	是否显示取消按钮，默认为 true
cancelText	String	否	取消按钮的文字，默认为"取消"
cancelColor	HexColor	否	取消按钮的文字颜色，默认为"#007aff"
confirmText	String	否	确定按钮的文字，默认为"确定"
confirmColor	HexColor	否	确定按钮的文字颜色，默认为"#007aff"

CACLLBACK参数说明

参数	类型	说明
confirm	Boolean	为 true 时，表示用户点击了确定按钮
cancel	Boolean	为 true 时，表示用户点击了取消

示例

复制代码let options = {
  title: "标题",
  content: "提示内容",
  confirmText: "确认",
  confirmColor: "#007aff",
  showCancel: true,
  cancelText: "取消",
  cancelColor:"#007aff",
  style: "Material",
  theme: "light"
}
dialogModule.showModal(options,(result) => {
  dialogModule.showToast({title:JSON.stringify(result)})
})

showToast(OBJECT)

显示消息提示框。 OBJECT参数说明

参数	类型	必填	说明	平台差异说明
theme	String	否	弹窗主题（auto、light、dark），默认为 auto 跟随系统主题	iOS暂不可跟随系统主题，默认为light
style	String	否	弹窗风格（Material、iOS），默认为Material风格	iOS仅有iOS风格
title	String	否	提示的内容
icon	String	否	图标，有效值详见下方说明。
duration	Number	否	提示的延迟时间，单位毫秒，默认：1500

icon 值说明

值	说明	平台差异说明
success	显示成功图标
error	显示错误图标
warning	显示警告图标
loading	显示加载图标（需手动调用hideLoading方法关闭加载弹窗）
none	不显示图标

示例

复制代码let options = {
  title: val,
  icon: val,
  duration: 1500,
  style: "Material",
  theme: "light"
}
dialogModule.showToast(options)
if (val === "loading"){
  setTimeout(() => {
    dialogModule.hideLoading()
  },1500)
}

showActionSheet(OBJECT,CACLLBACK)

从底部向上弹出操作菜单 OBJECT参数说明

参数	类型	必填	说明	平台差异说明
theme	String	否	弹窗主题（auto、light、dark），默认为 auto 跟随系统主题	iOS暂不可跟随系统主题，默认为light
style	String	否	弹窗风格（Material、iOS），默认为Material风格	iOS仅有iOS风格
title	String	否	提示的标题
content	String	否	提示的内容
itemList	Array	是	按钮的文字数组

CACLLBACK参数说明

参数	类型	说明
index	Number	用户点击的按钮，从上到下的顺序，从0开始
value	String	用户点击的按钮文字

示例

复制代码let options = {
  title: "标题",
  content: "提示内容",
  itemList: ["选项1","选择2","选项3"],
  style: "Material",
  theme: "light"
}
dialogModule.showActionSheet(options,(result) => {
  dialogModule.showToast({title:JSON.stringify(result)})
})

showInputModal(OBJECT,CACLLBACK)

显示模态输入弹窗，可以只有一个确定按钮，也可以同时有确定和取消按钮。 OBJECT参数说明

参数	类型	必填	说明	平台差异说明
theme	String	否	弹窗主题（auto、light、dark），默认为 auto 跟随系统主题	iOS暂不可跟随系统主题，默认为light
style	String	否	弹窗风格（Material、iOS），默认为Material风格	iOS仅有iOS风格
title	String	否	提示的标题
content	String	否	提示的内容
inputText	String	否	输入框现有文本，默认为空
showCancel	Boolean	否	是否显示取消按钮，默认为 true
cancelText	String	否	取消按钮的文字，默认为"取消"
cancelColor	HexColor	否	取消按钮的文字颜色，默认为"#007aff"
confirmText	String	否	确定按钮的文字，默认为"确定"
confirmColor	HexColor	否	确定按钮的文字颜色，默认为"#007aff"