js/jq implementa encapsulamento de componente de avaliação simples
Renderizações:
1. Às vezes, os projetos usam componentes semelhantes para avaliação. Você pode tentar escrever este componente simples e prático sozinho. Eu uso jq aqui. Se você quiser usar js, pode substituí-lo diretamente por js api. A lógica é a mesma.
Antes de tudo, precisamos considerar o que precisa ser usado ao encapsular: contêiner, exibir dados, se é somente leitura, se precisa exibir rótulo, se precisa exibir valor de avaliação e valor padrão.
Então você pode escrever o código:
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);
/*千万记得引入正确的图片地址*/
}
Você pode usá-lo copiando e colando. Você pode baixar duas imagens de tamanho adequado da Internet e importá-las. Aqui, sugerimos que a biblioteca de ícones de Ali tenha mais opções: iconfont-Alibaba Vector Icon Library
Você pode ajustar o css de acordo com suas necessidades.
Se você achar útil, pode dar um joinha para apoiá-lo e incentivá-lo. Se tiver alguma dúvida, comente e discuta juntos.
Conta pública do WeChat pessoal: urbaneBin, WeChat pessoal: urbaneBinA, dê as boas-vindas a todos os amigos para assediar.