业务组件定制

​x
可视化开发思路跟咱们以前写代码可能有所不同，唯一一种可行性的方案就是：把业务场景做成一个组件，内部高封闭（组件自己的特性） 外部配置属性（布局器）
​
 我们常希望自己的组件，配置一个数据源，可以自动的请求后端接口，进行刷新 

1 组件化 模块化思路来定制

首先您封装的组件 一定要引入到user/iframe/..../components/import.js内； 这样工作区才能找到

1.1 如何封装一个ecahrts组件，配置数据源，让它实时刷新

xxxxxxxxxx
a 我们要学会封装组件 把请求后台的逻辑写到组件里

1.2 vue组件如何封装呢

xxxxxxxxxx
方式1：您可以参考我们用vue开发的组件 集成到布局器的脚手架 只有最终npm run build后的文件 引入布局器的imports.js即可
    一个.vue模块化开发同时又能打包成js集成到magicalcoder的示例 https://gitee.com/magicalcoder/vue-magicalcoder-demo 提供了大量的示例
​
方式2： 我们要学习<script>方式封装组件vue的组件 比如element组件 比较少用
​
    /*
    * 自定义了一个按钮组件，增加remote-api属性
    * $attrs 可以继承el-button的属性
    * 参考vue定义组件方式 文件名与组件名一致
    */
    Vue.component('my-button',{
        template:'<el-button v-bind="$attrs" @click="_handleClick(remoteApi,method)" :remote-api="remoteApi" :method="method">{{text}}</el-button>',
        props:['remoteApi','method'],
        data:function () {
            return {
                //控件文本
                text:this.$slots.default[0].text
            }
        },
        mounted:function () {
        },
        methods:{
            _handleClick:function (remoteApi,method) {
                var charsDoms = document.getElementsByClassName("mc-echarts-line");
                for(var i=0;i<charsDoms.length;i++){
                    var echartDom = charsDoms[i];
                    var attrs = echartDom.attributes;
                    for(var j=0;j<attrs.length;j++){
                        var attr = attrs[j];
                        var name = attr.name;
                        var value = attr.value;
                        if(name == 'mc-attr-unknown-api'){
                            alert(value);
                        }
                    }
                }
                if(!remoteApi){
                    return;
                }
                alert("选择了"+remoteApi+"打开console即可查看远程数据返回(来自my-button.js)")
                if(method === 'post'){
                    //用axios请求
                    axios.post(remoteApi, {
                        a:1
                    })
                    .then(function (response) {
                        var data = response.data;
                        console.log(data);
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
                    return;
                }
                //用axios请求
                axios.get(remoteApi, {
                    a:1
                })
                .then(function (response) {
                    var data = response.data;
                    console.log(data);
                })
                .catch(function (error) {
                    console.log(error);
                });
            }
        }
    })