最近文匯軟件小編在進行app開發時，遇到vue方面的問題，今天小編分享一下自己的心得。

直接上代碼：

html

vue

          app = new Vue({

                 el: '#app',

                 data: {

                     processPoint:data,

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

                 },

                 methods: {

                     changeProcess: function() {

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

                         this.processPoint = range.value;

                         fninput(range.value,'ztpf')

                     },

                 }

             });

           var range2 = new auiRange({

               element:document.getElementById("range2")

           },function(ret){

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

           })

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

對應頁面

要實現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；

解釋一下各個參數如下圖：

部分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%）填充顏色結束。

然后通過計算修改部分3中 27%的值來改變填充長度。

下面畫過的區域是用vue的methods方法控制的

html的拖拽時會觸發oninput事件

每次  oninput  即  拖拽時獲取   input value   的值。

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

                         this.processPoint = range.value;

計算百分長度  processPoint*100/duration

processPoint為拖拽過得長度，duration 為總長度

好了，是不是覺得小編分享的很有用呢，要是想關注更多的話就來文匯軟件關注小編吧！