js/jq实现简单评价组件封装
效果图:
](https://img-blog.csdnimg.cn/e77ca23b3dee4f629a0f1507b2561bb4.png)
1.有时候项目上会用到评价类似的组件。就可以是自己尝试写一下这种简单实用的组件,我这里采用的是jq，想用js的就直接换成js的api就行了。逻辑是一样的。
首先要考虑封装的时候需要用到什么：容器，显示数据，，是否只读，是否需要显示label，是否需要显示评价值，默认值。
然后就可以进行编写代码了:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>自定义简易评价组件</title>
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<div class="evaluateBox" id="evaluate"></div>
</body>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
let evaluateEle = $("#evaluate")//获取容器
let evaluateData = [{
//自定义数据
title: "差",
key: 1
}, {
title: "一般",
key: 2
}, {
title: "好",
key: 3
}]
let title = "服务评价"
let defaultValue = null
// 执行渲染函数
urbaneBinEvaluateModule(evaluateEle, evaluateData, false, title, true, defaultValue)
/**
*
* @param {渲染容器对象} ele
* @param {*数据} data
* @param {是否不可修改*} immutable
* @param {*显示label} title
* @param {*是否显示内容title} contentTitle
* @param {*默认值} defaultValue
*/
//评分组件
function urbaneBinEvaluateModule(ele, data = [], immutable = false, title, contentTitle, defaultValue = null) {
if (ele) {
let depth = `
<div class="evaluate">
<label for="evaluateContent" class = "evaluateTitle">${
title}</label>
<ul id="evaluateContent" class = "evaluateContent"></ul>
<span class = "evaluateContentTitle"></span>
</div>
`
ele.html(depth)
//首次渲染
evaluateApply(defaultValue)
// 渲染
function evaluateApply(key = false, titleStatus = true) {
let evaluateContent = ""
let record = 0
let titleName = ""
if (!key) {
record++
}
data.forEach(item => {
let unity = `<li class = "evaluateUnity ${
record === 0 ? "bright" : "ash"}" data-key=${
item.key}></li>`
evaluateContent += unity
if (item.key == key) {
titleName = item.title
window.top.serviceEvaluation = key//获取到评价的值
record++
}
})
$("#evaluateContent").html(evaluateContent)
//判断是否显示文字
if (contentTitle && titleStatus) {
$(".evaluateContentTitle").text(titleName)
}
record = 0
//判断是否可以编辑
if (!immutable) {
evaluateEvent()
}
}
//添加事件
function evaluateEvent() {
$(".evaluateUnity").on("click", function (ele) {
let key = ele.target.attributes["data-key"].value
evaluateApply(key)
})
}
} else {
Error(ele)
}
}
</script>
</html>
CSS:
.evaluateBox {
width: 500px;
height: 50px;
}
.evaluate {
display: flex;
width: 100%;
height: 37px;
}
.evaluateTitle {
display: inline-block;
height: 38px;
line-height: 38px;
width: 130px;
text-align: right;
color: #333;
margin-right: 15px;
}
.evaluateContent {
display: inline-block;
height: 38px;
margin: 0px;
padding: 0px;
}
.evaluateUnity {
display: inline-block;
width: 30px;
height: 30px;
margin-right: 15px;
}
.evaluateContentTitle {
display: inline-block;
height: 38px;
line-height: 33px;
color: #333;
}
.ash {
background-image: url(../img/星星灰.svg);
/*千万记得引入正确的图片地址*/
}
.bright {
background-image: url(../img/星星亮.svg);
/*千万记得引入正确的图片地址*/
}
复制再粘贴就能用，图片就自己在网上下两张大小合适的引入进去，这边建议阿里的图标库比较多选择：iconfont-阿里巴巴矢量图标库![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jZvC6BwH-1666163315893)(C:\Users\24071\AppData\Roaming\Typora\typora-user-images\image-20221019150352080.png)]](https://img-blog.csdnimg.cn/3c5fdccfefc9496a938d63f3627c4042.png)
可根据自己需要调整css。
觉得实用的可以点个赞支持鼓励一下哈，有问题欢迎评论一起讨论
个人微信公众号：urbaneBin,个人微信：urbaneBinA,欢迎各位小伙伴骚扰。