Tu View PlusSlider 滑块
滑动型输入器，展示当前值和可选范围。
基础用法
输入框的基本用法。
<template>
<tu-slider v-model="sliderValue" />
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const sliderValue = ref(20);
</script><template>
<tu-slider v-model="sliderValue" />
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const sliderValue = ref(20);
</script>禁用状态
禁用滑动输入条。
<template>
<tu-slider v-model="sliderValue" disabled />
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const sliderValue = ref(20);
</script><template>
<tu-slider v-model="sliderValue" disabled />
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const sliderValue = ref(20);
</script>设置步长
通过 step 设置步长，默认步长为 1。建议设置能够被 max-min 整除的值，否则会出现可选最大值小于 max 的情况。当设置 show-ticks 时，显示步长刻度线。
步长为 10
步长为 20
步长为 20 并显示步长刻度线
<template>
<p>步长为 10</p>
<tu-slider v-model="sliderValue1" :step="10" />
<p>步长为 20</p>
<tu-slider v-model="sliderValue2" :step="20" />
<p>步长为 20 并显示步长刻度线</p>
<tu-slider v-model="sliderValue3" :step="20" :show-ticks="true" />
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const sliderValue1 = ref(20);
const sliderValue2 = ref(20);
const sliderValue3 = ref(20);
</script><template>
<p>步长为 10</p>
<tu-slider v-model="sliderValue1" :step="10" />
<p>步长为 20</p>
<tu-slider v-model="sliderValue2" :step="20" />
<p>步长为 20 并显示步长刻度线</p>
<tu-slider v-model="sliderValue3" :step="20" :show-ticks="true" />
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const sliderValue1 = ref(20);
const sliderValue2 = ref(20);
const sliderValue3 = ref(20);
</script>添加文本标签
通过设置 marks 可以添加文本标签。
0km
5km
10km
15km
<template>
<tu-slider class="mb-4" v-model="sliderValue" :max="15" :marks="marks" />
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const sliderValue = ref(5);
const marks = {
0: '0km',
5: '5km',
10: '10km',
15: '15km'
};
</script><template>
<tu-slider class="mb-4" v-model="sliderValue" :max="15" :marks="marks" />
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const sliderValue = ref(5);
const marks = {
0: '0km',
5: '5km',
10: '10km',
15: '15km'
};
</script>范围选择
通过设置 range 可开启范围选择，此时 modelValue 为数组。
<template>
<tu-slider v-model="value" range />
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const value = ref([10, 20]);
</script><template>
<tu-slider v-model="value" range />
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const value = ref([10, 20]);
</script>显示输入框
当设置 show-input 时，将显示输入框。
<template>
<tu-slider class="mb-2" :default-value="10" show-input />
<tu-slider v-model="sliderValue" range show-input />
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const sliderValue = ref([0, 10]);
</script><template>
<tu-slider class="mb-2" :default-value="10" show-input />
<tu-slider v-model="sliderValue" range show-input />
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const sliderValue = ref([0, 10]);
</script>竖直滑动条
设置 direction 为 vertical，将会显示竖直的滑动条。
5km
10km
<template>
<tu-slider class="mr-2" v-model="sliderValue1" direction="vertical" />
<tu-slider
class="mr-2"
v-model="sliderValue2"
:show-ticks="true"
:step="20"
direction="vertical"
/>
<tu-slider
direction="vertical"
v-model="sliderValue3"
:max="15"
:marks="marks"
/>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const sliderValue1 = ref(20);
const sliderValue2 = ref(20);
const sliderValue3 = ref(3);
const marks = {
5: '5km',
10: '10km'
};
</script><template>
<tu-slider class="mr-2" v-model="sliderValue1" direction="vertical" />
<tu-slider
class="mr-2"
v-model="sliderValue2"
:show-ticks="true"
:step="20"
direction="vertical"
/>
<tu-slider
direction="vertical"
v-model="sliderValue3"
:max="15"
:marks="marks"
/>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const sliderValue1 = ref(20);
const sliderValue2 = ref(20);
const sliderValue3 = ref(3);
const marks = {
5: '5km',
10: '10km'
};
</script>自定义提示
通过设置 format-tooltip 可以自定义提示文字。
<template>
<tu-slider
:min="0"
:max="100"
v-model="sliderValue"
:format-tooltip="fromatter"
/>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const sliderValue = ref(20);
const fromatter = (value: number): string => {
return `${Math.round((value / 50) * 100)}°`;
};
</script><template>
<tu-slider
:min="0"
:max="100"
v-model="sliderValue"
:format-tooltip="fromatter"
/>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const sliderValue = ref(20);
const fromatter = (value: number): string => {
return `${Math.round((value / 50) * 100)}°`;
};
</script>不同尺寸
tu-slider 组件提供除了默认值 medium 以外的三种尺寸。
额外的尺寸：large、small、mini，通过设置 size 属性来配置它们。
<template>
<tu-slider class="mb-2" v-model="sliderValue" size="mini" />
<tu-slider class="mb-2" v-model="sliderValue" size="small" />
<tu-slider class="mb-2" v-model="sliderValue" />
<tu-slider v-model="sliderValue" size="large" />
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const sliderValue = ref(20);
</script><template>
<tu-slider class="mb-2" v-model="sliderValue" size="mini" />
<tu-slider class="mb-2" v-model="sliderValue" size="small" />
<tu-slider class="mb-2" v-model="sliderValue" />
<tu-slider v-model="sliderValue" size="large" />
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const sliderValue = ref(20);
</script>Slider API
Slider Attributes
| 参数名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| v-model | 绑定值 | Number Array | - |
| default-value | 默认值（非受控状态） | Number Array | 0 |
| step | 滑动的步长 | Number | 1 |
| min | 滑动范围的最小值 | Number | 0 |
| max | 滑动范围的最大值 | Number | - |
| marks | 设置显示的标签 | Object | - |
| direction | 滑动输入条的方向 | String | horizontal |
| disabled | 是否禁用 | Boolean | false |
| show-ticks | 是否显示刻度线 | Boolean | false |
| show-input | 是否显示输入框 | Boolean | false |
| range | 是否开启范围选择 | Boolean | false |
| show-tooltip | 是否显示tooltip | Boolean | true |
Slider Events
| 事件名 | 描述 | 参数 |
|---|---|---|
| change | 值改变时触发 | Function |