我是个攻城狮
409 lines
14 KiB
Vue
409 lines
14 KiB
Vue
<template>
|
||
<view class="cj-slider" @mousemove="onSliMouseMove" @mouseup="onSliMouseUp">
|
||
<view class="mouse-move" :style="{height: moveHeight + 'rpx'}"></view>
|
||
<view class="cj-slider__line" :class="[disabled ? 'cj-slider--disabled' : '']" :style="{
|
||
backgroundColor: inactiveColor,
|
||
height: height + 'rpx'
|
||
}" @click="onClick"></view>
|
||
<view class="cj-slider__gap" :style="[
|
||
barStyle,
|
||
{
|
||
height: height + 'rpx',
|
||
backgroundColor: activeColor
|
||
}
|
||
]" @click="onClick">
|
||
<view class="cj-slider__button-wrap" @mousedown="onMouseDown(1, $event)" @mousemove="onMouseMove($event)"
|
||
@mouseleave="onMouseLeave(1)" @mouseup="onMouseUp(1)" @touchstart="onTouchStart(1, $event)"
|
||
@touchmove="onTouchMove(1, $event)" @touchend="onTouchEnd(1)" @touchcancel="onTouchEnd">
|
||
<slot v-if="$slots.default || $slots.$default" />
|
||
<view v-else class="cj-slider__button" :style="[blockStyle, {
|
||
height: blockWidth + 'rpx',
|
||
width: blockWidth + 'rpx',
|
||
backgroundColor: blockColor
|
||
}]">
|
||
<text class="numsize">{{value[0]}}</text>
|
||
</view>
|
||
</view>
|
||
<view class="cj-slider__button-wrap2" @mousedown="onMouseDown(2, $event)" @mousemove="onMouseMove($event)"
|
||
@mouseleave="onMouseLeave(2)" @mouseup="onMouseUp(2)" @touchstart="onTouchStart(2, $event)"
|
||
@touchmove="onTouchMove(2, $event)" @touchend="onTouchEnd(2)" @touchcancel="onTouchEnd">
|
||
<slot v-if="$slots.default || $slots.$default" />
|
||
<view v-else class="cj-slider__button" :style="[blockStyle, {
|
||
height: blockWidth + 'rpx',
|
||
width: blockWidth + 'rpx',
|
||
backgroundColor: blockColor
|
||
}]">
|
||
<text class="numsize">{{value[1]}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
/**
|
||
* slider 滑块选择器
|
||
* @property {Number | String} value 滑块默认值（默认[最小值,最大值]）
|
||
* @property {Number | String} min 最小值（默认0）
|
||
* @property {Number | String} max 最大值（默认100）
|
||
* @property {Number | String} step 步长（默认1）
|
||
* @property {Number | String} blockWidth 滑块宽度，高等于宽（30）
|
||
* @property {Number | String} height 滑块条高度，单位rpx（默认6）
|
||
* @property {String} inactiveColor 底部条背景颜色（默认#c0c4cc）
|
||
* @property {String} activeColor 底部选择部分的背景颜色（默认#2979ff）
|
||
* @property {String} blockColor 滑块颜色（默认#ffffff）
|
||
* @property {Object} blockStyle 给滑块自定义样式，对象形式
|
||
* @property {Boolean} disabled 是否禁用滑块(默认为false)
|
||
* @property {Number | String} moveHeight 鼠标离开滑块仍可滑动的区域高度，单位rpx(默认100)
|
||
* @event {Function} start 滑动触发
|
||
* @event {Function} moving 正在滑动中
|
||
* @event {Function} end 滑动结束
|
||
* @example <cj-slider v-model="value" />
|
||
*/
|
||
export default {
|
||
name: 'cj-slider',
|
||
props: {
|
||
// 当前进度百分比值
|
||
value: {
|
||
type: Array,
|
||
default(){
|
||
return []
|
||
}
|
||
},
|
||
// 是否禁用滑块
|
||
disabled: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
// 滑块宽度，高等于宽，单位rpx
|
||
blockWidth: {
|
||
type: [Number, String],
|
||
default: 30
|
||
},
|
||
// 最小值
|
||
min: {
|
||
type: [Number, String],
|
||
default: 0
|
||
},
|
||
// 最大值
|
||
max: {
|
||
type: [Number, String],
|
||
default: 100
|
||
},
|
||
// 步进值
|
||
step: {
|
||
type: [Number, String],
|
||
default: 1
|
||
},
|
||
// 滑块条高度，单位rpx
|
||
height: {
|
||
type: [Number, String],
|
||
default: 6
|
||
},
|
||
// 进度条的激活部分颜色
|
||
activeColor: {
|
||
type: String,
|
||
default: '#F48715'
|
||
},
|
||
// 进度条的背景颜色
|
||
inactiveColor: {
|
||
type: String,
|
||
default: '#c0c4cc'
|
||
},
|
||
// 滑块的背景颜色
|
||
blockColor: {
|
||
type: String,
|
||
default: '#F48612'
|
||
},
|
||
// 用户对滑块的自定义颜色
|
||
blockStyle: {
|
||
type: Object,
|
||
default () {
|
||
return {};
|
||
}
|
||
},
|
||
// 鼠标可离开滑块后仍能滑动的范围高度
|
||
moveHeight: {
|
||
type: [Number, String],
|
||
default: '100'
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
mouseLeave: false, // 鼠标移出了滑块
|
||
mouseType: 1, // 1 左滑块 2 右滑块
|
||
mouseDown: false, // 鼠标按下
|
||
startX: 0,
|
||
status: 'end',
|
||
newValue: 0,
|
||
distanceX: 0,
|
||
startValue: 0,
|
||
barStyle: {},
|
||
sliderRect: {
|
||
left: 0,
|
||
width: 0
|
||
}
|
||
};
|
||
},
|
||
created() {
|
||
// 如果不是长度为2的数组,默认值为[最小值, 最大值]
|
||
if (Object.prototype.toString.call(this.value) == '[object Array]' && this.value.length === 2) {
|
||
this.updateValue(this.value[0], this.value[1], false);
|
||
} else {
|
||
this.$emit('input', Array(this.min, this.max))
|
||
}
|
||
},
|
||
mounted() {
|
||
// 获取滑块条的尺寸信息
|
||
this.$uGetRect('.cj-slider').then(rect => {
|
||
this.sliderRect = rect;
|
||
});
|
||
},
|
||
methods: {
|
||
onTouchStart(type, event) {
|
||
if (this.disabled) return;
|
||
this.startX = 0;
|
||
// 触摸点集
|
||
let touches = event.touches[0];
|
||
// 触摸点到屏幕左边的距离
|
||
this.startX = touches.clientX;
|
||
// 此处的this.value虽为props值，但是通过$emit('input')进行了修改
|
||
this.startValue = type === 1 ? this.format(this.value[0]) : this.format(this.value[1]);
|
||
// 标示当前的状态为开始触摸滑动
|
||
this.status = 'start';
|
||
},
|
||
onMouseDown(type, event) {
|
||
if (this.disabled) return;
|
||
this.mouseDown = true;
|
||
this.mouseType = type
|
||
this.startX = event.clientX || 0;
|
||
this.startValue = type === 1 ? this.format(this.value[0]) : this.format(this.value[1]);
|
||
this.status = 'start';
|
||
},
|
||
onTouchMove(type, event) {
|
||
if (this.disabled) return;
|
||
// 连续触摸的过程会一直触发本方法，但只有手指触发且移动了才被认为是拖动了，才发出事件
|
||
// 触摸后第一次移动已经将status设置为moving状态，故触摸第二次移动不会触发本事件
|
||
if (this.status == 'start') this.$emit('start');
|
||
let touches = event.touches[0]
|
||
// 滑块的左边不一定跟屏幕左边接壤，所以需要减去最外层父元素的左边值
|
||
this.distanceX = touches.clientX - this.sliderRect.left
|
||
// 获得移动距离对整个滑块的百分比值，此为带有多位小数的值，不能用此更新视图
|
||
// 否则造成通信阻塞，需要每改变一个step值时修改一次视图
|
||
this.newValue = (this.distanceX / this.sliderRect.width) * (this.max - this.min) + this.min
|
||
this.status = 'moving'
|
||
// 发出moving事件
|
||
this.$emit('moving');
|
||
if (type === 1) {
|
||
this.updateValue(this.newValue, this.format(this.value[1]), true);
|
||
} else {
|
||
this.updateValue(this.format(this.value[0]), this.newValue, true);
|
||
}
|
||
},
|
||
onMouseMove(event) {
|
||
if (!this.mouseDown) return;
|
||
if (this.disabled) return;
|
||
if (this.status == 'start') this.$emit('start');
|
||
// 滑块的左边不一定跟屏幕左边接壤，所以需要减去最外层父元素的左边值
|
||
this.distanceX = event.clientX - this.sliderRect.left
|
||
// 获得移动距离对整个滑块的百分比值，此为带有多位小数的值，不能用此更新视图
|
||
// 否则造成通信阻塞，需要每改变一个step值时修改一次视图
|
||
this.newValue = (this.distanceX / this.sliderRect.width) * (this.max - this.min) + this.min
|
||
this.status = 'moving'
|
||
// 发出moving事件
|
||
this.$emit('moving');
|
||
if (this.mouseType === 1) {
|
||
this.updateValue(this.newValue, this.format(this.value[1]), true);
|
||
} else {
|
||
this.updateValue(this.format(this.value[0]), this.newValue, true);
|
||
}
|
||
},
|
||
onMouseLeave(type) {
|
||
this.mouseLeave = true
|
||
},
|
||
onTouchEnd(type) {
|
||
if (this.disabled) return;
|
||
if (this.status === 'moving') {
|
||
if (type === 1) {
|
||
this.updateValue(this.newValue, this.format(this.value[1]), true);
|
||
} else {
|
||
this.updateValue(this.format(this.value[0]), this.newValue, true);
|
||
}
|
||
this.$emit('end');
|
||
}
|
||
this.status = 'end';
|
||
},
|
||
onMouseUp(type) {
|
||
this.mouseDown = false;
|
||
this.mouseLeave = false;
|
||
if (this.disabled) return;
|
||
if (this.status === 'moving') {
|
||
if (type === 1) {
|
||
this.updateValue(this.newValue, this.format(this.value[1]), true);
|
||
} else {
|
||
this.updateValue(this.format(this.value[0]), this.newValue, true);
|
||
}
|
||
this.$emit('end');
|
||
}
|
||
this.status = 'end';
|
||
},
|
||
onSliMouseUp() {
|
||
// 鼠标在滑块范围内松开
|
||
this.mouseDown = false;
|
||
this.mouseLeave = false;
|
||
},
|
||
onSliMouseMove(e) {
|
||
// 监听整个滑动内的鼠标移动，因为PC端只能监听到小滑块内的移动，移动过快鼠标移出了小滑块则移动失败。
|
||
if (!this.mouseDown) return;
|
||
if (!this.mouseLeave) return;
|
||
this.onMouseMove(e)
|
||
},
|
||
updateValue(value, value2, drag) {
|
||
// 去掉小数部分，同时也是对step步进的处理
|
||
const widthB1 = this.format(value)
|
||
const widthB2 = this.format(value2)
|
||
const widthB1B = Math.round((widthB1 - this.min) * 100 / (this.max - this.min))
|
||
const widthB2B = Math.round((widthB2 - this.min) * 100 / (this.max - this.min))
|
||
// 不允许滑动的值超过max最大值，百分比也不能超过100
|
||
if (widthB1 > widthB2 || widthB2 > this.max || widthB2B > 100) return;
|
||
// 设置移动的百分比值
|
||
let barStyle = {
|
||
width: widthB2B - widthB1B + '%',
|
||
left: widthB1B + '%',
|
||
};
|
||
// 移动期间无需过渡动画
|
||
if (drag == true) {
|
||
barStyle.transition = 'none';
|
||
} else {
|
||
// 非移动期间，删掉对过渡为空的声明，让css中的声明起效
|
||
delete barStyle.transition;
|
||
}
|
||
// 修改value值，这里使用change改变，使用input H5桌面端会卡死，
|
||
this.$emit('input', Array(widthB1, widthB2));
|
||
this.barStyle = barStyle;
|
||
},
|
||
format(value) {
|
||
// 将小数变成整数，为了减少对视图的更新，造成视图层与逻辑层的阻塞
|
||
return Math.round(Math.max(this.min, Math.min(value, this.max)) / this.step) * this.step;
|
||
},
|
||
onClick(event) {
|
||
if (this.disabled) return;
|
||
// 直接点击滑块的情况，计算方式与onTouchMove方法相同
|
||
const widthB1 = this.value[0]
|
||
const widthB2 = this.value[1]
|
||
const value = this.format(((event.detail.x - this.sliderRect.left) / this.sliderRect.width) * (this.max - this
|
||
.min) +
|
||
this.min);
|
||
if (value < widthB1 || (value - widthB1) <= (widthB2 - value)) {
|
||
// 点击位置在左滑块的左边 || 点击位置在中间，且靠近左滑块 => 移动左滑块到该位置
|
||
this.updateValue(value, widthB2, false)
|
||
} else {
|
||
// 点击位置在右滑块的右边 || 点击位置在中间，且靠近右滑块 => 移动右滑块到该位置
|
||
this.updateValue(widthB1, value, false)
|
||
}
|
||
},
|
||
$uGetRect(selector, all) {
|
||
// $uGetRect为uView自带的节点查询简化方法
|
||
return new Promise(resolve => {
|
||
uni.createSelectorQuery().
|
||
in(this)[all ? 'selectAll' : 'select'](selector)
|
||
.boundingClientRect(rect => {
|
||
if (all && Array.isArray(rect) && rect.length) {
|
||
resolve(rect)
|
||
}
|
||
if (!all && rect) {
|
||
resolve(rect)
|
||
}
|
||
})
|
||
.exec()
|
||
})
|
||
},
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.cj-slider {
|
||
position: relative;
|
||
// background-color: #ebedf0;
|
||
margin-top: 30px;
|
||
|
||
&__line {
|
||
position: absolute;
|
||
width: 100%;
|
||
background-color: #ebedf0;
|
||
}
|
||
|
||
&__gap {
|
||
position: relative;
|
||
// 动画有bug，暂时取消
|
||
// transition: width 0.2s;
|
||
background-color: #F48715;
|
||
}
|
||
|
||
&__button {
|
||
width: 24px;
|
||
height: 24px;
|
||
border-radius: 50%;
|
||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
|
||
background-color: #fff;
|
||
cursor: pointer;
|
||
position: relative;
|
||
.numsize{
|
||
position: absolute;
|
||
width: 60rpx;
|
||
height: 40rpx;
|
||
// background-color: #F48715;
|
||
color: #9E9E9E;
|
||
left:50%;
|
||
margin-left: -30rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
border-radius: 10rpx;
|
||
margin-top: 30px;
|
||
&::after{
|
||
content: ' ';
|
||
position: absolute;
|
||
width: 0;
|
||
height: 0;
|
||
left: 22rpx;
|
||
top: 36rpx;
|
||
// border: 5rpx solid;
|
||
// border-color: #f17474 transparent transparent #f17474;
|
||
|
||
border: 10rpx solid transparent;
|
||
border-top-color: #F48715;
|
||
}
|
||
}
|
||
}
|
||
|
||
&__button-wrap {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 0;
|
||
transform: translate3d(-50%, -50%, 0);
|
||
}
|
||
|
||
&__button-wrap2 {
|
||
position: absolute;
|
||
top: 50%;
|
||
right: 0;
|
||
transform: translate3d(50%, -50%, 0);
|
||
}
|
||
}
|
||
|
||
.cj-slider--disabled {
|
||
opacity: 0.5;
|
||
}
|
||
|
||
.mouse-move {
|
||
width: 50px;
|
||
position: fixed;
|
||
left: 0;
|
||
right: 0;
|
||
transform: translateY(-50%);
|
||
opacity: 0;
|
||
}
|
||
</style>
|