全局配置
提示:
- 全局配置目前仅适用于
loading、alert、confirm、prompt弹窗; - 支持上述四种弹窗各自拥有的所有参数属性;
- 全局配置的参数优先级低于调用弹窗时手动传入的对应参数的优先级。
全局配置的好处:
当多个同类型的弹窗共用某些相同的配置,如果每次调用时都设置一遍,不但会出现很多的冗余代码,也会让后期维护变得更加困难。而全局配置相当于将相同的配置项提取出来统一设置,这样非常利于维护,而且如果个别弹窗的某个配置需要特殊处理,也可以在调用时重新设置对应的参数属性,即可轻松覆盖全局配置的属性值,非常方便。
用法:
引入 TinyLayer 时,直接传入默认参数,下面的代码示例列出了支持的所有配置项:
js
import TinyLayer from "tinylayer";
app.use( TinyLayer, {
loading: {
text: "",
background: "",
spinner: "",
zIndex: 2000,
transitionEffect: true,
bodyScrollable: true,
afterClose: () => {}
},
alert: {
title: "",
content: "",
zIndex: 2000,
width: "400px",
maskBackground: "",
useHtmlContent: false,
animationType: "scale",
afterOpen: () => {},
afterClose: () => {},
ok: {
text: "确定",
callback: () => {}
}
},
confirm: {
title: "",
content: "",
zIndex: 2000,
width: "400px",
maskBackground: "",
useHtmlContent: false,
animationType: "scale",
afterOpen: () => {},
afterClose: () => {},
ok: {
text: "确定",
closable: true,
disabled: false,
loading: false,
callback: () => {}
},
cancel: {
text: "取消",
disabled: false,
callback: () => {}
}
},
prompt: {
title: "",
defaultValue: "",
placeholder: "",
inputType: "text",
inputDisabled: false,
pattern: null,
errorMsg: "",
isError: false,
zIndex: 2000,
width: "370px",
maskBackground: "",
tip: "",
animationType: "scale",
afterOpen: () => {},
afterClose: () => {},
ok: {
text: "确定",
closable: true,
disabled: false,
loading: false,
callback: () => {}
},
cancel: {
text: "取消",
disabled: false,
callback: () => {}
}
}
} );