vue插件整理

一、nprogress进度条插件

【】

二、swiper轮播

【】

三、解决vuex-刷新页面state数据消失插件

vuex-persistedstate

vuex-along

【】

四、qrcode生成二维码插件

[官网]

//引入
import QRCode from "qrcode";
// 生成二维码
const generateQR=async ()=> {
    try {  
        let url = await QRCode.toDataURL(this.payInfo.codeUrl);
        console.log(url);
    } catch (err) {
        console.error(err);
    }
}

五、vue-lazyload图片懒加载

[官网]

• 图片需要现在在屏幕上时，再加载这张图片

• 安装

npm install vue-lazyload --save

• 导入，并Vue.use

//引入默认图片
import loadImg from '@/assets/1.jpg'
//引入插件
import VueLazyload from 'vue-lazyload'
 //注册组件
Vue.use(VueLazyload,{
  //懒加载默认图片
  loading: require('@/assets/1.jpg'),//或者import方式==>loadImg
})

• 修改img，:src->v-lazy

六、vee-validate表单验证

vee-validate

[链接]

1、安装引入

#vue2,安装2版本
#vue3,安装3或4版本
npm install vee-validate@2 --save

2、引入

• 插件需要写的代码比较多，不好全部放在main.js中

• 所以可以新建一个文件夹plugins，新建表单验证插件validate.js

• 在main.js中引入

//引入表单验证
import '@/plugins/validate'

3、提示信息

// vee-validate插件：表单验证
import Vue from "vue";
import VeeValidate from "vee-validate";
//中文提示信息
import zh_CN from "vee-validate/dist/locale/zh_CN";
Vue.use(VeeValidate);

//表单验证
VeeValidate.Validator.localize("zh_CN", {
  messages: {
    ...zh_CN.messages,
    is: (field) => `${field}必须与密码相同`, // 修改内置规则的 message，让确认密码和密码相同
  },
   
  attributes: {
    phone: "手机号",
    code: "验证码",
    password: "密码",
    password1: "确认密码",
    agree: "协议",
  },
});


//自定义校验规则
VeeValidate.Validator.extend("tongyi", {
    validate: (value) => {
      return value;
    },
    getMessage: (field) => field + "必须同意",
  });
  

4、使用

{{ errors.first("phone") }}



{{ errors.first("password1") }}




同意协议并注册《尚品汇用户协议》
{{ errors.first("agree") }}

七、vue-virtual-scroller-list虚拟滚动

【】

八、loadsh插件防抖和节流

[官网]

import {throttle} from 'lodash'

methods: {
    //鼠标进入修改响应元素的背景颜色
    //采用键值对形式创建函数，将changeIndex定义为节流函数，该函数触发很频繁时，设置50ms才会执行一次
    changeIndex: throttle(function (index){
        this.currentIndex = index
    },50),
        //鼠标移除触发时间
        leaveIndex(){
        this.currentIndex = -1
    }
}