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