位置: IT常识 - 正文

Element Plus 实例详解(五)___Scrollbar 滚动条(element-plus vue)

编辑:rootadmin
Element Plus 实例详解(五)___Scrollbar 滚动条 Element Plus 实例详解(五)___Scrollbar 滚动条

推荐整理分享Element Plus 实例详解(五)___Scrollbar 滚动条(element-plus vue),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:element plud,elementuiicon,element plus ui,element-plus,element li,elementui prompt,element plus ui,element-plus,内容如对您有帮助,希望把文章链接给更多的朋友!

本文目录:

一、前言

二、搭建Element Plus试用环境

 1、搭建Vue3项目(基于Vite + Vue)

 2、安装Element Plus

三、Element Plus Scrollbar 滚动条功能试用

1、基础用法

2、横向滚动Scrollbar 滚动条

3、Scrollbar 滚动条最大高度

4、手动滚动Scrollbar 滚动条

四、官方资料中的各参数说明

五、总结


一、前言

  Element Plus Scrollbar 滚动条,用于替换浏览器原生滚动条。主要内容有:Scrollbar 滚动条基础用法,横向滚动Scrollbar用法,Scrollbar滚动条最大高度与元素高度关系,手动滚动Scrollbar滚动条。

二、搭建Element Plus试用环境 1、搭建Vue3项目(基于Vite + Vue)

  安装时请选择支持Typescript,本实例我安装在(C:\00program\vue\vuelearn\vueviteproject1)目录中,具体方法详见下面文章:

vue3 项目搭建教程(基于create-vue,vite,Vite + Vue)https://blog.csdn.net/weixin_69553582/article/details/129630880

   安装完成后打开浏览器:http://localhost:5173/  ,能正常显示欢迎页面:

 2、安装Element PlusNPM:npm install element-plus --save

详细参考:

Element Plus 实例详解系列(一)__安装设置https://blog.csdn.net/weixin_69553582/article/details/129701286

三、Element Plus Scrollbar 滚动条功能试用1、基础用法通过 height 属性设置滚动条高度,若不设置则根据父容器高度自适应。

实现效果:

完整代码:

<template> <el-scrollbar height="200px"> <H2 v-for="item in 1" :key="item" class="scrollbar-demo-item"> Scrollbar 滚动条内容{{ item }}:<br /><br /> 逆境清醒:<br /> 阳光总在风雨后,<br /> 历练中完成自我升华!<br /> 共勉!<br /> </H2> </el-scrollbar></template><style scoped> .scrollbar-demo-item { display: flex; align-items: center; justify-content: center; height: 400px; margin: 10px; padding:30px; width:300px; text-align: left; border-radius: 4px; background: var(--el-color-primary-light-9); color: var(--el-color-primary); border:5px solid #0094ff; }</style>2、横向滚动Scrollbar 滚动条当元素宽度大于滚动条宽度时,会显示横向滚动条。

实现效果:

完整代码:

<template> <div class="scrollbar-flex-content"> <el-scrollbar> <div class="scrollbar-flex-content"> <h2 v-for="item in 5" :key="item" class="scrollbar-demo-item"> 逆境清醒:{{ item }}<br /> 阳光总在风雨后,<br /> 历练中完成自我升华!<br /> 共勉!<br /> </h2> </div> </el-scrollbar> </div></template><style scoped> .scrollbar-flex-content { display: flex; width: 350px; } .scrollbar-demo-item { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 250px; height: 200px; margin: 10px; text-align: center; border-radius: 4px; background: var(--el-color-danger-light-9); color: var(--el-color-danger); padding: 30px; border: 5px solid pink; }</style>3、Scrollbar 滚动条最大高度当元素高度超过最大高度,才会显示滚动条。

实现效果:

完整代码:

<template> <el-button @click="add">Add Item</el-button> <el-button @click="onDelete">Delete Item</el-button> <el-scrollbar max-height="300px"> <h3 v-for="item in count" :key="item" class="scrollbar-demo-item"> 逆境清醒:{{ item }}<br /> 阳光总在风雨后,<br /> 历练中完成自我升华!<br /> 共勉!<br /> </h3> </el-scrollbar></template><script lang="ts" setup> import { ref } from 'vue' const count = ref(3) const add = () => { count.value++ } const onDelete = () => { if (count.value > 0) { count.value-- } }</script><style scoped> .scrollbar-demo-item { display: flex; align-items: center; justify-content: center; height: 200px; margin: 10px; text-align: center; border-radius: 4px; background: var(--el-color-primary-light-9); color: var(--el-color-primary); border: 5px solid #0094ff; }</style>4、手动滚动Scrollbar 滚动条通过使用 setScrollTop 与 setScrollLeft 方法,可以手动控制滚动条滚动。

实现效果:

 完整代码:

<template> <el-scrollbar ref="scrollbarRef" height="300px" always @scroll="scroll"> <div ref="innerRef"> <h3 v-for="item in 5" :key="item" class="scrollbar-demo-item"> 逆境清醒:{{ item }}<br /> 阳光总在风雨后,<br /> 历练中完成自我升华!<br /> 共勉!<br /> </h3> </div> </el-scrollbar> <el-slider v-model="value" :max="max" :format-tooltip="formatTooltip" @input="inputSlider" /></template><script lang="ts" setup> import { onMounted, ref } from 'vue' import { ElScrollbar } from 'element-plus' const max = ref(0) const value = ref(0) const innerRef = ref<HTMLDivElement>() const scrollbarRef = ref<InstanceType<typeof ElScrollbar>>() onMounted(() => { max.value = innerRef.value!.clientHeight - 380 }) const inputSlider = (value: number) => { scrollbarRef.value!.setScrollTop(value) } const scroll = ({ scrollTop }) => { value.value = scrollTop } const formatTooltip = (value: number) => { return `${value} px` }</script><style scoped> .scrollbar-demo-item { display: flex; align-items: center; justify-content: center; height: 200px; margin: 10px; text-align: center; border-radius: 4px; background: var(--el-color-primary-light-9); color: var(--el-color-primary); width: 200px; border:5px solid #0094ff; } .el-slider { margin-top: 20px; }</style>四、官方资料中的各参数说明Attributes属性名说明类型默认值height滚动条高度string / number—max-height滚动条最大高度string / number—native是否使用原生滚动条样式booleanfalsewrap-style包裹容器的自定义样式string / object—wrap-class包裹容器的自定义类名string—view-style视图的自定义样式string / object—view-class视图的自定义类名string—noresize不响应容器尺寸变化,如果容器尺寸不会发生变化,最好设置它可以优化性能booleanfalsetag视图的元素标签stringdivalways滚动条总是显示booleanfalsemin-size滚动条最小尺寸number20Events事件名说明类型scroll当触发滚动事件时,返回滚动的距离FunctionSlots插槽名说明default自定义默认内容Exposes名称说明类型handleScroll触发滚动事件FunctionscrollTo滚动到一组特定坐标FunctionsetScrollTop设置滚动条到顶部的距离FunctionsetScrollLeft设置滚动条到左边的距离Functionupdate手动更新滚动条状态FunctionwrapRef滚动条包裹的 ref 对象object 五、总结

 1

Element Plus 实例详解(一)__安装设置2Element Plus 实例详解(二)___Button 按钮3Element Plus 实例详解(三)___Date Picker 日期选择4Element Plus 实例详解(四)___Border 边框5Element Plus 实例详解(五)___Scrollbar 滚动条6Element Plus 实例详解(六)___Progress 进度条7Element Plus 实例详解(七)___8Element Plus 实例详解(八)___9Element Plus 实例详解(九)___10Element Plus 实例详解(十)___11Element Plus 实例详解(十一)___12Element Plus 实例详解(十一)___

         推荐阅读:

31

Element Plus 实例详解(一)___安装设置

30

​​​

Vue3安装配置、开发环境搭建(组件安装卸载)(图文详细)29​​​​​​

SVG实例详解系列(一)(svg概述、位图和矢量图区别(图解)、SVG应用实例)

28​​​​​​

查看jdk安装路径,在windows上实现多个java jdk的共存解决办法,安装java19后终端乱码的解决

27​​​​​​Element Plus 实例详解(五)___Scrollbar 滚动条(element-plus vue)

别具一格,原创唯美浪漫情人节表白专辑,(复制就可用)(html5,css3,svg)表白爱心代码(1)

26​​​​​​

2023年春节祝福第二弹——送你一只守护兔,让它温暖每一个你【html5 css3】画会动的小兔子,炫酷充电,字体特

25​​​​​​

2023春节祝福系列第一弹(上)(放飞祈福孔明灯,祝福大家身体健康)(附完整源代码及资源免费下载)

24​​​​​​

HTML+CSS+svg绘制精美彩色闪灯圣诞树,HTML+CSS+Js实时新年时间倒数倒计时(附源代码)

23​​​​​​

​草莓熊python绘图(春节版,圣诞倒数雪花版)附源代码

22​​​​​​

【程序人生】卡塔尔世界杯元素python海龟绘图(附源代码),世界杯主题前端特效5个(附源码)

21​​​​​​

python爱心源代码集锦(18款)

20​​​​​​

巴斯光年python turtle绘图__附源代码

19​​​​​​

Three.js实例详解___旋转的精灵女孩(附完整代码和资源)(一)

18​​​​​​

​草莓熊python turtle绘图代码(玫瑰花版)附源代码

17​​​​​​

立体多层玫瑰绘图源码__玫瑰花python 绘图源码集锦

16​​​​​​

皮卡丘python turtle海龟绘图(电力球版)附源代码

15​​​​​​

【CSDN云IDE】个人使用体验和建议(含超详细操作教程)(python、webGL方向)

14​​​​​​

草莓熊python turtle绘图(风车版)附源代码

13​​​​​​

用代码过中秋,python海龟月饼你要不要尝一口?

12​​​​​​

《 Python List 列表全实例详解系列(一)》__系列总目录、列表概念

11​​​​​​

用代码写出浪漫__合集(python、matplotlib、Matlab、java绘制爱心、玫瑰花、前端特效玫瑰、爱心)

10​​​​​​

Python函数方法实例详解全集(更新中...)

9​​​​​​

matplotlib 自带绘图样式效果展示速查(28种,全)

8​​​​​​

手机屏幕坏了____怎么把里面的资料导出(18种方法)

7​​​​​​

2023年3月TIOBE 指数头条:编程语言 Go 进入 TIOBE 指数前 10 名,多家权威机构____编程语言排行榜__薪酬状

6​​​​​​

Python中Print()函数的用法___实例详解(全,例多)

5​​​​​​

色彩颜色对照表(一)(16进制、RGB、CMYK、HSV、中英文名)

4​​​​​​

Node.js (v19.1.0npm 8.19.3) vue.js安装配置教程(超详细)

3​​​​​​

Tomcat 启动闪退问题解决集(八大类详细)

2​​​​​​

Tomcat端口配置(详细)

1​​​​​​

tomcat11、tomcat10 安装配置(Windows环境)(详细图文)

本文链接地址:https://www.jiuchutong.com/zhishi/281367.html 转载请保留说明!

上一篇:在win10系统中控制面板打不开该怎么处理?(w10控制中心在哪)

下一篇:dellmmkb.exe是什么进程 dellmmkb进程有什么作用(checkingmedia什么意思戴尔笔记本)

  • 华为荣耀8x手机截屏怎么弄(华为荣耀8x手机hd怎么关闭)

    华为荣耀8x手机截屏怎么弄(华为荣耀8x手机hd怎么关闭)

  • 苹果11面部识别为什么录入不了(苹果11面部识别录入不了,一直提醒往下)

    苹果11面部识别为什么录入不了(苹果11面部识别录入不了,一直提醒往下)

  • 华为手机右上角有个钥匙图标是什么(华为手机右上角有个眼睛是什么意思)

    华为手机右上角有个钥匙图标是什么(华为手机右上角有个眼睛是什么意思)

  • 错误码7610001什么意思(错误码7610034什么意思)

    错误码7610001什么意思(错误码7610034什么意思)

  • 淘宝订单多久自动确认收货(淘宝订单多久自动付款)

    淘宝订单多久自动确认收货(淘宝订单多久自动付款)

  • 微信不上传身份证照片影响使用不(微信不上传身份证还能正常消费吗)

    微信不上传身份证照片影响使用不(微信不上传身份证还能正常消费吗)

  • 华为手机外壳摔坏了怎么办(华为手机外壳摔坏了多少钱可以修)

    华为手机外壳摔坏了怎么办(华为手机外壳摔坏了多少钱可以修)

  • 一个差评要多少个好评怎么补回动态(一个差评要多少好评才能低)

    一个差评要多少个好评怎么补回动态(一个差评要多少好评才能低)

  • 打印机文档被挂起是什么意思(打印机怎样扫描纸质文件成电子档)

    打印机文档被挂起是什么意思(打印机怎样扫描纸质文件成电子档)

  • 操作过于频繁,请稍后再试(操作过于频繁不能自助解冻)

    操作过于频繁,请稍后再试(操作过于频繁不能自助解冻)

  • 不是群主怎么拉人进群QQ(不是群主怎么拉人)

    不是群主怎么拉人进群QQ(不是群主怎么拉人)

  • 微信即刻视频是什么(微信即刻视频是什么意思)

    微信即刻视频是什么(微信即刻视频是什么意思)

  • word文档有几种视图方式(Word文档有几种视图显示模式)

    word文档有几种视图方式(Word文档有几种视图显示模式)

  • surface1796是第几代(surface1796是啥型号)

    surface1796是第几代(surface1796是啥型号)

  • 陌陌打卡在哪里(陌陌地方打卡在哪里)

    陌陌打卡在哪里(陌陌地方打卡在哪里)

  • 支付宝盒子怎么连蓝牙(支付宝盒子怎么换电池)

    支付宝盒子怎么连蓝牙(支付宝盒子怎么换电池)

  • airpods不用会耗电吗(airpods不用了会自动关闭吗)

    airpods不用会耗电吗(airpods不用了会自动关闭吗)

  • 淘宝天猫京东区别(天猫淘宝京东区别是什么?)

    淘宝天猫京东区别(天猫淘宝京东区别是什么?)

  • 抖音视频分辨率是多少(抖音视频分辨率多少最好)

    抖音视频分辨率是多少(抖音视频分辨率多少最好)

  • uc浏览器的隐私相册在哪(uc浏览器的隐私空间怎样加锁)

    uc浏览器的隐私相册在哪(uc浏览器的隐私空间怎样加锁)

  • 最右如何屏蔽私信(最右怎么屏蔽所有人私信)

    最右如何屏蔽私信(最右怎么屏蔽所有人私信)

  • 【个人记录 | UNet | 整理ing】(个人纪录简称)

    【个人记录 | UNet | 整理ing】(个人纪录简称)

  • 增值税发票阅读器干什么用的
  • 发行股票支付给承销商的发行费用计入
  • 缴纳的增值税在资产负债表中怎么体现
  • 所得税汇算清缴分录怎么做
  • 代缴五险一金自己还需要缴纳吗
  • 资产负债表上的资产是原值还是净值
  • 债务重组损失是费用吗
  • 个体工商户销售自己使用过的物品
  • 结转税金需要附件吗
  • 报销定额备用金什么意思
  • 公司补贴为什么要交税
  • 劳务费差额征税的账务处理
  • 关于环保税的计税依据
  • 公司与银行签订的远期合约汇率是什么
  • 母公司给子公司担保
  • 原始凭证谁负责
  • 申请增值税一般计税方法的个体工商户可自
  • 企业的团队建设之荒野求生
  • 产品成本的计算过程也就是各种费用界限的划分过程
  • 票据的追索权与再追索权
  • 做汽车配件销售怎么找客户
  • php常用的开发工具
  • 土地增值税安置房收入的确认原则
  • 企业将自有房产怎么处理
  • linux的网络编程
  • php模板引擎原理
  • wordpress界面
  • 以前年度应扣未扣支出专项申报表
  • 上个月的发票未上传成功可以删除吗
  • 购买原材料的运输费计入什么科目
  • 税负率怎么计算举例子
  • 免收印花税
  • 帝国主义
  • 政府扶持资金所得税税率
  • 劳务公司属于什么
  • 进口关税的计算是以什么为基础
  • 税务局核定税种流程
  • 怎么结转未交增值税
  • 小规模纳税人的认定标准是什么
  • 发票红冲操作流程
  • 工商年报中纳税总额怎么填
  • 稳岗返还的概念
  • 买赠销售账务处理
  • 营业外支出在贷方
  • 商品损耗率一般是多少
  • 开办费的最新账务处理2021
  • 工程材料票抵扣比例
  • 销货方开红字发票
  • 微信支付宝收入支出怎么做流水账
  • 营改增人力资源服务
  • 什么是资产减值准备计提
  • 制造费用按什么设置明细
  • sql server建表时怎样选择数据类型
  • sql server语句查询
  • 将mater库中的系统存储过程批量生成*.sql文件 通用且非常实用
  • qpso算法
  • windows自动执行
  • windows2008 2016
  • Mac系统怎么设置ftp
  • win7怎么进行系统还原
  • linux常用命令行
  • 远程电脑屏幕桌面图标什么都没有了
  • linux指定格式显示日期
  • win8打开ie
  • Linux VPS中rar、unrar命令安装和使用详解
  • linux快速查看目录大小
  • 如何解决老电脑卡顿问题
  • 环境变量windows
  • 批处理命令在哪个菜单中
  • python2.7多进程
  • shell脚本监控进程
  • jquery使用教程
  • 购房发票上的税率9%包含契税吗
  • 国家税务局四川省电子税务局
  • 怎样从增值税发票查询
  • 被标记为广告推销的电话能接吗
  • 卷烟批发环节的税率
  • 工资薪金的税收金额是填实际发生还是帐载金额
  • 车辆购置税纳税申报表下载
  • 香水与香精有啥不一样
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设