LayUI 颜色，滑块组件复用方法

LayUI 颜色，滑块组件复用方法

#博客#

前端时间layUI官网关闭，对于layUI示例有需求的小伙伴们可以在https://layui.itze.cn/这个网址上查看，这个模仿官网的网址。

言归正传，对于layUI的组件大家应该都会，导入layui的js和css，把代码copy过来就可以了，但是一般项目上对于组件的使用大多数都是复用的，以下colorpicker.render()方法中绑定的对象只能是一个独立的Dom，所以想着用name或者class的兄弟是行不通的，但思维转变一下也是可以实现的，接下来看，以下是一个layui颜色组件的示例:

<div id="test1"></div>

<script>
layui.use('colorpicker', function(){
  var $ = layui.$
  ,colorpicker = layui.colorpicker;
  //常规使用
  colorpicker.render({
    elem: '#test1' //绑定元素
    ,change: function(color){ //颜色改变的回调
      layer.tips('选择了：'+ color, this.elem, {
        tips: 1
      });
    }
  });
});
</script>

预览效果：

点击效果：

一切正常！

那如果项目中有三个地方用到颜色组件呢，那就是

<div id="test1"></div>
<div id="test2"></div>
<div id="test3"></div>

<script>
layui.use('colorpicker', function(){
  var $ = layui.$
  ,colorpicker = layui.colorpicker;

  //test1常规使用
  colorpicker.render({
    elem: '#test1' //绑定元素
    ,change: function(color){ //颜色改变的回调
      layer.tips('选择了：'+ color, this.elem, {
        tips: 1
      });
    }
  });

  //test2常规使用
  colorpicker.render({
    elem: '#test2' //绑定元素
    ,change: function(color){ //颜色改变的回调
      layer.tips('选择了：'+ color, this.elem, {
        tips: 1
      });
    }
  });
    
  //test3常规使用
  colorpicker.render({
    elem: '#test3' //绑定元素
    ,change: function(color){ //颜色改变的回调
      layer.tips('选择了：'+ color, this.elem, {
        tips: 1
      });
    }
  });

});
</script>

这样下去功能是实现了，但是代码量上来了如果100个地方使用，就得copy100次，有的兄弟就想到了用循环，思路是对的，但是想法还是没离开id,例如

<div id="test1"></div>
<div id="test2"></div>
<div id="test3"></div>

<script>
layui.use('colorpicker', function(){
  var $ = layui.$
  ,colorpicker = layui.colorpicker;

  //test1-3常规使用
  let length=3;
  for (let i = 0; i < length; i++) {
            colorpicker.render({
                elem: '#test'+(i+1) //绑定元素
                ,change: function(color){ //颜色改变的回调
                    layer.tips('选择了：'+ color, this.elem, {
                        tips: 1
                    });
                }
            });
        }
});
</script>

这样比上面copy要好很多了，代码量也少了，但是每次新增都要改length，而且这样的多次使用id和命名也不友好，于是再调整一下符合高逼格比，高效率的方法 抛弃id用class,因为class可以重复出现，至于为什么不用name，这里name可以用于单独取值赋值。这里就给大家和盘托出，把动态赋值也加上。

<div name="fontyColor" class=".lyColor" data-value=""></div>
<div name="backColor" class=".lyColor" data-value=""></div>
<div name="titleColor" class=".lyColor" data-value=""></div>

<script>
layui.use('colorpicker', function(){
  var $ = layui.$
  ,colorpicker = layui.colorpicker;

  //test1-3常规使用

  //获取到所有使用class=lyColor的dom元素，遍历绑定
  let lyColors=$('div[class=".lyColor"]');
  //这里不用$('.lyColor')的原因是，担心其他元素不注意加上了相同class，有需要的可以在上面再绑一层id
  for (let i = 0; i < lyColors.length; i++) {
            colorpicker.render({
                elem: lyColors[i] //绑定元素
                ,color: $(lyColors[i]).attr('data-value')
                ,change: function(color){ //颜色改变的回调
                    //如果颜色组件没选择带输入框的，这里可以动态把选择的颜色赋值到对应的data-value 属性上去
                    $(lyColors[i]).attr('data-value',color);
                     //这样在其他 地方通过name获取data-value的值即可
                    layer.tips('选择了：'+ color, this.elem, {
                        tips: 1
                    });
                }
            });
        }
});
</script>

这种方法，可以提高layui组件 重用性，对于赋初始值，和最后的取值也提供了方法。

js中只需写一次，之后要加颜色组件，只需要加

<!--初始值只需要赋 在data-value上即可-->
<div name="xxx" class=".lyColor" data-value=""></div>

注意 赋初始值时，要把 layui渲染的方法，运行在 自己初始化方法后，说通俗点就是 先把所有的 data-value 赋值完后，再 运行上面的layui循环渲染方法。

---

然后上面是以layui颜色组件举例的，但是 方法可以通用于 layui其他组件，比如滑块等。