013_Slider滑块

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滑块相关推荐

html滑块数值怎么显示,显示HTML5滑块值旁边的百分比
我有6个滑块,每个滑块的相应值都是0-100.我希望能够在每个滑块的右侧显示每个滑块百分比(相对于总滑块总数),但我不确定如何做到这一点.显示HTML5滑块值旁边的百分比我能抢滑块值上面显示,以及滑 ...
angularjs 滑块验证码移动端_SliderCaptcha
滑块式验证码用户通过拖动滑块行为来完成校验,支持PC端及移动端.可以将用户拖动行为的时间.精度,滑动轨迹等信息到服务器,然后进行后台算法验证. 特别介绍 Blazor 版本的滑块验证码传送门在线 ...
iOS 自定义双向滑块Slider
ZPSlider 一个双向滑块的Slider 前提这个是在一次和朋友吃饭的时候,我们唠嗑的时候他说的一个需求.因为系统的Slider是只有一个滑块的,而且没有分段滑动的效果. 这不最近都在研究这么个 ...
一个简单的slider滑块组件
2019独角兽企业重金招聘Python工程师标准>>> 我们先来看一张图片: 要实现这样的效果我们有很多种方法,比如直接使用<input type="range&qu ...
vb中的webrowser无法进行滑块验证_专题63 验证动量守恒定律
[基础回顾] 考点内容:验证动量守恒定律考纲解读: 1.会用实验装置测速度或用其他物理量表示物体的速度大小. 2.验证在系统不受外力的作用下,系统内物体相互作用时总动量守恒．一.实验目的验 ...
为ListView组件加上快速滑块以及修改快速滑块图像
本文转载自:http://blog.csdn.net/ouyang_peng/article/details/46919723 作者:欧阳鹏欢迎转载,与人分享是进步的源泉! 转载请保留原文地址:h ...
WPF 仿IPhone滑块开关样式 - CheckBox
WPF 仿IPhone滑块开关样式 - CheckBox 原文:WPF 仿IPhone滑块开关样式 - CheckBox <Style x:Key="CheckRadioFocus ...
ANSYS滑块导轨配合方法
一直报错,发现是ANSYS中滑块与导轨配合出错了,记录一下应该怎么配合: 1,选择General 2,分别选择滑块与导轨的两个面: 3,确定好面之后,确定相对滑动的方向,下面说明是沿着X轴方向滑动: ...
MFC滑块的使用方式
MFC滑块的使用方式: 如下六个滑块的使用方式: void CPropColor::OnHScroll(UINT nSBCode, UINT nPos, CScrollBar* pScrollBar) ...

013_Slider滑块

013_Slider滑块相关推荐

最新文章

热门文章