Closed xinglie closed 7 months ago
以下讨论需要一定的前端基础
report-designer项目有自己的组件组织方案及打包方案,详情可参考:相关技术及链接。如果你对report-designer自带的组件方案不是很熟悉,则可以使用第三方的样式和组件
report-designer
report-designer会对整个项目的ts、style及html做整体编译,针对样式可以识别出哪些样式声明了却未使用,哪些使用了但未声明等,这种方式有利于把report-designer放入任何其它库或框架组织的页面当中。
ts
style
html
但这种方式会对使用第三方的样式时稍有影响,下面将会详细讨论
以下以引入element ui样式为例,其它同理
element ui
假设我们要使用element ui的样式,则根据官方文档链接:https://element.eleme.cn/#/en-US/component/installation
找到从CDN上加载样式的地址:
CDN
<!-- import CSS --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
我们把上述样式地址复制下来,粘贴到我们的入口文件里:index-debug.html及inex.html等所有需要使用样式的入口文件里。
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>
以下仅展示导入样式的部分代码
<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里面使用第三方的样式了。
view
当我们利用这种方式使用第三方样式时,我们会发现编译工具magix-composer会警告我们在html中使用了未声明的样式,如
magix-composer
这是因为如前面所讲,我们的打包工具magix-composer会对整个项目做编译,因为引入的第三方资源打包工具并不清楚,因此会发出这样的警告,如果要消除该警告,可以在gulpfile.js里,通过配置checker检测对象的tmplClassCheck钩子告诉magix-composer不对这样的样式做检测即可。
gulpfile.js
checker
tmplClassCheck
gulpfile.js里combineTool的checker配置 checker: {//代码检测 /** * 模板中class的代码检测 * @param {string} selector 模板中使用到的样式选择器 */ tmplClassCheck(selector) { return selector && !selector.startsWith('el-') && !selector.startsWith('ant-'); } },
gulpfile.js里combineTool的checker配置
checker: {//代码检测 /** * 模板中class的代码检测 * @param {string} selector 模板中使用到的样式选择器 */ tmplClassCheck(selector) { return selector && !selector.startsWith('el-') && !selector.startsWith('ant-'); } },
这里对el-或ant-这样开头的样式不做检查,我们在引入第三方样式的时候,最好找这种以统一某个前缀的样式库,方便做样式处理。
el-
ant-
当然这里如果不配置,仅会出警告而已,代码还是正常的。
如果配置后还有相应的检测提示,请联系我
可参考项目当中的provider目录下的第三方组件引入方案,可动态加载,也可直接内置代码。
provider
对于第三方组件,需要带销毁功能,否则极容易造成内存泄漏、事件一直监听等问题
以下以引入element为例,其它同理
element
根据官方文档链接:https://element.eleme.cn/#/en-US/component/installation
需要把以下2个js文件放在我们的入口处
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方法改造如下
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中再使用其它类似的框架。
magix
vue
report-designer
项目有自己的组件组织方案及打包方案,详情可参考:相关技术及链接。如果你对report-designer
自带的组件方案不是很熟悉,则可以使用第三方的样式和组件report-designer
会对整个项目的ts
、style
及html
做整体编译,针对样式可以识别出哪些样式声明了却未使用,哪些使用了但未声明等,这种方式有利于把report-designer
放入任何其它库或框架组织的页面当中。但这种方式会对使用第三方的样式时稍有影响,下面将会详细讨论
引入第三方样式
假设我们要使用
element ui
的样式,则根据官方文档链接:https://element.eleme.cn/#/en-US/component/installation找到从
CDN
上加载样式的地址:我们把上述样式地址复制下来,粘贴到我们的入口文件里:
index-debug.html
及inex.html
等所有需要使用样式的入口文件里。然后你就可以在任意
view
里面使用第三方的样式了。消除警告
当我们利用这种方式使用第三方样式时,我们会发现编译工具
magix-composer
会警告我们在html
中使用了未声明的样式,如这是因为如前面所讲,我们的打包工具
magix-composer
会对整个项目做编译,因为引入的第三方资源打包工具并不清楚,因此会发出这样的警告,如果要消除该警告,可以在gulpfile.js
里,通过配置checker
检测对象的tmplClassCheck
钩子告诉magix-composer
不对这样的样式做检测即可。这里对
el-
或ant-
这样开头的样式不做检查,我们在引入第三方样式的时候,最好找这种以统一某个前缀的样式库,方便做样式处理。当然这里如果不配置,仅会出警告而已,代码还是正常的。
引入第三方组件
可参考项目当中的
provider
目录下的第三方组件引入方案,可动态加载,也可直接内置代码。对于第三方组件,需要带销毁功能,否则极容易造成内存泄漏、事件一直监听等问题
使用第三方框架
根据官方文档链接:https://element.eleme.cn/#/en-US/component/installation
需要把以下
2
个js
文件放在我们的入口处在
report-designer
的view
中,render
方法改造如下以上仅示意代码,需要根据自己的需求进行调整。
report-designer
自带的magix
是和vue
类似的组件组织框架,拥有完善的事件监听、参数传递、组件组织等功能,如果可以请尽量使用magix
来完成界面渲染和事件处理。magix
除了完成必须的界面组织管理外,它还拥有更多的性能处理等技术方案,来保证report-designer
在复杂的界面下依然有优秀的性能,因此尽量不要在magix
中再使用其它类似的框架。