<template> <div> <section> <svg v-for="(num,index) in 5" :key="index"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#star" ></use> </svg> </section> <div :style="'width:'+rating*2/10+'rem'"> <section> <svg v-for="(num,index) in 5" :key="index"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#star" ></use> </svg> </section> </div> <svgIcon></svgIcon> </div> </template> <script> import svgIcon from '@/components/svg' export default { components: { svgIcon }, data() { return { rating: 4.2 } }, } </script> <style lang="less" scoped> .ratingstar { position: relative; width: 100%; .star_overflow { overflow: hidden; position: relative; height: 0.65rem; } .star_container { position: absolute; top: 0.05rem; width: 1rem; display: flex; justify-content: flex-start; align-items: center; .grey_fill { width: 0.94rem; height: 0.2rem; fill: #d1d1d1; } .orange_fill { width: 0.94rem; height: 0.2rem; fill: #ff9a0d; } } } </style>
总结
以上所述是小编给大家介绍的微信小程序中的店铺评分组件及vue中用svg实现的评分显示组件，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章: