vue 一些实用的js库（亲用版）

vue进入我的视野，一直对它很是迷恋，从最初的网上教程只有todolist到现在，满大街的各种项目实战，基于vue的组件也是纷纷崛起，这里像element ui这样大家都知道就不介绍了，下面也是自己在项目中遇到的一些使用组件，给与整理。

一、YDUI，一个样式类似微信界面的移动端ui库，小型项目可以直接使用src引用。官网

使用方法：

1.src直接使用：

2.npm安装使用

import Vue from 'vue';

import YDUI from 'vue-ydui'; /* 相当于import YDUI from 'vue-ydui/ydui.rem.js' */
import 'vue-ydui/dist/ydui.rem.css';
/* 使用px：import 'vue-ydui/dist/ydui.px.css'; */

Vue.use(YDUI);

二、图片裁剪、压缩组件 vue-croppa  官网

安装直接用npm或src直接引用，介绍一个圆形裁剪的例子（官网上也有该例子）

  



Vue.use(Croppa)  

var app = new Vue({
  el: '#app',
  data: {
    croppa: {}
  },
  methods: {
    onInit() {
      this.croppa.addClipPlugin(function (ctx, x, y, w, h) {
        console.log(x, y, w, h)
        ctx.beginPath()
        ctx.arc(x + w / 2, y + h / 2, w / 2, 0, 2 * Math.PI, true)
        ctx.closePath()
      })
    }
}

效果图:

 

三、 时间格式化库 date-fns   参考链接

使用方法：

import dateFns from "date-fns"
Vue.prototype.dateFns = dateFns;

this.dateFns.format(Date,"YYYY-MM-DD");

四、动画js库 Velocity.js   官网

 很轻便的js动画库简单使用

    



var vm = new Vue({
    el: '#app',
    mounted: function() {
        Velocity(this.$refs.rect, {
            backgroundColor: '#0085eb',
            translateX: 260,
            rotateZ: '360deg'
        }, {
            duration: 1000,
            easing: [ 0.4, 0.01, 0.165, 0.99 ]
        });
    }
});

五、打印div组件 vue-print-nb  githup地址

import Print from 'vue-print-nb'

Vue.use(Print);



        
葫芦娃，葫芦娃
        
一根藤上七朵花 
        
小小树藤是我家 啦啦啦啦 
        
叮当当咚咚当当　浇不大
        
 叮当当咚咚当当 是我家
        
 啦啦啦啦
        
...


Print local range

 六、丰富文本编辑器  vue-quill-editor

import VueQuillEditor from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

Vue.use(VueQuillEditor)