v1.0

uni_modules/uv-slider/components/uv-slider/props.js

@@ -0,0 +1,58 @@
+export default {
+	props: {
+		value: {
+			type: [Number, String],
+			default: 0
+		},
+		modelValue: {
+			type: [Number, String],
+			default: 0
+		},
+		// 最小可选值
+		min: {
+			type: [Number, String],
+			default: 0
+		},
+		// 最大可选值
+		max: {
+			type: [Number, String],
+			default: 100
+		},
+		// 步长，取值必须大于 0，并且可被(max - min)整除
+		step: {
+			type: [Number, String],
+			default: 1
+		},
+		// 滑块右侧已选择部分的背景色
+		activeColor: {
+			type: String,
+			default: '#2979ff'
+		},
+		// 滑块左侧未选择部分的背景色
+		backgroundColor: {
+			type: String,
+			default: '#c0c4cc'
+		},
+		// 滑块的大小，取值范围为 12 - 28
+		blockSize: {
+			type: [Number, String],
+			default: 18
+		},
+		// 滑块的颜色
+		blockColor: {
+			type: String,
+			default: '#ffffff'
+		},
+		// 禁用状态
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		// 是否显示当前的选择值
+		showValue: {
+			type: Boolean,
+			default: false
+		},
+		...uni.$uv?.props?.slider
+	}
+}

uni_modules/uv-slider/components/uv-slider/uv-slider.vue

@@ -0,0 +1,58 @@
+<template>
+	<view
+		class="uv-slider"
+		:style="[$uv.addStyle(customStyle)]"
+	>
+		<slider
+			:min="min"
+			:max="max"
+			:step="step"
+			:value="sliderValue"
+			:activeColor="activeColor"
+			:backgroundColor="backgroundColor"
+			:blockSize="$uv.getPx(blockSize)"
+			:blockColor="blockColor"
+			:showValue="showValue"
+			:disabled="disabled"
+			@changing="changingHandler"
+			@change="changeHandler"
+		></slider>
+	</view>
+</template>
+<script>
+	import mpMixin from '@/uni_modules/uv-ui-tools/libs/mixin/mpMixin.js'
+	import mixin from '@/uni_modules/uv-ui-tools/libs/mixin/mixin.js'
+	import props from './props.js'
+	export default {
+		name: 'uv-slider',
+		mixins: [mpMixin, mixin, props],
+		computed: {
+			sliderValue(){
+				return this.value || this.modelValue;
+			}
+		},
+		methods: {
+			// 拖动过程中触发
+			changingHandler(e) {
+				const { value } = e.detail
+				// 更新v-model的值
+				this.$emit('input', value)
+				this.$emit('update:modelValue',value)
+				// 触发事件
+				this.$emit('changing', value)
+			},
+			// 滑动结束时触发
+			changeHandler(e) {
+				const {
+					value
+				} = e.detail
+				// 更新v-model的值
+				this.$emit('input', value)
+				this.$emit('update:modelValue',value)
+				// 触发事件
+				this.$emit('change', value)
+			}
+		}
+	}
+</script>
+