Confirm 模式

2023-04-05 15:13| 来源: 网络整理| 查看: 265

Confirm 模式

提示：

可用于替代浏览器内置的 window.confirm 弹窗；只能同时创建一个 confirm 弹窗；不能使用 esc 按键关闭。基础用法 vue 打开 const open = () => { $tinylayer.confirm.open( { title: "标题", content: "弹窗内容", cancel: { callback: () => { alert( "取消" ); } }, ok: { callback: () => { alert( "确定" ); } } } ); } vue 打开 export default { methods: { open () { $tinylayer.confirm.open( { title: "标题", content: "弹窗内容", cancel: { callback: () => { alert( "取消" ); } }, ok: { callback: () => { alert( "确定" ); } } } ); } } } 自定义遮罩层背景色

注意：

默认情况下，遮罩层背景色是通过 css 变量 --tinylayer-public-mask-background 进行设置的，如果通过参数传入的方式自定义遮罩层背景色，则对应的 css 变量将失效，并且在深 / 浅色模式切换时，将不会自动适配，此时遮罩层背景色将始终是传入的颜色值。

vue 打开 const open = () => { $tinylayer.confirm.open( { title: "标题", content: "弹窗内容", maskBackground: "rgba(255, 255, 255, .85)" } ); } vue 打开 export default { methods: { open () { $tinylayer.confirm.open( { title: "标题", content: "弹窗内容", maskBackground: "rgba(255, 255, 255, .85)" } ); } } } 自定义按钮文字 vue 打开 const open = () => { $tinylayer.confirm.open( { title: "标题", content: "弹窗内容", ok: { text: "Yes" }, cancel: { text: "No" } } ); } vue 打开 export default { methods: { open () { $tinylayer.confirm.open( { title: "标题", content: "弹窗内容", ok: { text: "Yes" }, cancel: { text: "No" } } ); } } } 自定义宽度

注意：

弹窗的最小有效宽度是 300px，如果设置了小于 300px 的宽度值，将自动调整为 300px。另外，组件并未对最大宽度做出限制，但超出屏幕可视区域的宽度将毫无意义，因此请勿设置过大的宽度值。

vue 打开 const open = () => { $tinylayer.confirm.open( { title: "标题", content: "弹窗内容", width: "800px" } ); } vue 打开 export default { methods: { open () { $tinylayer.confirm.open( { title: "标题", content: "弹窗内容", width: "800px" } ); } } } 动画模式 vue scale 模式 slide 模式 fade 模式 const openScale = () => { $tinylayer.confirm.open( { title: "标题", content: "弹窗内容", animationType: "scale" } ); } const openSlide = () => { $tinylayer.confirm.open( { title: "标题", content: "弹窗内容", animationType: "slide" } ); } const openFade = () => { $tinylayer.confirm.open( { title: "标题", content: "弹窗内容", animationType: "fade" } ); } vue scale 模式 slide 模式 fade 模式 export default { methods: { openScale () { $tinylayer.confirm.open( { title: "标题", content: "弹窗内容", animationType: "scale" } ); }, openSlide () { $tinylayer.confirm.open( { title: "标题", content: "弹窗内容", animationType: "slide" } ); }, openFade () { $tinylayer.confirm.open( { title: "标题", content: "弹窗内容", animationType: "fade" } ); } } } 使用 HTML 内容

警告：

动态渲染 HTML 非常危险，这将很容易导致 XSS 攻击。因此，在不能保证绝对可信和安全的情况下，不要将用户提交的内容传给 content 属性。

vue 打开 const open = () => { $tinylayer.confirm.open( { title: "标题", content: `弹窗内容`, useHtmlContent: true } ); } vue 打开 export default { methods: { open () { $tinylayer.confirm.open( { title: "标题", content: `弹窗内容`, useHtmlContent: true } ); } } } 关闭后的回调事件 vue 打开 const open = () => { $tinylayer.confirm.open( { title: "标题", content: "弹窗内容", afterClose: () => { alert( "关闭了 confirm" ); } } ); } vue 打开 export default { methods: { open () { $tinylayer.confirm.open( { title: "标题", content: "弹窗内容", afterClose: () => { alert( "关闭了 confirm" ); } } ); } } } 调用 close 方法关闭

提示：

可根据实际需要，通过手动调用 $tinylayer.confirm.close() 方法关闭 confirm 弹窗。

vue 打开 const open = () => { $tinylayer.confirm.open( { title: "标题", content: `点击关闭 Confirm`, useHtmlContent: true } ); } vue 打开 export default { methods: { open () { $tinylayer.confirm.open( { title: "标题", content: `点击关闭 Confirm`, useHtmlContent: true } ); } } } 自定义关闭时机

提示：

一般用于点击确定按钮后，向后端发送请求，得到响应后再决定是否关闭弹窗。

vue 打开 const open = () => { $tinylayer.confirm.open( { title: "标题", content: "弹窗内容", ok: { closable: false, text: "保存", callback: okConfig => { okConfig.disabled = true; okConfig.loading = true; okConfig.text = "正在保存"; setTimeout( () => { $tinylayer.confirm.close(); }, 3000 ) } } } ); } vue 打开 export default { methods: { open () { $tinylayer.confirm.open( { title: "标题", content: "弹窗内容", ok: { closable: false, text: "保存", callback: okConfig => { okConfig.disabled = true; okConfig.loading = true; okConfig.text = "正在保存"; setTimeout( () => { $tinylayer.confirm.close(); }, 3000 ) } } } ); } } } 属性属性说明类型默认值title标题String-content内容String-zIndex层级Number2000maskBackground遮罩层背景色String-width弹框宽度（最小有效值：300px）String400pxuseHtmlContent使用 HTML 内容BooleanfalseanimationType动画模式，可选值：scale, slide, fadeStringscaleafterClose关闭后的回调事件Function空函数ok.text确定按钮的文字String确定ok.closable点击确定按钮是否立即关闭弹窗Booleantrueok.disabled禁用确定按钮Booleanfalseok.loading开启确定按钮的 loading 效果Booleanfalseok.callback点击确定按钮的回调事件，参数：1. 确定按钮的属性集合2. confirm 所有属性集合Function空函数cancel.text取消按钮的文字String取消cancel.callback点击取消按钮的回调事件Function空函数方法 js// 打开 $tinylayer.confirm.open(); // 关闭 $tinylayer.confirm.close();

【本文地址】

公司简介

联系我们