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

::: anchor
:::

::: title 基本介绍
:::

::: describe 在电商和 O2O 平台尤为常见，常用于对商家进行服务满意度评价。
:::

::: title 基础使用
:::

::: demo 使用 `lay-rate` 标签, 创建评分组件

<template>
  <lay-rate v-model="all1"></lay-rate>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {

     const all1 = ref(0)

    return {
      all1
    }
  }
}
</script>

:::

::: title 显示文字
:::

::: demo

<template>
  <lay-rate v-model="all" :text="true"></lay-rate>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {

    const all = ref(4)

    return {
      all
    }
  }
}
</script>

:::

::: title 半星效果
:::

::: demo

<template>
    <lay-rate v-model="half1" :half="true" :is-block="true"></lay-rate>
    <lay-rate v-model="half2" :half="true" :text="true" :is-block="true"></lay-rate>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {

     const half1 = ref(0.5)
     const half2 = ref(0)


    return {
      half1,
      half2
    }
  }
}
</script>

:::

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

::: demo

<template>
  <lay-rate v-model="val" :text="true" :is-block="true">
    <template v-slot:default="{value}">{{customText(value)}}</template>
  </lay-rate>
  <lay-rate v-model="val2" :text="true" :is-block="true">
    <template v-slot:default="{value}">{{value}}</template>
  </lay-rate>
</template>

<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

<template>
  <lay-rate v-model="all2" :length="length"></lay-rate>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {

    const all2 = ref(4);
    const length = ref(10)

    return {
      all2,
      length
    }
  }
}
</script>

:::

::: title 触发事件
:::

::: demo

<template>
  <lay-rate v-model="val" @select="selectRate"></lay-rate>
  <div>F12 打开调试工具 -> console 控制面板进行查看</div>
</template>

<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

<template>
  <lay-rate v-model="all3" readonly="true"></lay-rate>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {

    const all3 = ref(4)

    return {
      all3
    }
  }
}
</script>

:::

::: title 定义主题
:::

::: demo

<template>
  <lay-rate v-model="all4" theme="#FF8000"></lay-rate><br>
  <lay-rate v-model="all4" theme="#009688"></lay-rate><br>
  <lay-rate v-model="all4" theme="#1E9FFF"></lay-rate><br>
  <lay-rate v-model="all4" theme="#2F4056"></lay-rate><br>
  <lay-rate v-model="all4" theme="#FE0000"></lay-rate><br>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {

    const all4 = ref(4)

    return {
      all4
    }
  }
}
</script>

:::

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

::: demo

<template>
  <lay-rate v-model="icons" :icons="['layui-icon-heart', 'layui-icon-heart-fill']" theme="#FE0000"></lay-rate><br>
  <lay-rate v-model="halfIcons" :icons="['layui-icon-circle', 'layui-icon-radio', 'layui-icon-circle-dot']" half text></lay-rate><br>
</template>

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