van-slider 滑块

### 关于 `van-slider` 组件的使用

#### 安装 Vant 库
为了使用 `van-slider`，首先需要安装 Vant 库。Vant 是一个由有赞团队开发的 Vue 移动端组件库[^2]。

npm install vant

#### 导入并注册滑块组件
在项目中导入 `VanSlider` 和其样式文件：

import { Slider } from 'vant';
import 'vant/lib/index.css';

Vue.use(Slider);

#### 基本用法
下面是一个简单的例子展示如何创建一个基本的滑块控件：

<template>
  <div class="slider-demo">
    <van-slider v-model="value"></van-slider>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: 50,
    };
  },
};
</script>

此代码片段展示了如何通过绑定数据属性来控制滑块的位置。

#### 自定义配置选项
可以自定义多个参数来自定义滑块的行为和外观，比如设置最小最大值范围、步长等特性：

<template>
  <div class="customized-slider">
    <van-slider
      v-model="value"
      :min="0"
      :max="100"
      :step="10"
      active-color="#ee0a24"
      inactive-color="#ebedf0"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: 30,
    };
  },
};
</script>

在这个实例里，设置了活动条的颜色 (`active-color`) 及不活跃部分颜色(`inactive-color`) ，同时也指定了数值变化间隔(`step`)。

#### 处理事件
还可以监听用户的交互动作，例如当用户拖拽结束时触发特定逻辑：

<template>
  <div @change="onChangeHandler" class="event-handling-slider">
    <van-slider v-model="value"/>
  </div>
</template>

<script>
export default {
  methods: {
    onChangeHandler(value) {
      console.log('当前进度:', value);
    }
  },

  data() {
    return {
      value: 75,
    };
  },
};
</script>

这里实现了对改变事件(`@change`) 的处理函数，在每次用户调整完毕后打印新的位置到浏览器控制台。