vue插件整理

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

<img v-lazy="img.src">

六、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、使用

<!--验证手机号 name="phone":验证的是哪一个， v-validate校验 ， 错误提示errors-->
<input placeholder="请输入你的手机号"
       v-model="phone"
       name="phone"
       v-validate="{ required: true, regex: /^1\d{10}$/ }"
       :class="{ invalid: errors.has('phone') }"
       />
<span class="error-msg">{{ errors.first("phone") }}</span>

<!--验证密码一样 is-->
<input placeholder="请输入确认密码"
       v-model="password"
       name="password1"
       v-validate="{ required: true, is:password}"
       :class="{ invalid: errors.has('password1') }"
       />
<span class="error-msg">{{ errors.first("password1") }}</span>


<!--验证是否选中 自定义校验规则：tongyi-->
<input name="agree" 
       type="checkbox"
       :checked="agree"
       v-validate="{ required: true, tongyi:true}"
       :class="{ invalid: errors.has('agree') }"
       />
<span>同意协议并注册《尚品汇用户协议》</span>
<span class="error-msg">{{ errors.first("agree") }}</span>

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

【链接】

八、lodash插件防抖和节流

[官网]

import {throttle} from 'lodash'

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