Question

import { Rater } from 'feui';
components: {
  [Rater.name]: Rater
}

代码演示

基础用法

<fe-cell title="设置默认" inline-desc="总共5星如果不改变的话">
  <fe-rater v-model="data3" slot="value"></fe-rater>
</fe-cell>

自定义颜色

<fe-cell title="自定义颜色">
  <fe-rater v-model="data2" slot="value" :max="6" active-color="red"></fe-rater>
</fe-cell>

不可用状态

<fe-cell title="不可用状态">
  <fe-rater v-model="data4" slot="value" disabled></fe-rater>
</fe-cell>

小数形式

<fe-cell title="小数形式">
  <fe-rater value='3.5' slot="value" active-color="red" disabled></fe-rater>
</fe-cell>

自定义大小

<fe-cell title="自定义大小15px">
  <fe-rater v-model="data42" slot="value" active-color="red" :font-size="15"></fe-rater>
</fe-cell>

自定义小图标

<fe-group title="自定义图标">
  <fe-cell title="小心心">
    <fe-rater v-model="data4" slot="value" star="♡" active-color="red" :margin="15"></fe-rater>
  </fe-cell>
  <fe-cell title="发光的太阳">
    <fe-rater v-model="data5" slot="value" star="☼" active-color="#4a90e2" :margin="4"></fe-rater>
  </fe-cell>
  <fe-cell title="笑脸">
    <fe-rater v-model="data5" slot="value" star="☻" active-color="#4a90e2" :margin="4"></fe-rater>
  </fe-cell>
  <fe-cell title="小星星">
    <fe-rater v-model="data5" slot="value" star="✩" active-color="red" :margin="4"></fe-rater>
  </fe-cell>
  <fe-cell title="囧">
    <fe-rater v-model="data5" slot="value" star="囧" active-color="#4a90e2" :margin="4"></fe-rater>
  </fe-cell>
  <fe-cell title="诺">
    <fe-rater v-model="data5" slot="value" star="诺" active-color="#FD6E0E" :margin="4"></fe-rater>
  </fe-cell>
</fe-group>

API

参数	说明	类型	默认值	可选值
value	显示结果用v-model绑定	Number	0	-
disabled	按钮是否可用	Boolean	false	true,false
max	最多可选的数量	Number	5	-
star	显示的字符	String	★	-
active-color	选中时的颜色	String	#4a90e2	可用是16进制颜色值也可以是颜色名称
margin	间距	Number	2	-
font-size	字体大小	Number	25	-
-	-	-	-	-