2021-10-26 01:13:23 +08:00
|
|
|
::: title 基础使用
|
2021-10-19 22:28:44 +08:00
|
|
|
:::
|
|
|
|
|
2021-10-04 08:06:19 +08:00
|
|
|
::: demo
|
|
|
|
|
|
|
|
<template>
|
2021-11-07 15:55:08 +08:00
|
|
|
<lay-rate v-model="all1"></lay-rate>
|
2021-10-04 08:06:19 +08:00
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
2021-10-12 11:30:07 +08:00
|
|
|
import { ref } from 'vue';
|
2021-10-04 08:06:19 +08:00
|
|
|
|
|
|
|
export default {
|
|
|
|
setup() {
|
|
|
|
|
2021-11-07 15:55:08 +08:00
|
|
|
const all1 = ref(0)
|
|
|
|
|
2021-10-04 08:06:19 +08:00
|
|
|
return {
|
2021-11-07 15:55:08 +08:00
|
|
|
all1
|
2021-10-04 08:06:19 +08:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
|
2021-10-08 15:42:14 +08:00
|
|
|
:::
|
|
|
|
|
2021-12-08 00:16:59 +08:00
|
|
|
::: title 显示文字
|
2021-10-19 22:28:44 +08:00
|
|
|
:::
|
|
|
|
|
2021-10-08 15:42:14 +08:00
|
|
|
::: demo
|
|
|
|
|
|
|
|
<template>
|
2021-12-08 00:16:59 +08:00
|
|
|
<lay-rate v-model="all" :text="true"></lay-rate>
|
2021-10-08 15:42:14 +08:00
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
import { ref } from 'vue'
|
|
|
|
|
|
|
|
export default {
|
|
|
|
setup() {
|
|
|
|
|
|
|
|
const all = ref(4)
|
|
|
|
|
|
|
|
return {
|
|
|
|
all
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
|
|
|
|
:::
|
|
|
|
|
2021-12-08 00:16:59 +08:00
|
|
|
::: 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>
|
|
|
|
|
|
|
|
:::
|
|
|
|
|
2021-10-26 01:13:23 +08:00
|
|
|
::: title 指定长度
|
2021-10-19 22:28:44 +08:00
|
|
|
:::
|
|
|
|
|
2021-10-08 15:42:14 +08:00
|
|
|
::: demo
|
|
|
|
|
|
|
|
<template>
|
2021-10-27 02:04:47 +08:00
|
|
|
<lay-rate v-model="all2" :length="length"></lay-rate>
|
2021-10-08 15:42:14 +08:00
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
2021-10-12 11:30:07 +08:00
|
|
|
import { ref } from 'vue';
|
2021-10-08 15:42:14 +08:00
|
|
|
|
|
|
|
export default {
|
|
|
|
setup() {
|
|
|
|
|
2021-10-12 11:30:07 +08:00
|
|
|
const all2 = ref(4);
|
2021-10-15 14:27:58 +08:00
|
|
|
const length = ref(10)
|
2021-10-08 15:42:14 +08:00
|
|
|
|
|
|
|
return {
|
2021-10-15 14:27:58 +08:00
|
|
|
all2,
|
|
|
|
length
|
2021-10-08 15:42:14 +08:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
|
2021-10-11 02:40:27 +08:00
|
|
|
:::
|
|
|
|
|
2021-12-08 00:16:59 +08:00
|
|
|
::: 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>
|
|
|
|
|
|
|
|
:::
|
|
|
|
|
2021-10-27 02:04:47 +08:00
|
|
|
::: 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>
|
|
|
|
|
|
|
|
:::
|
|
|
|
|
2021-10-26 01:13:23 +08:00
|
|
|
::: title 评分属性
|
2021-10-13 02:32:29 +08:00
|
|
|
:::
|
2021-10-12 18:00:09 +08:00
|
|
|
|
2021-11-07 15:55:08 +08:00
|
|
|
::: table
|
|
|
|
|
2021-12-08 00:16:59 +08:00
|
|
|
| 属性 | 描述 | 类型 | 默认值 |
|
|
|
|
| -------- | -------- | ------ | ------ |
|
|
|
|
| v-model | 评分值 | number | 0 |
|
|
|
|
| length | 评分长度 | number | 5 |
|
|
|
|
| readonly | 只读模式 | boolean | false |
|
|
|
|
| theme | 只读模式 | string | #ffb800 |
|
|
|
|
| half | 设定组件是否可以选择半星 |boolean | false |
|
|
|
|
| text | 是否显示评分对应的内容 | boolean | false |
|
|
|
|
| is-block | 评分是否显示为快元素 | boolean | false |
|
|
|
|
|
|
|
|
:::
|
|
|
|
|
|
|
|
::: title 插槽
|
|
|
|
:::
|
|
|
|
|
|
|
|
::: table
|
|
|
|
|
|
|
|
| 属性 | 描述 | 参数 |
|
|
|
|
| -------- | -------- | ------ |
|
|
|
|
| -- | 默认插槽,自定义内容时可以使用为 | { value } |
|
|
|
|
|
|
|
|
:::
|
|
|
|
|
|
|
|
::: title 事件
|
|
|
|
:::
|
|
|
|
|
|
|
|
::: table
|
|
|
|
|
|
|
|
| 属性 | 描述 | 回调参数 |
|
2021-11-01 01:02:21 +08:00
|
|
|
| -------- | -------- | ------ |
|
2021-12-08 00:16:59 +08:00
|
|
|
| select | 选中之后触发事件 | (value: number) |
|
2021-11-07 15:55:08 +08:00
|
|
|
|
2021-11-07 15:56:24 +08:00
|
|
|
:::
|