最近文匯軟件小編在進(jìn)行app開發(fā)時(shí)，遇到vue方面的問(wèn)題，今天小編分享一下自己的心得。
直接上代碼：
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; /*去除默認(rèn)樣式*/background-color: #ebeff4;/*border-radius: 15px;*/width: 100% !important;-webkit-appearance: none;height:6px;padding: 0;border: none;border-radius:3px;/*input的長(zhǎng)度為80%，margin-left的長(zhǎng)度為10%*/}
.jybs .con .col input[type="range"]::-webkit-slider-thumb {-webkit-appearance: none;/*去除默認(rèn)樣式*/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;}
對(duì)應(yīng)頁(yè)面
要實(shí)現(xiàn)vue控制 我們需要先清理下樣式
::-webkit-slider-thumb
這是type為range的input標(biāo)簽內(nèi)的一種偽類樣式,用于設(shè)置range的滑塊的具體樣式,就是前面的那個(gè)圓圈，該偽類只在內(nèi)核為webkit/blink的瀏覽器中有效；該偽類需要配和::-webkit-slider-runnable-track使用,否則會(huì)沒(méi)有效果.......
:-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；
解釋一下各個(gè)參數(shù)如下圖：
部分1： -webkit-linear-gradient(top, rgb(5, 156, 250), rgb(5, 156, 250))
表示：漸變參數(shù)，從上到下開始漸變，從rgb(5, 156, 250)到rgb(5, 156, 250)變顏色，
部分2：0% 0% 從左上角的(0%,0%)開始填充顏色
部分3： 27% 100% 到整個(gè)而input的（27%，100%）填充顏色結(jié)束。
然后通過(guò)計(jì)算修改部分3中 27%的值來(lái)改變填充長(zhǎng)度。
下面畫過(guò)的區(qū)域是用vue的methods方法控制的
html的拖拽時(shí)會(huì)觸發(fā)oninput事件
每次 oninput 即 拖拽時(shí)獲取 input value 的值。
var range = document.getElementById('range2');
this.processPoint = range.value;
計(jì)算百分長(zhǎng)度 processPoint*100/duration
processPoint為拖拽過(guò)得長(zhǎng)度，duration 為總長(zhǎng)度
好了，是不是覺(jué)得小編分享的很有用呢，要是想關(guān)注更多的話就來(lái)文匯軟件關(guān)注小編吧！
