Stone-Slider组件

Stone-Slider组件

目录

• 1. 引入stone-slider.scss
• 2. Slider基础用法
• 3. 离散值
• 4. 带有输入框
• 5. 竖向模式
• 6. 展示标记
• 7. script源码

1. 引入stone-slider.scss

在main.js中引入stone-slider.scss

require('@/assets/css/stone-slider.scss')

给el-switch添加stone-slider样式。

2. Slider基础用法

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-28VIa0jJ-1601258552556)(file:///C:\Users\ADMINI~1\AppData\Local\Temp\msohtmlclip1\01\clip_image002.png)]

源码：

<div class="block"><span class="demonstration">默认</span><el-slider v-model="value1" class="stone-slider" />
</div><div class="block"><span class="demonstration">自定义初始值</span><el-slider v-model="value2" class="stone-slider" />
</div><div class="block"><span class="demonstration">隐藏 Tooltip</span><el-slider v-model="value3" :show-tooltip="false" class="stone-slider" />
</div><div class="block"><span class="demonstration">格式化 Tooltip</span><el-slider v-model="value4" :format-tooltip="formatTooltip" class="stone-slider" />
</div><div class="block"><span class="demonstration">禁用</span><el-slider v-model="value5" disabled class="stone-slider" />
</div>

3. 离散值

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-53CXyHEv-1601258552559)(file:///C:\Users\ADMINI~1\AppData\Local\Temp\msohtmlclip1\01\clip_image004.png)]

源码：

<div class="block"><el-sliderv-model="value6":step="10"class="stone-slider" />
</div>

4. 带有输入框

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8C6113j9-1601258552561)(file:///C:\Users\ADMINI~1\AppData\Local\Temp\msohtmlclip1\01\clip_image006.png)]

源码：

<div class="block"><el-sliderv-model="value7"class="stone-slider"show-input />
</div>

5. 竖向模式

源码：

<div class="block"><el-sliderv-model="value8"verticalheight="200px"class="stone-slider" />
</div>

6. 展示标记

源码：

<div class="block"><el-sliderv-model="value9"range:marks="marks"class="stone-slider" />
</div>

7. script源码

<script>
export default {name: 'StoneSliderDemo',data() {return {value1: 0,value2: 50,value3: 36,value4: 48,value5: 42,value6: 10,value7: 10,value8: 42,value9: [30, 60],marks: {0: '0°C',8: '8°C',37: '37°C',50: {style: {color: '#1989FA !important'},label: this.$createElement('strong', '50%')}}}},methods: {formatTooltip(val) {return val / 100}}
}
</script>