dk-plusrate Rating
for rating or giving stars
1.basic usage
binding a value using 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.custom color
select-color property can configure the color of the stars when selected, and the no-select-color property can configure the color of the stars when not selected.
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.custom icon
icon property can be used to customize the icon (currently only supports icons from the ICON component library).
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.icon size
iconSize property can define the size of the 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.whether it is disabled
readonly determines whether the rating is disabled. It accepts true or false values.
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.listen to events
onchange listen to events
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>展开
property
| parameter | description | type | possible values | default value |
|---|---|---|---|---|
v-model | bound value | string number | - | - |
select-color | selected color | string | - | #fcc202 |
no-select-color | unselected color | string | - | #5E5E5E |
icon | custom icon | string | - | IconAndroid |
iconSize | icon size | string number | - | 20 |
readonly | whether disabled | boolean | true false | - |
event
| event name | description | callback parameters |
|---|---|---|
change | triggered when the bound value changes | () => number |
Contributors
