From a9f5772c33cb2de51567865061c50cfeadf82d5a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B4=A4=E5=BF=83?=
<3277200+sentsim@users.noreply.github.com>
Date: Fri, 28 Mar 2025 18:40:28 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=20`component.removeI?=
=?UTF-8?q?nst()`=20=E5=9F=BA=E7=A1=80=E6=96=B9=E6=B3=95=EF=BC=8C=E7=94=A8?=
=?UTF-8?q?=E4=BA=8E=E7=A7=BB=E9=99=A4=E7=BC=93=E5=AD=98=E4=B8=AD=E7=9A=84?=
=?UTF-8?q?=E7=BB=84=E4=BB=B6=E5=AE=9E=E4=BE=8B=20(#2597)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
docs/component/index.md | 24 +++++++++++++++++++-----
src/modules/component.js | 20 +++++++++++++++-----
src/modules/tabs.js | 18 +++++++++---------
3 files changed, 43 insertions(+), 19 deletions(-)
diff --git a/docs/component/index.md b/docs/component/index.md
index db4f48c0..ca5d88ec 100644
--- a/docs/component/index.md
+++ b/docs/component/index.md
@@ -61,7 +61,8 @@ layui.define('component', function(exports) {
| [component.reload(id, options)](#reload) | 组件重载 |
| [component.set(options)](#set) | 设置组件渲染时的全局配置项 |
| [component.on(\'event(filter)\', callback)](#on) | 组件的自定义事件 |
-| [component.getThis(id)](#getThis) | 获取指定组件的实例对象 |
+| [component.getInst(id)](#getInst) | 获取组件指定的实例对象 |
+| [component.removeInst(id)](#removeInst) 2.10.2+ | 删除组件指定的实例对象 |
| component.index | 获得组件的自增索引 |
| component.config | 获得组件渲染时的全局配置项。一般通过 `set` 方法设置 |
| component.cache | 获得组件的缓存数据集。如组件实例 ID 集 |
@@ -153,9 +154,9 @@ tabs.on('afterRender(id)', function(data) {
});
```
-获取实例
+获取实例
-`component.getThis(id)`
+`component.getInst(id)`
- 参数 `id` : 组件的实例 ID。
@@ -163,11 +164,24 @@ tabs.on('afterRender(id)', function(data) {
```js
// 以 tabs 组件为例
-var tabInstance = tabs.getThis('id');
+var tabInstance = tabs.getInst('id');
// 调用内部的标签滚动方法
tabInstance.roll();
```
+删除实例 2.10.2+
+
+`component.removeInst(id)`
+
+- 参数 `id` : 组件的实例 ID。
+
+该方法可删除组件渲染时对应的实例，*一般在完全移除组件时使用，否则可能造成组件相关方法失效*。
+
+```js
+// 以 tabs 组件为例
+tabs.removeInst('id');
+```
+
基础常量
`component.CONST`
@@ -207,7 +221,7 @@ layui.define('component', function(exports) {
layui.$.extend(component, {
// 以扩展一个关闭组件面板的接口为例
close: function(id) {
- var that = component.getThis(id);
+ var that = component.getInst(id);
if(!that) return this;
that.remove(obj); // 调用原型中的 remove 方法
}
diff --git a/src/modules/component.js b/src/modules/component.js
index 966f8c6a..e893a5bf 100644
--- a/src/modules/component.js
+++ b/src/modules/component.js
@@ -133,7 +133,7 @@ layui.define(['jquery', 'lay'], function(exports) {
// 若重复执行 render，则视为 reload 处理
if (!rerender && elem.attr(MOD_ID)) {
- var newThat = instance.getThis(elem.attr(MOD_ID));
+ var newThat = component.getInst(elem.attr(MOD_ID));
if (!newThat) return;
return newThat.reload(options, type);
}
@@ -214,16 +214,26 @@ layui.define(['jquery', 'lay'], function(exports) {
};
// 缓存所有实例对象
- instance.that = {};
+ instance.that = {};
- // 获取当前实例对象
- instance.getThis = component.getThis = function(id) {
+ // 获取指定的实例对象
+ component.getInst = component.getThis = function(id) {
if (id === undefined) {
throw new Error('ID argument required');
}
return instance.that[id];
};
+ // 获取所有实例
+ component.getAllInst = function() {
+ return instance.that;
+ };
+
+ // 移除指定的实例对象
+ component.removeInst = function(id) {
+ delete instance.that[id];
+ };
+
// 组件缓存
component.cache = {
id: {}
@@ -239,7 +249,7 @@ layui.define(['jquery', 'lay'], function(exports) {
* @returns
*/
component.reload = function(id, options) {
- var that = instance.getThis(id);
+ var that = component.getInst(id);
if (!that) return;
that.reload(options);
diff --git a/src/modules/tabs.js b/src/modules/tabs.js
index b34802a0..263186fd 100644
--- a/src/modules/tabs.js
+++ b/src/modules/tabs.js
@@ -145,7 +145,7 @@ layui.define('component', function(exports) {
clearTimeout(timer);
timer = setTimeout(function(){
layui.each(component.cache.id, function(key) {
- var that = component.getThis(key);
+ var that = component.getInst(key);
if(!that) return;
that.roll('init');
});
@@ -694,7 +694,7 @@ layui.define('component', function(exports) {
* @param {Object} opts - 添加标签的配置项，详见 Class.prototype.add
*/
add: function(id, opts) {
- var that = component.getThis(id);
+ var that = component.getInst(id);
if(!that) return;
that.add(opts);
},
@@ -706,7 +706,7 @@ layui.define('component', function(exports) {
* @param {boolean} [force=false] - 是否强制关闭
*/
close: function(id, index, force) {
- var that = component.getThis(id);
+ var that = component.getInst(id);
if(!that) return;
if(index === undefined) index = that.data().index; // index 若不传，则表示关闭当前标签
that.close(that.findHeaderItem(index), force);
@@ -719,7 +719,7 @@ layui.define('component', function(exports) {
* @param {number} index - 活动标签的索引，默认取当前选中标签的索引。一般用于标签右键事件
*/
closeMult: function(id, mode, index, force) {
- var that = component.getThis(id);
+ var that = component.getInst(id);
if(!that) return;
that.closeMult(mode, index, force);
},
@@ -730,7 +730,7 @@ layui.define('component', function(exports) {
* @param {number} index - 标签索引
*/
change: function(id, index, force) {
- var that = component.getThis(id);
+ var that = component.getInst(id);
if(!that) return;
that.change(that.findHeaderItem(index), force);
},
@@ -740,7 +740,7 @@ layui.define('component', function(exports) {
* @param {string} id - 渲染时的实例 ID
*/
data: function(id) {
- var that = component.getThis(id);
+ var that = component.getInst(id);
return that ? that.data() : {};
},
@@ -751,7 +751,7 @@ layui.define('component', function(exports) {
* @returns
*/
getHeaderItem: function(id, index) {
- var that = component.getThis(id);
+ var that = component.getInst(id);
if(!that) return;
return that.findHeaderItem(index);
},
@@ -763,7 +763,7 @@ layui.define('component', function(exports) {
* @returns
*/
getBodyItem: function(id, index) {
- var that = component.getThis(id);
+ var that = component.getInst(id);
if(!that) return;
return that.findBodyItem(index);
},
@@ -773,7 +773,7 @@ layui.define('component', function(exports) {
* @param {string} id - 渲染时的实例 ID
*/
refresh: function(id) {
- var that = component.getThis(id);
+ var that = component.getInst(id);
if (!that) return;
that.roll('auto');
}