layui/example/docs/zh-CN/components/rate.md
2022-01-12 14:19:06 +08:00

316 lines
4.6 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

::: anchor
:::
::: title 基础使用
:::
::: demo
<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 评分属性
:::
::: 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 插槽
:::
::: table
| 属性 | 描述 | 参数 |
| -------- | -------- | ------ |
| -- | 默认插槽,自定义内容时可以使用为 | { value } |
:::
::: title 事件
:::
::: table
| 属性 | 描述 | 回调参数 |
| -------- | -------- | ------ |
| select | 选中之后触发事件 | (value: number) |
:::
::: comment
:::
::: previousNext rate
:::