Notice通知框

2024-09-19 16:13:08首发，1周前更新

notice工具函数可以快速的打开一个文本通知

notice系列文档

参数

参数名	值类型	默认值	说明
content	string	''	窗口主体内容，通常为纯文本，也支持其他格式，写法同getContent函数的第content属性
contType	string	''	内容类型，写法同getContent函数的第contType属性
contData	object	{}	获得内容的数据，写法同getContent函数的第contData属性
tplStr	string	''	模板文本，当获得的数据是对象或数组时使用
tplEng	function	null	模板引擎，可使用第三方模板引擎
heading	string	''	如果需要显示窗口的标题，可填写
label	string	''	按钮的文本
yes	function	null	点击“确定”后的回调函数，无参数

简单使用

该工具函数可以快速创建一个通知小窗，位于屏幕左下角。

用法与alert和confirm工具函数类似，只需要填写content参数即可。

输出
HTML
JS

```
                
                
            
```

                
                demo0001.onclick = ()=>{
                    ax.notice({
                        content:'节假日期间，各地区、各部门要妥善安排好值班和安全、保卫、疫情防控等工作。',
                    });
                }

回调函数

参数yes分别表示“确定”后的回调函数，没有参数；通过回调函数可执行下一步动作。

输出
HTML
JS

```
                
                
            
```

                
                demo0101.onclick = ()=>{
                    ax.notice({
                        content:'节假日期间，各地区、各部门要妥善安排好值班和安全、保卫、疫情防控等工作。',
                        yes:()=>{console.log('确定了')},
                    });
                }

then

本框架的notice工具函数返回的是一个Promise，可在then中进行其他操作。

由于notice小窗只有“确定”按钮，点击按钮后，then中的返回值是true，其他情况不会有resolve。

输出
HTML
JS

```
                
                
            
```

                
                demo0002.onclick = ()=>{
                    ax.notice({
                        content:'节假日期间，各地区、各部门要妥善安排好值班和安全、保卫、疫情防控等工作。',
                    }).then((val)=>{
                        //val=true
                        console.log('确定了')
                    });
                }

async+await

使用then做回调处理，可能存在链条太长的问题，可考虑使用async+await，让整个过程更加直观。

输出
HTML
JS

```
                
                
            
```

                
                demo0003.onclick = async ()=>{
                   let val = await ax.notice({
                        content:'节假日期间，各地区、各部门要妥善安排好值班和安全、保卫、疫情防控等工作。',
                    });
                    //val=true
                   console.log('确定了')
                }

自由的窗口

如果没有使用heading参数，那么窗口将固定在顶部不可移动，如果需要能自由移动对话框，可设置一个任意的heading，这样子可以通过拖拽heading完成窗口移动。

输出
HTML
JS

```
                
                
            
```

                
                demo0004.onclick =  ()=>{
                   ax.notice({
                        content:'节假日期间，各地区、各部门要妥善安排好值班和安全、保卫、疫情防控等工作。',
                        heading:'节假日通知'
                    });
                }

多种内容格式

notice的内容通常是纯文本，但是本工具也支持借助contType和contData参数获得多种格式的内容。

如果获取的数据是对象或数组，则有必要使用tplStr和tplEng参数；tplEng是模板引擎，默认使用本框架自带的renderTpl函数，用户可指定其他第三方模板引擎；tplStr是模板文本，写法规则需遵循模板引擎的使用规则。

输出
HTML
JS

节假日期间，各地区、各部门要妥善安排好值班和安全、保卫、疫情防控等工作。

遇有重大突发事件，要按规定及时报告并妥善处置，确保人民群众祥和平安度过节日假期。
```
                
                
            
```

                
                demo0301.onclick =  ()=>{
                   ax.notice({
                        content:document.querySelector('#cont01').cloneNode(true),
                    });
                }
                demo0302.onclick =  ()=>{
                   ax.notice({
                        content:'https://req.axui.cn/v3/html/world.html#China',
                        contType:'async'
                        //contData:{},该参数用来向动态页面请求内容时，发送数据，动态页面根据数据返回前端相应的内容
                    });
                }
                demo0303.onclick =  ()=>{
                   ax.notice({
                        content:'#cont02',
                        contType:'html'
                    });
                }
                demo0304.onclick =  ()=>{
                   ax.notice({
                        content:'https://req.axui.cn/v3/json/ax.json',
                        contType:'async',
                        tplStr:`<ul><li>Name:{{this.name}}</li><li>Brief:{{this.brief}}</li><li>Site:{{this.site}}</li></ul>`,
                    });
                }

按钮文本

如果对按钮的文本有特别要求，可设置参数label，可使用html标签。

输出
HTML
JS

```
                
                
            
```

                
                demo0501.onclick =  ()=>{
                   ax.notice({
                        content:'节假日期间，各地区、各部门要妥善安排好值班和安全、保卫、疫情防控等工作。',
                        label:'我知道了',
                    });
                }