基于el-slider實現(xiàn)一個能拖動的時間范圍選擇器
更新時間：2024年02月28日 12:09:52 作者：毛三仙
這篇文章主要介紹了基于el-slider實現(xiàn)一個能拖動的時間范圍選擇器,并通過實例代碼介紹了基于element-ui el-slider實現(xiàn)滑動限位器的方法,需要的朋友可以參考下
el-slider實現(xiàn)一個能拖動的時間范圍選擇器
<template>
<div style="width: 200px">
<el-slider
v-model="workTime"
:step="5"
:max="1435"
:marks="marks"
:format-tooltip="formatTime"
@input="getTime"
>
</el-slider>
</div>
</template>
<script>
export default {
name: 'aaa',
components: {},
props: {},
computed: {},
watch: {},
filters: {},
data() {
return {
workTime: 0,
marks: {
0: '00:00',
720: {
style: {
color: '#1989FA'
},
label: '12:00'
},
1435: {
label: this.$createElement('strong', '23:55')
}
},
}
},
methods: {
/**
* @Event 分鐘轉成時間(如：06:05)
* params: val(分鐘)
* @author: mhf
* @time: 2024-01-31 14:17:54
**/
formatTime(val) {
const hour = Math.floor(val / 60).toString().padStart(2, '0');
const min = (val % 60).toString().padStart(2, '0');
console.log(`${hour}:${min}`)
return `${hour}:${min}`;
},
getTime(e) {
this.formatTime(e)
}
},
created() {
},
mounted() {
},
destroyed() {
}
}
</script>
<style lang="scss" scoped></style>補充：
基于element-ui el-slider實現(xiàn)滑動限位器
應需求需要，要做一個滑動限位器，一通百度，一通谷歌，沒有相對應的解決方案，所以只能自己上。過程有丟丟曲折，比較細的東西。所以耗時也長寫。寫出來有需要的可以參考
需求圖如下：
上面的滑塊是可以在區(qū)間【50-100】之間隨意切換的。左邊和右邊也是可以隨意拉動，區(qū)間可以隨意變動，上面的滑塊也可以跟著區(qū)間的范圍不停的在變動。當然，也是有限制的，我這邊的限制是30-150。
需求拿到手，那就是開始開工了。
看了看element-ui沒有現(xiàn)成的，只能自己用css組合啦。
廢話就少說了，上代碼
html模塊
<div class="fov">
<div class="all_slider">
<div class="assist_mian">
<div class="rel_slider" :style="{'left':moveWidata.left+'%','right':moveWidata.right+'%'}">
<el-slider
v-model="currentFov"
class="point"
:min="fovWid[0]"
:max="fovWid[1]"
@input="setNoFovUnityData()"
@change="getFovAngle()"
/>
</div>
</div>
<el-slider
v-model="fovValue"
class="slider_line"
range
:marks="marks"
:min="30"
:max="150"
@change="getFovData()"
/>
</div>
<div class="show_slider">
<div class="each_inp spe_left">
<el-input
v-model="fovMin"
:min="Number(30)"
:max="Number(150)"
onkeyup="value=value.replace(/[^\d]/g,'')"
type="text"
class="input"
@change="getFovMin()"
/>
<div class="text">最近</div>
</div>
<div class="each_inp spe_right">
<div class="p_right">
<el-input
v-model="fovMax"
:min="Number(30)"
:max="Number(150)"
onkeyup="value=value.replace(/[^\d]/g,'')"
type="text"
class="input"
@change="getFovMax()"
/>
<div class="text">最遠</div>
</div>
</div>
</div>
</div>css模塊代碼如下：
<style lang="scss" scoped>
.assist_mian {
width: 100%;
padding: 0 20px;
position: relative;
height: 1px;
}
.set_title {
padding-top: 20px;
color: #333333;
}
.fov {
padding: 8px 20px 0;
position: relative;
overflow: hidden;
}
.spe_title {
display: flex;
}
.set_sum {
flex: 1;
padding-top: 20px;
text-align: right;
color: #999;
font-size: 12px;
}
.number {
color: #333333;
}
.show_slider {
display: flex;
justify-content: space-between;
margin-top: 20px;
}
.each_inp {
flex: 1;
}
.spe_left {
margin-left: -20px;
}
.spe_right {
position: relative;
margin-right: -20px;
}
.input {
display: block;
width: 50px;
height: 30px;
margin-top: 8px;
background: #F4F4F4;
border-radius: 3px 3px 3px 3px;
border: 1px solid #E9E9E9;
text-align: center;
color: #333;
font-size: 12px;
}
.text {
width: 50px;
height: 30px;
line-height: 30px;
font-size: 12px;
color: #666666;
text-align: center;
}
.p_right {
position: absolute;
right: 0;
}
.rel_slider {
position: absolute;
left: 0;
right: 0;
top: -10px;
}
.input {
::v-deep .el-input__inner {
font-size: 14px !important;
color: #000000 !important;
padding: 0;
height: 30px;
border: none;
text-align: center;
}
}
</style>
<style lang="scss">
.point {
.el-slider__button {
background: url(../../../assets/cam/icon.png) no-repeat;
border: none;
}
.el-slider__runway {
margin: 0;
background: transparent;
}
.el-slider__bar {
background: transparent;
}
}
.slider_line {
.el-slider__runway {
margin: 10px 0 16px 0;
}
.el-slider__bar {
background-color: #001B84;
}
.el-slider__button {
border: 2px solid #001B84;
}
.el-slider__stop {
background: transparent;
}
}
.all_slider {
position: relative;
// padding: 0 20px;
top: 8px;
.el-slider__marks-text {
color: #000;
}
}
</style>樣式搞定，就到了js啦。畢竟要動態(tài)變化呀。代碼如下：
<script>
export default {
data() {
return {
currentFov: 55, // 得到當前值
fovValue: [50, 100],
eachWid: (120 / 100), // 得到滑條每個位置的長度，廣角
moveWidata: { left: 0, right: 0 }, // 廣角垂直視角選擇
fovWid: [60, 80], // 得到廣角滑塊得區(qū)域
marks: { // 得到fov限制
'30': '30',
'90': '90',
'150': '150'
},
fovMin: 0, // fov的最小值,input框的
fovMax: 0,
}
},
created() {
this.getFovData() //初始化一下長度
},
methods: {
// 得到fov的最小值
getFovMin(e) {
this.getFovRange(1, 30, 150)
},
// 得到fov的最大值
getFovMax() {
this.getFovRange(2, 30, 150)
},
/**
* 得到視角fov的數(shù)據(jù)
* type是最近還是最遠
*min 最小值
*max 最大值
*/
getFovRange(type, min, max) {
if (type === 1) {
if (+this.fovMin < min) { // 最小值輸入小于最小應輸入的則賦值最新值
this.fovMin = min
this.fovValue = [min, this.fovValue[1]]
} else {
this.fovValue = [+this.fovMin, this.fovValue[1]]
}
} else {
if (this.fovMax > max) {
this.fovMax = max
this.fovValue = [this.fovValue[0], max]
} else {
this.fovValue = [this.fovValue[0], +this.fovMax]
}
}
this.getFovData(true)
},
/**
* 計算上面當前滑塊的長度
* fov視角得初始化設置
*/
getFovData(isUnityData = false) {
if (this.fovMin !== this.fovValue[0]) {
this.fovMin = this.fovValue[0]
const wleft = (this.fovValue[0] - 30) / this.eachWid
this.moveWidata.left = wleft
}
if (this.fovMax !== this.fovValue[1]) {
this.fovMax = this.fovValue[1]
const wright = (150 - this.fovValue[1]) / this.eachWid
this.moveWidata.right = wright
}
this.fovWid = this.fovValue
}
}
}
</script>以上就是相關代碼啦。
圖標記得改，.point .el-slider__button的backgroud，
需要的自己復制粘貼吧?？梢詤⒖家部梢宰约悍庋b，因為我的業(yè)務原因。不能封裝，分開是更好的選擇，所以就沒有封裝，實在需要就自己封裝。本小禿頭就不操這心了。下一篇見。啦啦啦。
到此這篇關于el-slider實現(xiàn)一個能拖動的時間范圍選擇器的文章就介紹到這了,更多相關el-slider時間范圍選擇器內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
本篇文章主要是對用IE重起計算機或者關機的實現(xiàn)代碼進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-03-03
JavaScript中全局變量、函數(shù)內變量以及常量表達式的效率測試
直接用字符串常量要比利用全局變量快，但創(chuàng)建正則表達式就比起用全局變量要慢上很多了。2009-11-11
這篇文章主要介紹了小程序中實現(xiàn)自定義頭部導航組件的詳細過程,本文通過實例代碼給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧2024-06-06
這篇文章主要為大家詳細介紹了微信小程序音樂播放器開發(fā)，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-11-11
JS檢索下拉列表框中被選項目的索引號(selectedIndex)
這篇文章主要介紹了JS檢索下拉列表框中被選項目的索引號(selectedIndex),本文通過實例代碼圖文詳解的形式給大家介紹的非常詳細，需要的朋友可以參考下2019-12-12
這篇文章主要介紹了js實現(xiàn)簡潔的滑動門菜單(選項卡)效果代碼,涉及javascript鼠標事件操作頁面元素樣式切換的實現(xiàn)技巧,簡單實用,需要的朋友可以參考下2015-09-09
js實現(xiàn)網(wǎng)站最上邊可關閉的浮動廣告條代碼
這篇文章主要介紹了js實現(xiàn)網(wǎng)站最上邊可關閉的浮動廣告條代碼,涉及javascript基于鼠標事件操作頁面元素樣式的實現(xiàn)技巧,需要的朋友可以參考下2015-09-09
JavaScript將base64圖片轉換成formData并通過AJAX提交的實現(xiàn)方法
本文通過三步驟給大家詳細介紹了JavaScript將base64圖片轉換成formData并通過AJAX提交的實現(xiàn)方法，感興趣的朋友一起看看吧2016-10-10
高性能WEB開發(fā) flush讓頁面分塊,逐步呈現(xiàn) flush讓頁面分塊,逐步呈現(xiàn)
在處理比較耗時的請求的時候，我們總希望先讓用戶先看到部分內容，讓用戶知道系統(tǒng)正在進行處理，而不是無響應。2010-06-06
這篇文章主要介紹了微信打開網(wǎng)址添加在瀏覽器中打開提示的辦法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-05-05