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

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

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

使用方法：

1.src直接使用：

<!-- 使用rem，需另外引入ydui.flexible.js自适应类库 -->
<link rel="stylesheet" href="//unpkg.com/vue-ydui/dist/ydui.rem.css">
<script src="//unpkg.com/vue-ydui/dist/ydui.flexible.js"></script>

<!-- 引入Vue2.x -->
<script src="//vuejs.org/js/vue.min.js"></script>
<!-- 引入组件库 -->
<script src="//unpkg.com/vue-ydui/dist/ydui.rem.js"></script>

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直接引用，介绍一个圆形裁剪的例子（官网上也有该例子）

<div id="app">
  <croppa
    v-model="croppa"
    :width="250"
    :height="250"
    prevent-white-space
    initial-image="https://zhanziyang.github.io/vue-croppa/static/500.jpeg"
    @init="onInit"
  ></croppa>
</div>


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动画库简单使用

<div id="app">
    <div class="rect" ref="rect"></div>
</div>

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


<div id="printMe" style="background:red;">
        <p>葫芦娃，葫芦娃</p>
        <p>一根藤上七朵花 </p>
        <p>小小树藤是我家 啦啦啦啦 </p>
        <p>叮当当咚咚当当　浇不大</p>
        <p> 叮当当咚咚当当 是我家</p>
        <p> 啦啦啦啦</p>
        <p>...</p>
</div>

<button v-print="'#printMe'">Print local range</button>

六、丰富文本编辑器 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)


 <quill-editor v-model="content">
 </quill-editor>

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

猜你喜欢