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

本文介绍了如何提高LayUI颜色选择器和滑块组件的复用性,避免重复代码。通过使用class而非id来绑定元素,并利用数据属性动态设置初始值和获取选中值,实现了更灵活的组件应用。这种方法不仅适用于颜色选择器,还可应用于其他LayUI组件,如滑块,提高了代码效率和组件的可维护性。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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其他组件,比如滑块等。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值