好用的一些vue插件
-
vue-seamless-scroll(基于vue的无缝滚动组件)https://chenxuan1993.gitee.io/component-document/index_prod#/component/seamless-default
-
安装
npm install vue-seamless-scroll --save
-
使用
// **main.js** // 1.全局引入 import Vue from 'vue' import scroll from 'vue-seamless-scroll' Vue.use(scroll) //or you can set componentName default componentName is vue-seamless-scroll Vue.use(scroll,{componentName: 'scroll-seamless'}) // 2.单个组件引入 .vue import <script> import vueSeamless from 'vue-seamless-scroll' export default { components: { vueSeamless } } </script>
-
-
svg-progress-bar(基于vue的svg进度条组件)
-
安装
npm install svg-progress-bar
-
使用
// **main.js** import Vue from 'vue' import svg from 'svg-progress-bar' // you can set componentName default componentName is svg-progress-bar Vue.use(svg,{componentName: 'percent-bar'}) // 1.global install import Vue from 'vue' import svg from 'svg-progress-bar' // you can set custom componentName Vue.use(svg,{componentName: 'percent-bar'}) // 2.single .vue file install <script> import svg from 'svg-progress-bar' export default { components: { svg } } </script>
-
-
nprogress(基于vue的加载进度条)https://blog.csdn.net/wn1245343496/article/details/82151273
-
安装
npm install nprogress --save //用法 NProgress.start() NProgress.done()
-
使用
router.js
//导入 import NProgress from 'nprogress' import 'nprogress/nprogress.css' router.beforeEach((to, from, next) => { NProgress.start() next() }) router.afterEach(() => { NProgress.done() })
-
进度条颜色修改
App.vue的style中添加
#nprogress .bar{ background: red !important; //自定义颜色 }
-
-
vue-simple-uploader(一个基于 simple-uploader.js 的 Vue 上传组件),能支持文件、多文件、文件夹上传、支持拖拽文件、文件夹上传、可暂停、继续上传、上传队列管理,支持最大并发上传、支持进度、预估剩余时间、出错自动重试、重传等操作(https://github.com/simple-uploader/vue-uploader/blob/HEAD/README_zh-CN.md)
-
安装
npm install vue-simple-uploader --save
-
使用
import Vue from 'vue' import uploader from 'vue-simple-uploader' import App from './App.vue' Vue.use(uploader) /* eslint-disable no-new */ new Vue({ render(createElement) { return createElement(App) } }).$mount('#app')
App.vue
<template> <uploader :options="options" class="uploader-example"> <uploader-unsupport></uploader-unsupport> <uploader-drop> <p>Drop files here to upload or</p> <uploader-btn>select files</uploader-btn> <uploader-btn :attrs="attrs">select images</uploader-btn> <uploader-btn :directory="true">select folder</uploader-btn> </uploader-drop> <uploader-list></uploader-list> </uploader> </template> <script> export default { data () { return { options: { // https://github.com/simple-uploader/Uploader/tree/develop/samples/Node.js target: '//localhost:3000/upload', testChunks: false }, attrs: { accept: 'image/*' } } } } </script> <style> .uploader-example { 880px; padding: 15px; margin: 40px auto 0; font-size: 12px; box-shadow: 0 0 10px rgba(0, 0, 0, .4); } .uploader-example .uploader-btn { margin-right: 4px; } .uploader-example .uploader-list { max-height: 440px; overflow: auto; overflow-x: hidden; overflow-y: auto; } </style>
-
-
vue-count-to(简单好用的数字滚动插件)
-
安装
npm install vue-count-to
-
使用
<template> <countTo :startVal='startVal' :endVal='endVal' :duration='3000'></countTo> </template> <script> import countTo from 'vue-count-to'; export default { components: { countTo }, data () { return { startVal: 0, endVal: 2017 } } } </script>
-
选项
Property Description type default startVal 开始值 Number 0 endVal 结束值 Number 2017 duration 持续时间,以毫秒为单位 Number 3000 autoplay 自动播放 Boolean true decimals 要显示的小数位数 Number 0 decimal 十进制分割 String . separator 分隔符 String , prefix 前缀 String '' suffix 后缀 String '' useEasing 使用缓和功能 Boolean true easingFn 缓和回调 Function — ** 注意:当autoplay:true时,它将在startVal或endVal更改时自动启动**
功能
Function Name Description mountedCallback 挂载以后返回回调 start 开始计数 pause 暂停计数 reset 重置countTo
-
-
v-charts(基于echarts的数据可视化图表组件)https://v-charts.js.org/#/
-
安装
npm install v-charts -S
-
完整引入
main.js
// main.js import Vue from 'vue' import VCharts from 'v-charts' import App from './App.vue' Vue.use(VCharts) new Vue({ el: '#app', render: h => h(App) })
-
按需引入
import Vue from 'vue' //折线图 import VeLine from 'v-charts/lib/line.common' import App from './App.vue' Vue.component(VeLine.name, VeLine) new Vue({ el: '#app', render: h => h(App) })
-