VUE 学习总结之简单的Rate评分组件

2018-7-9 释然 前端技术资源

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

说明

本组件基于element-ui 的图标库(星星图标)

第一步:

vue + webpack + element-ui 框架

第二步:

创建Rate.vue文件,实现双向绑定分数

第三部:

使用组件

代码

在app.vue中引入组件


	
  1. <Rate v-model='value' size="32px">
  2. <span>{{value}} 分</span>
  3. </Rate>
import Rate from './components/Rate'

组件


	
  1. <template>
  2. <div class="Rating" :value='value'>
  3. <ul class="Rating-list">
  4. <li v-for="s in 5" @click="changeRate(s)">
  5. <i :class="s <= star ? 'el-icon-star-on':'el-icon-star-off'" :style='style'></i>
  6. </li>
  7. </ul>
  8. <slot></slot> <!--显示用户自定义内容-->
  9. </div>
  10. </template>


	
  1. props: {
  2. size: { //父组件传值设置字体大小
  3. type: String,
  4. default: '16px'
  5. },
  6. value: { //绑定value,与$emit实现双向绑定
  7. type:Number,
  8. default:0
  9. }
  10. },
  11. data() {
  12. return {
  13. star: this.value, // 初始化
  14. style: {
  15. fontSize: this.size //通过prop传值设置星星字体大小
  16. }
  17. }
  18. },
  19. methods: {
  20. changeRate(s) {
  21. this.star = s //更新当前星星数量
  22. this.$emit('input', s); //将当前星星数量s与v-model绑定
  23. }
  24. }

demo演示



标签: VUE 学习总结之简单的Rate评分组件


Powered by emlog 京ICP备12006971号-1 sitemap