feat(element): 支持指定元素渲染 (#2162)

* feat(element): 支持指定元素渲染

* docs(element): 更新文档

* docs: 更正 tab 定向渲染的文档

---------

Co-authored-by: 贤心 <3277200+sentsim@users.noreply.github.com>

docs/nav/index.md

@@ -223,7 +223,7 @@ toc: true
 `element.render('nav', filter);`
 
 - 参数 `'nav'` 是渲染导航的固定值
-- 参数 `filter` : 对应导航容器 `lay-filter` 的属性值
+- 参数 `filter` : 对应导航容器 `lay-filter` 的属性值或<sup>2.9.15+</sup>指定元素的 jQuery 对象
 
 `nav` 组件会在元素加载完毕后，自动对导航完成一次渲染，因此该方法主要用于对动态插入的导航元素的初始化渲染。
 
@@ -342,6 +342,6 @@ layui.use(function(){
 `element.render('breadcrumb', filter);`
 
 - 参数 `'breadcrumb'` 是渲染面包屑导航的固定值
-- 参数 `filter` : 对应面包屑导航容器 `lay-filter` 的属性值
+- 参数 `filter` : 对应面包屑导航容器 `lay-filter` 的属性值或<sup>2.9.15+</sup>指定元素的 jQuery 对象
 
 该方法主要用于对动态插入的面包屑导航的初始化渲染，用法同上述导航菜单。

docs/panel/index.md

@@ -217,7 +217,7 @@ toc: true
 `element.render('collapse', filter);`
 
 - 参数 `'collapse'` : 渲染折叠面板的固定值
-- 参数 `filter` : 对应折叠面板容器 `lay-filter` 的属性值
+- 参数 `filter` : 对应折叠面板容器 `lay-filter` 的属性值或<sup>2.9.15+</sup>指定元素的 jQuery 对象
 
 在元素加载完毕后，`element` 模块会自动对元素进行一次渲染。而当元素为动态插入时，需通过该方法完成初始化渲染。
 

docs/progress/index.md

@@ -140,7 +140,7 @@ toc: true
 `element.render('progress', filter);`
 
 - 参数 `'progress'` : 渲染进度条的固定值
-- 参数 `filter` : 对应进度条容器 `lay-filter` 的属性值
+- 参数 `filter` : 对应进度条容器 `lay-filter` 的属性值或<sup>2.9.15+</sup>指定元素的 jQuery 对象
 
 在元素加载完毕后，element 模块会自动对元素进行一次渲染。而当元素为动态插入时，需通过该方法完成初始化渲染。
 

docs/tab/index.md

@@ -152,8 +152,8 @@ tab 组件提供了三种 UI 风格，分别为：
 
 `element.render('tab', filter);`
 
-- 参数 `'tab'` 是渲染 tab 的固定值
-- 参数 `filter` : 对应 tab 容器 `lay-filter` 的属性值
+- 参数 `'tab'` 是渲染 tab 的固定值。
+- 参数 `filter` : 对应 tab 容器 `lay-filter` 的属性值或<sup>2.9.15+</sup>指定元素的 jQuery 对象。
 
 tab 组件会在元素加载完毕后，自动对 tab 元素完成一次渲染，因此该方法主要用于对动态插入的 tab 元素的初始化渲染。
 

src/modules/element.js

@@ -230,14 +230,15 @@ layui.define('jquery', function(exports){
     }
     
     // Tab 自适应
-    ,tabAuto: function(spread){
+    ,tabAuto: function(spread, elem){
       var SCROLL = 'layui-tab-scroll';
       var MORE = 'layui-tab-more';
       var BAR = 'layui-tab-bar';
       var CLOSE = 'layui-tab-close';
       var that = this;
+      var targetElem = elem || $('.layui-tab');
       
-      $('.layui-tab').each(function(){
+      targetElem.each(function(){
         var othis = $(this);
         var title = othis.children('.layui-tab-title');
         var item = othis.children('.layui-tab-content').children('.layui-tab-item');
@@ -414,16 +415,16 @@ layui.define('jquery', function(exports){
   // 初始化元素操作
   Element.prototype.init = function(type, filter){
     var that = this, elemFilter = function(){
-      return filter ? ('[lay-filter="' + filter +'"]') : '';
+      return (typeof filter === 'string' && filter) ? ('[lay-filter="' + filter +'"]') : '';
     }(), items = {
       
       // Tab 选项卡
-      tab: function(){
-        call.tabAuto.call({});
+      tab: function(elem){
+        call.tabAuto.call({}, elem);
       }
       
       // 导航菜单
-      ,nav: function(){
+      ,nav: function(elem){
         var TIME = 200;
         var timer = {};
         var timerMore = {};
@@ -491,7 +492,8 @@ layui.define('jquery', function(exports){
         };
         
         // 遍历导航
-        $(NAV_ELEM + elemFilter).each(function(index) {
+        var targetElem = elem || $(NAV_ELEM + elemFilter);
+        targetElem.each(function(index) {
           var othis = $(this);
           var bar = $('<span class="'+ NAV_BAR +'"></span>');
           var itemElem = othis.find('.'+NAV_ITEM);
@@ -553,10 +555,11 @@ layui.define('jquery', function(exports){
       }
       
       //面包屑
-      ,breadcrumb: function(){
+      ,breadcrumb: function(elem){
         var ELEM = '.layui-breadcrumb';
-        
-        $(ELEM + elemFilter).each(function(){
+        var targetElem = elem || $(ELEM + elemFilter);
+
+        targetElem.each(function(){
           var othis = $(this)
           ,ATTE_SPR = 'lay-separator'
           ,separator = othis.attr(ATTE_SPR) || '/'
@@ -571,9 +574,11 @@ layui.define('jquery', function(exports){
       }
       
       //进度条
-      ,progress: function(){
+      ,progress: function(elem){
         var ELEM = 'layui-progress';
-        $('.' + ELEM + elemFilter).each(function(){
+        var targetElem = elem || $('.' + ELEM + elemFilter);
+
+        targetElem.each(function(){
           var othis = $(this)
           ,elemBar = othis.find('.layui-progress-bar')
           ,percent = elemBar.attr('lay-percent');
@@ -593,10 +598,11 @@ layui.define('jquery', function(exports){
       }
       
       //折叠面板
-      ,collapse: function(){
+      ,collapse: function(elem){
         var ELEM = 'layui-collapse';
+        var targetElem = elem || $('.' + ELEM + elemFilter);
         
-        $('.' + ELEM + elemFilter).each(function(){
+        targetElem.each(function(){
           var elemItem = $(this).find('.layui-colla-item')
           elemItem.each(function(){
             var othis = $(this)
@@ -616,6 +622,11 @@ layui.define('jquery', function(exports){
       }
     };
 
+    if(type && typeof filter === 'object' && filter instanceof $){
+      var targetElem = filter;
+      return items[type](targetElem);
+    }
+
     return items[type] ? items[type]() : layui.each(items, function(index, item){
       item();
     });