vue实现简单的星级评分组件源码
2019-01-19 00:02
2106 查看
vue星级评分组件源码,具体代码如下所示:
<!--自定义组件--> <template> <!--结构层--> <div id="star"> <span v-for="classn in starArrs" :class="classn" class="staritem"></span> <!--<span class="staritem onstar"></span> <span class="staritem onstar"></span> <span class="staritem halfstar"></span> <span class="staritem offstar"></span>--> <!--根据传递过来的分数得到对应的星星 4.7 四颗半星 1个位数代表的是全里亮, 2,当分数大于等于0.5 是一个半星 3.当全星和半星不足五个的时候,剩下的都是灰色的星星 --> </div> </template> <script> // 行为 export default{ props:['score'], created(){ console.log("子组件"); }, mounted(){ console.log("打印传递的分数"); }, computed:{ starArrs(){ var starArr=[]; //3.9 // 全星星的个数 let onstar = parseInt(this.score); console.log(onstar) // 是否有半星 let halfStar = Math.round(this.score-onstar)?true:false; // 有多少课灰色的星星 for (var i=0;i<onstar;i++) { starArr.push('onstar') } if(halfStar){ starArr.push('halfstar') } while(starArr.length<5){ starArr.push('offstar') } return starArr; } } } </script> <style scoped="scoped"> /*独立作用域的样式*/ .staritem{ display: inline-block; width: 0.37037rem; height: 0.37037rem; } /*全星星*/ .onstar{ background: url(./star24_on@2x.png); background-size: 0.37037rem; } .halfstar{ background: url('./star24_half@2x.png'); } .offstar{ background: url('./star24_off@2x.png'); } </style>
背景图
总结
以上所述是小编给大家介绍的vue实现简单的星级评分组件源码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
您可能感兴趣的文章:
相关文章推荐
- VUE 学习总结之简单的Rate评分组件
- vue---实现类似淘宝星级评分
- ExtJs星级评分Rating组件实现星级评分
- vue实现简单表格组件
- 如何实现一个简单的Vue移动端组件库
- vue 实现类似淘宝星级评分的示例
- Vue组件BootPage实现简单的分页功能
- vue中实现简单的todolist功能、todolist组件拆分以及todolist的删除功能
- vue实现简单表格组件
- vue-router 源码之实现一个简单的 vue-router
- Ionic1x实现简单的评论星级组件
- vue实现简单表格组件实例详解
- vue.js 组件实现简单分页效果
- iOS 一个简单的实现星级评分的方法
- Vue如何实现组件的源码解析
- Vuex: 实现同级组件的简单通信
- 使用Vue组件实现一个简单弹窗效果
- 原生JS实现-星级评分系统的简单实例
- vue实现简单评分效果
- 用vue写一个商城的上货组件(简单易懂版,50行js实现效果)