Vue3实用组件集

本文档介绍了Vue3组件vue3-perfect-scrollbar,包括它的介绍、功能、安装、使用方法、配置项以及如何定制样式。该组件提供了一系列滚动事件,并且支持自定义滚动条颜色。
摘要由CSDN通过智能技术生成

一、vue3-perfect-scrollbar

Vue2使用教程请前往:Vue2实用组件集

1、介绍

Vue.js 简约但功能强大的完美滚动条包装器

2、功能

优化滚动条显示

3、安装

npm install vue3-perfect-scrollbar

4、使用

1)全局注册

import PerfectScrollbar from 'vue3-perfect-scrollbar'
import 'vue3-perfect-scrollbar/dist/vue3-perfect-scrollbar.css'
app.use(PerfectScrollbar)

2)代码中使用

<perfect-scrollbar>
    内容
</perfect-scrollbar>

该插件会生成一个类名为“.ps”的容器,需要自定义容器的高度

.ps {
   
  height: 400px;
}

3)例子

<template>
  <div>
    <perfect-scrollbar>
      <p v-for="item in 10">{
  { item }}</p>
    </perfect-scrollbar>
  </div>
</template>

<script>
export default {
  name: "index",
};
</script>

<style>
.ps {
  height: 200px;
}
</style>

4)效果

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
Vue时间显示组件是一种用于在页面上显示时间的组件,可以用于显示升级日志、倒计时、秒表等功能。其实现原理主要是将主要区域分为两块,时间区和内容区。时间区包括画一个圆点和显示一个时间,而内容区则包括一个竖线和文字显示。通过循环将每个日期的数据显示出来,并采用flex布局来布局组件。 在Vue中,可以引入相应的组件,然后设置对应的参数,如类型、格式、时间长度等,来实现不同样式的时钟显示。这样,我们就可以根据不同需求,使用Vue时间显示组件来展示各种样式的时钟功能。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [Vue时间轴组件.zip](https://download.csdn.net/download/gdgztt/87585634)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* *3* [VUE3实用组件开发合集二:时钟、倒计时组件](https://blog.csdn.net/m0_37631110/article/details/125706576)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

向山海出发

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值