wk-view

Appearance

On this page

wkv-slider ​

滑动选择器

用法 ​

html
<wkv-slider v-model="value" />

Props ​

属性名类型默认值说明
minNumber0最小值
maxNumber100最大值
stepNumber1步长，取值必须大于 0，并且可被 (max - min) 整除
disabledBooleanfalse是否禁用
modelValueNumber0当前取值

Events ​

事件名事件说明函数签名参数说明
update:modelValue更新当前值(value) => voidvalue: 当前值

示例 ​

vue
<template>
	<view class="wkv-slider-example">
		<wk-section>默认</wk-section>
		<wkv-slider v-model="defaultValue" />
		<wk-section>最小值/最大值</wk-section>
		<wkv-slider :min="5" :max="10" v-model="minMaxValue" />
		<wk-section>步长</wk-section>
		<wkv-slider :step="10" v-model="stepValue" />
		<wk-section>禁用</wk-section>
		<wkv-slider disabled v-model="disabledValue" />
	</view>
</template>
vue
<script setup lang="ts">
import { ref } from 'vue'

const defaultValue = ref(66)
const minMaxValue = ref(8)
const stepValue = ref(30)
const disabledValue = ref(50)
</script>
scss
<style lang="scss">
.wkv-slider-example {
	padding: 20px;
}
</style>