Slider滑块

基础用法

效果预览可直接操作下方示例

通过将type属性的值指定为slider

正在加载示例…

<template>
  <avue-form :option="option"></avue-form>
</template>

<script setup>
import { ref } from 'vue';

const option = ref({
  column: [
    {
      label: "普通滑块",
      prop: "slider",
      type: 'slider',
    },
    {
      label: "初始化值",
      prop: "slider",
      type: 'slider',
      value: 2
    },
    {
      label: "隐藏提示",
      prop: "slider",
      type: 'slider',
      showTooltip: false
    },
    {
      label: "格式化值",
      prop: "slider",
      type: 'slider',
      formatTooltip (val) {
        return '格式化的值' + val;
      }
    },
    {
      label: "禁用",
      prop: "slider",
      type: 'slider',
      disabled: true
    }
  ]
});
</script>

离散值

选项可以是离散的

效果预览可直接操作下方示例

改变step的值可以改变步长，通过设置showStops属性可以显示间断点

正在加载示例…

<template>
  <avue-form :option="option"></avue-form>
</template>

<script setup>
import { ref } from 'vue';

const option = ref({
  column: [
    {
      label: "滑块",
      prop: "slider",
      type: 'slider',
      step: 10,
      showStops: true
    },
    {
      label: "滑块",
      prop: "slider",
      type: 'slider',
      step: 10
    }
  ]
});
</script>

带有输入框

通过输入框设置精确数值

效果预览可直接操作下方示例

设置showInput属性会在右侧显示一个输入框

正在加载示例…

<template>
  <avue-form :option="option"></avue-form>
</template>

<script setup>
import { ref } from 'vue';

const option = ref({
  column: [
    {
      label: "滑块",
      prop: "slider",
      type: 'slider',
      showInput: true
    }
  ]
});
</script>

范围选择

支持选择某一数值范围

效果预览可直接操作下方示例

设置range即可开启范围选择，此时绑定值是一个数组，其元素分别为最小边界值和最大边界值

正在加载示例…

<template>
  <avue-form :option="option"></avue-form>
</template>

<script setup>
import { ref } from 'vue';

const option = ref({
  column: [
    {
      label: "滑块",
      prop: "slider",
      type: 'slider',
      showStops: true,
      max: 10,
      range: true,
      value: [4, 8]
    }
  ]
});
</script>

竖向模式

效果预览可直接操作下方示例

设置vertical可使 Slider 变成竖向模式，此时必须设置高度height属性

正在加载示例…

<template>
  <avue-form :option="option"></avue-form>
</template>

<script setup>
import { ref } from 'vue';

const option = ref({
  column: [
    {
      label: "滑块",
      prop: "slider",
      type: 'slider',
      vertical: true,
      height: 200
    }
  ]
});
</script>

展示标记

效果预览可直接操作下方示例

设置marks属性可以展示标记

正在加载示例…

<template>
  <avue-form :option="option"></avue-form>
</template>

<script setup>
import { ref } from 'vue';

const option = ref({
  column: [
    {
      label: "滑块",
      prop: "slider",
      type: 'slider',
      range: true,
      value: [30, 60],
      marks: {
        0: '0°C',
        8: '8°C',
        37: '37°C',
        50: {
          style: {
            color: '#1989FA'
          },
          label: '50%',
        }
      }
    }
  ]
});
</script>