指南组件

Slider 滑块

用于在数值范围内进行选择的滑块组件

sKy
@skiyee
Source 
<script setup lang="ts">
import { ref } from 'vue'

const value = ref(50)
</script>

<template>
  <div class="p-4 w-full">
    <SkSlider v-model="value" />
  </div>
</template>

用法

Controlled 值

Prop类型默认值描述
v-modelnumber0设置滑块的值 (双向绑定)
<script setup lang="ts">
import { ref } from 'vue'

const value = ref(50)
</script>

<template>
  <div class="p-4 w-full">
    <SkSlider v-model="value" />
  </div>
</template>

ShowValue 显示数值

Prop类型默认值描述
showValuebooleanfalse设置是否显示当前数值
<script setup lang="ts">
import { ref } from 'vue'

const value1 = ref(30)
const value2 = ref(70)
</script>

<template>
  <div class="flex flex-col p-4 gap-4 w-full">
    <SkSlider v-model="value1" />
    <SkSlider v-model="value2" show-value />
  </div>
</template>

Min/Max 最小值/最大值

Prop类型默认值描述
minnumber0设置滑块最小能被滑到的值
maxnumber100设置滑块最大能被滑到的值
<script setup lang="ts">
import { ref } from 'vue'

const value1 = ref(5)
const value2 = ref(150)
const value3 = ref(-20)
</script>

<template>
  <div class="flex flex-col p-4 gap-4 w-full">
    <SkSlider v-model="value1" show-value :formatter="(val) => `范围 0-10 (${val})`" :min="0" :max="10" />
    <SkSlider v-model="value2" show-value :formatter="(val) => `范围 100-200 (${val})`" :min="100" :max="200" />
    <SkSlider v-model="value3" show-value :formatter="(val) => `范围 -50 到 50 (${val})`" :min="-50" :max="50" />
  </div>
</template>

Step 步长

Prop类型默认值描述
stepnumber1设置滑块滑动的数值步长
<script setup lang="ts">
import { ref } from 'vue'

const value1 = ref(50)
const value2 = ref(25)
const value3 = ref(5.5)
</script>

<template>
  <div class="flex flex-col p-4 gap-4 w-full">
    <SkSlider v-model="value1" show-value :formatter="(val) => `步长 1 (${val})`" :step="1" />
    <SkSlider v-model="value2" show-value :formatter="(val) => `步长 5 (${val})`" :step="5" />
    <SkSlider v-model="value3" show-value :formatter="(val) => `步长 0.5 (${val})`" :step="0.5" :min="0" :max="10" />
  </div>
</template>

Formatter 格式化

formatter 仅在 showValue 为 true 时生效。
Prop类型默认值描述
formatterfunction-设置数值的格式化函数
<script setup lang="ts">
import { ref } from 'vue'

const temperature = ref(25)
const percentage = ref(60)
const price = ref(150)
</script>

<template>
  <div class="flex flex-col p-4 gap-4 w-full">
    <SkSlider v-model="temperature" show-value :formatter="(val) => `${val}°C`" />
    <SkSlider v-model="percentage" show-value :formatter="(val) => `${val}%`" />
    <SkSlider v-model="price" show-value :formatter="(val) => `¥${val}`" :min="0" :max="500" />
  </div>
</template>

Color 颜色

Prop类型默认值描述
color{Color}brand设置滑块的颜色主题
Color描述
brand品牌态颜色
success成功态颜色
warning警告态颜色
danger危险态颜色
neutral中性态颜色
<script setup lang="ts">
import { ref } from 'vue'

const color = ref(60)
</script>

<template>
  <div class="flex flex-col p-4 gap-4 w-full">
    <SkSlider v-model="color" color="brand" />
    <SkSlider v-model="color" color="success" />
    <SkSlider v-model="color" color="warning" />
    <SkSlider v-model="color" color="danger" />
    <SkSlider v-model="color" color="neutral" />
  </div>
</template>

Size 尺寸

Prop类型默认值描述
size{Size}medium设置滑块的尺寸大小
Size描述
small小型
medium中型
large大型
<script setup lang="ts">
import { ref } from 'vue'

const small = ref(30)
const medium = ref(50)
const large = ref(70)
</script>

<template>
  <div class="flex flex-col p-4 gap-4 w-full">
    <SkSlider v-model="small" show-value size="small" />
    <SkSlider v-model="medium" show-value size="medium" />
    <SkSlider v-model="large" show-value size="large" />
  </div>
</template>

Disabled 禁用

Prop类型默认值描述
disabledbooleanfalse设置滑块是否为禁用状态
<script setup lang="ts">
import { ref } from 'vue'

const normal = ref(60)
const disabled = ref(40)
</script>

<template>
  <div class="flex flex-col p-4 gap-4 w-full">
    <SkSlider v-model="normal" />
    <SkSlider v-model="disabled" disabled />
  </div>
</template>

接口

Props

属性名类型默认值描述
v-modelnumber0详见 Controlled 值
showValuebooleanfalse详见 Show Value 显示数值
minnumber0详见 Min/Max 最小值/最大值
maxnumber100详见 Min/Max 最小值/最大值
stepnumber1详见 Step 步长
formatterfunction-详见 Formatter 格式化
color{Color}'brand'详见 Color 颜色
size{Size}'medium'详见 Size 尺寸
disabledbooleanfalse详见 Disabled 禁用

Emits

事件名参数描述
change(value: number)当滑块值改变时触发

交互

正在完善中，敬请期待！😊

点颗星星 打赏项目