Vue Stars
made with Vuejs

简介及使用教程

vue-stars是一个高度可定制的评级控制组件,用于显示或输入“等级”(例如星星)。它支持“ v-model”绑定,非常可定制,并且在MIT许可下使用。

安装

Npm

npm i vue-stars

Yarn

yarn add vue-stars

使用

引入并注册

import { VueStars } from "vue-stars"
Vue.component("vue-stars", VueStars)

使用

<vue-stars
name="demo"
:active-color="#ffdd00"
:inactive-color="#999999"
:shadow-color="#ffff00"
:hover-color="#dddd00"
:max="5"
:value="3"
:readonly="false"
:char="★"
:inactive-char=""
:class=""
/>

image.png

属性

名称 类型 默认值 简介
name string rating 基础表单字段的名称,页面内必须唯一。若有多个组件该字段必填。
readonly bool false 类似原生的输入控件,若为true,用户将不能改变组件的值,Hover动画也会无效
max integer 5 最多显示的星星数(或设置的其它字符)
char string 这是每个评级使用的字符,Unicode字符。如果是单字符,则重复显示。如果是多字符则按顺序显示,显示字符长度大于设置的char长度时,重复最后一个字符。 如果使用如FontAwesome一类的icon库,需要这样使用:char="''\uF005"
inactiveChar string 剩余未激活时显示的字符。 要求同char
activeColor #ffdd00 激活值的颜色
inactiveColor #999999 未激活值的颜色
hoverColor #ffff00 悬停时的颜色
shadowColor #dddd00 激活值的阴影颜色

Slot

尽管内置的charinactiveChar可以用于大多数场景,但你也可以使用具名插槽(named slot)适应更复杂的场景。如需要使用svgimg标签已经其他多字符串样式的场景。

  • activeLabel 激活状态显示的字符插槽,slot-scope="props"属性必填。
  • inactiveLabel 非激活状态显示的字符插槽,slot-scope="props"属性必填。

image.png

<vue-stars name="slotDemo" :max="10" :value="3"/> 
  <img slot="activeLabel" src="./assets/logo.png"> 
  <span slot="inactiveLabel">🙁</span> 
</vue-stars> 

示例

image.png

image.png

作者

Richard Tallent

@richardtallent

相关项目

这是一个基于SVG的星级评分组件。
这是一个基于Vue.js简单的开关组件。
这是一个基于Vue的emoji图标反馈组件。
这是一个具有自动完成功能的简单下拉组件。
这是一个可以显示行内Markdown的Quasar UI应用扩展组件。
这是一个用于格式化和验证电话号码输入框组件。