LILEILEILOVE-优快云博客

一、安装项目文件夹中执行npm install --save qrcode或者，全局安装npm install -g qrcode在ES6/ES7中使用import QRCode from 'qrcode' // import引入可能会导致报错，可以尝试require// const QRCode = require('qrcode'); // With promisesQRCode.toDataURL('I am a pony!') .then(url => { c

2022-03-14 20:25:15 1193

原创 h5头部组件封装

H5头部组件封装<div><div :style="`padding-top:${paddingTop}px`"><van-nav-bar /></div></div>setup(){const paddingTop = computed(()=>{return store.state.height}创建utils文件夹，env.jsexport const getSafeAreaHeight=()=>{l

2022-03-12 09:38:26 528

原创 Vue3的图片引入

方法引入<img :src="imgFun('test.png')"/>function imgFun(val){return new URL(`../../asseets/home/img/${val}`,import.meta.url).href;}背景样式引入.box{background:url("../../assets/home/img/test.png")}.box1{background:url("~@assets/home/img/test.png")}

2022-03-12 09:19:05 13971 1

原创 VueDraggable在Vue中使用

VueDraggable在vue3中使用要用最新版本在移动端使用点击事件不灵敏解决方法：1.添加delay=“1”,鼠标按下多久可以拖拽；2.添加fallbackToLerance=“3”,拖拽之前需要移动的px;//最有效3.将拖拽的组件写成组件，点击通过$emit告诉父组件；...

2022-03-11 19:07:12 1209

原创 vue兼容IE

一、安装：npm install --save babel-polyfill；二、配置：module.exports = { entry: [“babel-polyfill”, “./src/main.js”] };三、main.js中配置：import ‘babel-polyfill’ //放在最顶部，确保全面加载或者新建文件babel.config.js,与vue.config.js同级//babel.config.js,module.exports = {presets:["@vue/cl

2022-02-18 18:51:07 451

原创去掉输入框的黄色背景

用足够大的内阴影来覆盖/deep/input:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px white inset !important;background-image:none;}

2022-02-09 14:02:57 515

原创 vue全局添加字体

1.在assets文件夹中创建fonts文件,放入ttf类型的文件2.在assets文件夹中创建css文件。在css文件夹中创建fonts.css@font-face{font-family:"DINALternateBold";src:url("../fonts/DINALternateBold.ttf")}3.在main.js中引入import"@/assets/css/fonts.css"...

2022-01-26 09:57:09 2172

原创 vue3父子传参控制弹出框

父组件传参要用v-model<template> <div class="muban"> <el-button type="primary" size="small" @click.prevent="tipShow" > tip </el-button> <MinDialog v-model:dialogVisi

2022-01-24 21:38:10 2106 4

原创前端项目的首页优化

1.加 CDN，图片。js\css文件用cdn加载。2.图片懒加载，按需加载。压缩图片，webpp格式的图片。组件懒加载3.减少公共自定义组件。减少全局的混入4.减少http请求。5.前端、服务端开启gzip。6.删除mock.js.7.删除无效代码。8.检测后端接口，性能测试。9.使用浏览器强缓存策略。10.延迟调用一些方法，减少js主进程（比如埋点方法。fastclick,vconsole的加载）...

2022-01-24 19:55:04 824

原创 vue项目中fastclick的安装使用

fastclick 的安装npm install fastclick --save在main.js中引入import FastClick from "fastclick"//fastclick导致input框点击慢的问题,引入import "@utils/resetFastClick.jsFastClick.attach(document.body)在utils文件夹中创建resetFastClick.js文件import FastClick from "fastclick"//f

2022-01-19 19:10:21 1673 1

原创截取地址栏search部分，获取cookie

截取地址栏search部分function getSearch (){const obj = {}const searchStr = location.searchif(typeof searchStr === "string"){const searchIndex = searchStr.indexOf("?")const searchKeyValue = searchStr.slice(searchIndex + 1).split("&")for (let i = 0 ;i<

2022-01-17 19:11:34 517

原创 vue3添加单元测试

单元测试

2021-12-22 14:29:54 1661

原创浏览器插件

一.浏览器插件网https://www.cnplugins.com/https://www.gugeapps.net/webstore/search?key=vip二、导出插件1.通过插件ID在电脑本地文件夹中找到需要打包的扩展程序对应的文件夹。2.在扩展程序中选择要打包扩展程序按钮；3.选择要打包的扩展程序的根目录。（就是第一步找到的本地地址）4.选择打包5.在插件的目录下，就能看到了...

2021-12-19 02:16:10 258

原创浏览器跨域的方法

1.新建谷歌浏览器之后创建两个快捷方式；2.选择一个快捷图标右击==》属性，在快捷方式==》目标这一栏，在最后追加 --disable-web-security --user–data-dir=你的新建文件夹，这里我的写法是：？–disable-web-security --user–data-dir=D：\ChromeTest;3.点击确定，重新打开浏览器4.在D盘新建文件夹ChromeTest。（这个文件夹就是空的）...

2021-12-15 14:32:09 652

原创前端解密电话号码

解密后台返回的加密电话号码使用AES/DES加密解密npm install crypto-js --saveimport CryptoJs from 'crypto-js'let mobile = this.getMobile(moblieNo)//mobileNo为后台给的加密电话号码let mndly = '4454846587778926'//mndly为密匙偏移量，这个一般为后端返回getMobile(val){return this.daeacaraypat(val,'21

2021-12-06 21:41:00 1822

原创 vue DOM滚动事件，获取DOM滚动条距离DOM底部的距离

<ul @scroll.passive = 'scroll(e)' style="height:200px;overflow:auto;"><li>aaaa</li></ul>scroll(e){let scrollBottom = e.target.scrollHeight - e.target.scrollTop - e.target.clientHeight;if(scrollBottom < 10){console.log("滚

2021-12-05 21:07:42 1519

原创上传图片限制宽度和高度

采用el-upload组件onChange(file){let imgName = file.name;if(imgName.includes("gif") ||imgName.includes("jpg") ||imgName.includes("png") ||imgName.includes("jpeg") ||){let size = file.size / 1024/1024/2;if(size >=3){this.fileList = [];}else{let im

2021-11-28 23:14:35 544

原创下载文件和上传文件，excel、psd格式等

运用的都是el-upload组件一、下载文件用用a 标签的特性；downExcel(file){const elink = document.createElement("a")let {name,url} = file;elink.style.display = "none";elink.download = name;//必须要有elink.href = url;document.body.appendChild(elink);elink.click()elink.remove();

2021-11-12 23:57:12 415

原创上传图片、文件

1.用el-upload上传图片，然后请求后台接口，获取后台返回的图片url，<el-upload:class="{hide:hideUploadEdit}"v-loading = 'loading'element-loading-text='上传中'ref = 'uplod'action='#'accept='image/png,image/gif,image/jpg,image/jpeg':list-type='picture-card':limit="limitNum':a

2021-11-04 23:32:30 186

原创截屏，并传递到后台

简化版<div ref='box'></div>screenshot(){html2canvas(this.$refs.box,{backgroundColor:null,//避免图片有白色边框useCORS:true,allowTaint:true}).then(canvas=>{let dataURL = canvas.toDataURL('image/png',1.0)//默认截取的图片就是base64格式的，后台可以转化this.$emit('se

2021-11-04 22:51:25 388

原创导入excel表格

从前端上传Excel表格<el-uploadref="upload"actionaccept="##":auto-upload="false":show-file-list="false":on-change="changeUpload"><el-button>导入表格<el-button></el-upload>js部分changeUpload(file,fileList){let form = new FormData();

2021-11-04 22:20:46 120

原创每次请求都加时间戳

在请求配置文件中统一设置,加时间戳可以解决IE浏览器请求缓存的问题instance.interceptors.request.use(config=>{let getTimestamp =(new Date().getTime())if(config.url.indexOf("?")>-1){config.url = config.url + '&timestamp='+getTimestamp;}else{config.url = config.url +"?&ti

2021-10-19 22:53:26 1698

原创防抖函数调用

export default {data(){return {debounceFun:this.$utils.debounce(this.getList(),800)}}watch:{form:{handler(newVal){this.debounceFun()},deep:true}在utils.js文件中创建防抖函数export function debounce(func,wait,immediate){let timeout,result,let debounc

2021-09-30 00:00:10 428 1

原创 echarts 图表的滚动条

const dataZoom = [{show:true,zoomLock:false,//禁止拉伸height:8,xAxisIndex:[0],bottom:10,startValue:0,endValue:10,handleIcon:'',handleSize:'100%',handleStyle:{color:'#bbbbbb',shadowColor:'',shadowBlur:5,},backgroundColor:'#rgba(222,222,222,.5)',

2021-09-23 23:41:33 1624

原创在控制台更改内嵌iframe网页地址

在控制台输入$0.src = 'http://baidu.com'

2021-09-19 00:09:37 783

原创并发请求关闭LOADING

2021-09-05 03:37:16 278

原创 vue 下载pdf

<div @click='downloadToPDF'>下载PDF</div> <div ref='pafWrap'> <img src="detail.pictureUrl" alt="" @load='onImgLoaded'> </div> <script> onImgLoaded(e){ if(e.targ...

2021-09-05 03:09:14 429

原创 vue 下载excel表格

2021-09-05 02:14:02 143

原创上传图片 upload

<el-upload class="{hide:fileList2.length ===1}" class='strategy-upload' action=‘#’ :on-change="(file,fileList2)=>{onChange(file,fileList2)}" :limit="limit2" :file-list="flileList2" list-type="..

2021-09-04 23:39:34 243

原创 vue data- 属性,实现点击页面提示框隐藏

<div @click='showTitleTip = !showTitleTip'>按钮</div><div v-show='showTitleTip' data-keep='on'>提示框</div><script>data(){return{showTitleTip:false}created(){document.addEventListener('click',this.hideTipsEventHandler,true)

2021-08-10 23:48:33 230

原创 H5切换页面，滚动条到顶部

1.main.js中引入文件方法import { scrollTop} from '@utils/pagerouter.afterEach(r=>{if(r.meta.keepAlive) return;scrollTop()2.创建方法文件page.jsexport function scrollTop(){window.scrollTo(0,0)}

2021-07-22 23:39:02 1830

react学习.zip

today.html

空空如也