vue element plus Slider 滑块

2024-03-07 01:20

本文主要是介绍vue element plus Slider 滑块,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

通过拖动滑块在一个固定区间内进行选择

TIP

在 SSR 场景下,您需要将组件包裹在 <client-only></client-only> 之中 (如: Nuxt) 和 SSG (e.g: VitePress).

基础用法#

在拖动滑块时,显示当前值

通过设置绑定值自定义滑块的初始值

Default value

Customized initial value

Hide Tooltip

Format Tooltip

Disabled

离散值#

选项可以是离散的

改变step的值可以改变步长, 通过设置 show-stops 属性可以显示间断点

Breakpoints not displayed

Breakpoints displayed

带有输入框的滑块#

通过输入框输入来改变当前的值。

设置 show-input 属性会在右侧显示一个输入框

不同尺寸#

位置#

您可以自定义 Tooltip 提示的位置。

范围选择#

你还可以选择一个范围值

配置 range 属性以激活范围选择模式,该属性的绑定值是一个数组,由最小边界值和最大边界值组成。

垂直模式#

配置 vertical 属性为 true 启用垂直模式。 在垂直模式下,必须设置 height 属性。

显示标记#

设置 marks 属性可以在滑块上显示标记。

0°C

8°C

37°C

50%

API#

属性#

属性名描述类型默认
model-value / v-model选中项绑定值number / object0
min最小值number0
max最大值number100
disabled是否禁用booleanfalse
step步长number1
show-input是否显示输入框,仅在非范围选择时有效booleanfalse
show-input-controls在显示输入框的情况下,是否显示输入框的控制按钮booleantrue
sizeslider 包装器的大小,垂直模式下该属性不可用enumdefault
input-size输入框的大小,如果设置了 size 属性,默认值自动取 sizeenumdefault
show-stops是否显示间断点booleanfalse
show-tooltip是否显示提示信息booleantrue
format-tooltip格式化提示信息Function
range是否开启选择范围booleanfalse
vertical垂直模式booleanfalse
height滑块高度,垂直模式必填string
label屏幕阅读器标签string
range-start-labelrange 为true时,屏幕阅读器标签开始的标记string
range-end-labelrange 为true时,屏幕阅读器标签结尾的标记string
format-value-text显示屏幕阅读器的 aria-valuenow 属性的格式Function
debounce输入时的去抖延迟,毫秒,仅在 show-input 等于 true 时有效number300
tooltip-classtooltip 的自定义类名string
placementTooltip 出现的位置enumtop
marks标记, key 的类型必须为 number 且取值在闭区间 [min, max] 内,每个标记可以单独设置样式object
validate-event输入时是否触发表单的校验booleantrue

事件#

事件名说明类型
change值改变时触发(使用鼠标拖曳时,只在松开鼠标后触发)Function
input数据改变时触发(使用鼠标拖曳时,活动过程实时触发)Function

类型声明#

显示类型声明

 

源代码#

组件 • 文档

这篇关于vue element plus Slider 滑块的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!


原文地址:
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.chinasem.cn/article/782003

相关文章

MyBatis-Plus 中 nested() 与 and() 方法详解(最佳实践场景)

《MyBatis-Plus中nested()与and()方法详解(最佳实践场景)》在MyBatis-Plus的条件构造器中,nested()和and()都是用于构建复杂查询条件的关键方法,但... 目录MyBATis-Plus 中nested()与and()方法详解一、核心区别对比二、方法详解1.and()

前端如何通过nginx访问本地端口

《前端如何通过nginx访问本地端口》:本文主要介绍前端如何通过nginx访问本地端口的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、nginx安装1、下载(1)下载地址(2)系统选择(3)版本选择2、安装部署(1)解压(2)配置文件修改(3)启动(4)

HTML中meta标签的常见使用案例(示例详解)

《HTML中meta标签的常见使用案例(示例详解)》HTMLmeta标签用于提供文档元数据,涵盖字符编码、SEO优化、社交媒体集成、移动设备适配、浏览器控制及安全隐私设置,优化页面显示与搜索引擎索引... 目录html中meta标签的常见使用案例一、基础功能二、搜索引擎优化(seo)三、社交媒体集成四、移动

HTML input 标签示例详解

《HTMLinput标签示例详解》input标签主要用于接收用户的输入,随type属性值的不同,变换其具体功能,本文通过实例图文并茂的形式给大家介绍HTMLinput标签,感兴趣的朋友一... 目录通用属性输入框单行文本输入框 text密码输入框 password数字输入框 number电子邮件输入编程框

HTML img标签和超链接标签详细介绍

《HTMLimg标签和超链接标签详细介绍》:本文主要介绍了HTML中img标签的使用,包括src属性(指定图片路径)、相对/绝对路径区别、alt替代文本、title提示、宽高控制及边框设置等,详细内容请阅读本文,希望能对你有所帮助... 目录img 标签src 属性alt 属性title 属性width/h

CSS3打造的现代交互式登录界面详细实现过程

《CSS3打造的现代交互式登录界面详细实现过程》本文介绍CSS3和jQuery在登录界面设计中的应用,涵盖动画、选择器、自定义字体及盒模型技术,提升界面美观与交互性,同时优化性能和可访问性,感兴趣的朋... 目录1. css3用户登录界面设计概述1.1 用户界面设计的重要性1.2 CSS3的新特性与优势1.

HTML5 中的<button>标签用法和特征

《HTML5中的<button>标签用法和特征》在HTML5中,button标签用于定义一个可点击的按钮,它是创建交互式网页的重要元素之一,本文将深入解析HTML5中的button标签,详细介绍其属... 目录引言<button> 标签的基本用法<button> 标签的属性typevaluedisabled

HTML5实现的移动端购物车自动结算功能示例代码

《HTML5实现的移动端购物车自动结算功能示例代码》本文介绍HTML5实现移动端购物车自动结算,通过WebStorage、事件监听、DOM操作等技术,确保实时更新与数据同步,优化性能及无障碍性,提升用... 目录1. 移动端购物车自动结算概述2. 数据存储与状态保存机制2.1 浏览器端的数据存储方式2.1.

基于 HTML5 Canvas 实现图片旋转与下载功能(完整代码展示)

《基于HTML5Canvas实现图片旋转与下载功能(完整代码展示)》本文将深入剖析一段基于HTML5Canvas的代码,该代码实现了图片的旋转(90度和180度)以及旋转后图片的下载... 目录一、引言二、html 结构分析三、css 样式分析四、JavaScript 功能实现一、引言在 Web 开发中,

CSS place-items: center解析与用法详解

《CSSplace-items:center解析与用法详解》place-items:center;是一个强大的CSS简写属性,用于同时控制网格(Grid)和弹性盒(Flexbox)... place-items: center; 是一个强大的 css 简写属性,用于同时控制 网格(Grid) 和 弹性盒(F