![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
Fighting宁
这个作者很懒,什么都没留下…
展开
-
H5使用微信和支付宝支付
H5使用微信和支付宝支付原创 2022-09-07 16:31:57 · 1849 阅读 · 1 评论 -
vite+vue3打包部署问题
vite+vue3打包部署问题。原创 2022-08-15 14:51:58 · 1035 阅读 · 0 评论 -
vant中的Cascader 级联选择异步加载地区数据
vant中的Cascader 级联选择异步加载地区数据。原创 2022-08-12 13:53:15 · 7268 阅读 · 9 评论 -
vue中的数字动画及数字逗号显示
需求:实现数字动画,并实现数字千位分隔符格式(8888,显示为8,888),数字从0-8888实现动画递增utils/common.js/** * 数字过渡动画-目前版本-默认一秒之内完成过渡动画 * @param current number 当前值 * @param target number 目标值 * @param _this 传递 当前实例指向 this * @param property string _this 和 property 是因为要把需要改变的属性传递进去,因为函数.原创 2022-05-18 10:14:05 · 1023 阅读 · 2 评论 -
vue生成app二维码,并扫码下载app
文章目录项目需求项目需求公司要做一个web官网的下载页面,功能是微信扫码可以直接下载Ios手机端app、Android手机端app、及windows的桌面端app下载页面的官网地址,在手机端打开时可以直接辨别手机型号去下载对应的手机app...原创 2022-05-05 11:29:59 · 3496 阅读 · 0 评论 -
vue项目优化首屏加载速度
背景:后台管理系统部署到线上环境后,清空浏览器缓存,第一次加载时,加载速度达到了9秒之久。从上面请求的接口可以看出来,第一次请求主要是app.js文件和chunk-libs.js文件,和一些element的第三方组件库请求速度很慢。分析:app.js和chunk-libs.js包太大的原因,主要是因为项目中npm 下载引入的依赖包,都会打包进来,所以加载很慢解决方案:将项目依赖的第三方组件库,才有cdn引入的方式,来减少打包体积。但是cdn引入,也有缺点,就是地址的不稳定性等等。这里优化采用.原创 2022-04-26 17:06:00 · 2361 阅读 · 1 评论 -
element中table多选框搭配分页,回显bug踩坑
需求:element+table+分页控件实现多选框的回显问题官网代码看着越简单,实际被虐的更惨官网代码 this.$refs.multipleTable.toggleRowSelection(row);但是实现代码中传入数据的时候却无法实现多选框的回显想要实现的功能:已经选中的数据可以在table中实现回显。每次切换分页时,可以保存上一页选中的数据解决::row-key="getRowVoucherKeys"和:reserve-selection="true"缺一不可.原创 2022-03-25 16:11:37 · 2476 阅读 · 0 评论 -
vue-quill-editor踩坑记录--富文本内容回显样式不对
使用vue-quill-editor写的富文本,内容在H5使用v-html显示时,样式跟在富文本写的时候样式不一样,字体大小显示不出来。原因:有些类名,在v-html页面是没有找到的。解决:全局或者局部引入vue-quill-editor的样式文件import 'quill/dist/quill.core.css'import 'quill/dist/quill.snow.css'import 'quill/dist/quill.bubble.css'<div v-html="co.原创 2022-03-10 15:13:23 · 4607 阅读 · 1 评论 -
配置 Prettier保存文件自动格式化代码不生效
项目根目录配置了.prettier.json文件但是保存代码时未生效vscode原创 2022-02-21 15:55:08 · 1533 阅读 · 0 评论 -
el-input输入框只可以输入数字
el-input只让输入数字<el-input v-model="queryParams.meetingNumber" placeholder="请输入会议号" clearable size="small" @input="inputMeetingNumber" @keyup.enter.native="handleQuery" /> .原创 2021-12-21 15:59:27 · 463 阅读 · 0 评论 -
vue跳转路由时,定时器不能及时清空的问题
该方法是通过$once这个事件侦听器器在定义完定时器之后的位置来清除定时器。以下是完整代码:const timer = setInterval(() =>{ // 定时器操作 }, 500); // 通过$once来监听定时器,在beforeDestroy钩子可以被清除。this.$once('hook:beforeDestroy', () => { c.原创 2021-08-19 09:32:23 · 739 阅读 · 0 评论 -
vue解析后台推送的文件流并生成excel文件
需求:用户点击时间选择器后,点击导出excel的按钮,请求接口生成excel文件后台写的接口,可以直接生成excel,前端不需要做任何的处理。但是发送axios请求发现并不能直接生成下载的excel。(如果在浏览器窗口直接请求该接口是可以直接下载excel,直接在项目中无法直接生成excel)解决添加responseType: ‘blob’该参数一定要写不然下载的excel打不开接口请求处理 const res = await getExportExcel(par..原创 2021-06-23 16:32:33 · 581 阅读 · 0 评论 -
vue项目使用externals优化打包体积
查看打包体积下载查看打包体积的插件npm install webpack-bundle-analyzer -save-dev在vue.config.js中配置 chainWebpack: config => { // 打包结果分析 if (process.env.NODE_ENV === "development") { config .plugin("webpack-bundle-analyzer") .use(requ原创 2021-06-18 14:43:09 · 797 阅读 · 1 评论 -
transform的scale属性实现对大屏的适配
最近公司做的大屏用到了transform的scale属性来对大屏网页,进行缩放。缺点:需要给项目大屏,设定固定的宽高,当使用的屏幕分辨率和项目不一致时,会出现左右或者上下的留白。如果设计稿是1920*1080的尺寸,项目中用px来写宽高的话,如果把尺寸改成小于1920的话宽度是超出的,所以项目中还是需要使用%来配合scale属性的缩放。优点:在任何屏幕中项目都会等比例缩放以下是基于vue项目的public/index.html #app { /* user-select: none;.原创 2021-06-18 10:52:40 · 5998 阅读 · 8 评论 -
vue中PC端,移动端,H5使用lib-flexible(rem)做适配
lib-flexible源码读后感手把手教你vue-cli3搭建项目实现移动端自适应----- flexible和 postcss-px2remPC端,移动端如何使用rem需求:公司大屏项目需要使用自适应,有的屏幕分辨率是1920X1080,有的是3840X1080等等。想让项目能尽量的适应大屏中所有的分辨率,之前尝试过scale缩放的方法,这种会出现左右留白,有的客户会要求充满浏览器,如果不是尺寸正好的,scale方法是不能完全充满的。实现:尝试使用lib-flexible(rem)+百分比的方原创 2021-06-17 14:38:52 · 4234 阅读 · 11 评论 -
vue实现全局组件的自动化注册
文章目录1.vue实现全局组件的自动化注册1.vue实现全局组件的自动化注册问题:每次项目里在components文件夹下的组件都要重复引入注册才能使用解决:实现components文件夹下的组件自动注册为全局组件参考文档webpack使用require.context实现前端工程自动化在components下新建index.js文件import Vue from 'vue'const components = require.context('components/', tru原创 2020-11-30 14:38:37 · 364 阅读 · 1 评论 -
vue响应式原理学习(1)
文章目录vue响应式原理学习(1)1.什么是响应式2.实现响应式,我们需要做些什么3.如何侦测数据的变化3.1 Object.defineProperty实现3.1.1 Observer实现一个对象对所有成员的代理3.2 Proxy实现4.收集依赖4.1 为什么要收集依赖前言:现在前端面试Vue中都会问到响应式原理以及如何实现的,如果你还只是简单回答通过Object.defineProperty()来劫持属性可能已经不够了vue响应式原理学习(1)一句话总结:通过Object.definePr原创 2020-09-29 15:03:57 · 323 阅读 · 0 评论 -
vue-cli3.0项目结构多环境打包配置
前言:vue项目配置不同的命令打包不同环境的dist包npm run build:dev-----生成环境npm run build:pro------开发环境npm run build:text------测试环境1.vue-cli3.0项目结构配置之前先确定一下目录结构是否是3.0的 这里只写3.0的配置2.开始配置package.json文件添加 "build:dev": "vue-cli-service build --mode development", "b.原创 2020-08-18 13:50:05 · 550 阅读 · 0 评论 -
正则校验-禁止输入特殊字符和空格
后台管理输入框要求禁止输入特殊字符和空格 <el-input v-model="dataForm.username" :placeholder="$t('user.username')" clearable @keyup.native="btKeyUpUsername"></el-input>data(){ return { dataForm: { username: '', } }}methods:{ btKe.原创 2020-07-30 10:34:34 · 9270 阅读 · 1 评论 -
elementUI-form中使用el-select,并修改其滚动条样式
最近遇到el-select需要修改它滚动条的样式,不修改全局,只对当前文件生效,但是发现直接写在scoped中不好使当使用element ui 的select 组件时出现不能修改组件样式的问题。当在form表单中使用select组件时,我们发现使用父元素包裹修改插件元素并不起作用,这是为什么呢,因为在form中,select组件的下拉框生成并不在此表单中,而是在与app同级的div下,这样,我们用父元素包裹写样式肯定不会生效,因为不在该父元素下生成的那怎么办呢? 一定要污染全局环境么?其实不用.原创 2020-07-28 13:53:01 · 4164 阅读 · 0 评论