位置: 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什么意思戴尔笔记本)

  • 早期最简单的赚钱方式,你造吗?(最简单最赚钱的行业)

    早期最简单的赚钱方式,你造吗?(最简单最赚钱的行业)

  • 华为手机如何恢复出厂设置(华为手机如何恢复删除的微信聊天记录)

    华为手机如何恢复出厂设置(华为手机如何恢复删除的微信聊天记录)

  • vivo x27有防水功能吗(vivox21防水么)

    vivo x27有防水功能吗(vivox21防水么)

  • 电气火灾监控用几根线(电气火灾监控用在什么地方)

    电气火灾监控用几根线(电气火灾监控用在什么地方)

  • 华为p40电话卡槽在哪里(华为p40手机卡槽)

    华为p40电话卡槽在哪里(华为p40手机卡槽)

  • nova7支持nfc功能吗(nova7全系支持nfc)

    nova7支持nfc功能吗(nova7全系支持nfc)

  • 拼多多在哪里看直播(拼多多在哪里看好友买的东西)

    拼多多在哪里看直播(拼多多在哪里看好友买的东西)

  • 华为手机的回收站在哪里打开(华为回收旧手机在哪里)

    华为手机的回收站在哪里打开(华为回收旧手机在哪里)

  • 叨叨记账怎么获取体力值(叨叨记账怎么获得邮票)

    叨叨记账怎么获取体力值(叨叨记账怎么获得邮票)

  • ipad会因为天气冷充不进电吗(ipad因为天气冷么)

    ipad会因为天气冷充不进电吗(ipad因为天气冷么)

  • ipad3和ipad4的区别(ipad3与ipad4体验差别)

    ipad3和ipad4的区别(ipad3与ipad4体验差别)

  • 苹果x报错53是哪坏了(苹果x报错53是哪里坏了)

    苹果x报错53是哪坏了(苹果x报错53是哪里坏了)

  • 苹果11pro双卡双待吗(苹果11pro双卡双4g)

    苹果11pro双卡双待吗(苹果11pro双卡双4g)

  • 双11开始时间和结束时间(双11什么时候开始2021)

    双11开始时间和结束时间(双11什么时候开始2021)

  • 苹果x怎么长截图怎么截(苹果x怎么长截屏)

    苹果x怎么长截图怎么截(苹果x怎么长截屏)

  • 手机屏幕刷新率有什么用(手机屏幕刷新率越高越好吗)

    手机屏幕刷新率有什么用(手机屏幕刷新率越高越好吗)

  • 淘宝津贴是什么意思(淘宝津贴计算公式)

    淘宝津贴是什么意思(淘宝津贴计算公式)

  • 订阅号助手怎么注销账号(订阅号助手怎么上传视频)

    订阅号助手怎么注销账号(订阅号助手怎么上传视频)

  • 网络安全攻击的主要表现(网络安全攻击的四种形式)

    网络安全攻击的主要表现(网络安全攻击的四种形式)

  • ipadmini1234套通用吗(ipadmini全系列)

    ipadmini1234套通用吗(ipadmini全系列)

  • 手机用久了卡慢怎么办(手机用久了好卡)

    手机用久了卡慢怎么办(手机用久了好卡)

  • word2019剪贴画在哪里找(word2016剪贴画在何处)

    word2019剪贴画在哪里找(word2016剪贴画在何处)

  • 高德打车如何获取发票(高德打车怎样?)

    高德打车如何获取发票(高德打车怎样?)

  • React中使用react-router-cache-route缓存页面状态(react-use)

    React中使用react-router-cache-route缓存页面状态(react-use)

  • Transformer 中的mask(transformer add norm)

    Transformer 中的mask(transformer add norm)

  • 【历史上的今天】4 月 7 日:IBM System/360 问世;以太网的发明者诞生;第一个 RFC 文档发布

    【历史上的今天】4 月 7 日:IBM System/360 问世;以太网的发明者诞生;第一个 RFC 文档发布

  • 企业所得税和预提所得税
  • 原始凭证太多如何删除
  • 报个税的工资表
  • 企业对企业分红要缴纳什么税免税分红
  • 印花税票吧
  • 申报附加税增加一行如何增加
  • 出差租车费用报销标准
  • 事业单位跨年度错账调整
  • 土地前期开发费用计征契税
  • 支付技术转让费能加计扣除
  • 营改增后购置设备进项税抵扣怎么做?
  • 打印机的增值税率
  • 2021年新疆果业灰枣销售情况
  • 上个月开票这个月确认收入
  • 软件固定资产还是无形资产
  • 收到政府补助的现金流
  • 有限合伙人的投资风险有哪些
  • windows 10如何清除联网记录
  • 电脑网页游戏打不开了怎么办
  • 佣金的规定方法有哪些
  • 升级声卡驱动后声音禁用了怎么恢复
  • win7 扫描仪
  • 银行余额调节表例题和答案
  • 年薪制职工薪酬计算方法
  • 刚毕业的学生可以买学生票吗
  • php array_replace
  • 分享php源码批量运行
  • fpx是什么文件
  • php 首字母大写
  • 是谁唤醒你
  • 北极野生动物
  • php编程计算日期怎么算
  • 金税盘锁死会电子发票也开不了吗
  • 简述php图像操作的基本步骤
  • spring集成xfire
  • 兼职员工的工资怎么发放
  • shell和pycharm
  • 注册资本增加了怎么做账
  • 电子商业汇票线下清算流程
  • 出口收汇手续费做什么科目
  • 滞纳金的计算公式为
  • 退税勾选错了怎么办
  • 借调人员怎么入账
  • 金税盘税局端系统响应错误怎么解决
  • 织梦自适应代码怎么做
  • 暂估成本多了
  • 报废的机器设备属于什么会计要素
  • 在零售环节征收消费税的是哪些
  • 企业所得税视同销售的有哪些?
  • 领款单有法律效力吗
  • 商场一般是怎么缴纳租金的
  • 存货盘亏有哪些情况
  • 全资子公司的账户是什么
  • 综合所得的个人所得税有哪些筹划技巧
  • 公司账户收入金额有规定吗
  • 往来是啥意思
  • mysql图形
  • windows任务管理
  • ubuntu12.04系统怎么安装PPS播放器?
  • linuxvim编辑器的用法
  • realjbox.exe - realjbox是什么进程 作用是什么
  • centos smb服务
  • linux块设备读写和回写
  • linux创建目录函数
  • 使用自带DISM工具修复Windows8.1映像
  • win10用户账户guest
  • javascript date()
  • bat批处理命令大全
  • unity游戏之友利拟收购《刀塔传奇》发行商中清龙图
  • 标签栏切换代码js
  • 每次开机windows桌面更新
  • ug10避让怎么设置
  • javascript简明教程
  • python安装后怎么用
  • 税收六大体系和六大能力基层
  • 外贸公司如何开发客户
  • 税源管理科是干什么的工作
  • 什么是专案审计
  • 铜进口量2019
  • 深圳房东有钱吗
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设