<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/index.css"/>
<script src="js/vue.js"></script>
<script src="js/index.js"></script>
</head>
<body>
<div class="app" style="width:40%;margin:0 auto;">
<!-- 基础用法:在拖动滑块时，显示当前值 -->
<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>
<br />
<!-- 离散值:选项可以是离散的
改变step的值可以改变步长，通过设置show-stops属性可以显示间断点 -->
<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>
<!-- 带有输入框:设置show-input属性会在右侧显示一个输入框 -->
<div class="block">
<el-slider
v-model="value1"
show-input>
</el-slider>
</div>
<!-- 范围选择:设置range即可开启范围选择，此时绑定值是一个数组，其元素分别为最小边界值和最大边界值 -->
<div class="block">
<el-slider
v-model="value"
range
show-stops
:max="10">
</el-slider>
</div>
<!-- 竖向模式:设置vertical可使 Slider 变成竖向模式，此时必须设置高度height属性 -->
<div class="block">
<el-slider
v-model="value1"
vertical
height="200px">
</el-slider>
</div>
<!-- 展示标记:设置 marks 属性可以展示标记 -->
<div class="block">
<el-slider
v-model="value6"
range
:marks="marks">
</el-slider>
</div>
</div>
<script>
new Vue({
el:'.app',
data() {
return {
value1: 0,
value2: 50,
value3: 36,
value4: 48,
value5: 42,
value:[4,8],
value6:[30,60],
marks: {
0: '0°C',
8: '8°C',
37: '37°C',
50: {
style: {
color: '#1989FA'
},
label: this.$createElement('strong', '50%')
}
}
}
},
methods: {
formatTooltip(val) {
return val / 100;
}
}
})
</script>
</body>
</html>
要素スライダー
おすすめ
転載: blog.csdn.net/Lemontree_fu/article/details/94471347
おすすめ
ランキング