如何编写一个 UI 插件

本章节假设你已经大体了解了 Chimee 插件机制，我们一起来看一下怎么编写一个UI插件。

这里我们以比较通用的模态窗插件 popup 为例（点击这里看示例效果）。

需求准备

首先我们的梳理一下基本的插件需求：

  • UI层面
    • 要有标题栏
    • 内容区域
    • 关闭按钮
  • 功能层面
    • 希望能控制开启关闭；
    • 当插件开启的时候，我们希望她的显示层级 z-index 高于其他插件，避免被遮挡。
    • 当popup开启时播放器要暂停播放
    • 当popup关闭时播放器切为播放状态
  • 事件交互
    • 当播放器开始播放时，自动关闭popup
    • 当播放器暂停时，自动打开popup
    • 我们也希望这个插件的开关状态变化能通知到别的插件，让其他人可以有所感知。
看起来还挺麻烦，下面赶紧让我们一起看看怎么实现。

编码实现

首先我们要结合上面的需求，编写一个符合 PluginConfig 约定的插件配置：

  1. const popupPluginConfig = {
  2.     name: 'mypopup',
  3.     // 使用 el 设置插件的容器 HTMLTagName
  4.     el: 'chimee-popup',
  5.     // 在插件创建生命周期，实现DOM结构和基本的交互行为
  6.     create () {
  7.         this.$dom.innerHTML = `
  8.             <pp-close title=“我是关闭按钮”>×</pp-close>
  9.             <pp-title>这里是标题</pp-title>
  10.             <pp-body>这里是内容</pp-body>
  11.         `;
  12.         // 为关闭按钮绑定关闭交互
  13.         this.$dom.querySelector('pp-close').addEventListener('click', this.close);
  14.     },
  15.     methods: {
  16.         // 为插件实现关闭功能
  17.         close () {
  18.             this.$dom.style.display = 'none';
  19.             // 开始播放
  20.             this.$emit('play');
  21.             // 通知全局popup关闭了，并通过参数将关闭的popup实例传递过去
  22.             this.$emit('popupClose', this);
  23.         },
  24.         // 为插件实现开启功能
  25.         open () {
  26.             // 提升z-index为最高
  27.             this.$bumpToTop();
  28.             this.$dom.style.display = 'block';
  29.             // 暂停播放
  30.             this.$emit('pause');
  31.             // 通知全局popup打开了，并通过参数将关闭的popup实例传递过去
  32.             this.$emit('popupOpen', this);
  33.         }
  34.     },
  35.     events: {
  36.         // 监听播放器播放事件，以实现播放时自动关闭popup
  37.         play () {
  38.             this.close();
  39.         },
  40.         // 监听播放器暂停事件，以实现暂停时自动打开popup
  41.         pause () {
  42.             this.open();
  43.         }
  44.     }
  45. };

基于 Chimee Plugin 实现很简单对不对？让我们先结合前面章节的插件应用使用起来看看。

  1. Chimee.install(popupPluginConfig);
  2. const chimee = new Chimee({
  3.   wrapper: '#wrapper',
  4.   plugins: [popupPluginConfig.name]
  5. });
  7. // 我们可以在相应业务逻辑里使用开启或关闭方法控制我们的popup
  8. chimee.mypopup.open();
  9. chimee.mypopup.close();
不过上面的代码没有包含css，如果要看效果记得参考下面示例定制自己的样式： 
  1. chimee-popup {
  2.     position: absolute;
  3.     color: #fff;
  4.     background-color: rgba(88, 88, 88, 0.5);
  5.     font-size: 13px;
  6.     font-family: sans-serif;
  7.     border: 1px solid rgba(255, 255, 255, 0.08);
  8.     padding: 3px;
  9.     width: 200px;
  10.     left: 50%;
  11.     top: 50%;
  12.     transform: translate(-50%, -50%);
  13. }
  14. chimee-popup pp-title{
  15.     border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  16.     padding: 0 5px 4px;
  17.     margin-bottom: 5px;
  18. }
  19. chimee-popup pp-body {
  20.     display: block;
  21.     padding: 3px 3px 6px;
  22. }
  23. chimee-popup pp-close{
  24.     float: right;
  25.     color: #fff;
  26.     text-decoration: none;
  27.     opacity: .8;
  28.     cursor: pointer;
  29.     line-height: 14px;
  30.     text-shadow: 0 0 1px #000;
  31.     font-size: 15px;
  32.     padding: 0 3px;
  33.     cursor: pointer;
  34. }

小结

当然，上面只是一个简单的例子，还有很多功能是没有用上的。

基于 Chimee PluginConfing API可以非常方便的实现自己想要的UI插件，比如广告控制。

也许你已经想到可以做更多的事情了吧？赶紧行动起来吧！插件开发API有什么建议或想法也欢迎随时反馈。

popupFactory

另外，为了方便实现弹层插件，我们也另外抽象了一个popup工厂方法, 像开始提到的popup示例以及前文的广告示例就是基于这个实现的。

基于这个包装你的 pluginConfig ，我们给popup提供了一些定制化参数和 methods 扩展，可以更方便的进行尺寸大小、坐标位置控制等。