如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
本组件基于element-ui 的图标库（星星图标）
第一步：
vue + webpack + element-ui 框架
第二步：
创建Rate.vue文件，实现双向绑定分数
第三部：
使用组件
在app.vue中引入组件
组件
说明
代码
<Rate v-model='value' size="32px">
<span>{{value}} 分</span>
</Rate>
import Rate from './components/Rate'
<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>
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绑定
}
}
demo演示
蓝蓝 http://www.lanlanwork.com