Element-UI MCP Server

## Slider 滑块 通过拖动滑块在一个固定区间内进行选择 ### 基础用法 在拖动滑块时，显示当前值 :::demo 通过设置绑定值自定义滑块的初始值 ```html <template> <div class="block"> <span class="demonstration">默认</span> <el-slider v-model="value1"></el-slider> </div> <div class="block"> <span class="demonstration">自定义初始值</span> <el-slider v-model="value2"></el-slider> </div> <div class="block"> <span class="demonstration">隐藏 Tooltip</span> <el-slider v-model="value3" :show-tooltip="false"></el-slider> </div> <div class="block"> <span class="demonstration">格式化 Tooltip</span> <el-slider v-model="value4" :format-tooltip="formatTooltip"></el-slider> </div> <div class="block"> <span class="demonstration">禁用</span> <el-slider v-model="value5" disabled></el-slider> </div> </template> <script> export default { data() { return { value1: 0, value2: 50, value3: 36, value4: 48, value5: 42 } }, methods: { formatTooltip(val) { return val / 100; } } } </script> ``` ::: ### 离散值 选项可以是离散的 :::demo 改变`step`的值可以改变步长，通过设置`show-stops`属性可以显示间断点 ```html <template> <div class="block"> <span class="demonstration">不显示间断点</span> <el-slider v-model="value1" :step="10"> </el-slider> </div> <div class="block"> <span class="demonstration">显示间断点</span> <el-slider v-model="value2" :step="10" show-stops> </el-slider> </div> </template> <script> export default { data() { return { value1: 0, value2: 0 } } } </script> ``` ::: ### 带有输入框 通过输入框设置精确数值 :::demo 设置`show-input`属性会在右侧显示一个输入框 ```html <template> <div class="block"> <el-slider v-model="value" show-input> </el-slider> </div> </template> <script> export default { data() { return { value: 0 } } } </script> ``` ::: ### 范围选择 支持选择某一数值范围 :::demo 设置`range`即可开启范围选择，此时绑定值是一个数组，其元素分别为最小边界值和最大边界值 ```html <template> <div class="block"> <el-slider v-model="value" range show-stops :max="10"> </el-slider> </div> </template> <script> export default { data() { return { value: [4, 8] } } } </script> ``` ::: ### 竖向模式 :::demo 设置`vertical`可使 Slider 变成竖向模式，此时必须设置高度`height`属性 ```html <template> <div class="block"> <el-slider v-model="value" vertical height="200px"> </el-slider> </div> </template> <script> export default { data() { return { value: 0 } } } </script> ``` ::: ### 展示标记 :::demo 设置 `marks` 属性可以展示标记 ```html <template> <div class="block"> <el-slider v-model="value" range :marks="marks"> </el-slider> </div> </template> <script> export default { data() { return { value: [30, 60], marks: { 0: '0°C', 8: '8°C', 37: '37°C', 50: { style: { color: '#1989FA' }, label: this.$createElement('strong', '50%') } } } } } </script> ``` :::