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

  • 华为freebudspro2怎么开启降噪(华为freebudspro2怎么看激活时间)

    华为freebudspro2怎么开启降噪(华为freebudspro2怎么看激活时间)

  • 苹果手机应用与数据在哪里(苹果手机应用与管理在哪里找到)

    苹果手机应用与数据在哪里(苹果手机应用与管理在哪里找到)

  • 怎么修改qq邮箱皮肤(怎么修改QQ邮箱发件人名称)

    怎么修改qq邮箱皮肤(怎么修改QQ邮箱发件人名称)

  • 内存的主要特点(计算机内存的主要特点)

    内存的主要特点(计算机内存的主要特点)

  • 手机悬浮窗收不到验证码(手机悬浮窗权限打开为何不能正常使用)

    手机悬浮窗收不到验证码(手机悬浮窗权限打开为何不能正常使用)

  • 微信电话费流量吗(微信电话费流量还是打视频费流量)

    微信电话费流量吗(微信电话费流量还是打视频费流量)

  • 什么软件能看蓝牙电量(什么软件能看蓝球免费赛事)

    什么软件能看蓝牙电量(什么软件能看蓝球免费赛事)

  • 关注的超话可以隐藏吗(关注超话会怎么样)

    关注的超话可以隐藏吗(关注超话会怎么样)

  • 怎样更改微信个性签名(怎样更改微信个人资料中的地区)

    怎样更改微信个性签名(怎样更改微信个人资料中的地区)

  • 笔记本立体声混音有什么用(笔记本立体声混音为什么被禁)

    笔记本立体声混音有什么用(笔记本立体声混音为什么被禁)

  • ipad pro一共有几款(ipad pro一共有几代什么区别)

    ipad pro一共有几款(ipad pro一共有几代什么区别)

  • 荣耀v30支持人脸识别吗(荣耀v30人脸识别是3d吗)

    荣耀v30支持人脸识别吗(荣耀v30人脸识别是3d吗)

  • vivo手机一直重启怎么回事(vivo手机一直重启循环怎么回事开不了机)

    vivo手机一直重启怎么回事(vivo手机一直重启循环怎么回事开不了机)

  • 微信视频聊天流量一分钟大概多少(微信视频聊天流量消耗大吗)

    微信视频聊天流量一分钟大概多少(微信视频聊天流量消耗大吗)

  • 小米手机恢复出厂设置系统会还原吗(小米手机恢复出厂设置后小米账号还会有吗)

    小米手机恢复出厂设置系统会还原吗(小米手机恢复出厂设置后小米账号还会有吗)

  • 苹果手机自动扣费怎么关闭(苹果手机自动扣款了可以退款吗)

    苹果手机自动扣费怎么关闭(苹果手机自动扣款了可以退款吗)

  • 怎么拉讨论组(怎么啦讨论组)

    怎么拉讨论组(怎么啦讨论组)

  • 拼多多扫一扫在哪里(拼多多扫一扫在哪里图片)

    拼多多扫一扫在哪里(拼多多扫一扫在哪里图片)

  • 快手怎么查看浏览记录(快手怎么查看浏览过的直播间)

    快手怎么查看浏览记录(快手怎么查看浏览过的直播间)

  • xr支持18w快充吗(苹果xr支持18w充电吗)

    xr支持18w快充吗(苹果xr支持18w充电吗)

  • 抖音移除的粉丝怎么加回来(抖音移除的粉丝怎么恢复)

    抖音移除的粉丝怎么加回来(抖音移除的粉丝怎么恢复)

  • 高额半停机怎么恢复(高额半停机怎么自行解除)

    高额半停机怎么恢复(高额半停机怎么自行解除)

  • 抖音的水印在哪里关闭(抖音的水印在哪里)

    抖音的水印在哪里关闭(抖音的水印在哪里)

  • 快手小黄车下单怎么查单号(快手小黄车下单怎么看订单)

    快手小黄车下单怎么查单号(快手小黄车下单怎么看订单)

  • 梵净山,中国西南部 (© zhuxiaophotography/Shutterstock)(梵净山原名)

    梵净山,中国西南部 (© zhuxiaophotography/Shutterstock)(梵净山原名)

  • Python之字符串的遍历的4种方式(python字符串的符号)

    Python之字符串的遍历的4种方式(python字符串的符号)

  • 一般纳税人做账流程图
  • 工商年报中的资金数额怎么填
  • 分公司亏损总公司怎么办
  • 当前时间该属期不可申报
  • 库存现金盘盈盘亏的账务处理
  • 固定资产的净收益和净损失怎么计算
  • 固定资产折旧年限的最新规定2022
  • 折扣折让 红字发票账务处理
  • 公司注销实收资本怎么处理
  • 小规模公司可以贷款吗
  • 购买固定资产增值税可以抵扣
  • 印花税的计税依据怎么算含税还是不含税
  • 单位报销托儿费
  • 收到个人实收资本怎么做账
  • 房屋租赁税务局开票税点
  • 财务报表第一季度引用的期初数是第四季度还是年报
  • 专票入库单金额怎么算
  • 工资中的话费补助是什么
  • 事业单位自筹基金有哪些
  • 企业筹资付给第三方账户
  • 支付土地补偿款能以收据入账吗
  • 收货款时少收几十元,分录怎么做
  • 通用文件系统
  • linux版笔记本什么意思
  • 宽带调制解调器出现问题怎么解决
  • Laravel 5.4中migrate报错: Specified key was too long error的解决
  • 电子专用发票怎么上传
  • 项目不可用怎么解决
  • linux取消静态ip
  • php字符串操作函数
  • 招标单位收取标书费多少钱
  • 设置pin是什么意思
  • 公寓增值税税率是多少
  • 企业年金如何缴纳计算方法
  • 无偿转让房屋
  • 期末增值税结转账务处理
  • 注销公司财务报表范本
  • 非洲加纳霍霍埃族是个国家吗
  • 个税申报工资比实发工资少,但没超过5000可以举报吗
  • php qrcode生成二维码
  • 原生js获取document
  • vue 插槽详解
  • 微众银行贷款利率2023最新
  • 收缴违约金
  • 进项税额转出如何做分录
  • 增值税进项加计抵减账务处理
  • phpcms 用的是什么模板引擎
  • python return和yield有什么不同
  • 有下列情形之一的,当事人可以解除
  • 建材公司小规模年收入多少缴税
  • 认缴制没有实资本会怎么样
  • 公司购买食品怎么入账
  • 残保金中上年在职职工工资总额
  • 进项税转出年底怎么结转
  • 固定资产的计提折旧方法有哪些
  • 企业购买黄金该交什么税
  • 离职员工未休完的年假如何支付
  • 购买商品发生的费用计入
  • ubuntu创建新用户并增加管理员权限
  • ubuntu安装office2019
  • windows xp怎么清理c盘
  • win双系统怎么切换
  • win8 系统设置
  • 电脑开机蓝屏怎么解决xp系统
  • 如何用dos破解wifi
  • linux修改时间和日期的方法
  • 新装win8系统卡顿严重,虚拟内存为0
  • dos批处理实例
  • android@localhost#1
  • cpu时钟预取实例是什么
  • 怎么看物理内存
  • 深入理解计算机系统
  • javascript语言基础
  • jquery如何调用
  • python怎么编函数
  • python字符串连接join
  • 甘肃增值税发票查验平台官网
  • 企业所得税季申报表
  • 税务机关代收工会经费手续费
  • 工会经费怎么缴付
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设