上海11选5走势图

vue如何监听滑动条

最近文汇建站小编在进行app开发时,遇到vue方面的问题,今天小编分享一下自己的心得。

直接上代码:

html

    <div class="col">

        <label for="ganzang" class="le">镇痛效果评分</label>

        <div class="aui-content" style="width:50%;float:right;padding:0 1rem;margin-top:0.4rem">

               <p style="display:none"><span id="value-2">4</span>分</p>

               <div class="aui-range" style="margin-top:30px;width:100%" id="app">

                 <input id="range2" class="progress" type="range" :value="processPoint" :max ="duration" min ="0" step="1" @input = "changeProcess();" style="width: 100%;top:0。1rem" :style="{background: '-webkit-linear-gradient(top, #1971df, #1971df) 0% 0% / '+ processPoint*100/duration +'% 100% no-repeat'}">

上海11选5走势图               </div>

           </div>


        <div class="clearfix"></div>

      </div>

vue

          app = new Vue({

                 el: '#app',

                 data: {

                     processPoint:data,

                     duration:'10' //input range总分段

                 },

上海11选5走势图                 methods: {

                     changeProcess: function() {

                         var range = document。getElementById('range2');

                         this.processPoint = range.value;

                         fninput(range。value,'ztpf')

上海11选5走势图                     },

                 }

             });

           var range2 = new auiRange({

               element:document.getElementById("range2")

           },function(ret){

               document.getElementById("value-2").textContent = ret.value;

上海11选5走势图           })

css


    .jybs .con .col input[type="range"] {  /*-webkit-box-shadow: 0 1px 0 0px #424242, 0 1px 0 #060607 inset, 0px 2px 10px 0px black inset, 1px 0px 2px rgba(0, 0, 0, 0.4) inset, 0 0px 1px rgba(0, 0, 0, 0.6) inset;*/-webkit-appearance: none; /*去除默认样式*/background-color: #ebeff4;/*border-radius: 15px;*/width: 100% !important;-webkit-appearance: none;height:6px;padding: 0;border: none;border-radius:3px;/*input的长度为80%,margin-left的长度为10%*/}

      。jybs 。con 。col input[type="range"]::-webkit-slider-thumb {-webkit-appearance: none;/*去除默认样式*/cursor: default;top: 0;height: 0。7rem;  width: 0。7rem;transform: translateY(-0。3rem);/*background: none repeat scroll 0 0 #5891f5;*/background: #1971df;  border-radius: 50%;/*-webkit-box-shadow: 0 -1px 1px #fc7701 inset;*/}

      .jybs .con .col input[type=range]::-webkit-slider-runnable-track {/*轨道*/height: 6px;background: rgba(0,0,0,0.2);border-radius: 3px;}

对应页面

1.gif

上海11选5走势图要实现vue控制  我们需要先清理下样式

 ::-webkit-slider-thumb

这是type为range的input标签内的一种伪类样式,用于设置range的滑块的具体样式,就是前面的那个圆圈,该伪类只在内核为webkit/blink的浏览器中有效;该伪类需要配和::-webkit-slider-runnable-track使用,否则会没有效果。。。。。。。

:-webkit-slider-runnable-track是range的轨道

然后利用css3 的

background的渐变与backgroud-size;最后渲染为:

background: -webkit-linear-gradient(top, rgb(5, 156, 250), rgb(5, 156, 250)) 0% 0% / 27% 100% no-repeat;


解释一下各个参数如下图:

上海11选5走势图部分1: -webkit-linear-gradient(top, rgb(5, 156, 250), rgb(5, 156, 250)) 

表示:渐变参数,从上到下开始渐变,从rgb(5, 156, 250)到rgb(5, 156, 250)变颜色,

部分2:0% 0% 从左上角的(0%,0%)开始填充颜色

部分3: 27% 100% 到整个而input的(27%,100%)填充颜色结束。


上海11选5走势图然后通过计算修改部分3中 27%的值来改变填充长度。

下面画过的区域是用vue的methods方法控制的

html的<input type="range">拖拽时会触发oninput事件

每次  oninput  即  拖拽时获取   input value   的值。

 var range = document。getElementById('range2');

                         this.processPoint = range.value;

计算百分长度  processPoint*100/duration

processPoint为拖拽过得长度,duration 为总长度

好了,是不是觉得小编分享的很有用呢,要是想关注更多的话就来文汇建站关注小编吧!


关键词:
返回列表

上海11选5走势图相关的文章

相关案例

上海11选5开奖结果 上海11选5 上海11选5走势图 悠洋棋牌 悠洋棋牌 多彩彩票平台 上海11选5APP 上海11选5走势图 上海11选5APP 悠洋棋牌