vue星星评分含半星

模拟数据 data中定义 datalist ：[{
　　text: '1. 是否是日程表中老师授课？',
 　   type == 1,
　　value: ''
}]
核心代码：
　　itemCurIndex(score, indexs) 第一个参数为分数，第二个参数为第几道题
　　getScoreType(ind, score)第一个参数为当前列表第几个星星，第二个参数为当前列表的分数   作用是给循环的星星添加相应的class
　　<div class="item-star" >
            <div
              class="star"
              v-for="(items, indexs) in 5"
              :key="indexs"
              :class="getScoreType(indexs, datalist[index].value)"
            >
              <a
                href="javaScript:;"
                @click="
                  type == 1 ? itemCurIndex((indexs + 1) * 2 - 1, index) : ''   //此处用来根据条件判断是评价还是查看
                "
              ></a>
              <a
                href="javaScript:;"
                @click="type == 1 ? itemCurIndex((indexs + 1) * 2, index) : ''"
              ></a>
            </div>
          </div>
 
js部分
　　itemCurIndex(score, indexs) {
     　　 this.datalist[indexs].value = score
　　 },
　　getScoreType(ind, score) {
       if (score) {
        　　var startFullIndex = score / 2
        　　if (ind + 1 <= startFullIndex) {
          　　return 'full'
        　　} else if (ind + 1 > startFullIndex && ind + 1 < startFullIndex + 1) {
          　　return 'half'
        　　} else {
         　　 return 'null'
        　　}
      　　} else {
        　　return 'null'
     　　 }
   　　 },
　css部分
　　有样式问题自己调整哈
.item-star {
        display: flex;
        margin-top: 17px;
        .star {
          width: 20px;
          height: 20px;
          padding-left: 5px;
          padding-right: 5px;
          position: relative;
          a {
            width: 15px;
            height: 15px;
            position: absolute;
            top: 0;
            left: 0;
          }
          a:nth-of-type(even) {
            width: 15px;
            height: 15px;
            color: rgba(255, 255, 255, 0);
            position: absolute;
            top: 0;
            left: 15px;
          }
        }
        .null {
          background: url(
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAoCAYAAACIC2hQAAAAAXNSR0IArs4c6QAABCBJREFUWEfVmF1oHFUUx89/ZpNsIyLVh0rN9947W61tBcGASkEpfqIvolXoi+CDttQXIVhFBKHQvOiDtX3qiz7Ujz6JFJVGkFKQgBBqUXfu3d1GanwQW/yqMbt7/zKpG5J0szM7u2vNPC075/zPb86cc++5A1knF9YJp3QMlKQXWnsQIk9GD0+RjwKlXgXgOpGMjoEWTPGw0O1bDuUBh7VW+/83oKVSaXu15mZIrnhwAMz43h1jY2Nn24XtSEZDY06Q8kQjGEBOBFovlkM7V9ug1trbHeXs6mzWoaKsepDtSqlz1xS0YOwHQj7VFAL4MK/V7msGaszsbZTKN1HHN4OIOh/Ss03r4W/Twrb16sPQHqfw6STBIXg/CNQzSWwb1npax/D8+VulUj0Xl81ltep6Mv7W0dHR79PETJVRkhlji5+QfLCloMCngco9BqDakp9I850p6uTwwoXN3vy8JhCIE02IFpFxIW9uNdgVe/wkkGlQjHhiQIYumzXBwMBctEKspbkio7Ozsxv/rlSeE/IuEgEgimR/OqDWvABcJsUCDAWY3tDXd2xwcPDiUunUf5TL5S0Lleq0iFzfWoiuWf/hoXe8vlIsZTQMzZcU2dm1sGmEgTN5re5dLJi6f2jsZZIb0uh1ywfAX4FWi6W3BFow9gsh7+tW0HS6mMoHatcK0GKxuK3mOE0ym060s14A5jO+N16fvFZ0vbX2/prjxyJyXWfDtqYWrQC+h8dzudzUVV1f/8Nae7ejnCR5Q2vyHbP+XTL+o/mxsdPLFRvuTNbaO2uOn4nITR0Ln0AIwK8Q/yGtR79abb7mFvrvnHmK5KYEMTphctH38IBS6utGYk33+mKxGNScmyJloBMka2kA8nPG93c1O7LEDiXlcnlkoVI9IyKbuwILXEJP5p5gZOS7ZvqxoJFzGNoJCie7AyqH8lofiNNOBFow5hWhHIwTS3Uf3pt5nXspzjcRaCuTfFzAq7oZ8nmgdexcmwzU2GiS39oqREL7uXygb4mzjQUl2Rsa+6eIZOLE0t7P9vXeODw8fKmtZiqUSjukWptJC5HIL+PvXL0TJV7w64bGlPY41t5LFDClkQdvr9a5o21lNLR2ko4TKRkSuQFyNNB6b1ugBWNPCvlwkoiA/AbBu04ACPckHWwgOB0EqunpIraZQmNDktHJc80rmsSF8k5/f/bQwMDAL5FhdFCcX1iYEEr02bHp2AiRH4NAN92m40FDM0ORHWtQViE4ls32vjE0NDTXyKZUKm2qOndAyOdJ6Wusg0I+UFvaevXGFF9wdEeWi1w5f/O4B7yulLJJysJaO0jKa458dvVSBw8vBkq93RZo5GyM2eeI/YBsFOGpjO9Ppv04a8wPOScLLwv5SDTJQ3BE69xbcQ8b++rjBP6r++sG9B+In4048f4OLwAAAABJRU5ErkJggg==)
   no-repeat center center;
          background-size: contain;
        }
        .full {
          background: url(
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAoCAYAAACIC2hQAAAAAXNSR0IArs4c6QAABCxJREFUWEfVmFtoHFUcxr9vdmZaKyJV2E0TI4Im1Ma2omBApVgpXtEX8QZ9EXywqakmswSriEUoNLDTrbUmT33Rh2rtk4ioNF4oBQkooYaqSZ96SbJbbPGW1p3Z+WQTUrO57MzObqyZp2XP9/9/v/M/Z85liGXycJlwom6g0i7Dz/bvVqCnS52nwY/Nrm1vkLuCehSjbqC+mzwQCNtnQxnkAdPJdf5vQLUvucEvYkgqHyESMhO4k6/mT9QKW5eKem7yiISnFoIhcMRK56emQy1PzaB6J3WH7+vE3GrOQE1V1eQGvpIbvqqghUzqI0DPVIbgYTude/aqgWp/wzq/EPwowKgEQSAwbWM9d0ycjAtb09AXMqlDgJ6LZs4P7XTu+Wja+arYoMquud0vFofDqnllrpaqCrON6bGf48DGAtXXD5j+Dyc/lfBwNaYkPjfvWvcEN3/jVxM3tYFUCpBEZJsbffotKqqVVAvAFkjtAhqqNZsyJMYBDgIalTjKBEdMmaPoOjNGUovlLANV382r/cuFFxEE9whsJXGbpFVxgKqNITkp4RShERjGoAnzILvPXpg1daZ/KtO41oc/KOC6ak2WQk/iT9My2mdWiisV9TLJbwVsWgrTuDlJHLec/P1lc9RzU5OSrombdCniSF6ynNzU1Pu3om7qK0mbl8Iwbk6SA5aT21IGqr2p9X6AQUEr4yauZxzBy6ap9pmTV9lb72VTD6KITwRdW0/TanOVVgAAT1pObmDeWz/zh+c23gv5nwm4vlqDeugJ/AEj8bjVPX5sdr4FF/xCZs3dRPCFoBvrYR41B4HfRD5iO7nv5sYsujNNnzNxVFIqqlEtOpIXJOMhOz3+/UJ5Km+hblOrL29AwE21QITFkjxvJrSl0pUl9FCibMMtfjE4LqAxzDBOO4GLZiJxH7vGf6oUHwpaCvYyDT1C0BsHJCyGBvdY3bmdobowwTRo6nVBu6Noq9WQxl7LmXDC4iJVtLqTfJhleTuJLy0nH3qujQbqpoYhtVWHEE1NYMxK55vC1KGgOtxm+6fP/yXADEsWt91atfIGdpy+WNPLJLdpoydvKC5ElDgaiU1zd6LIC/6M0HeTWwPhgyiGsTU0Omxnor+minpusldCT2yICIEG0W86+Y7aQDPJ0gHl0Qh+pYvb7wTfB0QJW6MebEgcs5x8xdtF6MtUyCRHALRU7C15CdB75gprD18+92tJO31R/LsHATrDjo0kzllOvuI2HQ7qJocgbFwIlIBP8mDCtt9m55mxhTTal0z5AXdCeEnSikU6/Iudzq+taegLbsM2KOibnaT0hU7gIYvWW+w+eyrKtJDb2Oyh+CalF+Yvddxhp3Pv1gRaCi64DduhoJPgahFHrYR6436c1f7mWz2v8Bqlx0RMguyzu3PZsM6GDn1Ygv+qfdmA/gPHiYc4lxrdSwAAAABJRU5ErkJggg==)
   no-repeat center center;
          background-size: contain;
        }
        .half {
          background: url(
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAoCAYAAACIC2hQAAAAAXNSR0IArs4c6QAABFdJREFUWEfVmF1oHFUYht9vZjdJFZEo7G7zY352zmw1thUEAypFpfiL6YW0KvRG8EJbI6IQrCKKUGhgp+tPTa56oxfV2isRUWkUKREJWEINVZMYTbURLLb414bZ2XllEqcmm92d3ZmkTfZqd+fM+z3nPd/5zjcjWCMfWSOcWDZQ8hXNyQ3upcvtP20bBoH3TcN4UUTc5TBj2UAdK3HAJXZ7UD/2DM+xaSIHlDJ6Vw0oX0tscgoYJedXyAcVEcZ07abOzs4TUWGXxdG8lThC4iEfxgf1fovgiKnU9ssOyteTNzoOT/huLnR0HlSoCTYZhjEWBTayo3Y2+R7AHQshFjo697/I4YwyHr5soHwjdYNju98Q0CqBejtfEN+oVNvJsLCRHLWzyUMAHykOvsRRz1TIu6ZpPHrJQZlbf71TKIwVu1mcoz6Y52o8pnd1dHR8FwY2lKP8/I6Yc/zkhyTuKRW0lKP/5erHppF+UEScWmErgpIU5FqbHHEUCzRFqABRILsJpMoFKws6T/srBCNCTEDDhJDjbkPDhNnSMuNViHKai0A5cF2jM2s/Dte9hRBTBAbJK2qdfWXQ0moicp7EpAjHITKyrr7+YGtr69mLqeN/YbZpgwNnhMBVtYJVs5lCaP6tSV23XykuOprPJr4gsCWE4JJbwjhaMq7IcEYZt88ljD8gbyXPk1y3mkBF5IKpjLnUWwj6Gck7VxMoIEMZ09i6CJT7kxsdFyMEG6LCLsfSi8hsTNe6/c5r0a7P55J3oYAPCF4ZBTYqqFcBdE160un00JJd/3+uNt0KOh8RuDosbETQvxDTH8h0dh5bGL9kwbez628WuJ8QvDYMbFhQEflDoN+rVMdXxXHLnkzzfSaOkkzWChsS9Kyuyd2GYXxdKl7lI9RqNh3mhwi01AJbK6gIzsR0fWulR5bApoS5VLtTcIcJNFULWxOoyDmJx24z29u/raQfCOrdnM+m+gi3f2VAsS+j1J4g7SpBky8Q3Bsk5l+vzVFtf0alnwvSrgq0XCdfTrwWUBF8aipVsq8NLE/FALaVHAPZFTTrUI4CMxlTNQdpBzrKw111zqkz/xCIBYmFBEVDfd01bW1t5yJtJlrNm/PMj1YL6Y2rZenndGP6luKTqOqC7w90rMROl3hnJUE10XYplR6M5GjeSvST6FtJUBEMmkrtigaaTXgNyn3VgIrgT4G8/UPPlyLgTpJVNTYCOWaaRsWni8DNZGcT4wBUxdmKXAD4Vqw+vk+eOv27N3Z6erpx1rb7QHivHSu2jQKcNk1V8ZgOBrUSoyA2l2kUHBE5qNfVvSq9P8+UGjM1NZV0XHcPyCdI1JeesHyfMY0NkZbetlJPgu7AouIr8F7eHYpL/GV59pfJatJicnKylcRLLvmYt88X6WnytGkYb0YC9W62rdRu0O0VSCMFR+M6++WZ30K9nJ2YOJV2YT8P8n6vkxfIgFLpXNBkA5c+SOBSXV8zoP8C9wSgOEfVAVMAAAAASUVORK5CYII=)
   no-repeat center center;
          background-size: contain;
        }
      }
 
　　效果图

 

 

 
 
 
posted @ 2022-04-22 10:55  two-fish  阅读(434)  评论(0)    收藏  举报