用 TypeScript 写一个轻量级的 UI 框架之六：widget 篇

绝地灬酷狼 2022-10-27 01:33 273阅读 0赞

JavaScript 最初的使命是什么？就是搞“动态页面 DHTML（Dynamic HTML）”。DHTML 是个上古的词汇，widget 也不年轻了，不过还是能达意，就把它作为包名吧——意思为页面用的小控件。TS 好像不喜欢叫包，还是跟 C\# 那样管叫“命名空间”——所以这个命名空间就是 `aj.widget.*`。

源码在：[https://gitee.com/sp42\_admin/ajaxjs/tree/master/aj-ts/src/widget][https_gitee.com_sp42_admin_ajaxjs_tree_master_aj-ts_src_widget]。

# 模态窗口 Modal #

Modal 本意为模态，——实际指的就是对话框、警告框、消息框、小窗口之类的。全屏幕弹窗，居中显示文字。方法签名如下：

aj.alert(text:String, cfg:Object);  // 弹窗 
    aj.widget.msgbox.close();           // 关闭

在线例子 [https://framework.ajaxjs.com/demo/base/alert.html][https_framework.ajaxjs.com_demo_base_alert.html]，截图如下。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poYW5neGluMDk_size_16_color_FFFFFF_t_70]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poYW5neGluMDk_size_16_color_FFFFFF_t_70 1]

![在这里插入图片描述][20210202224344403.png]

其中 `cfg.afterClose : Function` 为关闭弹窗后的回调，可选的。 该方法无须使用标签，而是 JS 方法调用。

例子：

aj.alert('Hello World!');
    // 显示“确定”按钮，第二个参数为回调，可选
    aj.alert('Hello World!', ()=>alert('点击了确定按钮')); 
    // 显示“是、否”的选择按钮，第二个参数为点击“是”时候的回调，可选
    aj.showConfirm("Hello World!", ()=>alert('点击了 yes 按钮'));

所有回调函数执行之后都会关闭弹出的窗体。

# 消息提示框 #

右上角顶部出现，不需要用户操作或者确认的，过一段时间会自己消失。该控件的效果是从页面右上方徐徐显示出一个消息框，然后暂时停留若干时间，完毕后自动收缩。多用于简洁明快的提示信息。

在线例子 [https://framework.ajaxjs.com/demo/base/msg.html][https_framework.ajaxjs.com_demo_base_msg.html]，截图如下。

![在这里插入图片描述][20210202230337881.png]

该方法无须使用标签，而是 JS 方法调用。

aj.msg.show('<b>操作</b>成功！');
    
    aj.msg.show('操作成功！', {  // 可选的配置参数
        afterClose(msg) { 
            // 消失之后触发的事件
        },
        showTime: 5000 // 显示停留时间，单位是毫秒。默认是三秒
    });

原理参见详细的[我博客][Link 1]。

## 弹窗浮层 ##

<div class="layer-holder"></div>
    
    <textarea class="hide popupTpl">
    	<aj-layer ref="layer">
    		Hello World!
    	</aj-layer>
    </textarea>
    
    <script> window.popupTpl = null; function openPopupTpl() { if (!popupTpl) { popupTpl = new Vue({ el : '.layer-holder', template : aj('.popupTpl').value, methods : { } }); } popupTpl.$refs.layer.show(); } </script>

![在这里插入图片描述][8eed7b2610d1ea097d3340cc0393d052.png_pic_center]

# 展开闭合器 expander #

常用于展开正文详情。提供过渡效果的图层，如果不需要把 `div class="mask"` 去掉即可。注意加入容器的 padding 会导致关闭时高度异常。  
![在这里插入图片描述][f945176db29003a901c89266236b3eca.gif_pic_center]

在线例子 [https://framework.ajaxjs.com/demo/widget/expander.html][https_framework.ajaxjs.com_demo_widget_expander.html]。

例子：

<aj-expander :close-height="50">……</aj-expander>

组件 props 如下。

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>含义</th> 
   <th>类型</th> 
   <th>是否必填，默认值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>openHeight</td> 
   <td>展开状态的高度</td> 
   <td>Number</td> 
   <td>n, 200</td> 
  </tr> 
  <tr> 
   <td>closeHeight</td> 
   <td>闭合状态的高度</td> 
   <td>Number</td> 
   <td>n, 50</td> 
  </tr> 
  <tr> 
   <td><code>&lt;slot</code>&gt;</td> 
   <td>正文内容扩展</td> 
   <td>String</td> 
   <td>n</td> 
  </tr> 
 </tbody> 
</table>

# 下拉菜单 Menu #

按照样式要求慢慢修正按钮与显示内容之间的界面融合；需要手动设置内容高度、宽度；内容层叠要调整 `z-index` 优先级；相关原理文章参考我博客[《利用 hover 伪类创建纯 CSS 收缩面板》][hover _ CSS]。

在线例子 [https://framework.ajaxjs.com/demo/widget/menu.html][https_framework.ajaxjs.com_demo_widget_menu.html]，截图如下。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poYW5neGluMDk_size_16_color_FFFFFF_t_70 2]

如何解决点击之后马上隐藏面板？由于 js（单击事件） 没有控制 CSS 的 `:hover` 伪类的方法，故所以必须使用以下技巧：

var menuPanel = el.parentNode;
    menuPanel.style.display = 'none';
    setTimeout(function(){ 
        menuPanel.style.display = '';
    }, 500);

# 折叠菜单 Accordion Menu #

折叠菜单的特点是同一时间只展开一个区域，其他区域则处于闭合状态。

在线例子 [https://framework.ajaxjs.com/demo/widget/accordion-menu.html][https_framework.ajaxjs.com_demo_widget_accordion-menu.html]，截图如下。  
![在这里插入图片描述][2e316c33528062fb09f84d4dde4b0228.gif_pic_center]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poYW5neGluMDk_size_16_color_FFFFFF_t_70 3]

例子：

<aj-accordion-menu>……</aj-accordion-menu>

组件 props 如下。

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>含义</th> 
   <th>类型</th> 
   <th>是否必填，默认值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>&lt;slot&gt;</code></td> 
   <td>菜单内容</td> 
   <td>String</td> 
   <td>y</td> 
  </tr> 
 </tbody> 
</table>

# 进度条 Process Line #

在线例子 [https://framework.ajaxjs.com/demo/widget/process-line.html][https_framework.ajaxjs.com_demo_widget_process-line.html]，截图如下。

![在这里插入图片描述][20210202225215918.png]

例子：

<aj-process-line></aj-process-line>

# Baidu 自定义搜索 #

在线例子 [https://framework.ajaxjs.com/demo/widget/baidu-search.html][https_framework.ajaxjs.com_demo_widget_baidu-search.html]，截图如下。

![在这里插入图片描述][20210202225327205.png]  
例子：

<aj-widget-baidu-search></aj-widget-baidu-search>

组件 props 如下。

![在这里插入图片描述][20210202225354645.png]

# 页面工具 #

这是一个综合的演示，包括下面几个组件：

*  `.aj-article-info` 样式
 *  回到顶部
 *  选择正文字体大小
 *  切换正体中文、简体中文
 *  分享组件（todo）

在线例子 [https://framework.ajaxjs.com/demo/widget/page.html][https_framework.ajaxjs.com_demo_widget_page.html]。

[https_gitee.com_sp42_admin_ajaxjs_tree_master_aj-ts_src_widget]: https://gitee.com/sp42_admin/ajaxjs/tree/master/aj-ts/src/widget
[https_framework.ajaxjs.com_demo_base_alert.html]: https://framework.ajaxjs.com/demo/base/alert.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poYW5neGluMDk_size_16_color_FFFFFF_t_70]: /images/20221024/1b6b996463234513a473c50b68f0ad56.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poYW5neGluMDk_size_16_color_FFFFFF_t_70 1]: /images/20221024/5a2049834e5e4f0c96df71042454e7d0.png
[20210202224344403.png]: /images/20221024/e40e93d7fbab416787710323591c53cd.png
[https_framework.ajaxjs.com_demo_base_msg.html]: https://framework.ajaxjs.com/demo/base/msg.html
[20210202230337881.png]: /images/20221024/446003a89f3f43a18254294a8c16f4a1.png
[Link 1]: https://blog.csdn.net/zhangxin09/article/details/79156982
[8eed7b2610d1ea097d3340cc0393d052.png_pic_center]: /images/20221024/a2d568adf5664c17ba39ddd0cdb041c7.png
[f945176db29003a901c89266236b3eca.gif_pic_center]: /images/20221024/6aee16a0c66748d287ace07acb0ffb43.png
[https_framework.ajaxjs.com_demo_widget_expander.html]: https://framework.ajaxjs.com/demo/widget/expander.html
[hover _ CSS]: http://blog.csdn.net/zhangxin09/article/details/17659883
[https_framework.ajaxjs.com_demo_widget_menu.html]: https://framework.ajaxjs.com/demo/widget/menu.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poYW5neGluMDk_size_16_color_FFFFFF_t_70 2]: /images/20221024/bca11643077a4c6f98f25cc4347327ca.png
[https_framework.ajaxjs.com_demo_widget_accordion-menu.html]: https://framework.ajaxjs.com/demo/widget/accordion-menu.html
[2e316c33528062fb09f84d4dde4b0228.gif_pic_center]: /images/20221024/5c7d0db637684c109b049ec3be19a707.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poYW5neGluMDk_size_16_color_FFFFFF_t_70 3]: /images/20221024/fbd06db229c445089f9cee8a768b4a3b.png
[https_framework.ajaxjs.com_demo_widget_process-line.html]: https://framework.ajaxjs.com/demo/widget/process-line.html
[20210202225215918.png]: /images/20221024/55fee5576a37485ca2c8b42b17f30cdc.png
[https_framework.ajaxjs.com_demo_widget_baidu-search.html]: https://framework.ajaxjs.com/demo/widget/baidu-search.html
[20210202225327205.png]: /images/20221024/22a9abc3d4b44df5bdb410168b70b5d4.png
[20210202225354645.png]: /images/20221024/5f6a76dd797248a998e798b7346e67c5.png
[https_framework.ajaxjs.com_demo_widget_page.html]: https://framework.ajaxjs.com/demo/widget/page.html