Slider 滑动输入条

滑动型输入器，展示当前值和可选范围。

代码演示

Default value

Customized initial value

Hide Tooltip

Format Tooltip

Disabled

Breakpoints not displayed

Breakpoints displayed

带有输入框的滑块

带有输入框的滑块

带有输入框的滑块

位置

垂直模式

范围选择

显示标记

0°C

8°C

37°C

50%

<template>
  <div>
    <v-formly-v3 ref="form" v-model="formData" :meta="meta" />
    <div class="btns">
      <el-button type="primary" @click="submit"> 提交 </el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, toRaw, unref } from "vue";
import type { CSSProperties } from "vue";
import type VFormly from "@/element-plus/ElFormly.vue";

const form = ref<null | InstanceType<typeof VFormly>>(null);
const formData = ref({});

interface Mark {
  style: CSSProperties;
  label: string;
}

type Marks = Record<number, Mark | string>;

const marks = reactive<Marks>({
  0: "0°C",
  8: "8°C",
  37: "37°C",
  50: {
    style: {
      color: "#1989FA",
    },
    label: "50%",
  },
});

const meta = {
  properties: {
    count1_1: {
      type: "number",
      title: "Default value",
      ui: {
        component: "slider",
        change: (val: any) => console.log("change", val),
        input: (val: any) => console.log("input", val),
      },
    },
    count1_2: {
      type: "number",
      title: "Customized initial value",
      default: 10,
      ui: {
        component: "slider",
      },
    },
    count1_3: {
      type: "number",
      title: "Hide Tooltip",
      ui: {
        component: "slider",
        showTooltip: false,
      },
    },
    count1_4: {
      type: "number",
      title: "Format Tooltip",
      ui: {
        component: "slider",
        formatTooltip: (val: number) => `${val}%`,
      },
    },
    count1_5: {
      type: "number",
      title: "Disabled",
      readOnly: true,
      default: 50,
      ui: {
        component: "slider",
      },
    },
    count2_1: {
      type: "number",
      title: "Breakpoints not displayed",
      ui: {
        component: "slider",
      },
      multipleOf: 10,
    },
    count2_2: {
      type: "number",
      title: "Breakpoints displayed",
      ui: {
        component: "slider",
        showStops: true,
      },
      multipleOf: 10,
    },
    count3_1: {
      type: "number",
      title: "带有输入框的滑块",
      ui: {
        component: "slider",
        showInput: true,
        size: "large",
      },
    },
    count3_2: {
      type: "number",
      title: "带有输入框的滑块",
      ui: {
        component: "slider",
        showInput: true,
      },
    },
    count3_3: {
      type: "number",
      title: "带有输入框的滑块",
      ui: {
        component: "slider",
        showInput: true,
        size: "small",
      },
    },
    count4: {
      type: "number",
      title: "位置",
      ui: {
        component: "slider",
        placement: "right",
      },
    },
    vertical: {
      type: "number",
      title: "垂直模式",
      ui: {
        component: "slider",
        vertical: true,
        height: "200px",
      },
    },
    range1: {
      type: "number",
      title: "范围选择",
      ui: {
        component: "slider",
        range: true,
        showStops: true,
      },
      maximum: 10,
      default: [4, 8],
    },
    range2: {
      type: "number",
      title: "显示标记",
      ui: {
        component: "slider",
        range: true,
        marks: marks,
      },
      default: [30, 60],
    },
  },
};

async function submit() {
  const valid = await form.value!.validate();
  if (valid) {
    console.log(toRaw(unref(formData)));
  }
}
</script>

显示复制复制

API

我们只列出属性中不一致的或新添加的，一致的地方请参考 具体组件库 文档

meta 属性

成员	说明	类型	默认值
:minimum	最小值	number	0
:maximum	最大值	number	100
:multipleOf	倍数	number	1
:readOnly	禁用状态	boolean	-

meta.ui 属性(antdv)

成员	说明	类型	默认值
:slotNameOfMark	自定义刻度标记	v-slot:mark	{ point: number, label: any }
@change	当Slider的值发生改变时，会触发change事件，并把改变后的值作为参数传入。	function(value: number)	-
@afterChange	与mouseup触发时机一致，把当前值作为参数传入。	function(value: number)	-

meta.ui 属性(element)

成员	说明	类型	默认值
@change	值改变时触发（使用鼠标拖曳时，只在松开鼠标后触发）	function(value: number)	-
@input	数据改变时触发（使用鼠标拖曳时，活动过程实时触发）	function(value: number)	-

注意

multipleOf如果小于1会出现 ajv 校验报错的情况，解决方案可参考 multipleofprecision