Slider 滑塊

本文轉載自查看原文 2018-03-13 06:35 1566 Form組件

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

¶基礎用法

在拖動滑塊時，顯示當前值

通過設置綁定值自定義滑塊的初始值

 1 <template>
 2   <div class="block">
 3     <span class="demonstration">默認</span>
 4     <el-slider v-model="value1"></el-slider>
 5   </div>
 6   <div class="block">
 7     <span class="demonstration">自定義初始值</span>
 8     <el-slider v-model="value2"></el-slider>
 9   </div>
10   <div class="block">
11     <span class="demonstration">隱藏 Tooltip</span>
12     <el-slider v-model="value3" :show-tooltip="false"></el-slider>
13   </div>
14   <div class="block">
15     <span class="demonstration">格式化 Tooltip</span>
16     <el-slider v-model="value4" :format-tooltip="formatTooltip"></el-slider>
17   </div>
18   <div class="block">
19     <span class="demonstration">禁用</span>
20     <el-slider v-model="value5" disabled></el-slider>
21   </div>
22 </template>
23 
24 <script>
25   export default {
26     data() {
27       return {
28         value1: 0,
29         value2: 50,
30         value3: 36,
31         value4: 48,
32         value5: 42
33       }
34     },
35     methods: {
36       formatTooltip(val) {
37         return val / 100;
38       }
39     }
40   }
41 </script>

View Code

離散值

選項可以是離散的

改變step的值可以改變步長，通過設置show-step屬性可以顯示間斷點

 1 <template>
 2   <div class="block">
 3     <span class="demonstration">不顯示間斷點</span>
 4     <el-slider
 5       v-model="value6"
 6       :step="10">
 7     </el-slider>
 8   </div>
 9   <div class="block">
10     <span class="demonstration">顯示間斷點</span>
11     <el-slider
12       v-model="value7"
13       :step="10"
14       show-stops>
15     </el-slider>
16   </div>
17 </template>
18 
19 <script>
20   export default {
21     data() {
22       return {
23         value6: 0,
24         value7: 0
25       }
26     }
27   }
28 </script>

View Code

帶有輸入框

通過輸入框設置精確數值

設置show-input屬性會在右側顯示一個輸入框

 1 <template>
 2   <div class="block">
 3     <el-slider
 4       v-model="value8"
 5       show-input>
 6     </el-slider>
 7   </div>
 8 </template>
 9 
10 <script>
11   export default {
12     data() {
13       return {
14         value8: 0
15       }
16     }
17   }
18 </script>

View Code

范圍選擇

支持選擇某一數值范圍

設置range即可開啟范圍選擇，此時綁定值是一個數組，其元素分別為最小邊界值和最大邊界值

 1 <template>
 2   <div class="block">
 3     <el-slider
 4       v-model="value9"
 5       range
 6       show-stops
 7       :max="10">
 8     </el-slider>
 9   </div>
10 </template>
11 
12 <script>
13   export default {
14     data() {
15       return {
16         value9: [4, 8]
17       }
18     }
19   }
20 </script>

View Code

豎向模式

設置vertical可使 Slider 變成豎向模式，此時必須設置高度height屬性

 1 <template>
 2   <div class="block">
 3     <el-slider
 4       v-model="value10"
 5       vertical
 6       height="200px">
 7     </el-slider>
 8   </div>
 9 </template>
10 
11 <script>
12   export default {
13     data() {
14       return {
15         value10: 0
16       }
17     }
18   }
19 </script>

View Code

Attributes

參數	說明	類型	可選值	默認值
min	最小值	number	—	0
max	最大值	number	—	100
disabled	是否禁用	boolean	—	false
step	步長	number	—	1
show-input	是否顯示輸入框，僅在非范圍選擇時有效	boolean	—	false
show-input-controls	在顯示輸入框的情況下，是否顯示輸入框的控制按鈕	boolean	—	true
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	—	—

Events

事件名稱	說明	回調參數
change	值改變時觸發（使用鼠標拖曳時，只在松開鼠標后觸發）	改變后的值

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 iviewui Slider 滑塊的坑【Layui】11 滑塊 Slider MFC 滑塊控件Slider Control ReactNative: 使用滑塊組件Slider組件 elementui更改Slider 滑塊顏色樣式 react-slider實現彩色可拖動滑塊 Devrama Slider - 支持任意 HTML 的內容滑塊 Qt Quick 常用元素：TabView(選項卡) 與 Slider(滑塊) 優秀的響應式 jQuery 滑塊插件 – iView Slider js 滑塊 slider 支持PC和移動端制作甘特圖用