layui/example/docs/zh-CN/components/rate.md

::: anchor :::

::: title 基础使用 :::

::: demo

<script> import { ref } from 'vue'; export default { setup() { const all1 = ref(0) return { all1 } } } </script>

:::

::: title 显示文字 :::

::: demo

<script> import { ref } from 'vue' export default { setup() { const all = ref(4) return { all } } } </script>

:::

::: title 半星效果 :::

::: demo

<script> import { ref } from 'vue'; export default { setup() { const half1 = ref(0.5) const half2 = ref(0) return { half1, half2 } } } </script>

:::

::: title 自定义内容 :::

::: demo

{{customText(value)}} {{value}} <script> import { ref } from 'vue'; export default { setup() { const val = ref(1) const val2 = ref(1) const arrs = { '1': '极差', '2': '差', '3': '中等', '4': '好', '5': '极好' }; const customText = function(val){ return arrs[val]; } return { val, val2 } } } </script>

:::

::: title 指定长度 :::

::: demo

<script> import { ref } from 'vue'; export default { setup() { const all2 = ref(4); const length = ref(10) return { all2, length } } } </script>

:::

::: title 触发事件 :::

::: demo

F12 打开调试工具 -> console 控制面板进行查看

<script> import { ref } from 'vue'; export default { setup() { const val = ref(0); const selectRate = function(value){ console.log('selectRate - value:', value) } return { val } } } </script>

:::

::: title 只读模式 :::

::: demo

<script> import { ref } from 'vue'; export default { setup() { const all3 = ref(4) return { all3 } } } </script>

:::

::: title 定义主题 :::

::: demo

<script> import { ref } from 'vue'; export default { setup() { const all4 = ref(4) return { all4 } } } </script>

:::

::: title 自定义图标 :::

::: demo

<script> import { ref } from 'vue'; export default { setup() { const icons = ref(4) const halfIcons = ref(0.5) return { icons, halfIcons } } } </script>

:::

::: 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 :::