VUE 学习总结之简单的Rate评分组件
2018-07-14 15:16
435 查看
说明
本组件基于element-ui的图标库(星星图标)
第一步:
vue + webpack + element-ui框架
第二步:
创建Rate.vue文件,实现双向绑定分数
第三部:
使用组件
代码
在app.vue中引入组件
[code] <Rate v-model='value' size="32px"> <span>{{value}} 分</span> </Rate>
[code]import Rate from './components/Rate'
组件
[code]<template> <div class="Rating" :value='value'> <ul class="Rating-list"> <li v-for="s in 5" @click="changeRate(s)"> <i :class="s <= star ? 'el-icon-star-on':'el-icon-star-off'" :style='style'></i> </li> </ul> <slot></slot> <!--显示用户自定义内容--> </div> </template>
[code]props: { size: { //父组件传值设置字体大小 type: String, default: '16px' }, value: { //绑定value,与$emit实现双向绑定 type:Number, default:0 } }, data() { return { star: this.value, // 初始化 style: { fontSize: this.size //通过prop传值设置星星字体大小 } } }, methods: { changeRate(s) { this.star = s //更新当前星星数量 this.$emit('input', s); //将当前星星数量s与v-model绑定 } }
效果演示
阅读更多
相关文章推荐
- vue-cli学习总结 ——组件引入后报错
- Vue.js入门学习--父子组件的说明和简单通信(十)
- vue.js学习笔记(三)--父子组件通信总结
- Vue1.0学习总结(4)———Vue1.0自定义组件、Vue1.0组件之间的通信、slot的使用
- vue 通过下拉框组件学习vue中的父子通讯
- Vue2.0使用过程常见的一些问题总结学习
- vue3.0 CLI - 2.3 - 组件 home.vue 中学习指令和绑定
- Vue深度学习(6)- 组件
- 简单的vue日历组件
- 一周学习简单总结
- [Python] wxPython 编辑框组件学习总结 (原创)
- 函数知识学习和第一周简单总结
- vue学习总结
- Vue的路由功能(1)简单路由与vue-router的基础使用(同步/异步组件)
- vue学习中的一些总结
- C++学习框架 总结(简单步骤)
- 详解vue2.0组件通信各种情况总结与实例分析
- vue饿了么学习-第七篇(组件拆分)
- vue.js学习之递归组件
- Vue封装一个简单轻量的上传文件组件的示例