自定义组件和属性

xxxxxxxxxx
您可能迫切期望如何知道自定义组件
自定义组件的逻辑在：user/ui/..../components目录
注意 不同的index-xxx.html 会加载不同位置的组件
​
所有的组件引入入口都在user/ui/..../components/import.js内
​

一个.vue模块化开发同时又能打包成js集成到magicalcoder的示例

xxxxxxxxxx
https://gitee.com/magicalcoder/vue-magicalcoder-demo

1 参考示例 mc-button.js

xxxxxxxxxx
如下图是一个element-ui按钮组件的简单配置方式：MagicalCoder.install把用户自定义的组件安装到布局器

第一步：新建一个文件 /assets/drag/js/user/ui/element/2.10.1/components/mc-button.js

x
/*test组件:MagicalCoder参考lib\mc\magicalcoder.js 闭包的写法有利于内部变量不随意暴漏出去*/
(function(){
    MagicalCoder.install({
        /*左侧可拖拽的源*/
        dragItems:[
            {
               name:"我的组件",
               icon:"layui-icon layui-icon-face-smile",
               children:[
                   {
                        name:"按钮",
                        icon:"ri-checkbox-indeterminate-line",
                        html:"<el-button>确定</el-button>",
                   },
               ]
           }
       ],
       /*自定义组件和属性*/
        components:[
            {
                "identifier":"el-button",
                "properties":{
                    "primary":0,
                    "name":"按钮",
                    "treeExtraName":{"attr":[],"text":true},
                    "dragInto":false,
                    "duplicate":true,
                    "duplicateAttr":[],
                    "copy":true,
                    "paste":false,
                    "canDelete":true,
                    "dblClickChange":{"type":"text"}
                },
                "attributes":[
                    {
                        "title":"属性",
                        "active":true,
                        "content":[
                            {
                                "type":"select",
                                "clearAttr":true,
                                "oneLine":true,
                                "change":"attr",
                                "title":"尺寸",
                                "attrName":"size",
                                "options":[
                                    {
                                        "medium":"中等",
                                        "small":"小",
                                        "mini":"迷你"
                                    }
                                ]
                            },
                            {
                                "type":"text",
                                "clearAttr":true,
                                "oneLine":true,
                                "change":"text",
                                "title":"文本"
                            }
                        ]
                    }
                ]
            }
        ]
    });
})();

第二步： 引入组件到/assets/drag/js/user/ui/element/2.10.1/components/import.js

x
MagicalCoder.import([
    "assets/drag/js/user/ui/element/2.10.1/components/mc-query-table.js",
    "assets/drag/js/user/ui/magicalcoder/components/mc-echarts-line.js",
    "assets/drag/js/user/ui/magicalcoder/components/mc-echarts-bar.js",
    "assets/drag/js/user/ui/magicalcoder/components/mc-echarts-pie.js",
    "assets/drag/js/user/ui/magicalcoder/components/mc-echarts-scatter.js",
        "assets/drag/js/user/ui/element/2.10.1/components/mc-ui-components.js",
        "assets/drag/js/user/ui/element/2.10.1/components/mc-test-tag.js",
    "assets/drag/js/user/ui/magicalcoder/components/mc-geometry.js",
    "assets/drag/js/user/ui/magicalcoder/components/mc-other.js",
        
        //引入位置在此处即可
        "assets/drag/js/user/ui/element/2.10.1/components/mc-button.js",
​
])

第三步：打开布局器最左侧 组件/我的组件/即可找到以上组件

2 配置解析

2.1 第一步 配置dragItems则会自动出现在左侧拖拽区域 icon也可以取样式名称 https://remixicon.com/ 这里开源图标可以直接使用

xxxxxxxxxx
{
    name:"图表",
    children:[
        {
            name:"条形图",
            icon:"assets/drag/img/left/other1.png",
            html:"<div class='echarts-bar' style='height:400px;'></div>"
        }
    ]
}
具体对应关系非常容易看到，主要是html 就是您控件所对应的html icon也可以使用i的样式名

xxxxxxxxxx
注意html的内容
不要使用缩减方式如：<el-rate/> 而应该是<el-rate></el-rate>

2.2 第二步 配置components-- properties影响控件展现行为等

x
identifier:组件命名空间
    支持 标签名 样式名 属性名=属性值 三种方式 尽量保证每个组件唯一 这样布局器就可以认识此组件
    布局器会自动按照 标签名>样式名>属性名=属性值的方式来为您配置的组件取一个全局唯一key 当出现重复的时候 可通过primary:int类型的控制优先级
​
properties:{
    请参考下表
}

x
例如：
properties:   {
    name:"单选框组",treeExtraName:{attr:["v-model"]},
    dragInto:true,
    duplicate:true,
    assistDuplicate:true,
    duplicateAttr:[],
    copy:true,
    paste:true,
    canDelete:true,
    assistDelete:true,
    onlyChildren:["el-radio"],
    bind:{"v-model":''},
    assistAdd:true,
    addOneItems:[{"":[{html:"<el-radio label='1'>单选项1</el-radio>",focus:false}]}]        }

2.3 配置attributes 则控制右侧属性

x
​
 {type:this.type.TEXT,clearAttr:true,oneLine:true,change:this.change.TEXT,title:'文本'},
​

2.4 参考ui/..../components中已经配置的各种场景组件

2.5 MagicalCoder组件的全部配置

x
/*test组件:MagicalCoder参考lib\mc\magicalcoder.js 闭包的写法有利于内部变量不随意暴漏出去*/
(function(){
    MagicalCoder.install({
        /*左侧可拖拽的源*/
        dragItems:[
       ],
       /*自定义组件和属性*/
        components:[
            {
                "identifier":"el-button",
                "properties":{
                },
                "attributes":[
                ]
            }
        ],
        /*布局器所有回调处理*/
        callbacks:[
            {
                /*参考callback.js中的回调函数名：布局器启动后*/
                after_start:function(param){
       
                },
                /*执行顺序*/
                order:1
            },
        ]，
        /*可以在此处理环境变量application-env.js*/
        changeEnv:function(appEnv){
            appEnv.env.version="3.1.0"
        },
        /*自定义的样式*/
        styles:[
            {
                order:1,
                css: "body:{width:100px;}"
            }
        ]
    });
})();
​
原则上 用户自定义的组件在布局器内的属性 样式 行为等 都可以在此文件内完成，无需修改布局器的源码，这点非常有利于用户在后期的升级上，可以自己下载布局器代码后，覆盖文件（忽略imports.js)即可无缝升级。