rate 评分
用于评分或打星
1.基本使用
通过 v-model
绑定一个值
vue
<template>
<dk-rate v-model="checked"></dk-rate>
</template>
<script>
import { defineComponent, reactive, toRefs } from 'vue'
export default defineComponent({
name: 'RateComp',
setup() {
const data = reactive({
checked: 1
})
return {
...toRefs(data)
}
}
})
</script>
展开
2.自定义颜色
select-color
属性可以配置星星选中时的颜色,no-select-color
属性可以配置星星未选中时的颜色
vue
<template>
<dk-rate
v-model="checked1"
:select-color="'red'"
:no-select-color="'#26BF8C'">
</dk-rate>
</template>
<script>
import { defineComponent, reactive, toRefs } from 'vue'
export default defineComponent({
name: 'RateComp',
setup() {
const data = reactive({
checked1: 2
})
return {
...toRefs(data)
}
}
})
</script>
展开
3.自定义 icon
icon
属性可以自定义 icon
(目前只支持ICON图标组件库内图标)
vue
<template>
<dk-rate
v-model="checked1"
:icon="'IconAndroid'"
>
</dk-rate>
</template>
<script>
import { defineComponent, reactive, toRefs } from 'vue'
export default defineComponent({
name: 'RateComp',
setup() {
const data = reactive({
checked1: 2
})
return {
...toRefs(data)
}
}
})
</script>
展开
4.图标大小
iconSize
属性可以定义ICON 大小
vue
<template>
<dk-rate
v-model="checked2"
:iconSize="35"
:icon="'IconAndroid'"
>
</dk-rate>
</template>
<script>
import { defineComponent, reactive, toRefs } from 'vue'
export default defineComponent({
name: 'RateComp',
setup() {
const data = reactive({
checked2: 2
})
return {
...toRefs(data)
}
}
})
</script>
展开
5.是否禁用
readonly
评分是否禁用 true | false
vue
<template>
<dk-rate
v-model="checked3"
:readonly='true'
>
</dk-rate>
</template>
<script>
import { defineComponent, reactive, toRefs } from 'vue'
export default defineComponent({
name: 'RateComp',
setup() {
const data = reactive({
checked3: 2
})
return {
...toRefs(data)
}
}
})
</script>
展开
6.监听事件
onchange
监听事件
vue
<template>
<dk-rate
v-model="checked4"
:onchange="setFunctionProps"
>
</dk-rate>
</template>
<script>
import { defineComponent, reactive, toRefs } from 'vue'
export default defineComponent({
name: 'RateComp',
setup() {
const data = reactive({
checked4: 2
})
const methods = reactive({
setFunctionProps(item) {
alert(item)
}
})
return {
...toRefs(data),
...toRefs(methods)
}
}
})
</script>
展开
属性
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
v-model | 绑定值 | string number | - | - |
select-color | 选定的颜色 | string | - | #fcc202 |
no-select-color | 没有选定的颜色 | string | - | #5E5E5E |
icon | 自定义 icon | string | - | IconAndroid |
iconSize | 图标大小 | string number | - | 20 |
readonly | 是否禁用 | boolean | true false | - |
事件
事件名称 | 说明 | 回调参数 |
---|---|---|
change | 绑定值变化时触发 | () => number |