dk-plus

简体中文

English

简体中文

English

Appearance

目录

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自定义 iconstring-IconAndroid
iconSize图标大小string number-20
readonly是否禁用booleantrue false-

事件 ​

事件名称说明回调参数
change绑定值变化时触发() => number

Contributors ​