让组件允许一次初始化多个

2019/bj-zqzt/biz/js/common/LeftSwipe.js

@@ -1,5 +1,13 @@
define(['jquery', 'Hammer'], function ($, Hammer) {
  function LeftSwipe(el, opt) {
    if ($(el).size() > 1) {
      var list = [];
      $(el).each(function () {
        list.push(new LeftSwipe(this, opt))
      });
      return list;
    }
    this.el = $(el).get(0);
    this.opt = $.extend({}, this.defaultOpt, opt);

2019/bj-zqzt/demo.html

@@ -59,7 +59,8 @@
          ipuUI.toast($.trim($(this).text()));
        });
        var leftSwipe = new LeftSwipe('.ipu-carousel');  // 组件依赖页面写的部分样式
        new LeftSwipe('.ipu-carousel');  // 组件依赖页面写的部分样式
        new LeftSwipe('.ipu-carousel');  // 多次初始化，也只会生效一次
      });
    });
  </script>
@@ -102,6 +103,48 @@
        <div class="ipu-card">
          <div class="ipu-card-content">
            <div class="ipu-carousel">
              <ul class="ipu-carousel-wrapper">
                <li>
                  用来测试左滑功能，这是左边的内容区
                </li>
                <li class="card-actions-wrapper">
                  <div class="card-actions ipu-flex">
                    <div class="card-action-item">立户</div>
                    <div class="card-action-item">编辑</div>
                    <div class="card-action-item">删除</div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="ipu-card">
          <div class="ipu-card-content">
            <div class="ipu-carousel">
              <ul class="ipu-carousel-wrapper">
                <li>
                  用来测试左滑功能，这是左边的内容区
                </li>
                <li class="card-actions-wrapper">
                  <div class="card-actions ipu-flex">
                    <div class="card-action-item">立户</div>
                    <div class="card-action-item">编辑</div>
                    <div class="card-action-item">删除</div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="ipu-card">
          <div class="ipu-card-content">
            <div class="ipu-card-content-inner">头和尾的卡片。卡头是用来显示一些额外的信息，或自定义操作卡标题和页脚。</div>
          </div>
        </div>