Vue2实用组件集

Vue3使用教程请前往： Vue3实用组件集

一、vue2-perfect-scrollbar

1、介绍

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

2、功能

优化滚动条显示

3、安装

npm install vue2-perfect-scrollbar

4、使用

1）全局注册

import PerfectScrollbar from 'vue2-perfect-scrollbar'
import 'vue2-perfect-scrollbar/dist/vue2-perfect-scrollbar.css'

Vue.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）效果

5、options配置项：以下均为默认值

options: {
   
        // 滚动元素的处理程序列表
        handlers: ['click-rail', 'drag-thumb', 'keyboard', 'wheel', 'touch'],
        // 应用于鼠标滚轮事件的滚动速度
        wheelSpeed: 1,
        // 如果此选项为真，当滚动到达边的末端时，鼠标滚轮事件将传播到父元素
        wheelPropagation: true,
        // 如果此选项为真，则滑动滚动将变得轻松
        swipeEasing: true,
        // 当设置为整数值时，滚动条的拇指部分不会缩小到低于该像素数
        minScrollbarLength: null,
        // 当设置为整数值时，滚动条的拇指部分不会扩展超过该像素数
        maxScrollbarLength: null,
        // 这集的阈值ps--scrolling-x和ps--scrolling-y类来保持。在默认 CSS 中，无论悬停状态如何，它们都会显示滚动条。单位是毫秒
        scrollingThreshold: 1000,
        // 当设置为 true，并且只有一个（垂直或水平）滚动条可见时，垂直和水平滚动都会影响滚动条
        useBothWheelAxes: false,
        // 设置为 true 时，无论内容宽度如何，X 轴上的滚动条都将不可用
        suppressScrollX: false,
        // 设置为 true 时，无论内容高度如何，Y 轴的滚动条都将不可用
        suppressScrollY: false,
        // 在不启用 X 轴滚动条的情况下，内容宽度可以超过容器宽度的像素数。允许一些“摆动空间”或“偏移中断”，这样 X 轴滚动条就不会因为几个像素而启用
        scrollXMarginOffset: 0,
        // 内容高度在不启用Y轴滚动条的情况下可以超过容器高度的像素数。允许一些“摆动空间”或“偏移中断”，这样 Y 轴滚动条就不会因为几个像素而启用
        scrollYMarginOffset: 0,
      }

6、事件

1）当 y 轴向任一方向滚动时会触发此事件

ps-scroll-y

2）当 x 轴沿任一方向滚动时会触发此事件

ps-scroll-x

3）向上滚动时会触发此事件

ps-scroll-up

4）向下滚动时会触发此事件

ps-scroll-down

5）向左滚动时会触发此事件

ps-scroll-left

6）向右滚动时会触发此事件

ps-scroll-right

7）当滚动到达 y 轴的起点时触发此事件

ps-y-reach-start

8）当滚动到达 y 轴的末端时触发此事件（对于无限滚动很有用）

ps-y-reach-end

9）当滚动到达 x 轴的起点时触发此事件

ps-x-reach-start

10）当滚动到达 x 轴的末端时会触发此事件

ps-x-reach-end

7、样式修改

滚动条的滑块和轨道的颜色可以用简单的CSS自定义。使用描述要编辑的滚动条元素的类：

/*
* Y轴轨道样式
*/
.ps__rail-y {
   
  background-color: lightgreen !important;
}
/*
* Y轴滑块样式
*/
.ps__thumb-y {
   
  background-color: darkgreen !important;
}
/*
* X轴轨道样式
*/
.ps__rail-x {
   
  background-color: lightgreen !important;
}
/*
* X轴滑块样式
*/
.ps__thumb-x {
   
  background-color: darkgreen !important;
}

工具库

Lodash

1、安装

• 浏览器环境

<script src="lodash.js"></script>

• 通过 npm

npm i --save lodash

2、为什么选择 Lodash

Lodash 通过降低 array、number、objects、string 等等的使用难度从而让 JavaScript 变得更简单。 Lodash 的模块化方法 非常适用于：

• 遍历 array、object 和 string
• 对值进行操作和检测
• 创建符合功能的函数

Dayjs.js

1、介绍

Day.js是一个极简的JavaScript库，可以为现代浏览器解析、验证、操作和显示日期和时间。

2、安装

2.1、Node.js

• npm安装

npm install dayjs

• cnpm安装

cnpm install dayjs -S

• yarn安装

yarn add dayjs

• pnpm安装

pnpm add dayjs

使用

var dayjs = require('dayjs')
// import dayjs from 'dayjs' // ES 2015
dayjs().format()

2.2、浏览器

<script src="https://cdn.jsdelivr.net/npm/dayjs/dayjs.min.js"></script>
<script>
  dayjs().format()
</script>

2.3、微信小程序

下载 dayjs.min.js

下载 dayjs.min.js放到小程序 lib 目录下（没有新建或用其他目录）

引用示例

const dayjs = require('../../libs/dayjs.min.js');

使用 npm 安装

npm install dayjs --save

引用示例

const dayjs = require("dayjs");

Element-plus

Element-plus (opens new window)组件库默认支持 dayjs 进行日期时间处理，所以可以直接导入使用，相关 Date Picker (opens new window)组件介绍。

import {
    dayjs } from 'element-plus'

// 扩展插件
import isSameOrBefore from 'dayjs/plugin/isSameOrBefore'
import isSameOrAfter from 'dayjs/plugin/isSameOrAfter'
dayjs.extend(isSameOrBefore)
dayjs.extend(isSameOrAfter)

dayjs().isSameOrBefore(dayjs('2011-01-01'))

Intro.js 相同Driver.js

1、介绍

Intro.js 是一个开源普通 Javascript / CSS 库，用于添加分步介绍或提示。

2、安装

使用npm

npm install intro.js --save

使用yarn

yarn add intro.js

3、使用

// 引入
import introJs from 'intro.js' // introjs库
import 'intro.js/introjs.css' // introjs默认css样式
import 'intro.js/themes/introjs-modern.css' // introjs主题

// 使用
const introJsOption = {
   
  prevLabel: "上一步",
  nextLabel: "下一步",
  skipLabel: "✕",
  doneLabel: