我是靠谱客的博主 从容皮卡丘,这篇文章主要介绍Element中Slider滑块的具体使用,现在分享给大家,希望可以做个参考。

组件—滑块

基础用法

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

离散值

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<template> <div class="block"> <span class="demonstration">不显示间断点</span> <el-slider v-model="value1" :step="10"> </el-slider> </div> <div class="block"> <span class="demonstration">显示间断点</span> <el-slider v-model="value2" :step="10" show-stops> </el-slider> </div> </template> <script> export default { data() { return { value1: 0, value2: 0 } } } </script>

带有输入框

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

范围选择

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

竖向模式

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

展示标记

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<template> <div class="block"> <el-slider v-model="value" range :marks="marks"> </el-slider> </div> </template> <script> export default { data() { return { value: [30, 60], marks: { 0: '0°C', 8: '8°C', 37: '37°C', 50: { style: { color: '#1989FA' }, label: this.$createElement('strong', '50%') } } } } } </script>

Attributes


Events

到此这篇关于Element中Slider滑块的具体使用的文章就介绍到这了,更多相关Element Slider滑块内容请搜索靠谱客以前的文章或继续浏览下面的相关文章希望大家以后多多支持靠谱客!

最后

以上就是从容皮卡丘最近收集整理的关于Element中Slider滑块的具体使用的全部内容,更多相关Element中Slider滑块内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(306)

评论列表共有 0 条评论

立即
投稿
返回
顶部