如何接入其他开源UI框架


xxxxxxxxxx
MagicalCoder布局器 支持任何js框架的UI嵌入，由于精力有限，我们仅提供了基于Jquery的layui和基于Vue的ElementUi等
欢迎您有新的UI嵌入需要，可以跟我们合作，会得到我们最大的技术支持和最优惠的价格
以下为大家讲解如何新接入其他开源UI 阅读本文档前请先阅读 《使用文档.md》 体验下当前已经接入的ui
您也可以在线观看本节视频：https://edu.csdn.net/course/play/10747/383466

视频教程：https://edu.csdn.net/course/play/10747/383466

第一步：导入新UI的依赖资源


xxxxxxxxxx
请放在
assets\drag\ui\{ui名称}\{版本号}\...
可以参考目前layui element的放置方式

第二步：为您的新ui创建一个新空间 iframe-xxx.html


xxxxxxxxxx
布局器为每一种技术的ui独立关联，互不干涉，因此采用iframe技术隔离保护，这样做的好处可以让您iframe的内容不会与布局器本身冲突
新建 iframe-{ui名称}-{版本号}.html 与index-{ui名称}.html同级，
如果您是使用vue框架 内容与iframe-element-2.10.1.html基本一致
如果您是使用jquery框架 内容与iframe-layui-2.5.4.html基本一致
注意 改动地方是 要引入您的ui的js和css 打开iframe-xxx.html
<!DOCTYPE html>
<html>
<head>
    <!--本软件版权归www.magicalcoder.com所有，著作权人：何栋宇，qq:799374340;如果您觉得好，欢迎购买我们的专业离线版，支持互联网创业，支持原创，在国内营造一个良性的知识付费氛围，大家都是受益者，一次购买永久免费升级哦，本软件已获得软件著作权。-->
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="shortcut icon" href="favicon.ico"/>
    <title>MagicalDrag,layui表单设计器-基于layui的可视化拖拽布局器</title>
    <meta name="description" content="表单布局器,基于layui的可视化拖拽布局器">
    <meta name="keywords" content="layui表单设计,前端拖拽布局器,可视化拖拽布局器">
    <!--引入您的uicss-->
    <link href="assets/drag/ui/{ui名称}/{版本号}/{您的UI}.css" rel="stylesheet">
    <link href="assets/drag/css/magicalcoder-iframe.css" rel="stylesheet">
    <script type="text/javascript" src="assets/drag/js/lib/json3.js"></script>
    <!--echarts 图表工具-->
    <script type="text/javascript" src="assets/drag/js/lib/echarts/4.2.1/echarts.min.js"></script>
    <!--引入您的UIjs-->
    <script type="text/javascript" src="assets/drag/ui/{ui名称}/{版本号}/{您的UI}.all.js"></script>
    <!--此iframe相关脚本-->
    <script type="text/javascript" src="assets/drag/js/user/ui/iframe-ui-before.js"></script>
    <script type="text/javascript" src="assets/drag/js/user/ui/{ui名称}/{版本号}/iframe-ui.js"></script>
    <script type="text/javascript" src="assets/drag/js/user/ui/iframe-ui-end.js"></script>
</head>
<body id="iframeBody" class="inner_iframe">
    <div class="drag-mc-pane layui-form" id="magicalDragScene" magical_-coder_-id="Root">
</div>
</body>
</html>

第三步：在user文件夹下增加个性化ui的处理js和配置js 因为我们布局器为每种ui分别调用不同的配置和初始化


xxxxxxxxxx
具体路径：
    assets\drag\js\user\ui\{ui名称}\{版本}\constant.js   这里处理此ui下控件的属性等配置操作 具体配置参见《使用文档.md》
    assets\drag\js\user\ui\{ui名称}\{版本}\iframe-ui.js  这里处理此ui下控件的初始化等交互操作
    同理，此文件 根据您的ui采用jquery框架编写的话就拷贝layui下的，采用vue框架编写的话就拷贝element下的

第四步：这一步就涉及到如何把此UI的组件放入布局器了


xxxxxxxxxx
打开  assets\drag\js\user\ui\{ui名称}\{版本}\constant.js
建议：打开此ui的官方网站，仔细查看文档，对方提供了哪些控件，然后都配置到我们的constat.js里
 这里是比较耗费工作量的地方，慢则1周半 快则1周即可完成 关于constant.js，可以先参考当前layui或者elementui的配置 一个个按照现有示例尝试
 您加入的新控件越多，您自己的软件就越强大

第五步：新建一个index-xxx.html入口页


xxxxxxxxxx
如果您选择vue的ui可以拷贝index-element.html的文件并改名为index-{新ui}.html
如果您选择jquery的ui可以拷贝index-layui.html的文件并改名为index-{新ui}.html


xxxxxxxxxx
加载对应的iframe-xxx.html


xxxxxxxxxx
【第一处改动】
     <select  lay-filter="select-filter-top-change-frame-type">
            <!--如果您的value以http开头，则浏览器会直接重定向到此地址-->
            <option value="/element">Element-UI</option>
            <option value="/layui">Layui</option>
        </select>
 【第二处改动】 这里如果您嫌麻烦 也可以直接写死加载当前ui的
         <iframe id="dropInnerIframe" class="layui-hide" src="iframe-layui-x.x.x.html"></iframe>
【第三处改动】 找到constant.js一栏，然后改成加载您的constant.js把原有的注释掉 因为布局器加载左侧组件，需要从constant.js里获取
        <script type="text/javascript" src="assets/drag/js/user/ui/{ui名称}/{版本}/constant.js"></script>

第六步：恭喜您完成了集成


xxxxxxxxxx
采用http方式访问index-{新ui}.html 应该会报错，因为当前是开发模式，您要指定加载您的ui资源
例如http://xxx/index-{新ui}.html 如果有idea可以直接打开这个index-{新ui}.html右上角有个选择浏览器 点击一下就能打开
如果遇到问题 欢迎咨询我们 qq:799374340 大胆 细心 一定能完成新UI的集成