1. Slider滑塊

1.1. 通過拖動滑塊在一個固定區間內進行選擇。

1.2. Slider屬性

參數	說明	類型	可選值	默認值
value / v-model	綁定值	number	無	0
min	最小值	number	無	0
max	最大值	number	無	100
disabled	是否禁用	boolean	無	false
step	步長	number	無	1
show-input	是否顯示輸入框, 僅在非范圍選擇時有效	boolean	無	false
show-input-controls	在顯示輸入框的情況下, 是否顯示輸入框的控制按鈕	boolean	無	true
input-size	輸入框的尺寸	string	large / medium / small / mini	small
show-stops	是否顯示間斷點	boolean	無	false
show-tooltip	是否顯示tooltip	boolean	無	true
format-tooltip	格式化tooltip message	function(value)	無	無
range	是否為范圍選擇	boolean	無	false
vertical	是否豎向模式	boolean	無	false
height	Slider高度, 豎向模式時必填	string	無	無
label	屏幕閱讀器標簽	string	無	無
debounce	輸入時的去抖延遲, 毫秒, 僅在show-input等于true時有效	number	無	300
tooltip-class	tooltip的自定義類名	string	無	無
marks	標記, key的類型必須為number且取值在閉區間[min, max]內, 每個標記可以單獨設置樣式	object	無	無

1.3. Slider事件

事件名稱	說明	回調參數
change	值改變時觸發(使用鼠標拖曳時, 只在松開鼠標后觸發)	改變后的值
input	數據改變時觸發(使用鼠標拖曳時, 活動過程實時觸發)	改變后的值

2. Slider滑塊例子

2.1. 使用腳手架新建一個名為element-ui-slider的前端項目, 同時安裝Element插件。

2.2. 編寫App.vue?

<template><div id="app"><router-view></router-view></div> </template><script> export default {name: 'app' } </script><style>#app {width: 600px;margin: 0 0 50px 10px;} </style>

2.3. 編寫index.js

import Vue from 'vue' import VueRouter from 'vue-router' import Slider from '../components/Slider.vue' import RangeSlider from '../components/RangeSlider.vue'Vue.use(VueRouter)const routes = [{ path: '/', redirect: '/Slider' },{ path: '/Slider', component: Slider },{ path: '/RangeSlider', component: RangeSlider } ]const router = new VueRouter({routes })export default router

2.4. 在components下創建Slider.vue

<template><div><h1>基礎用法</h1><h4>在拖動滑塊時, 顯示當前值。通過設置綁定值自定義滑塊的初始值。</h4><div class="block"><span>默認</span><el-slider v-model="base_value1"></el-slider></div><div class="block"><span>自定義初始值</span><el-slider v-model="base_value2"></el-slider></div><div class="block"><span>隱藏 Tooltip</span><el-slider v-model="base_value3" :show-tooltip="false"></el-slider></div><div class="block"><span>格式化 Tooltip</span><el-slider v-model="base_value4" :format-tooltip="formatTooltip"></el-slider></div><div class="block"><span>禁用</span><el-slider v-model="base_value5" disabled></el-slider></div><h1>離散值-選項可以是離散的</h1><h4>改變step的值可以改變步長, 通過設置show-stops屬性可以顯示間斷點。</h4><div class="block"><span>不顯示間斷點</span><el-slider v-model="step_value1" :step="10"></el-slider></div><div class="block"><span>顯示間斷點</span><el-slider v-model="step_value2" :step="10" show-stops></el-slider></div><h1>帶有輸入框-通過輸入框設置精確數值</h1><h4>設置show-input屬性會在右側顯示一個輸入框。</h4><div class="block"><el-slider v-model="input_value" show-input></el-slider></div></div> </template><script> export default {data () {return {base_value1: 0,base_value2: 50,base_value3: 36,base_value4: 48,base_value5: 42,step_value1: 0,input_value: 0}},methods: {formatTooltip (val) {return val / 100}} } </script>

2.5. 在components下創建RangeSlider.vue

<template><div><h1>范圍選擇-支持選擇某一數值范圍</h1><h4>設置range即可開啟范圍選擇, 此時綁定值是一個數組, 其元素分別為最小邊界值和最大邊界值。</h4><div class="block"><el-slider v-model="range_value" range show-stops :max="10"></el-slider></div><h1>豎向模式</h1><h4>設置vertical可使Slider變成豎向模式, 此時必須設置高度height屬性。</h4><div class="block"><el-slider v-model="vertical_value" vertical height="200px"></el-slider></div><h1>展示標記</h1><h4>設置marks屬性可以展示標記。</h4><div class="block"><el-slider v-model="value" range :marks="marks"></el-slider></div></div> </template><script> export default {data () {return {range_value: [4, 8],vertical_value: 0,value: [30, 60],marks: {0: '0°C',8: '8°C',37: '37°C',50: {style: {color: '#1989FA'},label: this.$createElement('strong', '50%')}}}} } </script>

2.6. 運行項目, 訪問http://localhost:8080/#/Slider

2.7. 運行項目, 訪問http://localhost:8080/#/RangeSlider?

總結

以上是生活随笔為你收集整理的013_Slider滑块的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。