从零实现Vue的组件库（二）-Slider 实现

实现一个Slider组件，方便用户通过拖动滑块在一个固定区间内进行选择，增强交互细节。

概述： 在用户手动一些限定数字时，如果采用输入框的形式，会需要提示信息和错误信息来引导用户，这就存在一些冗余操作。所以衍生出Slider组件，方便用户拖动来选定一个值。

该组件的痛点在于：

• 兼容不同游览器的样式；
• Slider组件的value、min、max之间的关系，以及对样式的影响。

1. 实例

演示

代码

实例地址：https://fatge.xyz/blog/juejin-example-3#/Slider

代码地址：https://github.com/FatGe/UI-Library/tree/master/src/components/Slider

2. 原理

该组件的实现是基于原生的，再通过改写样式以达到上图效果。

组件的基本结构如下

组件的基本结构

• 先将修改组件的thumb以及轨道track的样式：

将其从原生的形式

将其从原生的形式

变成以下的样式

变成以下的样式

基于cross-browser-range-input这篇博文，进行基础样式的修改。

为了兼容不同的游览器，首先利用@mixin抽离出thumb公共的样式。

为了兼容不同的游览器，首先利用@mixin抽离出thumb公共的样式

然后适配不同的浏览器

适配不同的浏览器

然后以同样的方法来处理track的样式

以同样的方法来处理track的样式

适配不同浏览器

适配不同浏览器

此时Slider组件在不同浏览器下的显示，如下图

• Chrome

Chrome

• Firefox

Firefox

• Ie11

Ie11

此时的Ie11优秀的不得了，不仅提供了fill-upper、fill-lower还自带tool-tip提示功能。为了让其他浏览器向他靠齐，就需要实现上述两个功能。丰富组件的结构为

丰富组件的结构

组件中progress、tooltip的样式需要通过当前的rate值来进行修改，其规则为

组件中progress、tooltip的样式

其中progressStyle比较好理解，就是当前rate的值占整体的百分比，而toolTipPosition则是利用

toolTipPosition

3. 使用

进一步将其封装成Vue的组件，配置其props、data

进一步将其封装成Vue的组件，配置其props、data

4. 总结

封装一个Slider组件，兼容在不同浏览器下的样式，以及简化其内部逻辑，方便后续拓展。

作者：FatGe