下面我就为大家分享一篇vue-star评星组件开发实例，具有很好的参考价值，希望对大家有所帮助。
star文件夹下建立Star.vue，及相关的图片信息。便于组件的就近维护
Star.vue：
const LENGTH = 5; const CLS_ON = 'on'; const CLS_HALF = 'half'; const CLS_OFF = 'off'; export default{ props:{ size:{ //尺寸，24,36,48 type: Number }, score:{ type: Number } }, computed:{ starSize(){ return 'star-'+ this.size; }, itemClasses(){ let result = []; let score = Math.floor(this.score*2)/2; //将数值调整为整数及.5的形式，例：4.3 => 4；4.6 => 4.5 let hasDecimal = score %1 !==0; let integer = Math.floor(score); for(let i =0;i<integer;i++){ result.push(CLS_ON); } if(hasDecimal){ result.push(CLS_HALF); } while(result.length<LENGTH){ result.push(CLS_OFF); } return result; } } }@import "../../common/stylus/mixin.styl";.star font-size: 0 .star-item display: inline-block background-repeat: no-repeat &.star-48 .star-item width: 20px height: 20px margin-right: 22px background-size: 20px 20px &.last-child margin-right: 0 &.on bg-image('star48_on') &.half bg-image('star48_half') &.off bg-image('star48_off') &.star-36 .star-item width: 15px height: 15px margin-right: 6px background-size: 15px 15px &.last-child margin-right: 0 &.on bg-image('star36_on') &.half bg-image('star36_half') &.off bg-image('star36_off') &.star-24 .star-item width: 10px height: 10px margin-right: 3px background-size: 10px 10px &.last-child margin-right: 0 &.on bg-image('star24_on') &.half bg-image('star24_half') &.off bg-image('star24_off')
登录后复制
Header.vue：
立即学习“前端免费学习笔记（深入）”；
import star from '../star/Star.vue'export default{ components:{ star }}
登录后复制
mixin.styl：
bg-image($url) background-image: url($url + '@2x.png') @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio:3) background-image: url($url + '@3x.png')
登录后复制
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
vue使用facebook twitter分享示例
200行代码实现blockchain 区块链实例详解
react以create-react-app为基础创建项目
以上就是在vue-star中如何实现评星组件开发的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2750569.html
