好用的一些vue插件

好用的一些vue插件

1. 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>
     

2. 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>
     

3. 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; //自定义颜色
     }
     

4. 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 {
         width: 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>
     

5. 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

6. v-charts（基于echarts的数据可视化图表组件）https://v-charts.xgqfrms.xyz/#/histogram

   • 安装

     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)
     })