如何使用第三方样式和组件

[xinglie]

以下讨论需要一定的前端基础

report-designer项目有自己的组件组织方案及打包方案，详情可参考：相关技术及链接。如果你对report-designer自带的组件方案不是很熟悉，则可以使用第三方的样式和组件

report-designer会对整个项目的ts、style及html做整体编译，针对样式可以识别出哪些样式声明了却未使用，哪些使用了但未声明等，这种方式有利于把report-designer放入任何其它库或框架组织的页面当中。

但这种方式会对使用第三方的样式时稍有影响，下面将会详细讨论

引入第三方样式

以下以引入element ui样式为例，其它同理

假设我们要使用element ui的样式，则根据官方文档链接：https://element.eleme.cn/#/en-US/component/installation

找到从CDN上加载样式的地址：

<!-- import CSS -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

我们把上述样式地址复制下来，粘贴到我们的入口文件里：index-debug.html及inex.html等所有需要使用样式的入口文件里。

以下仅展示导入样式的部分代码

<title>Loading</title>
<!-- import CSS -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<style>html,body,.app{height:100%;overflow:hidden;margin:0;padding:0}html{min-width:1300px}@keyframes r{0%{transform:rotate(0)}to{transform:rotate(359deg)}}.logo{width:60px;position:fixed;left:calc(50% - 35px);top:calc(50% - 35px);animation:r 2s linear infinite}</style>

然后你就可以在任意view里面使用第三方的样式了。

消除警告

当我们利用这种方式使用第三方样式时，我们会发现编译工具magix-composer会警告我们在html中使用了未声明的样式，如

这是因为如前面所讲，我们的打包工具magix-composer会对整个项目做编译，因为引入的第三方资源打包工具并不清楚，因此会发出这样的警告，如果要消除该警告，可以在gulpfile.js里，通过配置checker检测对象的tmplClassCheck钩子告诉magix-composer不对这样的样式做检测即可。

gulpfile.js里combineTool的checker配置

checker: {//代码检测
        /**
         * 模板中class的代码检测
         * @param {string} selector 模板中使用到的样式选择器
         */
        tmplClassCheck(selector) {
            return selector &&
                !selector.startsWith('el-') &&
                !selector.startsWith('ant-');
        }
    },

这里对el-或ant-这样开头的样式不做检查，我们在引入第三方样式的时候，最好找这种以统一某个前缀的样式库，方便做样式处理。

当然这里如果不配置，仅会出警告而已，代码还是正常的。

如果配置后还有相应的检测提示，请联系我

引入第三方组件

可参考项目当中的provider目录下的第三方组件引入方案，可动态加载，也可直接内置代码。

对于第三方组件，需要带销毁功能，否则极容易造成内存泄漏、事件一直监听等问题

使用第三方框架

以下以引入element为例，其它同理

根据官方文档链接：https://element.eleme.cn/#/en-US/component/installation

需要把以下2个js文件放在我们的入口处

<!-- import Vue before Element -->
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <!-- import JavaScript -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>

在report-designer的view中，render方法改造如下

async render(){
    await this.digest();
    let vm=new Vue({
      el: '#app',
      data: function() {
        return { visible: false }
      }
    });
    this.on('destroy',()=>vm.$destroy());
}

以上仅示意代码，需要根据自己的需求进行调整。

report-designer自带的magix是和vue类似的组件组织框架，拥有完善的事件监听、参数传递、组件组织等功能，如果可以请尽量使用magix来完成界面渲染和事件处理。magix除了完成必须的界面组织管理外，它还拥有更多的性能处理等技术方案，来保证report-designer在复杂的界面下依然有优秀的性能，因此尽量不要在magix中再使用其它类似的框架。