4.7 KiB
4.7 KiB
::: anchor :::
::: title 基础使用 :::
::: demo 使用 lay-rate
标签, 创建评分组件
:::
::: title 显示文字 :::
::: demo
:::
::: title 半星效果 :::
::: demo
:::
::: title 自定义内容 :::
::: demo
{{customText(value)}} {{value}}:::
::: title 指定长度 :::
::: demo
:::
::: title 触发事件 :::
::: demo
F12 打开调试工具 -> console 控制面板进行查看
:::
::: title 只读模式 :::
::: demo
:::
::: title 定义主题 :::
::: demo
:::
::: title 自定义图标 :::
::: demo
:::
::: title Rate 属性 :::
::: table
属性 | 描述 | 类型 | 默认值 |
---|---|---|---|
v-model | 评分值 | number |
0 |
length | 评分长度 | number |
5 |
readonly | 只读模式 | boolean |
false |
theme | 主题颜色 | string |
#ffb800 |
half | 设定组件是否可以选择半星 | boolean |
false |
text | 是否显示评分对应的内容 | boolean |
false |
is-block | 评分是否显示为快元素 | boolean |
false |
icons | 评分使用图标class ;["空心", "实心"] /["空心", "半心", "实心"] |
string[] |
星型 |
:::
::: title Rate 插槽 :::
::: table
属性 | 描述 | 参数 |
---|---|---|
-- | 默认插槽,自定义内容时可以使用为 | { value } |
:::
::: title Rate 事件 :::
::: table
属性 | 描述 | 回调参数 |
---|---|---|
select | 选中之后触发事件 | (value: number) |
:::
::: comment :::
::: previousNext rate :::