feat: Merge pull request #2566 from layui/feat/component

feat: 优化 component, tabs 若干功能

docs/component/detail/options.md

@@ -53,7 +53,7 @@ CONST: {
 <td>-</td>
     </tr>
     <tr>
-<td>isRenderWithoutElem</td>
+<td>isRenderWithoutElem <br><sup>实验性</sup></td>
 <td>
 
 渲染是否无需指定目标元素。即无需设置 `elem` 选项，一般用于渲染即显示的组件类型。
@@ -67,7 +67,7 @@ CONST: {
 </td>
     </tr>
     <tr>
-<td>isRenderOnEvent</td>
+<td>isRenderOnEvent <br><sup>实验性</sup></td>
 <td>
 
 渲染是否由事件触发。如 `dropdown` 这类通过点击触发的组件，那么应该设置为 `true`；而诸如 `tabs` 这类初始即展示的组件，则应该设置为 `false`。*推荐根据组件类型始终显式设置对应值*。
@@ -81,7 +81,7 @@ CONST: {
 </td>
     </tr>
     <tr>
-<td>isDeepReload</td>
+<td>isDeepReload <br><sup>实验性</sup></td>
 <td>
 
 组件重载时是否允许深度重载，即对重载时选项进行深度合并。

src/css/layui.css

@@ -1319,6 +1319,7 @@ body .layui-table-tips .layui-layer-content{background: none; padding: 0; box-sh
 
 .layui-tabs-header li .layui-tabs-close{position: relative; display: inline-block; width: 16px; height: 16px; line-height: 18px; margin-left: 8px; top: 0px; text-align: center; font-size: 12px; color: #959595; border-radius: 50%; font-weight: 700; transition: all .16s; -webkit-transition: all .16s;}
 .layui-tabs-header li .layui-tabs-close:hover{ background-color: #ff5722; color: #fff;}
+.layui-tabs-header li[lay-closable="false"] .layui-tabs-close{display: none;}
 
 .layui-tabs-body{padding: 16px 0;}
 .layui-tabs-item{display: none;}

src/modules/component.js

@@ -20,7 +20,6 @@ layui.define(['jquery', 'lay'], function(exports) {
 
     // 组件名
     var MOD_NAME = settings.name;
-    var MOD_INDEX = 'layui_'+ MOD_NAME +'_index'; // 组件索引名
     var MOD_ID = 'lay-' + MOD_NAME + '-id'; // 用于记录组件实例 id 的属性名
 
     // 组件基础对外接口
@@ -31,7 +30,7 @@ layui.define(['jquery', 'lay'], function(exports) {
       // 通用常量集，一般存放固定字符，如类名等
       CONST: $.extend(true, {
         MOD_NAME: MOD_NAME,
-        MOD_INDEX: MOD_INDEX,
+        MOD_ID: MOD_ID,
 
         CLASS_THIS: 'layui-this',
         CLASS_SHOW: 'layui-show',
@@ -103,7 +102,7 @@ layui.define(['jquery', 'lay'], function(exports) {
     // 重载实例
     Class.prototype.reload = function(options, type) {
       var that = this;
-      $.extend(settings.isDeepReload, that.config, options);
+      that.config = $.extend(settings.isDeepReload, {}, that.config, options);
       that.init(true, type);
     };
 
@@ -124,7 +123,13 @@ layui.define(['jquery', 'lay'], function(exports) {
       }
 
       // 合并 lay-options 属性上的配置信息
-      $.extend(true, options, lay.options(elem[0]));
+      var layOptions = lay.options(elem[0]);
+      if (rerender) {
+        // 若重载渲染，则重载传入的 options 配置优先
+        options = that.config = $.extend(layOptions, options);
+      } else {
+        $.extend(options, layOptions); // 若首次渲染，则 lay-options 配置优先
+      }
 
       // 若重复执行 render，则视为 reload 处理
       if (!rerender && elem.attr(MOD_ID)) {
@@ -173,21 +178,39 @@ layui.define(['jquery', 'lay'], function(exports) {
     Class.prototype.render = settings.render; // 渲染
     Class.prototype.events = settings.events; // 事件
 
-    // 元素操作缓存
-    Class.prototype.cache = function(key, value) {
+    /**
+     * 元素缓存操作
+     * @param {string} key - 缓存键
+     * @param {*} value - 缓存值
+     * @param {boolean} remove - 是否删除缓存
+     * @returns {*} - 若 value 未传，则返回缓存值
+     */
+    Class.prototype.cache = function(key, value, remove) {
       var that = this;
       var options = that.config;
       var elem = options.elem;
-
+      var MOD_CACHE_NAME = MOD_ID + '-cache';
       if (!elem) return;
 
-      var CACHE_NAME = 'lay_'+ MOD_NAME + '_cache';
-      var cache = elem.data(CACHE_NAME) || {};
+      var cache = elem.data(MOD_CACHE_NAME) || {};
 
-      if (value === undefined) return cache[key];
+      // value 未传则获取缓存值
+      if (value === undefined) {
+        return cache[key];
+      }
 
-      cache[key] = value;
-      elem.data(CACHE_NAME, cache);
+      if (remove) {
+        delete cache[key]; // 删除缓存
+      } else {
+        cache[key] = value; // 设置缓存
+      }
+
+      elem.data(MOD_CACHE_NAME, cache);
+    };
+
+    // 清除缓存
+    Class.prototype.removeCache = function(key) {
+      this.cache(key, null, true);
     };
 
     // 缓存所有实例对象

src/modules/tabs.js

@@ -459,7 +459,7 @@ layui.define('component', function(exports) {
     var that = this
     var options = that.config;
 
-    if(!options.closable) return;
+    if (!options.closable) return;
 
     opts = opts || {};
 
@@ -484,17 +484,13 @@ layui.define('component', function(exports) {
     var that = this;
     var options = that.config;
     var container = that.getContainer();
-    var hasDel = that.cache('close');
 
     // 是否开启关闭
     if (options.closable) {
-      if (!hasDel) {
-        container.header.items.each(function(){
-          that.appendClose($(this));
-        });
-        that.cache('close', true);
-      }
-    } else if(hasDel) {
+      container.header.items.each(function() {
+        that.appendClose($(this));
+      });
+    } else  {
       container.header.items.each(function() {
         $(this).find('.'+ component.CONST.CLOSE).remove();
       });