slider-range

区间滑动选择

属性说明

| 属性名 | 类型 | 默认值 | 说明 |- | - |- | - | | value |Number/Array[2]|[]|初始值，为 number 时表示滑动选择器，为 array 时表示区间滑动选择器| | valueType | String | max | 当 value 为 number 时，可滑动的是哪个值，可选值：min、max，默认 max | | min | Number | 0 | 最小值（最左侧值）默认 0 | | max | Number | 100 | 最大值（最右侧值）默认 100 | | step | Number | 1 | 步长，为 0 时不设步长，默认为 1，支持步长为浮点数，不设步长时返回两位浮点数，想要获取几位浮点数就把步长设置为几位浮点数 | | height | Number/String | 12 | 滑动条高度，可自定义单位，默认单位 rpx | | disabled | Boolean | false | 是否禁用 | | tips | Boolean | true | 是否显示滑动提示 | | scale | Boolean/Object | true | 刻度条配置，为 boolean 时表示是否显示，为 object 时见下方刻度条配置说明 | | backgroundStyle | Object | {} | 背景条自定义样式 | | activeStyle | Object | {} | 选中条自定义样式 |

刻度条配置说明

回调方法

| 方法名 | 说明 | 返回值 | |- |- |- | | change | 滑动时触发 | firstValue: 第一个滑点的值，一般只在小程序使用firstTips插槽时才有用, secondValue，第一个滑点的值，一般只在小程序使用secondValue插槽时才有用，values: 选择区间，数组形式，第一个值为较小值，第二个值为较大值 | | start | 按住滑动块时触发 | block: 按住的滑动块, value: 按住滑动块的当前值, values: 同上 | | end | 松开滑动块时触发 | block: 按住的滑动块, value: 按住滑动块的当前值, values: 同上 |

使用示例

<slider-range
	:scale="{
		show: true,
		format: scaleFormat
	}"
	@change="changeSliderValue">
</slider-range>

import SliderRange from '@/components/tianzai-slider-range'
export default {
	components:{
		SliderRange
	},
	methods: {
		changeSliderValue(e){
			console.log(e)
		},
		scaleFormat(val, index){
			if(index % 2 != 0){
				return {...val, label: '自定义设置', fontSize: '48rpx'}
			}
			return val
		}
	}
}

插槽（微信不支持同名插槽多次渲染，需要不同的写法兼容）

// 自定义滑动块
<slider-range>
	<!-- #ifndef MP-WEIXIN -->
 	<template #block>
 		<image
 			class="block-image"
 			src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/icon.png?v=1556263038788">
 		</image>
 	</template>
 	<!-- #endif -->
 	<!-- #ifdef MP-WEIXIN -->
 	<template #firstBlock>
 		<image
 			class="block-image"
 			src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/icon.png?v=1556263038788">
 		</image>
 	</template>
 	<template #secondBlock>
 		<image
 			class="block-image"
 			src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/icon.png?v=1556263038788">
 		</image>
 	</template>
	<!-- 这个是用来撑起元素高度的，不传这个滑动条不会自动撑起高度 -->
 	<template #placeholderBlock>
 		<image
 			class="block-image"
 			src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/icon.png?v=1556263038788">
 		</image>
 	</template>
 	<!-- #endif -->
</slider-range>

// 自定义滑动提示
<slider-range>
 	<!-- #ifndef MP-WEIXIN -->
 	<template #tips="{ value }">
 		<view class="dark-mode">{{ value }}</view>
 	</template>
 	<!-- #endif -->
 	<!-- #ifdef MP-WEIXIN -->
	<!-- 微信小程序不能使用插槽传值，可以在 change 方法里获取到后显示出来对应的值 -->
 	<template v-slot:firstTips>
 		<view class="dark-mode">{{ firstValue }}</view>
 	</template>
 	<template v-slot:secondTips>
 		<view class="dark-mode">{{ secondValue }}</view>
 	</template>
 	<!-- #endif -->
</slider-range>

其他注意点

组件所有属性并非绑定且没有watch监听，只用于组件渲染时的初始设置，可以在 value、min、max、step 等属性发生变化时调用组件的 create 方法来使其生效，否则可能造成组件显示错乱。 <slider-range :max="max || 100" ref="mySliderRange"></slider-range> this.max = 10 this.$nextTick(() => { this.$refs.mySliderRange.create() })
format 在函数中改变 fontSize 时不再自动补全单位(不能只写数字)，需设置时填写完全。
关于微信的多个同名插槽问题，官方的 issues 上说在解决中，如果哪天解决了可以在评论区提醒我来优化 github issues
关于微信小程序插槽无法传值问题，HBuilderx 官方说解决了，但是我在编写过程中还是无法使用，如果有人会写，麻烦在评论区告知 github issues

README.md 5.3 KB Riwayat Mentahan