《layui宇宙版教程》：评分组件rate

最新推荐文章于 2023-03-31 00:23:56 发布

立志做一个佳娃~

最新推荐文章于 2023-03-31 00:23:56 发布

阅读量949

点赞数 1

分类专栏： Layui宇宙版教程文章标签： layui 前端

本文链接：https://blog.csdn.net/ghyghost/article/details/108116203

版权

Layui宇宙版教程专栏收录该内容

40 篇文章 16 订阅

订阅专栏

《Layui宇宙版教程》提供2000人的QQ群进行交流学习，QQ群号：1046961650，或通过手机QQ扫描二维码进入：

1.29 评分组件rate

rate评分组件在电商和O2O平台尤为常见，一般用于对商家进行服务满意度评价。

模块加载名称：rate。

1.29.1 快速使用

rate组件可以用来进行展示或评价，只需要通过更改参数设定来开启想要的功能。

　　测试代码如下：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

var rate = layui.rate;

//渲染

var ins1 = rate.render({

elem: '#test1' //绑定元素

});

</script>

</body>

</html>

运行效果如图1-xx所示。

1.29.2 基础参数

支持的基础参数如图1-xx所示。

1.29.3 属性length

测试代码如下：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

var rate = layui.rate;

//渲染

var ins1 = rate.render({

elem: '#test1',

length: 15

});

</script>

</body>

</html>

运行效果如图1-xx所示。

1.29.4 属性value

测试代码如下：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

var rate = layui.rate;

//渲染

var ins1 = rate.render({

elem: '#test1',

value: 3

});

</script>

</body>

</html>

运行效果如图1-xx所示。

1.29.5 属性theme

测试代码如下：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

var rate = layui.rate;

//渲染

var ins1 = rate.render({

elem: '#test1',

theme: 'red'

});

</script>

</body>

</html>

运行效果如图1-xx所示。

1.29.6 属性half

测试代码如下：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

var rate = layui.rate;

//渲染

var ins1 = rate.render({

elem: '#test1',

half: true

});

</script>

</body>

</html>

运行效果如图1-xx所示。

1.29.7 属性text

测试代码如下：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

var rate = layui.rate;

//渲染

var ins1 = rate.render({

elem: '#test1',

half: true,

text: true

});

</script>

</body>

</html>

运行效果如图1-xx所示。

1.29.8 属性readonly

测试代码如下：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

var rate = layui.rate;

//渲染

var ins1 = rate.render({

elem: '#test1',

readonly: true,

value: 3

});

</script>

</body>

</html>

1.29.9 分数设置

分数设置规则如图1-xx所示。

1.29.10 自定义文本的回调

通过setText函数，在组件初次渲染和点击后时产生回调。默认文本以星级显示，可以根据自己设定的文字来替换默认文本，如 “讨厌”或者“喜欢”。若用户选择分数而没有设定对应文字的情况下，系统会使用默认的文本。

测试代码如下：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

var rate = layui.rate;

//渲染

var ins1 = rate.render({

elem: '#test1',

text: true,

setText: function(value) {

var arrs = {

'1': '极差',

'2': '差',

'3': '中等',

'4': '好',

'5': '非常好'

};

this.span.text(arrs[value] || (value + "星"));

}

});

</script>

</body>

</html>

1.29.11 点击产生的回调

通过choose实现函数，在组件被点击后触发，回调分数，用户可根据分数来设置效果，比如出现弹出层。

测试代码如下：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

var rate = layui.rate;

//渲染

var ins1 = rate.render({

elem: '#test1',

choose: function(value) {

if (value > 4) alert('么么哒');

}

});

</script>

</body>

</html>

立志做一个佳娃~

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录