Rate

Rate 是对 Vant 评分组件的 Formily 适配，适配了阅读态，没有对Vant组件的封装做任何修改。

基础使用

vue

<script setup lang="ts">
import { createForm } from '@silver-formily/core'
import { Form, FormButtonGroup, FormItem, Rate, Submit } from '@silver-formily/vant'
import { Field } from '@silver-formily/vue'
import { showDemoResult } from '../shared'

const form = createForm({
  values: {
    score: 3,
  },
})
</script>

<template>
  <Form :form="form">
    <Field
      name="score"
      title="评分"
      :decorator="[FormItem]"
      :component="[Rate]"
    />

    <FormButtonGroup>
      <Submit @submit="showDemoResult">
        查看结果
      </Submit>
    </FormButtonGroup>
  </Form>
</template>

自定义图标

通过 icon 设置选中图标，voidIcon 设置未选中图标。

vue

<script setup lang="ts">
import { createForm } from '@silver-formily/core'
import { Form, FormButtonGroup, FormItem, Rate, Submit } from '@silver-formily/vant'
import { Field } from '@silver-formily/vue'
import { showDemoResult } from '../shared'

const form = createForm({
  values: {
    score: 3,
  },
})
</script>

<template>
  <Form :form="form">
    <Field
      name="score"
      title="推荐指数"
      :decorator="[FormItem]"
      :component="[
        Rate,
        {
          icon: 'like',
          voidIcon: 'like-o',
        },
      ]"
    />

    <FormButtonGroup>
      <Submit @submit="showDemoResult">
        查看结果
      </Submit>
    </FormButtonGroup>
  </Form>
</template>

自定义样式

通过 size、color、voidColor 等属性调整评分组件样式。

vue

<script setup lang="ts">
import { createForm } from '@silver-formily/core'
import { Form, FormButtonGroup, FormItem, Rate, Submit } from '@silver-formily/vant'
import { Field } from '@silver-formily/vue'
import { showDemoResult } from '../shared'

const form = createForm({
  values: {
    score: 3,
  },
})
</script>

<template>
  <Form :form="form">
    <Field
      name="score"
      title="满意度"
      :decorator="[FormItem]"
      :component="[
        Rate,
        {
          color: '#ffd21e',
          size: 25,
          voidColor: '#eee',
          voidIcon: 'star',
        },
      ]"
    />

    <FormButtonGroup>
      <Submit @submit="showDemoResult">
        查看结果
      </Submit>
    </FormButtonGroup>
  </Form>
</template>

半星

设置 allowHalf 后可以选中半星。

vue

<script setup lang="ts">
import { createForm } from '@silver-formily/core'
import { Form, FormButtonGroup, FormItem, Rate, Submit } from '@silver-formily/vant'
import { Field } from '@silver-formily/vue'
import { showDemoResult } from '../shared'

const form = createForm({
  values: {
    score: 2.5,
  },
})
</script>

<template>
  <Form :form="form">
    <Field
      name="score"
      title="半星评分"
      :decorator="[FormItem]"
      :component="[Rate, { allowHalf: true }]"
    />

    <FormButtonGroup>
      <Submit @submit="showDemoResult">
        查看结果
      </Submit>
    </FormButtonGroup>
  </Form>
</template>

自定义数量

通过 count 设置评分总数。

vue

<script setup lang="ts">
import { createForm } from '@silver-formily/core'
import { Form, FormButtonGroup, FormItem, Rate, Submit } from '@silver-formily/vant'
import { Field } from '@silver-formily/vue'
import { showDemoResult } from '../shared'

const form = createForm({
  values: {
    score: 4,
  },
})
</script>

<template>
  <Form :form="form">
    <Field
      name="score"
      title="六星评分"
      :decorator="[FormItem]"
      :component="[Rate, { count: 6 }]"
    />

    <FormButtonGroup>
      <Submit @submit="showDemoResult">
        查看结果
      </Submit>
    </FormButtonGroup>
  </Form>
</template>

可清空

设置 clearable 后，再次点击相同的值可以将评分重置为 0。

vue

<script setup lang="ts">
import { createForm } from '@silver-formily/core'
import { Form, FormButtonGroup, FormItem, Rate, Submit } from '@silver-formily/vant'
import { Field } from '@silver-formily/vue'
import { showDemoResult } from '../shared'

const form = createForm({
  values: {
    score: 3,
  },
})
</script>

<template>
  <Form :form="form">
    <Field
      name="score"
      title="可清空评分"
      :decorator="[FormItem]"
      :component="[Rate, { clearable: true }]"
    />

    <FormButtonGroup>
      <Submit @submit="showDemoResult">
        查看结果
      </Submit>
    </FormButtonGroup>
  </Form>
</template>

禁用状态

通过 disabled 禁用评分。

vue

<script setup lang="ts">
import { createForm } from '@silver-formily/core'
import { Form, FormButtonGroup, FormItem, Rate, Submit } from '@silver-formily/vant'
import { Field } from '@silver-formily/vue'
import { showDemoResult } from '../shared'

const form = createForm({
  values: {
    score: 3,
  },
})
</script>

<template>
  <Form :form="form">
    <Field
      name="score"
      title="禁用评分"
      :decorator="[FormItem]"
      :component="[Rate, { disabled: true }]"
    />

    <FormButtonGroup>
      <Submit @submit="showDemoResult">
        查看结果
      </Submit>
    </FormButtonGroup>
  </Form>
</template>

只读状态

通过 readonly 将评分设置为只读。

vue

<script setup lang="ts">
import { createForm } from '@silver-formily/core'
import { Form, FormButtonGroup, FormItem, Rate, Submit } from '@silver-formily/vant'
import { Field } from '@silver-formily/vue'
import { showDemoResult } from '../shared'

const form = createForm({
  values: {
    score: 3,
  },
})
</script>

<template>
  <Form :form="form">
    <Field
      name="score"
      title="只读评分"
      :read-only="true"
      :decorator="[FormItem]"
      :component="[Rate]"
    />

    <FormButtonGroup>
      <Submit @submit="showDemoResult">
        查看结果
      </Submit>
    </FormButtonGroup>
  </Form>
</template>

只读状态显示小数

设置 readonly 和 allowHalf 后，评分组件可以展示任意小数结果。

vue

<script setup lang="ts">
import { createForm } from '@silver-formily/core'
import { Form, FormButtonGroup, FormItem, Rate, Submit } from '@silver-formily/vant'
import { Field } from '@silver-formily/vue'
import { showDemoResult } from '../shared'

const form = createForm({
  values: {
    score: 3.3,
  },
})
</script>

<template>
  <Form :form="form">
    <Field
      name="score"
      title="小数只读评分"
      :decorator="[FormItem]"
      :component="[Rate, { allowHalf: true, readonly: true }]"
    />

    <FormButtonGroup>
      <Submit @submit="showDemoResult">
        查看结果
      </Submit>
    </FormButtonGroup>
  </Form>
</template>

API

API配置参考 Vant Rate 官方文档。

Rate ​

基础使用 ​

自定义图标 ​

自定义样式 ​

半星 ​

自定义数量 ​

可清空 ​

禁用状态 ​

只读状态 ​

只读状态显示小数 ​

API ​