Customized simple range code based on vue

The content of this article is about the code to implement a simple range based on vue. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Without further ado, here’s the result picture

##Implementation ideas

• Left slider length

• Left content position

• Middle length

• Right slider length

• Right content Position

• touch3 events

• Calculation of length and position of each slider

• Changes color when selected

1. First of all, we understand that the length of the entire container is unchanged is equal to the left, middle and right, so we can first get the total width of the container and save it with a variable. Here I use the width of the screen.

this.rangeWidth = document.body.clientWidth

Copy after login

1. Add three touch events of vue

@touchstart.stop.prevent="leftTextTouchStart" //按下 
@touchmove.stop.prevent="leftTextTouchMove" //滑动 
@touchend.stop.prevent="leftTextTouchEnd"  //松开//右滑块，同上 
@touchstart.stop.prevent="rightTextTouchStart" 
@touchmove.stop.prevent="rightTextTouchMove" 
@touchend.stop.prevent="rightTextTouchEnd"

Copy after login

1. Use class binding Method, when the touchStart event is triggered, modify the style of the clicked slider, trigger the touchend event when released, and restore the original style

//滑动事件方法
leftTextTouchStart() {
    this.leftClick = true;
}, 
leftTextTouchEnd() {
    this.leftClick = false;
},
//类样式绑定
:class="{check_text_p:leftClick}"

Copy after login

1. when sliding Calculation of the width and position of the three core cores, because the coordinate axis changes in real time during sliding, here we use vue’s calculated properties to operate

rangeWidth //整个容器的宽度
leftWidth //左边滑动的距离，通过滑动事件定义
rightWidth //右边滑动的距离，通过滑动事件定义
width() {
    return Math.min(Math.max(0, this.rangeWidth - this.leftWidth - this.rightWidth), this.rangeWidth)//内容宽度应等于总宽度减去左右两边，且大于等于0小于等于总宽度
}
left() {    
    return Math.max(this.leftWidth, 0)//防止左滑出界面
}
right() {
    if (this.left + this.rightWidth 

Copy after login

1. In the sliding event , the recording of interface changes and the sliding distance between the left and right sides

leftTextTouchMove(e) {
    let touch = e.changedTouches[0];
    let clientX = touch.clientX;//获取滑动事件的横坐标值    
    if (clientX >= 0) {//只检测滑块在坐标值在屏幕内       
        if (this.left + this.right 

Copy after login

leftText() {
    let num = parseInt(this.left / this.rangeWidth * 100);
    if (num === 0 || isNaN(num)) return '不限';    
    return num + 'k';
}
rightText() {
    if (this.rangeWidth === 0) return '不限';    
    let num = parseInt((this.rangeWidth - this.right) / this.rangeWidth * 100);
    if (num >= 0) {
        if (num === 100) return '不限';
        return num + 'k';    
    }
}

Implementation of a simple single-page application based on Vue_html/css_WEB-ITnose

Use vue automated form (with code)

The above is the detailed content of Customized simple range code based on vue. For more information, please follow other related articles on the PHP Chinese website!