先说我们项目需要的效果图

因为我的项目一开始安装的插件就是  uview-ui 的2.0版本 "^2.0.28"，当我用uview中滑动选择器 u-slider 组件的时候，发现没有了插槽的功能（注：uview-ui 的1.0版本有），又去插件市场翻了翻，没有找到合适的。

uview 2.0版本官网     https://www.uviewui.com/components/slider.html

npm install uview-ui@2.0.31

uview 1.0版本官网     https://v1.uviewui.com/components/slider.html

npm install uview-ui@1.8.4

下面可以做个对比，这是1.0版本的

2.0版本：（没有插槽功能了，看演示效果就能发现了，没有插槽，就不能实现我们自定义滑块是图片的功能）

 我就取巧了，用别的项目下载了 1.0版本的uview（安装方法在上边），  然后复制了 1.0 的滑块组件，修改修改代码就能用了，下面是解决的办法：

安装完成之后：

① 找到node_modules下的 uview-ui 文件夹，打开 components ，找到 u-slider 文件夹，打开将   u-slider.vue  复制到你 当前项目下边

重复一下步骤  node_modules --> uview-ui --> components --> u-slider --> u-slider.vue(核心代码)

② 这是我放的地方，不管怎么放，只要把 u-slider.vue 组件复制过来就行

 ③  注释掉下面这行代码

 ④ 如果不想传太多值，只需把props里的默认值（default）改成自己想要的即可，下边是我改的，除了props里的代码，别的都不用动

 ⑤ 组件 建立好了，下面是其他页面引，具体的一些方法可以参考官方文档里可以用的方法（官方文档在开头链接）

<Slider 
    :height="20"  // 默认值那里可以直接改成20,就不用传值了,我是没改就传了
    v-model="value"  //必写,等会联动有用
    :blockColor="" 
    @input="input_slider" // 这里能得到value值
    :activeColor="" 
></Slider>

// 组件引进来
import Slider from './u-slider';
components: {
    Slider,
},

methods:{
    input_slider(value) {
		this.value = value.detail.__args__[0];
	},
}