423 lines
12 KiB
Vue
423 lines
12 KiB
Vue
<template>
|
||
<view
|
||
class="u-slider"
|
||
@tap="onClick"
|
||
:class="[disabled ? 'u-slider--disabled' : '', customClass]"
|
||
:style="$u.toStyle(sliderStyle, customStyle)"
|
||
>
|
||
<view
|
||
v-if="showEdgeValue"
|
||
class="u-slider__edge u-slider__edge--start"
|
||
:class="`u-slider__edge--${edgeValuePosition}`"
|
||
>
|
||
{{ startLabel }}
|
||
</view>
|
||
<view
|
||
v-if="showEdgeValue"
|
||
class="u-slider__edge u-slider__edge--end"
|
||
:class="`u-slider__edge--${edgeValuePosition}`"
|
||
>
|
||
{{ endLabel }}
|
||
</view>
|
||
<view
|
||
class="u-slider__gap"
|
||
:style="
|
||
$u.toStyle(barStyle, {
|
||
height: height + 'rpx',
|
||
backgroundColor: activeColor
|
||
})
|
||
"
|
||
>
|
||
<view
|
||
class="u-slider__button-wrap"
|
||
@touchstart="onTouchStart"
|
||
@touchmove="onTouchMove"
|
||
@touchend="onTouchEnd"
|
||
@touchcancel="onTouchEnd"
|
||
>
|
||
<slot v-if="slots.default" />
|
||
<view
|
||
v-else
|
||
class="u-slider__button"
|
||
:style="
|
||
$u.toStyle(blockStyle, {
|
||
height: blockWidth + 'rpx',
|
||
width: blockWidth + 'rpx',
|
||
backgroundColor: blockColor
|
||
})
|
||
"
|
||
/>
|
||
<view v-if="showValue" class="u-slider__value" :class="`u-slider__value--${valuePosition}`">
|
||
{{ displayValue }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script lang="ts">
|
||
export default {
|
||
name: 'u-slider',
|
||
options: {
|
||
addGlobalClass: true,
|
||
// #ifndef MP-TOUTIAO
|
||
virtualHost: true,
|
||
// #endif
|
||
styleIsolation: 'shared'
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<script setup lang="ts">
|
||
import { computed, ref, watch, onMounted, useSlots, getCurrentInstance } from 'vue';
|
||
import { $u } from '../..';
|
||
import { SliderProps } from './types';
|
||
|
||
/**
|
||
* slider 滑块选择器
|
||
* @tutorial https://uviewpro.cn/zh/components/slider.html
|
||
* @property {Number | String} value 滑块当前值，位于[start, end]范围内（默认0）
|
||
* @property {Number | String} start 整体范围起点值（默认0）
|
||
* @property {Number | String} end 整体范围终点值（默认100）
|
||
* @property {Number | String} min 有效拖动最小值，需在[start, end]中（默认0）
|
||
* @property {Number | String} max 有效拖动最大值，需在[start, end]中（默认100）
|
||
* @property {Number | String} step 步长（默认1）
|
||
* @property {Number | String} blockWidth 滑块宽度，高等于宽（30）
|
||
* @property {Number | String} height 滑块条高度，单位rpx（默认6）
|
||
* @property {String} inactiveColor 底部条背景颜色（默认var(--u-light-color)）
|
||
* @property {String} activeColor 底部选择部分的背景颜色（默认主题色primary）
|
||
* @property {String} blockColor 滑块颜色（默认var(--u-bg-white)）
|
||
* @property {Object} blockStyle 给滑块自定义样式，对象形式
|
||
* @property {Boolean} disabled 是否禁用滑块(默认为false)
|
||
* @property {Boolean} showValue 是否在滑块上方/下方显示当前数值
|
||
* @property {String} valuePosition 当前数值显示位置，top-上方，bottom-下方（默认top）
|
||
* @property {Boolean} showEdgeValue 是否在起始和结束位置显示数值
|
||
* @property {String} edgeValuePosition 起始和结束数值显示位置，top-上方，bottom-下方（默认top）
|
||
* @event start 滑动触发
|
||
* @event moving 正在滑动中
|
||
* @event end 滑动结束
|
||
* @example <u-slider v-model="value" />
|
||
*/
|
||
|
||
const emit = defineEmits(['update:modelValue', 'start', 'moving', 'end']);
|
||
|
||
const props = defineProps(SliderProps);
|
||
|
||
const slots = useSlots();
|
||
const instance = getCurrentInstance();
|
||
|
||
// 滑块条的尺寸信息
|
||
const sliderRect = ref<{ left: number; width: number }>({ left: 0, width: 0 });
|
||
const startX = ref(0);
|
||
const status = ref<'start' | 'moving' | 'end'>('end');
|
||
const newValue = ref(0);
|
||
const distanceX = ref(0);
|
||
const startValue = ref(0);
|
||
const barStyle = ref<Record<string, any>>({});
|
||
const innerValue = ref<number>(0);
|
||
|
||
const rangeStart = computed(() => Number(props.start));
|
||
const rangeEnd = computed(() => Number(props.end));
|
||
const rangeTotal = computed(() => {
|
||
const total = rangeEnd.value - rangeStart.value;
|
||
return total === 0 ? 1 : total;
|
||
});
|
||
|
||
const sliderStyle = computed(() => {
|
||
const style = {
|
||
backgroundColor: props.inactiveColor
|
||
} as Record<string, any>;
|
||
if (
|
||
(props.showValue && props.valuePosition === 'top') ||
|
||
(props.showEdgeValue && props.edgeValuePosition === 'top')
|
||
) {
|
||
style.marginTop = '80rpx';
|
||
}
|
||
if (
|
||
(props.showValue && props.valuePosition === 'bottom') ||
|
||
(props.showEdgeValue && props.edgeValuePosition === 'bottom')
|
||
) {
|
||
style.marginBottom = '80rpx';
|
||
}
|
||
return style;
|
||
});
|
||
|
||
// 限制min和max在start和end范围内
|
||
const effectiveMin = computed(() => {
|
||
const min = Number(props.min);
|
||
return Math.max(rangeStart.value, Math.min(min, rangeEnd.value));
|
||
});
|
||
|
||
const effectiveMax = computed(() => {
|
||
const max = Number(props.max);
|
||
return Math.min(rangeEnd.value, Math.max(max, rangeStart.value));
|
||
});
|
||
|
||
const startLabel = computed(() => props.start);
|
||
const endLabel = computed(() => props.end);
|
||
const showValue = computed(() => props.showValue);
|
||
const valuePosition = computed(() => props.valuePosition || 'top');
|
||
const showEdgeValue = computed(() => props.showEdgeValue);
|
||
const edgeValuePosition = computed(() => props.edgeValuePosition || 'top');
|
||
|
||
const displayValue = computed(() => innerValue.value);
|
||
|
||
// 监听 value 变化，非滑动状态时才更新滑块值
|
||
watch(
|
||
() => props.modelValue,
|
||
n => {
|
||
// 只有在非滑动状态时，才可以通过modelValue更新滑块值，这里监听，是为了让用户触发
|
||
if (status.value === 'end') updateValue(n, false);
|
||
}
|
||
);
|
||
|
||
watch(
|
||
() => [props.start, props.end, props.min, props.max],
|
||
() => {
|
||
updateValue(innerValue.value, false);
|
||
},
|
||
{ deep: true }
|
||
);
|
||
|
||
onMounted(() => {
|
||
// 获取滑块条的尺寸信息
|
||
$u.getRect('.u-slider', instance).then((rect: { left: number; width: number }) => {
|
||
sliderRect.value = rect;
|
||
});
|
||
updateValue(props.modelValue, false);
|
||
});
|
||
|
||
/**
|
||
* 触摸开始
|
||
*/
|
||
function onTouchStart(event: TouchEvent) {
|
||
if (props.disabled) return;
|
||
startX.value = 0;
|
||
// 触摸点集
|
||
const touches = event.touches[0];
|
||
// 触摸点到屏幕左边的距离
|
||
startX.value = touches.clientX;
|
||
// 此处的props.modelValue虽为props值，但是通过emit('update:modelValue')进行了修改
|
||
startValue.value = format(props.modelValue);
|
||
// 标示当前的状态为开始触摸滑动
|
||
status.value = 'start';
|
||
}
|
||
|
||
/**
|
||
* 触摸移动
|
||
*/
|
||
function onTouchMove(event: TouchEvent) {
|
||
if (props.disabled) return;
|
||
// 连续触摸的过程会一直触发本方法，但只有手指触发且移动了才被认为是拖动了，才发出事件
|
||
// 触摸后第一次移动已经将status设置为moving状态，故触摸第二次移动不会触发本事件
|
||
if (status.value === 'start') emit('start');
|
||
const touches = event.touches[0];
|
||
// 滑块的左边不一定跟屏幕左边接壤，所以需要减去最外层父元素的左边值
|
||
distanceX.value = touches.clientX - sliderRect.value.left;
|
||
const ratio = distanceX.value / sliderRect.value.width;
|
||
const raw = rangeStart.value + ratio * rangeTotal.value;
|
||
newValue.value = raw;
|
||
status.value = 'moving';
|
||
// 发出moving事件
|
||
emit('moving');
|
||
updateValue(newValue.value, true);
|
||
}
|
||
|
||
/**
|
||
* 触摸结束
|
||
*/
|
||
function onTouchEnd() {
|
||
if (props.disabled) return;
|
||
if (status.value === 'moving') {
|
||
updateValue(newValue.value, false);
|
||
emit('end');
|
||
}
|
||
status.value = 'end';
|
||
}
|
||
|
||
/**
|
||
* 更新滑块值
|
||
* @param value 新值
|
||
* @param drag 是否为拖动
|
||
*/
|
||
function updateValue(value: number | string, drag: boolean) {
|
||
// 处理为有效值（步进 + min/max 约束），支持负数
|
||
const formatted = format(value);
|
||
innerValue.value = formatted;
|
||
|
||
// 计算相对于[start, end]的百分比宽度
|
||
const ratio = (formatted - rangeStart.value) / rangeTotal.value;
|
||
let percent = ratio * 100;
|
||
if (percent < 0) percent = 0;
|
||
if (percent > 100) percent = 100;
|
||
|
||
const style: Record<string, any> = {
|
||
width: percent + '%'
|
||
};
|
||
// 移动期间无需过渡动画
|
||
if (drag === true) {
|
||
style.transition = 'none';
|
||
} else {
|
||
// 非移动期间，删掉对过渡为空的声明，让css中的声明起效
|
||
delete style.transition;
|
||
}
|
||
// 修改value值（为实际值而非百分比）
|
||
emit('update:modelValue', formatted);
|
||
barStyle.value = style;
|
||
}
|
||
|
||
/**
|
||
* 格式化滑块值
|
||
* @param value 输入值
|
||
* @returns 处理后的值
|
||
*/
|
||
function format(value: number | string): number {
|
||
const numeric = Number(value);
|
||
const step = Number(props.step) || 1;
|
||
// 在有效范围内裁剪（effectiveMin和effectiveMax已限制在start和end范围内），支持负数
|
||
const clipped = Math.max(effectiveMin.value, Math.min(numeric, effectiveMax.value));
|
||
// 将值按步长取整，减少对视图的频繁更新
|
||
return Math.round(clipped / step) * step;
|
||
}
|
||
|
||
/**
|
||
* 点击滑块条
|
||
*/
|
||
function onClick(event: any) {
|
||
if (props.disabled) return;
|
||
// 直接点击滑块的情况，计算为整体[start, end]范围内的值
|
||
const ratio = (event.detail.x - sliderRect.value.left) / sliderRect.value.width;
|
||
const value = rangeStart.value + ratio * rangeTotal.value;
|
||
updateValue(value, false);
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
@import '../../libs/css/style.components.scss';
|
||
|
||
.u-slider {
|
||
position: relative;
|
||
border-radius: 999px;
|
||
background-color: var(--u-bg-gray-light);
|
||
}
|
||
|
||
.u-slider:before {
|
||
position: absolute;
|
||
right: 0;
|
||
left: 0;
|
||
content: '';
|
||
top: -8px;
|
||
bottom: -8px;
|
||
z-index: -1;
|
||
}
|
||
|
||
.u-slider__gap {
|
||
position: relative;
|
||
border-radius: inherit;
|
||
transition: width 0.2s;
|
||
background-color: $u-type-primary;
|
||
}
|
||
|
||
.u-slider__button {
|
||
width: 24px;
|
||
height: 24px;
|
||
border-radius: 50%;
|
||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
|
||
background-color: var(--u-bg-white);
|
||
cursor: pointer;
|
||
}
|
||
|
||
.u-slider__button-wrap {
|
||
position: absolute;
|
||
top: 50%;
|
||
right: 0;
|
||
transform: translate3d(50%, -50%, 0);
|
||
}
|
||
|
||
.u-slider__value {
|
||
position: absolute;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
font-size: 22rpx;
|
||
font-weight: 500;
|
||
color: #333;
|
||
white-space: nowrap;
|
||
min-width: 40rpx;
|
||
height: 56rpx;
|
||
line-height: 56rpx;
|
||
padding: 0 10rpx;
|
||
border-radius: 28rpx;
|
||
background-color: #ffffff;
|
||
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.15);
|
||
z-index: 10;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.u-slider__value--top {
|
||
bottom: 100%;
|
||
margin-bottom: 12rpx;
|
||
}
|
||
|
||
.u-slider__value--top::after {
|
||
content: '';
|
||
position: absolute;
|
||
left: 50%;
|
||
top: 100%;
|
||
transform: translateX(-50%);
|
||
width: 0;
|
||
height: 0;
|
||
border-width: 4px 3px 0 3px;
|
||
border-style: solid;
|
||
border-color: #ffffff transparent transparent transparent;
|
||
}
|
||
|
||
.u-slider__value--bottom {
|
||
top: 100%;
|
||
margin-top: 12rpx;
|
||
}
|
||
|
||
.u-slider__value--bottom::after {
|
||
content: '';
|
||
position: absolute;
|
||
left: 50%;
|
||
bottom: 100%;
|
||
transform: translateX(-50%);
|
||
width: 0;
|
||
height: 0;
|
||
border-width: 0 6rpx 8rpx 6rpx;
|
||
border-style: solid;
|
||
border-color: transparent transparent #ffffff transparent;
|
||
}
|
||
|
||
.u-slider__edge {
|
||
position: absolute;
|
||
font-size: 24rpx;
|
||
color: $u-tips-color;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.u-slider__edge--start {
|
||
left: 0;
|
||
}
|
||
|
||
.u-slider__edge--end {
|
||
right: 0;
|
||
}
|
||
|
||
.u-slider__edge--top {
|
||
bottom: 100%;
|
||
margin-bottom: 8rpx;
|
||
}
|
||
|
||
.u-slider__edge--bottom {
|
||
top: 100%;
|
||
margin-top: 8rpx;
|
||
}
|
||
|
||
.u-slider--disabled {
|
||
opacity: 0.5;
|
||
}
|
||
</style>
|