vue.js
快起来搬砖了
这个作者很懒,什么都没留下…
展开
-
Vue移动端各种机型判断
#Vue判断是否为移动端/IOS/当前设备是否为手机Vue移动端各种机型判断判断当前设备是否为移动端原创 2021-12-16 14:07:31 · 5961 阅读 · 0 评论 -
【Vue实用功能】Vue数组中的某属性拼接成字符串
Vue数组中的某属性拼接成字符串。原创 2022-08-09 09:39:15 · 2765 阅读 · 0 评论 -
【Vue实用功能】Vue 项目首次打开加载很慢的优化方案
当SPA(单页应用程序)变得很复杂时,构建后的包会变得很大,从而导致页面的加载时间过长。vue-router 支持 webpack 内置的异步模块加载系统。所以采用路由被访问时按需加载,使用较少的路由组件就不用打包进 bundles 中。方案2:CDN加速...原创 2022-06-20 14:54:49 · 5756 阅读 · 1 评论 -
【Vue实用功能】Vue实现文档在线预览功能,在线预览PDF、Word、Excel、ppt等office文件
Vue实现文档在线预览文档,在线预览PDF、Word、Excel和ppt等office文件原创 2022-05-30 13:41:44 · 49501 阅读 · 16 评论 -
【Vue实用功能】Vue获取URL图片的宽高
Vue获取URL图片的宽高方法1:函数类型datadragEnd() { // 创建实例对象 var img = new Image(); // 图片地址 img.src = "http://celiang.oss-cn-hangzhou.aliyuncs.com/measurement/2022-05/19/G0JSVphpS2MItH1652924237220519.jpg"; let res = {} img.onload = function () { res = { w原创 2022-05-19 10:08:28 · 6770 阅读 · 0 评论 -
【Vue实用功能】Vue页面转Pdf实践
需求场景将页面指定的区域转PDF并调用打印机,生成的PDF是横向分页技术栈:Vue、Element、html2Canvas、jspdf、print-js实现步骤插件安装好的前提:页面通过html2Canvas生成图片 —— jspdf转PDF —— print-js调用打印机安装插件这里主要说html2Canvas、jspdf、print-js npm install print-js --save npm install html2canvas --save ...原创 2022-05-18 10:45:01 · 1259 阅读 · 0 评论 -
element-ui 的el-popover 自定义弹出和关闭
element-ui 的el-popover 自定义弹出和关闭业务需求: 鼠标悬停打开弹窗,点击弹窗里面的内容后关闭弹窗Element 中 Popover 弹出框的弹出方式有 hover,click,focus,手动激活几种方式,根据业务需求,可以如下使用:el-popover弹出框 关闭和打开分别用 doClose() 和 doShow() 方法 ,Element UI文档中没有提到这两个方法 <el-popover placement="bottom" ref="popover原创 2022-05-16 13:13:46 · 8021 阅读 · 5 评论 -
【Vue实用功能】Vue生成二维码
Vue生成二维码复制到剪切板安装qrcodejs2: https://www.npmjs.com/package/qrcodejs2npm i qrcodejs2需要生成的页面引用 <div class="shareWx"> <div id="qrcode" ref="qrcode"></div> </div> <div>微信扫码分享项目</div>import QRCode from "qrcodej原创 2022-05-12 11:16:36 · 556 阅读 · 0 评论 -
Vue生命周期
什么是 vue 生命周期Vue 有⼀个完整的⽣命周期,从开始创建、初始化数据、编译模版、挂载Dom(渲染)更新( 渲染)、卸载 等过程称之为Vue⽣命周期。Vue2生命周期beforeCreate:创建前实例初始化之后,数据观测和事件配置之前被调用,此时组件未创建选项的对象,el 和data 未初始化,无法访问methods, data, computed等上的方法和数据 created:创建前后实例创建完成之后被调用,实例已经完成以下的配置:数据观测,属性和方法的运算,watch/ev原创 2022-05-09 22:27:02 · 349 阅读 · 0 评论 -
Vue3 watch和watchEffect的用法
watch和watchEffect都起到监听作用,但是他们在使用和写法上面有所不同watch使用:https://blog.csdn.net/weixin_44590591/article/details/124598751watchEffect使用:watch和watchEffect的区别**watch:**既要指明监视的属性,也要指明监视的回调watchEffect:特点:不需要手动传入依赖、每次初始化时会执行一次回调函数来自动获取依赖无法获取到原值,只能得到变化后的值wat原创 2022-05-06 21:44:44 · 296 阅读 · 0 评论 -
【Vue实用功能】vue滑块组件验证
vue滑块验证,图片验证,图片旋转验证,滑动验证注:Vue3均使用按需引入1、 基本滑块验证组件// 安装npm i vue-drag-verify2 -S// 引用: main.js 中引用import Vue from 'vue'import dragVerify from 'vue-drag-verify2'Vue.use(dragVerify)<template> <div> <h3>模块验证:</h3>原创 2022-04-26 11:28:22 · 11304 阅读 · 8 评论 -
【Vue实用功能】Vue Element-UI Table点击某一行将该行设置为高亮和默认第一行高亮
Vue Element-UI Table点击某一行将该行设置为高亮和默认第一行高亮默认第一行高亮:highlight-current-row ,切换时也高亮 <el-table :data="taskTabList" style="width: 100%" :data="taskTabList" border highlight-current-row ref="monthlyPlanTable"> <el-table-column prop=原创 2022-04-21 16:00:55 · 4742 阅读 · 0 评论 -
Element UI 走马灯 移动端实现用手指可以左右滑动
Element UI 走马灯 移动端实现用手指可以左右滑动Element UI的轮播I图,在移动端实现手指左右滑动定义一个ref='slideCarousel’的轮播图 <el-carousel :interval="4000" type="card" ref="slideCarousel"> <el-carousel-item v-for="item in banner1" :key="item"> <img :s原创 2022-03-24 14:42:15 · 4305 阅读 · 2 评论 -
axios接口上传数组参数、上传二维数组
axios qs.stringify({})对象里面包含数组时后台获取不到数据解决方法axios上传二维数组安装依赖npm install qs全局引用import qs from "qs";Vue.prototype.$qs = qs;参数解析qs.parse()将url解析为象的形式let url = 'name=张三&age=15';//this.$qs.parse(url);console.log(this.$qs.parse(url));{ name:'张原创 2022-03-21 10:09:33 · 545 阅读 · 0 评论 -
Element 表单只能输入数字校验
Element 表单只能输入数字校验以下验证均为只能输入数字类型只能输入整数<el-input v-model="value" placeholder="请输入金额" onkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')"></el-input>只能输入小数—两位小数<el-input v-model="value" placeholder="请输入金额" o原创 2022-03-18 09:28:49 · 4139 阅读 · 1 评论 -
Vue 图片上传功能
Vue 图片上传功能Vue 图片上传功能,自定义上传限制上传类型 & 多选:① accept 属性只能与 配合使用。它规定能够通过文件上传进行提交的文件类型。② multiple 属性规定输入字段可选择多个值。<!-- image/* 所有图片 image/png png图片 image/jpg jpg图片 image/gif gir动图 application/msword Word文档(.doc原创 2022-03-02 16:07:58 · 1287 阅读 · 1 评论 -
Vue报错 the “scope“ attribute for scoped slots have been deprecated and replaced by “slot-scope
Vue报错the “scope” attribute for scoped slots have been deprecated and replaced by “slot-scope” since 2.5. The new “slot-scope” attribute can also be used on plain elements in addition to to denote scoped slots.自2.5版以来,作用域插槽的“scope”属性已被弃用并替换为“slot scope”。原创 2022-02-17 13:21:26 · 2842 阅读 · 0 评论 -
Vue 在线预览PDF pdfh5(移动/PC)
移动端实现在线预览PDF,并且可以自由缩放pdfh5 的github地址:https://github.com/gjTool/pdfh5安装npm install pdfh5效果组件封装:pdfInfo.vue<template> <div :class="$style.pdf" v-show="visible"> <div @click="visible = false"></div> <di原创 2022-01-19 09:41:02 · 4635 阅读 · 5 评论 -
vant UI 使用 ImagePreview 预览图片
vant UI 使用 ImagePreview 预览图片通过 npm 安装// Vue 3 项目,安装最新版 Vantnpm i vant// Vue 2 项目,安装 Vant 2npm i vant@latest-v2需要预览图片的页面使用// 局部使用:import Vue from 'vue';import { ImagePreview } from 'vant';Vue.use(ImagePreview);export default { components: {原创 2022-02-15 15:28:05 · 2232 阅读 · 0 评论 -
vue实现简单瀑布流布局(vue-waterfall2)
1、安装vue-waterfall2 npm i vue-waterfall2@latest --save 或者 yarn add vue-waterfall2@latest --save2、main.js中全局使用注意:如果不在main.js全局引入,而在某个页面import引入的话,会报render渲染错误import Vue from 'vue'import App from './App.vue'import router from "@/router";import Elem原创 2021-09-15 14:38:46 · 6399 阅读 · 2 评论 -
Vue图片预览插件viewerjs
安装npm install v-viewer引入插件//main.js文件import Vue from "vue";import Viewer from "v-viewer";import "viewerjs/dist/viewer.css";//属性配置Vue.use(Viewer, { defaultOptions: { 'inline':true,//自动缩放 'button':true, //右上角按钮 "navbar": true, //底部缩略图原创 2021-11-24 14:36:47 · 918 阅读 · 0 评论 -
vue点击图片放大预览图片、旋转等
Element UI通过点击预览图片//引入图片预览插件(前提是安装了element ui) import ElImageViewer from 'element-ui/packages/image/src/image-viewer' components: { ElImageViewer, }, data() { return { designUrl: '', showViewer: false, } } methods:{ // 关闭查原创 2021-12-14 09:30:20 · 939 阅读 · 2 评论