mirror of https://github.com/layui/layui
chore: 优化 component 接口扩展的方式等细节
贤心
parent
752301c271
commit
36e741da47
|
|
@ -25,8 +25,8 @@ layui.define(['jquery', 'lay'], function(exports) {
|
|||
|
||||
// 组件基础对外接口
|
||||
var component = {
|
||||
config: settings.global || {},
|
||||
index: layui[MOD_NAME] ? (layui[MOD_NAME].index + 10000) : 0,
|
||||
config: {}, // 全局配置项，一般通过 component.set() 设置
|
||||
index: layui[MOD_NAME] ? (layui[MOD_NAME].index + 10000) : 0, // 组件索引
|
||||
|
||||
// 通用常量集，一般存放固定字符，如类名等
|
||||
CONST: $.extend(true, {
|
||||
|
|
@ -54,9 +54,6 @@ layui.define(['jquery', 'lay'], function(exports) {
|
|||
}
|
||||
};
|
||||
|
||||
// 扩展对外接口
|
||||
$.extend(true, component, settings.exports);
|
||||
|
||||
// 操作当前实例
|
||||
var instance = function() {
|
||||
var that = this;
|
||||
|
|
@ -74,9 +71,9 @@ layui.define(['jquery', 'lay'], function(exports) {
|
|||
}
|
||||
};
|
||||
|
||||
// 扩展实例对象
|
||||
if (typeof settings.inst === 'function') {
|
||||
$.extend(true, inst, settings.inst.call(that));
|
||||
// 扩展实例对象的回调
|
||||
if (typeof settings.extendsInstance === 'function') {
|
||||
$.extend(true, inst, settings.extendsInstance.call(that));
|
||||
}
|
||||
|
||||
// 返回实例对象
|
||||
|
|
@ -212,7 +209,12 @@ layui.define(['jquery', 'lay'], function(exports) {
|
|||
// 用于扩展原型
|
||||
component.Class = Class;
|
||||
|
||||
// 完整重载实例
|
||||
/**
|
||||
* 组件完整重载
|
||||
* @param {string} id - 实例 id
|
||||
* @param {Object} options - 配置项
|
||||
* @returns
|
||||
*/
|
||||
component.reload = function(id, options) {
|
||||
var that = instance.getThis(id);
|
||||
if (!that) return;
|
||||
|
|
@ -233,7 +235,11 @@ layui.define(['jquery', 'lay'], function(exports) {
|
|||
if (!that) return;
|
||||
} */
|
||||
|
||||
// 核心入口
|
||||
/**
|
||||
* 组件渲染
|
||||
* @param {Object} options - 配置项
|
||||
* @returns
|
||||
*/
|
||||
component.render = function(options) {
|
||||
var inst = new Class(options);
|
||||
return instance.call(inst);
|
||||
|
|
|
|||
|
|
@ -150,73 +150,22 @@ layui.define('component', function(exports) {
|
|||
});
|
||||
inner.onresize = true;
|
||||
}
|
||||
},
|
||||
|
||||
// 实例接口
|
||||
inst: {},
|
||||
|
||||
// 扩展接口
|
||||
exports: {
|
||||
// 增加标签
|
||||
add: function(id, obj) {
|
||||
var that = component.getThis(id);
|
||||
if(!that) return this;
|
||||
that.add(obj);
|
||||
},
|
||||
|
||||
// 关闭单个标签
|
||||
close: function(id, index) {
|
||||
var that = component.getThis(id);
|
||||
if(!that) return this;
|
||||
if(index === undefined) index = that.data().index; // index 若不传，则表示关闭当前标签
|
||||
that.close(that.findHeaderItem(index));
|
||||
},
|
||||
|
||||
// 关闭多个标签。若传 index，则按 index 所在标签为事件执行关闭操作
|
||||
closeMore: function(id, type, index) {
|
||||
var that = component.getThis(id);
|
||||
if(!that) return this;
|
||||
that.closeMore(type, index);
|
||||
},
|
||||
|
||||
// 切换标签
|
||||
change: function(id, index) {
|
||||
var that = component.getThis(id);
|
||||
if(!that) return this;
|
||||
that.change(that.findHeaderItem(index));
|
||||
},
|
||||
|
||||
// 获取标签信息
|
||||
data: function(id) {
|
||||
var that = component.getThis(id);
|
||||
return that ? that.data() : {};
|
||||
},
|
||||
|
||||
// 获取标签指定头部项
|
||||
headerItem: function(id, index) {
|
||||
var that = component.getThis(id);
|
||||
return that ? that.findHeaderItem(index) : this;
|
||||
},
|
||||
|
||||
// 获取标签指定头部项
|
||||
bodyItem: function(id, index) {
|
||||
var that = component.getThis(id);
|
||||
return that ? that.findBodyItem(index) : this;
|
||||
},
|
||||
|
||||
// 调整视图结构
|
||||
setView: function(id) {
|
||||
var that = component.getThis(id);
|
||||
if (!that) return this;
|
||||
that.roll('auto');
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// 内部变量集
|
||||
var inner = {};
|
||||
|
||||
/**
|
||||
* 扩展组件原型方法
|
||||
*/
|
||||
|
||||
var Class = component.Class;
|
||||
|
||||
// 增加标签
|
||||
/**
|
||||
* 增加标签
|
||||
* @param {*} obj
|
||||
*/
|
||||
Class.prototype.add = function(obj){
|
||||
var that = this;
|
||||
var options = that.config;
|
||||
|
|
@ -613,6 +562,63 @@ layui.define('component', function(exports) {
|
|||
}
|
||||
};
|
||||
|
||||
// 扩展组件接口
|
||||
$.extend(component, {
|
||||
// 增加标签
|
||||
add: function(id, obj) {
|
||||
var that = component.getThis(id);
|
||||
if(!that) return this;
|
||||
that.add(obj);
|
||||
},
|
||||
|
||||
// 关闭单个标签
|
||||
close: function(id, index) {
|
||||
var that = component.getThis(id);
|
||||
if(!that) return this;
|
||||
if(index === undefined) index = that.data().index; // index 若不传，则表示关闭当前标签
|
||||
that.close(that.findHeaderItem(index));
|
||||
},
|
||||
|
||||
// 关闭多个标签。若传 index，则按 index 所在标签为事件执行关闭操作
|
||||
closeMore: function(id, type, index) {
|
||||
var that = component.getThis(id);
|
||||
if(!that) return this;
|
||||
that.closeMore(type, index);
|
||||
},
|
||||
|
||||
// 切换标签
|
||||
change: function(id, index) {
|
||||
var that = component.getThis(id);
|
||||
if(!that) return this;
|
||||
that.change(that.findHeaderItem(index));
|
||||
},
|
||||
|
||||
// 获取标签信息
|
||||
data: function(id) {
|
||||
var that = component.getThis(id);
|
||||
return that ? that.data() : {};
|
||||
},
|
||||
|
||||
// 获取标签指定头部项
|
||||
headerItem: function(id, index) {
|
||||
var that = component.getThis(id);
|
||||
return that ? that.findHeaderItem(index) : this;
|
||||
},
|
||||
|
||||
// 获取标签指定头部项
|
||||
bodyItem: function(id, index) {
|
||||
var that = component.getThis(id);
|
||||
return that ? that.findBodyItem(index) : this;
|
||||
},
|
||||
|
||||
// 调整视图结构
|
||||
setView: function(id) {
|
||||
var that = component.getThis(id);
|
||||
if (!that) return this;
|
||||
that.roll('auto');
|
||||
}
|
||||
});
|
||||
|
||||
// 初始化渲染
|
||||
$(function() {
|
||||
component.render();
|
||||
|
|
|
|||
Loading…
Reference in New Issue