Silver Formily Vant1.0.1

Appearance

Mobile Preview Open
Open mobile preview

Slider ​

Slider 是对 Vant 滑块组件的 Formily 适配。

使用建议

单值场景适合表示进度、音量、亮度等连续数值；区间场景建议开启 range，直接绑定 [min, max] 结构。

基础使用 ​

通过 modelValue 绑定当前滑块值。

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

const form = createForm({
  values: {
    progress: 50,
  },
})
</script>

<template>
  <Form :form="form">
    <Field
      name="progress"
      title="基础滑块"
      :decorator="[FormItem]"
      :component="[Slider]"
    />

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

双滑块 ​

设置 range 后，字段值会切换为 [number, number]。

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

const form = createForm({
  values: {
    progressRange: [20, 60],
  },
})
</script>

<template>
  <Form :form="form">
    <Field
      name="progressRange"
      title="双滑块"
      :decorator="[FormItem]"
      :component="[Slider, { range: true }]"
    />

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

指定选择范围 ​

通过 min 和 max 可以约束滑块的可选区间。

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

const form = createForm({
  values: {
    temperature: 0,
  },
})
</script>

<template>
  <Form :form="form">
    <Field
      name="temperature"
      title="指定选择范围"
      :decorator="[FormItem]"
      :component="[Slider, { min: -50, max: 50 }]"
    />

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

禁用 ​

通过 disabled 禁用滑块交互。

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

const form = createForm({
  values: {
    progress: 50,
  },
})
</script>

<template>
  <Form :form="form">
    <Field
      name="progress"
      title="禁用滑块"
      :decorator="[FormItem]"
      :component="[Slider, { disabled: true }]"
    />

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

指定步长 ​

通过 step 控制每次变动的粒度。

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

const form = createForm({
  values: {
    progress: 50,
  },
})
</script>

<template>
  <Form :form="form">
    <Field
      name="progress"
      title="指定步长"
      :decorator="[FormItem]"
      :component="[Slider, { step: 10 }]"
    />

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

自定义样式 ​

通过 barHeight、activeColor 等属性调整滑块外观。

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

const form = createForm({
  values: {
    progress: 50,
  },
})
</script>

<template>
  <Form :form="form">
    <Field
      name="progress"
      title="自定义样式"
      :decorator="[FormItem]"
      :component="[Slider, { barHeight: '4px', activeColor: '#ee0a24' }]"
    />

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

自定义按钮 ​

通过 button 插槽自定义滑块按钮内容。

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

const form = createForm({
  values: {
    progress: 50,
  },
})
</script>

<template>
  <Form :form="form">
    <Field
      name="progress"
      title="自定义按钮"
      :decorator="[FormItem]"
      :component="[Slider]"
    >
      <template #button="{ value }">
        <div class="custom-button">
          {{ value }}
        </div>
      </template>
    </Field>

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

<style scoped>
.custom-button {
  width: 26px;
  color: #fff;
  font-size: 10px;
  line-height: 18px;
  text-align: center;
  background-color: var(--van-primary-color);
  border-radius: 999px;
}
</style>

垂直方向 ​

设置 vertical 属性后，滑块会按父元素高度垂直展示。

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

const form = createForm({
  values: {
    progress: 50,
    progressRange: [20, 60],
  },
})
</script>

<template>
  <Form :form="form">
    <div class="slider-vertical-panel">
      <div class="slider-vertical-item">
        <div class="slider-vertical-label">
          单滑块
        </div>
        <div class="slider-vertical-field">
          <Field
            name="progress"
            :component="[Slider, { vertical: true }]"
          />
        </div>
      </div>

      <div class="slider-vertical-item">
        <div class="slider-vertical-label">
          双滑块
        </div>
        <div class="slider-vertical-field">
          <Field
            name="progressRange"
            :component="[Slider, { range: true, vertical: true }]"
          />
        </div>
      </div>
    </div>

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

<style scoped>
.slider-vertical-panel {
  display: flex;
  gap: 40px;
  align-items: flex-end;
  justify-content: center;
  min-height: 180px;
  padding: 16px 0 8px;
}

.slider-vertical-item {
  display: grid;
  gap: 12px;
  justify-items: center;
}

.slider-vertical-label {
  font-size: 12px;
  color: var(--van-text-color-2);
}

.slider-vertical-field {
  height: 150px;
}

.slider-vertical-field :deep(.van-slider) {
  height: 100%;
}
</style>

只读状态 ​

这是 Formily 封装额外补充的示例，支持 readonly 和 readOnly 两种命名。

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

const form = createForm({
  values: {
    volume: 45,
  },
})
</script>

<template>
  <Form :form="form">
    <Field
      name="volume"
      title="只读音量"
      :read-only="true"
      :decorator="[FormItem]"
      :component="[Slider, { step: 5 }]"
    />

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

API ​

扩展属性 ​

属性名类型描述默认值
modelValuenumber | [number, number]Formily 字段值-
readOnlyboolean兼容命名，会自动映射到 readonly-

其余属性、默认值、事件、插槽可直接参考 Vant Slider 官方文档。