精华内容
下载资源
问答
  • 超级好看的VUE滑动条效果,VUE2.0写的,可以显示拖动的偏移量以及当前位置等,不妨可以下载看看。
  • ue Vue滑动条一个简单的Vue滑动条组件。 文档文档和演示页面安装npm安装vue-slide-bar-保存或添加纱线vue-slide-bar用法:roller_coaster:Vue滑动条一个简单的Vue滑动条组件。 文档文档和演示页面安装npm install vue...
  • vue滑动条实现圆颜色的改变

    千次阅读 2018-10-21 10:01:14
    用input做一个滑动条vue的监听事件来控制颜色的变化,可是不知道怎么利用循环,可以直接通过newVal数值的变化来直接操作color数组....后来发现可以通过控制RGB来直接改变颜色好像更简单... <!DOCTYPE ...

    用input做一个滑动条,vue的监听事件来控制颜色的变化,可是不知道怎么利用循环,可以直接通过newVal数值的变化来直接操作color数组....后来发现可以通过控制RGB来直接改变颜色好像更简单...

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <script type="text/javascript" src="js/vue.js"></script>
        <style type="text/css">
            .circle{
                display: block; 
                border-radius: 50%; 
                height: 250px; 
                width: 250px; 
                margin: 0; 
            }
            
        </style>
    </head>
    <body>
    <div id="app"> 
        <input type="range" name="" style="width: 500px;" v-model="step" max="1000"
        @οnchange="add()">{{step}}
        <figure class="circle" v-bind:style="{background:morecolor}" ></figure>
    </div>
    <script type="text/javascript">
        var circleArray=["#E3ffff","#CCFFFF","#99ccccc","#66A1D2","#3F8FD2","#0b5fa5","#043C68","#012744","#A51518","#FE3f44","#FE6F73","#FE9598",]
        var app=new Vue({
            el:"#app",
            data:{
                step:5,
                morecolor:circleArray[1]
            },
            methods:{
                add:function(){
                    this.step++
                }
            },
            watch:{
                step:function(newVal,oldVal){
                    

                    if(newVal>=0 && newVal<=200){
                        this.morecolor="#00"+newVal+"ff"
                    }
                    else if(newVal>=200 && newVal<=400){
                        this.morecolor="#1"+newVal+"18"
                    }
                    else if(newVal>=400 && newVal<=600){
                        this.morecolor="#2"+newVal+"44"
                    }
                    else if(newVal>=600 && newVal<=800){
                        this.morecolor="#3"+newVal+"d2"
                    }
                    else if(newVal>=800 && newVal<=1000){
                        this.morecolor="#4"+newVal+"88"
                    }
                    
                    // else if(newVal>=220 && newVal<=280){
                    //     this.morecolor=circleArray[3]
                    // }
                    // else if(newVal>=280 && newVal<=340){
                    //     this.morecolor=circleArray[4]
                    // }
                    // else if(newVal>=340 && newVal<=400){
                    //     this.morecolor=circleArray[5]
                    // }
                    // else if(newVal>=400 && newVal<=460){
                    //     this.morecolor=circleArray[6]
                    // }
                    // else if(newVal>=460 && newVal<=520){
                    //     this.morecolor=circleArray[7]
                    // }
                    // else if(newVal>=520 && newVal<=600){
                    //     this.morecolor=circleArray[8]
                    // }
                    // else if(newVal>=600 && newVal<=680){
                    //     this.morecolor=circleArray[9]
                    // }
                    // else if(newVal>=680 && newVal<=800){
                    //     this.morecolor=circleArray[10]
                    // }
                    // else if(newVal>=800 && newVal<=1000){
                    //     this.morecolor=circleArray[11]
                    // }

                }

            }
        })
    </script>
    </body>
    </html>

    展开全文
  • vue 滑动验证

    2020-11-26 16:36:10
    VerifySlider.vue <template> <div ref="dragDiv" class="drag" > <div ref="drag_bg" class="drag_bg" /> <div ref="drag_text" class="drag_text">{{ confirmWords }}</div> ...

    效果

    在这里插入图片描述
    在这里插入图片描述

    代码

    VerifySlider.vue

    <template>
      <div
        ref="dragDiv"
        class="drag"
      >
        <div ref="drag_bg" class="drag_bg" />
        <div ref="drag_text" class="drag_text">{{ confirmWords }}</div>
        <div class="slide-check-tip">请滑动验证</div>
        <div
          ref="moveDiv"
          :class="{'handler_ok_bg':confirmSuccess}"
          class="handler handler_bg"
          style="position: absolute;top: 0px;left: 0px;"
          @mousedown="mousedownFn($event)"
        />
      </div>
    </template>
    
    <script>
    export default {
      data() {
        return {
          beginClientX: 0, /* 距离屏幕左端距离 */
          mousePressing: false, /* 是否正则按压滑动条 */
          maxwidth: '', /* 拖动最大宽度,依据滑块宽度算出来的 */
          confirmWords: '按住滑块,拖动到最右边', /* 滑块文字 */
          confirmSuccess: false /* 验证成功判断 */
        };
      },
      mounted() {
        document.getElementsByTagName('html')[0].addEventListener('mousemove', this.mouseMoveFn);
        document.getElementsByTagName('html')[0].addEventListener('mouseup', this.moseUpFn);
      },
      methods: {
        mousedownFn: function(e) {
          console.log(' mousedownFn ');
          this.initMaxWidth();
          if (!this.confirmSuccess) {
            e.preventDefault && e.preventDefault(); // 阻止文字选中等 浏览器默认事件
            this.mousePressing = true;
            this.beginClientX = e.clientX;
          }
        }, // mousedoen 事件
        successFunction() {
          this.confirmSuccess = true;
          this.confirmWords = '验证通过';
          if (window.addEventListener) {
            document.getElementsByTagName('html')[0].removeEventListener('mousemove', this.mouseMoveFn);
            document.getElementsByTagName('html')[0].removeEventListener('mouseup', this.moseUpFn);
          } else {
            document.getElementsByTagName('html')[0].removeEventListener('mouseup', () => { });
          }
          this.$refs.drag_text.style.color = '#fff';
          this.$refs.moveDiv.style.left = this.maxwidth + 'px';
          this.$refs.drag_bg.style.width = this.maxwidth + 'px';
        }, // 验证成功函数
        mouseMoveFn(e) {
          if (this.mousePressing) {
            console.log('mouseMoveFn');
            const width = e.clientX - this.beginClientX;
            if (width > 0 && width <= this.maxwidth) {
              this.$refs.moveDiv.style.left = width + 'px';
              this.$refs.drag_bg.style.width = width + 'px';
            } else if (width > this.maxwidth) {
              this.successFunction();
            }
          }
        }, // mousemove事件
        moseUpFn(e) {
          console.log('moseUpFn');
          this.mousePressing = false;
          var width = e.clientX - this.beginClientX;
          if (width < this.maxwidth) {
            // document.getElementsByClassName('handler')[0].style.left = 0 + 'px'
            // document.getElementsByClassName('drag_bg')[0].style.width = 0 + 'px'
            this.$refs.moveDiv.style.left = 0 + 'px';
            this.$refs.drag_bg.style.width = 0 + 'px';
          }
        }, // mouseup事件,
        initMaxWidth() {
          this.maxwidth = this.$refs.dragDiv.clientWidth - this.$refs.moveDiv.clientWidth;
          // this.maxwidth = 338
        },
        // 将滑动条重新至于最左侧
        reset() {
          this.$refs.moveDiv.style.left = 0 + 'px';
          this.$refs.drag_bg.style.width = 0 + 'px';
          this.$refs.drag_text.style.color = '#333';
          this.confirmSuccess = false;
          this.mousePressing = false;
          this.maxwidth = this.$refs.dragDiv.clientWidth - this.$refs.moveDiv.clientWidth;
          document.getElementsByTagName('html')[0].addEventListener('mousemove', this.mouseMoveFn);
          document.getElementsByTagName('html')[0].addEventListener('mouseup', this.moseUpFn);
        }
      }
    };
    </script>
    
    <style scoped>
    .slide-check-tip{
      position: absolute;
      display: inline-block;
      top: 0px;
      right: -85px;
      /* border: 1px solid red; */
      color: #999;
      font-size: smaller;
    }
    .drag {
      position: relative;
      background-color: #e8e8e8;
      width: 70%;
      height: 34px;
      line-height: 34px;
      text-align: center;
    }
    .handler {
      width: 40px;
      height: 32px;
      border: 1px solid #ccc;
      cursor: move;
    }
    .handler_bg {
      background: #fff
        url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo0ZDhlNWY5My05NmI0LTRlNWQtOGFjYi03ZTY4OGYyMTU2ZTYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NTEyNTVEMURGMkVFMTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NTEyNTVEMUNGMkVFMTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo2MTc5NzNmZS02OTQxLTQyOTYtYTIwNi02NDI2YTNkOWU5YmUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NGQ4ZTVmOTMtOTZiNC00ZTVkLThhY2ItN2U2ODhmMjE1NmU2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+YiRG4AAAALFJREFUeNpi/P//PwMlgImBQkA9A+bOnfsIiBOxKcInh+yCaCDuByoswaIOpxwjciACFegBqZ1AvBSIS5OTk/8TkmNEjwWgQiUgtQuIjwAxUF3yX3xyGIEIFLwHpKyAWB+I1xGSwxULIGf9A7mQkBwTlhBXAFLHgPgqEAcTkmNCU6AL9d8WII4HOvk3ITkWJAXWUMlOoGQHmsE45ViQ2KuBuASoYC4Wf+OUYxz6mQkgwAAN9mIrUReCXgAAAABJRU5ErkJggg==')
        no-repeat center;
    }
    .handler_ok_bg {
      background: #fff
        url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo0ZDhlNWY5My05NmI0LTRlNWQtOGFjYi03ZTY4OGYyMTU2ZTYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDlBRDI3NjVGMkQ2MTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDlBRDI3NjRGMkQ2MTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDphNWEzMWNhMC1hYmViLTQxNWEtYTEwZS04Y2U5NzRlN2Q4YTEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NGQ4ZTVmOTMtOTZiNC00ZTVkLThhY2ItN2U2ODhmMjE1NmU2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+k+sHwwAAASZJREFUeNpi/P//PwMyKD8uZw+kUoDYEYgloMIvgHg/EM/ptHx0EFk9I8wAoEZ+IDUPiIMY8IN1QJwENOgj3ACo5gNAbMBAHLgAxA4gQ5igAnNJ0MwAVTsX7IKyY7L2UNuJAf+AmAmJ78AEDTBiwGYg5gbifCSxFCZoaBMCy4A4GOjnH0D6DpK4IxNSVIHAfSDOAeLraJrjgJp/AwPbHMhejiQnwYRmUzNQ4VQgDQqXK0ia/0I17wJiPmQNTNBEAgMlQIWiQA2vgWw7QppBekGxsAjIiEUSBNnsBDWEAY9mEFgMMgBk00E0iZtA7AHEctDQ58MRuA6wlLgGFMoMpIG1QFeGwAIxGZo8GUhIysmwQGSAZgwHaEZhICIzOaBkJkqyM0CAAQDGx279Jf50AAAAAABJRU5ErkJggg==')
        no-repeat center;
    }
    .drag_bg {
      background-color: #7ac23c;
      height: 34px;
      width: 0px;
    }
    .drag_text {
      position: absolute;
      top: 0px;
      width: 100%;
      color: #333;
      text-align: center;
      -moz-user-select: none;
      -webkit-user-select: none;
      user-select: none;
      -o-user-select: none;
      -ms-user-select: none;
    }
    </style>
    
    
    展开全文
  • vue写一个滑动条

    千次阅读 2019-05-24 02:05:01
    滑动条: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta....
    • 滑动条:

    • 代码如下:
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>滑动条</title>
        <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
        <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
        <style>
        #app{
            padding:0.4rem;
        }
        .current-process{
            text-align:center;
            margin-bottom:0.5rem;
            font-size: 0.5rem;
        }
        .nstSlider-pannel {
            padding-top: 0.24rem;
            height: 0.64rem;
            position: relative;
            box-sizing: border-box;
            }
            .nstSlider {
            cursor: pointer;
            border-radius: 0.06rem;
            position: relative;
            z-index: 2;
            height: 0.12rem;
            background: #bcc0ca;
            margin: 0 0.3rem;
            }
            .nstSlider .drag-block {
            position: absolute;
            top: 50%;
            z-index: 2;
            width: 0.84rem;
            height: 0.84rem;
            background-image: url(https://r.51gjj.com/image/static/icon-nstSlider-mark.png);
            background-size: 100%;
            background-repeat: no-repeat;
            background-position: center;
            margin-top: -0.44rem;
            margin-left: -0.42rem;
            }
            .nstSlider .bar {
            border-radius: 0.06rem;
            position: absolute;
            background: #439df8;
            height: 0.12rem;
            top: 0;
            left: 0;
            background: -webkit-linear-gradient(right,#439df8 0,#7370ff 100%);
            background: linear-gradient(to right,#439df8 0,#7370ff 100%);
            padding: 0 0.3rem;
            left: -0.3rem;
            width: 100%;
            }
            .nstSlider-range {
            height: 0.8rem;
            display: flex;
            padding: 0.18rem 0.24rem;
            padding-top: 0.08rem;
            }
            .nstSlider-range .range-l {
            height: 0.32rem;
            line-height: 0.32rem;
            font-size: 0.24rem;
            color: #999;
            width: 50%;
            }
            .nstSlider-range .range-r {
            height: 0.32rem;
            line-height: 0.32rem;
            font-size: 0.24rem;
            color: #999;
            width: 50%;
            text-align: right;
            }
            .red .nstSlider .bar {
            background: linear-gradient(90deg,#df5665,#b34b98)!important;
            }
            .red .nstSlider .drag-block {
            background-image: url(https://r.51gjj.com/act/release/img/20180326_main_icon_2.png) !important;
            }
    
        </style>
    </head>
    <body>
        <div id="app">
            <div class="current-process">{{processValue}}</div>
            <div class="nstSlider-pannel red" ref="nstSlider">
                <div class="nstSlider">
                    <div class="bar" :style="{width: `${this.process}%`}"></div>
                    <div class="drag-block" :style="{left: `${this.process}%`}" v-touchmove="getPoint"></div>
                </div>
            </div>
            <div class="nstSlider-range">
                <p class="range-l">{{config.min}}</p>
                <p class="range-r">{{config.max}}</p>
            </div>
        </div>
        <script>
            var app2 = new Vue({
            el: '#app',
            data: {
                config: {
                    min: 0,
                    max: 500,
                    round: 1,
                    value: 0
                },
                processValue:0,
                process:100,
            },
            created() {
                this.initConf();
            },
            methods:{
                  getPoint(el, point, n) {
                    const pannel = this.$refs.nstSlider;
                    const w = pannel.clientWidth;
                    let left = n + pannel.offsetLeft;
                    const config = this.config;
                    left = left >= 0 ? left : 0;
                    left = left <= w ? left : w;
                    const p = left / w;
                    this.process = p * 100;
                    this.processValue = Math.floor((p * (config.max - config.min) + config.min) / config.round)
                        * config.round;
                    this.$emit('change', this.processValue);
                }
            },
              directives: {
                    touchmove: {
                        bind(el, b) {
                            const hasTouch = navigator.userAgent
                                .toLowerCase()
                                .match(/(iphone|ipod|android|ios)/i);
                            const touchStart = hasTouch ? 'touchstart' : 'mousedown';
                            const touchMove = hasTouch ? 'touchmove' : 'mousemove';
                            let distanceX;
                            el.addEventListener(
                                touchStart,
                                (ev) => {
                                    const point = hasTouch ? ev.touches[0] : ev;
                                    distanceX = point.clientX - el.offsetLeft;
                                    ev.preventDefault();
                                },
                                { passive: false }
                            );
                            el.addEventListener(
                                touchMove,
                                (ev) => {
                                    const point = hasTouch ? ev.changedTouches[0] : ev;
                                    b.value(el, point, point.clientX - distanceX);
                                    ev.preventDefault();
                                },
                                { passive: false }
                            );
                        }
                    }
                }
        })
        </script>
    </body>
    </html>
    复制代码
    展开全文
  • ①创建滑动输入组件Slider.vue: <template> <div class="m-slider" ref="slider"> <div class="u-slider-rail" @click="onClickPoint"></div> <div class="u-slider-track" @...

    效果图如下:

    组件支持传入最小值(min)最大值(max)的范围,并可设置初始最小值(initialMin)和初始最大值(initialMax)

    拖动滑块调整最大最小值,并可点击输入条位置,切换数值

    ①创建滑动输入条组件Slider.vue

    <template>
      <div class="m-slider" ref="slider">
        <div class="u-slider-rail" @click="onClickPoint"></div>
        <div class="u-slider-track" @click="onClickPoint" :style="`left: ${left}px; right: auto; width: ${right - left}px;`"></div>
        <div class="u-slider-handle" ref="left" @mousedown="onLeftMouseDown" :style="`left: ${left}px; right: auto; transform: translateX(-50%);`"></div>
        <div class="u-slider-handle" ref="right" @mousedown="onRightMouseDown" :style="`left: ${right}px; right: auto; transform: translateX(-50%);`"></div>
      </div>
    </template>
    <script>
    export default {
      name: 'Slider',
      props: {
        min: { // 滑动输入条最小值
          type: Number,
          default: 0
        },
        max: { // 滑动输入条最大值
          type: Number,
          default: 100
        },
        initialMin: { // 滑动输入条初始最小值,默认在最左侧
          type: Number,
          default: 0
        },
        initialMax: { // 滑动输入条初始最大值,默认在最右侧
          type: Number,
          default: 100
        }
      },
      data () {
        return {
          left: '', // 左滑块距离滑动条左端的距离
          right: '', // 右滑动距离滑动条左端的距离
          width: '' // 滑动输入条在页面中的宽度
        }
      },
      mounted () {
        this.width = this.$refs.slider.clientWidth
        this.left = this.initialMin * this.width / this.max
        this.right = this.initialMax * this.width / this.max
      },
      computed: {
        low () {
          return Math.round(this.left / this.width * this.max)
        },
        high () {
          return Math.round(this.right / this.width * this.max)
        }
      },
      watch: {
        low (to, from) {
          this.$emit('lowChange', to) // 左滑块对应数字回调
        },
        high (to, from) {
          this.$emit('highChange', to) // 右滑块对应数字回调
        }
      },
      methods: {
        onClickPoint (e) { // 点击滑动条,移动滑块
          var offsetLeft = this.$refs.slider.offsetLeft // 滑动条左端距离屏幕左侧的距离
          var moveX = e.clientX - offsetLeft
          if (moveX <= this.left) {
            this.left = moveX
          } else if (this.moveX >= this.right) {
            this.right = this.moveX
          } else {
            if ((moveX - this.left) < (this.right - moveX)) {
              this.left = moveX
            } else {
              this.right = moveX
            }
          }
        },
        onLeftMouseDown (e) { // 在滚动条上拖动左滑块
          // 滑块水平方向上距离屏幕左端的距离,减去滑块距离滑动条最左端的距离:e.clientX - this.$refs.left.offsetLeft
          var offsetLeft = this.$refs.slider.offsetLeft // 滑动条左端距离屏幕左侧的距离
          document.onmousemove = (e) => {
            var moveX = e.clientX - offsetLeft
            if (moveX < 0) {
              this.left = 0
            } else if (moveX >= this.right) {
              this.left = this.right
            } else {
              this.left = moveX
            }
          }
          document.onmouseup = (e) => {
            document.onmousemove = null
            document.onmouseup = null
          }
        },
        onRightMouseDown (e) { // 在滚动条上拖动右滑块
          /// 滑块水平方向上距离屏幕左端的距离,减去滑块距离滑动条最左端的距离:e.clientX - this.$refs.left.offsetLeft
          var offsetLeft = this.$refs.slider.offsetLeft // 滑动条左端距离屏幕左侧的距离
          console.log('offsetLeft:', offsetLeft)
          document.onmousemove = (e) => {
            var moveX = e.clientX - offsetLeft
            if (moveX > this.width) {
              this.right = this.width
            } else if (moveX <= this.left) {
              this.right = this.left
            } else {
              this.right = moveX
            }
          }
          document.onmouseup = (e) => {
            document.onmousemove = null
            document.onmouseup = null
          }
        }
      }
    }
    </script>
    <style lang="less" scoped>
    .m-slider {
      height: 4px;
      position: relative;
      cursor: pointer;
      touch-action: none;
      &:hover {
        .u-slider-rail { // 灰色未选择滑动条背景色
          background: #E3E3E3;
        }
        .u-slider-track { // 蓝色已选择滑动条背景色
          background: #1890ff;
        }
      }
      .u-slider-rail { // 灰色未选择滑动条背景色
        position: absolute;
        z-index: 99;
        height: 4px;
        width: 100%;
        background: #f5f5f5;
        border-radius: 2px;
        transition: background .3s;
      }
      .u-slider-track { // 蓝色已选择滑动条背景色
        background: #91d5ff;
        border-radius: 4px;
        position: absolute;
        z-index: 99;
        height: 4px;
        cursor: pointer;
        transition: background .3s;
      }
      .u-slider-handle { // 滑块
        position: absolute;
        z-index: 999;
        width: 14px;
        height: 14px;
        margin-top: -7px;
        box-shadow: 0;
        background: #fff;
        border: 2px solid #91d5ff;
        border-radius: 50%;
        cursor: pointer;
        transition: border-color .3s,box-shadow .6s,transform .3s cubic-bezier(.18,.89,.32,1.28);
        &:hover {
          border-color: #1890ff;
        }
      }
    }
    </style>

    ②在要使用的页面引入

    <div class="m-num">
    	<p class="u-num">{{ low }}</p>
    	<p class="u-num">{{ high }}</p>
    </div>
    <div class="slider">
    	<Slider
    		:min="0"
    		:max="100"
    		:initialMin="low"
    		:initialMax="high"
    		@lowChange="lowChange"
    		@highChange="highChange"
    	/>
    </div>
    import Slider from '@/components/Slider'
    components: {
        Slider
    }
    data () {
    	return {
    		low: 20,
    		high: 80
    	}
    }
    lowChange (val) {
          this.low = val
          console.log('lowChange:', val)
    },
    highChange (val) {
          this.high = val
          console.log('highChange:', val)
    }
    展开全文
  • Vue 滑动验证

    2019-11-10 21:39:10
    未验证之前滑动条上显示的文字 滑块箭头指向Vue函数 判断是否拖动完毕 拖动完毕时改变背景色并显示验证成功 效果图演示 原始状态 点击之后拖动 拖动完毕 有没有感觉很奇妙的呢??? 在欣赏代码之前准备工作要...
  • vue 左滑滚动组件 左滑下面有进度条展示随着拖动滑动,也可以拖动进度条 移动端
  • vue左右滑动

    2018-06-13 17:32:15
    该文档是一个vue写的模仿探探app的一个小功能,左右滑动
  • vue 之 左右滑动,底下滚动跟随 效果图 分析与实现 手指拖着往左走,那么下面的小红条就应该往右走! 上面手指拖着往左走的距离 / 下面小红条向走走的距离 = 上面总 / 下面总 <!-- --> <template> ...
  • 主要为大家详细介绍了vue移动端的左右滑动事件,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 左右两箭头控制按钮组左右移动,双击到最左或最右边,功能比较简单。如下所示 <template> <div class="demoButtons"> <div class="buttonF">...el-row style="height:30px ">...
  • 最近得到一个新需求,需要在Vue项目的移动端页面上加上左右滑动效果,经过一番折腾,最终决定四月vue-touch。下面小编把实现代码分享给大家,感兴趣的朋友一起看看吧
  • vue实现可以滑动的轮播图

    千次阅读 2020-06-03 15:56:34
    <template> <div class="my-swiper wh" ref="mySwiper"> <ul class="my-swiper-wrap" :style="{width:classobj,transform: translateXVal}" v-if="isShow" @mouseenter="enter" ...
  • vue滑动选择组件_Vue选择组件

    千次阅读 2020-07-30 15:26:27
    vue滑动选择组件 选择 (vselect) A vue select components. Vue选择组件。 View Demo 查看演示 View Github 查看Github 安装: (Installation:) npm install --save-dev vselect-component 如何使用 (How to ...
  • 主要为大家详细介绍了vue开发拖拽进度条滑动组件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • vue web滚动分页

    2020-09-05 17:01:16
    vue web滚动分页 1.在你的帮助类里面新建一个slidePagination.js文件 2.将下面的代码复制进去 import Vue from 'vue' // 聚焦指令 // 注册一个全局自定义指令 `v-focus` // v-focus Vue.directive('focus', { /...
  • 第一个是在通讯录右边的索引上进行滑动滑动到相应字母就跳转到相应字母的锚点上。
  • /deep/ *{ /* 设置滚动条的样式 */ ::-webkit-scrollbar { width: 0; height: 0; //background-color: #ccc;...也可以用来设置滑动条样式,这里用了/deep/是因为使用element,改变框架原有样式(样式穿透)。 ...
  • VUE滚动插件——vue-happy-scroll

    万次阅读 2018-08-21 16:31:12
    说明:这里会出现横向滚动,是因为默认是开启横向滚动的,并且内容区域高度超出了外层盒子的宽度   下面介绍使用方法: 1、安装vue-happy-scroll 推荐使用npm安装,这样可以跟随你的webpack配置去选择怎样...
  • vue实现一个滚动

    2021-07-23 17:35:51
    vue实现一个滚动 起初是想修改浏览器滚动样式来达到效果 但是查阅了资料 浏览器滚动不能修改宽度与位置 没办法只能自己写 首先是滚动样式 <div class="scrollBar" v-if="roleList.length > 5"> ...
  • 主要介绍了vue loadmore 组件滑动加载更多源码解析,需要的朋友可以参考下
  • vue: 滚动定位

    千次阅读 2019-09-24 10:32:22
    //执行滚动跳转到某个元素,支持id,vue组件,dom元素 $toScroll(ref: any,parentRef:any) { let dom = ref; let parentDom = parentRef //id选择器 if (_.isString(ref)) { dom = document.getElementById(ref)...
  • 组件被包在一个高度固定的div mounted () { var boDiv = document.getElementById(this.id); if(boDiv == undefined){ return; } var isFirefox=navigator.userAgent.indexOf("Firefox") ...
  • 基于vue的滚动插件 Vuescroll (Vuescroll) A powerful, customizable ... 专为Vue.js设计的功能强大,可自定义的滚动插件。 View demo 查看演示 Download Source 下载源 特征 (Features) Support mob...
  • 今天给小伙伴们推荐3款超美观高效的Vue自定义滚动组件Vue-Scrollbar。1、OverlayScrollbarsoverlayscrollbars 一款优秀高质量的自定义滚动插件,star高达1.4K+。支持跨框架使用 (js vue react angular),兼容IE8...
  • 欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~本文由前端林子发表本文会介绍CSS滚动选择器,并在demo中展示如何在Webkit内核浏览器和IE浏览器中,自定义一个横向以及一个纵向的滚动。0.需求有的...
  • }, handleScroll () { // scroel var scroEl = document.getElementById('scro') // 获取内容高度 const scrollHeight = scroEl.scrollHeight // 获取滚动纵坐标位置 const scrollTop = scroEl.scrollTop // 我给...
  • 一款支持移动端的vue滑动轮播图插件vueswiper,演示页面给出了5中范例:基本例子、垂直滚动、不定宽度、无缝循环滚动、多层级滚动,每一种都可以通过鼠标拖动图片来滑动,可以点击按钮来增加页面查看效果。...
  • Vue 添加滑动条监听

    千次阅读 2018-08-30 21:21:07
    在钩子中添加监听  mounted () { const _this = this ... // 滑动条距离底部距离 var bottomHeight = height - windowHeight - scrollTop if (bottomHeight ) { // 调用处理方法,可实现懒加载 } },  

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 6,699
精华内容 2,679
关键字:

vue滑动条

vue 订阅