标签：插件 vue 表单 vee 整理 import validate
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表单验证
[链接]
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虚拟滚动
【链接】
八、loadsh插件防抖和节流
[官网]
import {throttle} from 'lodash'
methods: {
//鼠标进入修改响应元素的背景颜色
//采用键值对形式创建函数，将changeIndex定义为节流函数，该函数触发很频繁时，设置50ms才会执行一次
changeIndex: throttle(function (index){
this.currentIndex = index
},50),
//鼠标移除触发时间
leaveIndex(){
this.currentIndex = -1
}
}
标签：插件,vue,表单,vee,整理,import,validate 来源： https://www.cnblogs.com/jiajia-hjj/p/15925687.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。