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

The main interface and logic are two major blocks

The interface is divided into 5 parts

• Left slider length

• Left content position

• Middle length

• Right slider length

• Right content Position

Logic

• touch3 events

• Calculation of length and position of each slider

• Changes color when selected

Specific implementation steps

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

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"

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}"

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 

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 

6. The text content can be realized by calculating the value

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';    
    }
}

That’s it for the core code.

Related recommendations:

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!