来点干货:如何依据vue②写一套UI库葡京在线开户

又到一年年终,方今在做项目总括,抽了点时间,把商家产品做了设计,把组件整合为Vue
UI库(大家用Vue2+),于是造了个车轱辘,当中囊括 基础零部件 和 应用组件,近日组件 和 文书档案 在不断完善中。

接上头的船只管理业务,那里介绍增加和修改操作。

github地址: xmui

目录

  1. 充裕操作

  2. 修改操作

  3. 在线演示

 

花色示范:代码示例

一. 增加操作

“来点干货:如何依照vue二写1套UI库”体系希图分为n个部分:

1.1 创建AddShipWindow.js

在工作中的view目录下开创一个AddShipWindow.js文件,表示2个充实船只的窗口组件。

此文件中隐含了三个form组件用于浮现所要增多的字段:船只名称、状态、吨数和核载人数。

现实代码如下

Ext.define('App.ShipMgr.view.AddShipWindow', {
    extend: 'Ext.window.Window',
    layout: 'fit',
    constrain: true, // 是否只能在父容器的范围内拖动
    modal: true, // 是否有遮挡层
    width: 340,
    requires: ['App.ShipMgr.model.ShipModel'],
    initComponent: function () {
        var me = this;
        var _oprType = me.oprType || 'add'; // 类型;eg:add(添加)、edit(修改)
        var _shipId = me.shipId; // 船舶Id
        var _url = me.url; // 各操作的url,如:add、edit的url
        var _successCallback = me.successCallback || ''; // 成功执行的回调


        // 【form】
        var shipForm = Ext.create('Ext.form.Panel', {
            defaultType: 'hiddenfield',
            width: '100%',
            bodyPadding: 5,
            autoScroll: true,
            url: _url,
            fieldDefaults: {
                labelAlign: 'right',
                labelWidth: 75,
                width: 275
            },
            items: [
                Ext.create('Ext.form.field.Text', {
                    fieldLabel: '船舶名称',
                    name: 'ShipName',
                    maxLength: 50,
                    allowBlank: false,
                    afterLabelTextTpl: '*'
                }),
                Ext.create('Ext.form.field.ComboBox', {
                    fieldLabel: '状态',
                    name: 'State',
                    emptyText: '请选择船舶状态',
                    editable: false,
                    allowBlank: false,
                    valueField: 'State',
                    displayField: 'StateName',
                    queryMode: 'remote',
                    triggerAction: 'all',
                    afterLabelTextTpl: '*',
                    store: Ext.create('Ext.data.Store', {
                        fields: ['State', 'StateName'],
                        data : [
                            { 'State': 'online', 'StateName': '在线' },
                            { 'State': 'offline', 'StateName': '离线' },
                        ]
                    })
                }),
                Ext.create('Ext.form.field.Number', {
                    fieldLabel: '吨位',
                    name: 'Tonnage',
                    allowBlank: false,
                    maxValue: 10000,
                    minValue:1,
                    decimalPrecision: 1,
                    afterLabelTextTpl: '*'
                }),
                Ext.create('Ext.form.field.Number', {
                    fieldLabel: '核载人数',
                    name: 'LoadNumber',
                    allowBlank: false,
                    maxValue: 10000,
                    minValue: 1,
                    decimalPrecision: 1,
                    afterLabelTextTpl: '*'
                }),
                { name: 'ShipId', value: _shipId },
            ],
            buttons: [
            {
                text: '提交',
                name: 'SubmitBtn',
                handler: function () {
                    if (!shipForm.getForm().isValid()) { return; }
                    me.setLoading(true);
                    shipForm.getForm().submit(
                        {
                            clientValidation: true,
                            submitEmptyText: false,
                            success: function (thisControl, action) {
                                var rs = Ext.JSON.decode(action.response.responseText);
                                me.setLoading(false);
                                me.close();
                                if (_successCallback) { // 回调
                                    _successCallback();
                                }
                            },
                            failure: function (thisControl, action) {
                                var rs = Ext.JSON.decode(action.response.responseText);
                                if (rs.msg) {
                                    Ext.Msg.alert('系统提示', rs.msg);
                                } else {
                                    Ext.Msg.alert('系统提示', '操作失败!');
                                }
                                me.setLoading(false);
                            }
                        }
                    );
                }
            }, {
                text: '取消',
                name: 'CancelBtn',
                handler: function () {
                    me.close();
                }
            }]
        });

        // 填充窗口
        Ext.applyIf(me, {
            items: [shipForm]
        });

        me.callParent(arguments);
    }
});

 

  1. 条件布署

  2. 完全代码协会结构

  3. 始于率先个零部件

  4. 想想全局组件

  5. 编写API文档

  6. 包裹公布

一.二 入口设置

在上1篇的grid工具栏中到场【增添】按键:

Ext.create('Ext.Action', {
    icon: 'Resources/icon/add.png',
    text: '添加',
    name: 'AddBtn',
    handler: function (thisControl, event) {
        var winConfig = {
            title: '添加船舶',
            oprType: 'add',
            url: 'Business/ShipMgr/Add',
            successCallback: function () {
                shipMgrStore.loadPage(1); // 添加成功后刷新Store
            }
        };
        var win = Ext.create('App.ShipMgr.view.AddShipWindow', winConfig);
        Ext.getCmp('app_tabContainer').activeTab.add(win);
        win.show();
    }
})

 


1.3 运行图

葡京在线开户 1

 

1. 条件布置

第②,对于碰着布署,小编使用官方的vue-cli,

大局安装 vue-cli

$ cnpm install -g vue-cli

创制三个根据 webpack 模板的新品类并设置重视

$ vue init webpack xmui

$ cd xmui

$ npm install

$ npm run dev

终于迈开第二步,终于有友好的库了 

接下去要求对webpack配置文件稍作一下调度,需求修改多少个地点:

package.config.js

此间的package不是组件目录,是npm run package:prod最后生成的缩减目录。

package.json的main配置是

,告诉node_modules查找引用的门径。

package.json的scripts配置是

,这里不多说,不懂能够留言哦。

  1. 完全代码组织结构

①体化分为三块,咱们把各组件都位于components目录内,样式放在styles,index.js作为入口文件。

率先components是因而的组件集结,以button目录为例,

貌似的构成便是.vue,.scss,.js三种档案的次序文件,具体的落到实处在第2点起来写第3个零件详细介绍。

再来看styles目录,应该从名字童鞋们得以看懂都是表示什么看头:),样式组织笔者用的是BEM标准,一般分为reset,varibles(是各个复用变量,举例字体,背景颜色,按键颜色之类的),icon(Logo),mixin(方法函数),index为进口文件,最后会是那般:

最后看index.js入口文件

如此那般能够让组件援助全局引进和按需引进。

  1. 始于首先个零件

可能以button为例,在上一步提到过,有3体系型文件,在这么些组件里,思念在类型应用中有二种意况:button
和 button group(开关组),分别建立多少个文件
button.vue,button-group.vue,button.scss 和 index.js。

先说button.vue的设计,

,既然是组件,即将思考到可复用,可扩充,通过props传入不相同参数和连串,来显示差别的开关。组件调用是那般的:

再来看button-group.vue的设计,

,只是提供slot来按需插入,组件调用是这么的:

体制怎么写能够参照源码,那里作者用的是scss,你能够用less等,命名小编习于旧贯用BEM的行业内部,假若不打听能够看那里 BEM

末段是index.js入口文件

是还是不是非常粗大略?!多少个零件就写完了

  1. 考虑全局组件

我们在做项目标时候会用到好些个的大局组件(比方:toast弹出层),这年如若在各类文件里都先写这么的,分明不够geek,那里就以toast组件为例表明下,先贴图:

,大家知晓在vue2里

数码从父级组件传递给子组件,只可以单向绑定。子组件内部无法一向修改从父级传递过来的多寡。

回顾说,正是从父组件props传入isVisible属性,大家要用内部境况属性isActive来保卫安全当前组件的图景操作,并且watch那一个isVisible属性操作

,最终通过emit把值再扩散给父组件,产生1个单向数据流。

  1. 编写API文档

自己用的是docsify,自己也是依据vue写的,国人文章,用markdown来写api文档真舒服,粤语小清新,入门轻松,可定制

,在根目录你会开采新扩展了docs目录,这之中都是md格式,那里贴出小编的目录

,也得以看 xmui在线文书档案

  1. 包裹发表

在起来第11中学对webpack做了调度,

每趟开荒测试完后,可以实行npm run
package会施行三步:打包更新package文件,生成dist演示网页,提交npm(须要登记绑定npm)。最后大家要如此给别人用

写在最后:

写壹套ui库其实并不复杂,但更加多的是在思维、尝试、调解,怎么做到低耦合,可复用,易扩大,围绕你的出发点,适用你的类型才是最佳的出品。本人不是写小说的料,文笔倒霉,有窘迫地点忘建议,多谢。

期待风乐趣的童鞋一同爱抚,或许你在运用时遇见难题,大概有好的提出,能够留言给小编和提 Issue 或 Pull
Request
,要不给个
Star 帮助下也行

二. 改造操作

二.1 修改窗口

船只业务的更换窗口能够跟增添窗口公用1个,供给在弹出窗口时判定为充足操作依旧其他操作。

若非增加操作,如:查看、修改时,加载本次请求的船只音讯并填充到具体的form表单里。

在AddShipWindow.js文件里增多如下代码:

// 渲染结束后
me.on('afterrender', function () {
    // 1.非添加操作,查询具体的船舶
    if (_oprType != 'add') {
        me.setLoading(true);
        Ext.Ajax.request({
            method: 'POST',
            type: 'ajax',
            url: 'Business/ShipMgr/QueryById',
            params: {
                shipId: _shipId
            },
            success: function (response) {
                var rs = Ext.JSON.decode(response.responseText);
                if (rs.success == false) { //操作失败
                    Ext.Msg.alert('系统提示', rs.msg);
                }
                else {
                    var en = Ext.create('App.ShipMgr.model.ShipModel', rs.data);
                     // 填充数据
                     shipForm.loadRecord(en);
                }
                me.setLoading(false);
            },
            failure: function (response, opts) {
                me.setLoading(false);
                Ext.Msg.alert('系统提示', '操作失败');
            }
        });
    }
});

  

二.二 入口设置

【修改】按键相比新鲜,在暗许情形是隐藏状态,只有选中了grid组件中的一条记下才显得出来。

2.2.一 创造按键

在上1篇的grid工具栏中进入【修改】按键:

Ext.create('Ext.Action', {
    icon: 'Resources/icon/edit.png',
    text: '修改',
    name: 'EditBtn',
    hidden:true,
    handler: function (thisControl, event) {
        var winConfig = {
            title: '修改船舶',
            oprType: 'edit',
            url: 'Business/ShipMgr/Update',
            shipId:selectData.ShipId,
            successCallback: function () {
                shipMgrStore.reload(); // 修改成功后刷新Store
            }
        };
        var win = Ext.create('App.ShipMgr.view.AddShipWindow', winConfig);
        Ext.getCmp('app_tabContainer').activeTab.add(win);
        win.show();
    }
})

 

二.二.贰 隐藏按键

老是shipMgrStore发起呼吁时都要藏匿【修改】按键:

var shipMgrStore = Ext.create('Ext.data.Store', {
    // ...
    listeners: {
        beforeload: function (thisStore, record, opts) {
            thisStore.proxy.extraParams = searchConditionObj; // 附加检索条件
            shipMgrToolBarPanel.down('[name=EditBtn]').hide(); // 隐藏【修改】按钮
        }
    }
});

 

二.②.三 呈现开关

入选shipMgrGrid的某条数据时体现开关:

var shipMgrGrid = Ext.create('Ext.grid.Panel', {
    // ...
    listeners: {
        cellclick: function (thisGridView, td, cellIndex, record, tr, rowIndex, e, eOpts) {
            selectData = record.data; // 获取选中的数据
            shipMgrToolBarPanel.down('[name=EditBtn]').show(); // 显示【修改】按钮
        }
    }
});

 

2.3 运行图

葡京在线开户 2

 

3. 在线演示

在线演示http://www.akmsg.com/ExtJS/index.html#App.ShipMgr.ShipMgrTab

 

End

Web开采之路体系作品

美食指南加载中…