各种插件 #

UI Components #

vue-wait 用于控制Loading效果的插件 #

优势：轻量，易用

<v-wait for="my list is to load">
    <!-- waiting插槽控制loading时的显示内容 -->
	<template slot="waiting">
		<div>Loading the list...</div>
    </template>
    
    <ul>
		<li v-for="item in myList">{{ item }}</li>
    </ul>
    <button @click="load">Load list again.</button>
</v-wait>

async load() {
	// start waiting
	this.$wait.start('my list is to load');

    this.myList = await new Promise((resolve) => {
		setTimeout(() => resolve(mockData), 2000);
	});

    // stop waiting
    this.$wait.end('my list is to load');
}

缺陷：不能自动处理异步请求

Github：vue-wait

Demo：CodeSandbox

vue-easytable 一个蛮好的表格 #

优点：中文文档，且做的很好，功能完善，可当作简单的Excel使用

Github：vue-easytable

Document：vue-easytable中文文档

三种轻提示 #

Notivue Vue3使用的notify插件 #

优点：功能完善且视觉效果不错

缺陷：文档做得差，阴间配色令人双目失明

Demo：https://notivue.netlify.app/

Documentation：notivue-docs

Github：Notivue

vue-notification 风格更浓重的notify插件 #

优点：有Vue2与Vue3两个版本（非同一作者），且动画效果与视觉效果令人满意

Demo：vue-notification

Github：Vue2 Vue3

vue-toasted Vue2的轻提示插件 #

优点：风格别致，且Demo页可自动生成代码

Github：vue-toasted

Demo：Interactive Demo

floating-vue（原v-tooltip） Vue2/Vue3的Tooltip插件 #

v-tooltip基于Popper.js实现，floating-vue的实现则基于floating-ui

优势：简单易用，对Vue开发者十分友好

# Vue2.x
npm i floating-vue@vue2

# Vue3.x
npm i floating-vue

Github：floating-vue

Documentation：floating-vue

vue-js-modal 干干净净的模态框 #

Vue2的模态框插件

优势：功能全面，使用方便，调用方式比element、antd的模态框更令人舒适

Github：vue-js-modal

Documentation：Vue.js Modal

Demo：vue-js-modal

v-viewer 精致的图片查看器 #

优势：好看、功能全面、且体积很小

# Vue2.x
npm i v-viewer@legacy

# Vue3.x
npm i v-viewer@next

Demo：v-viewer

Doc：Mirari's Blog

Github：v-viewer

DOM #

vue-virtual-scroller 虚拟滚动 #

Guillaume Chau大佬出品，虚拟滚动的首选方案

# Vue2.x
npm install --save vue-virtual-scroller

# Vue3.x
npm install --save vue-virtual-scroller@next

Demo：vue-virtual-scroller-demo

Documentation：Vue2 Vue3

vue-observe-visibility 监测元素是否在视窗内可见 #

十分实用的Vue指令，与vue-virtual-scroller同一作者

Demo：vue-observe-visibility

Github：vue-observe-visibility