LILEILEILOVE的博客

3.请求配置头部，用formData传参时的配置。

3.在store文件夹里创建modules文件夹,创建各个模块的，demo.js。2.在main文件中引入pinia并创建容器挂载到根实例上。1.创建store文件夹，创建index.js文件。

window.open是默认新开一个tab页。前面没有域名会自动沿用之前的。

1.utils中创建方法。2.在main中引入。3.在使用的页面调用。

1.组件pagination。

过滤机构树，vue3+ant tree。

【代码】dayjs获取年月日季度。

一、安装项目文件夹中执行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

方法引入<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")}

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

一、安装：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

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

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"...

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

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

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

截取地址栏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<

单元测试

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

解密后台返回的加密电话号码使用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

<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("滚

采用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

运用的都是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();

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

简化版<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

从前端上传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();

在请求配置文件中统一设置,加时间戳可以解决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

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

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)',

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

<script> import axios from 'axios' import config from '@/config' import store from '@/store' import eleUi from 'element-Ui' const Loading = eleUi.Loading //bing fa qing qiu guan bi loading 关.

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

<script> //excel请求接口 export function downloadSummaryToExcel(params){ return axios.request({ url:'', methods:'get', responseType:'blob', params..

<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="..

<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)

1.这种方法适合页面中只有一个echarts图window.onresize = ()=>{this.myCharts.resize()}2.利用事件监听drawPic(){let myCharts = this.$echarts.init(document.getElementById('pic')let option = {}myChart.setOption(option)this.r = () =>{myChart.resize()}window.addEven

async getList(){this.loading = true;let data ={test:'123'}try{const res = await getListApi(data)if(parseFloat(res.code)===0){if(res.data){$nextTick(()=>{this.listData = res.data;})}}catch(e){console.log(e)}finally{this.loading = false}

iframe嵌套页面没有办法获取浏览器滚动条，就监听嵌入页面DIV的滚动<div id="app" @scroll="handleScroll"><div>methods:{handleScroll(){let appScroll = document.getElementById("app");console.log(appScroll.scrollTop)this.$store.commit('SETSCROLLTOP',appScroll.scrollTop)}

1.安装ecartsnpm i echarts -S2.main.js配置import Vue from 'vue'import App from './App'import router from './router'// 引入echartsimport echarts from 'echarts'Vue.prototype.$echarts = echartsVue.config.productionTip = falsenew Vue({ el: '#app', r

主要是用到了 transition，用过度来实现效果<template><div> <div class="box"> <div class="left" @click="tabFun('0')"> left </div> <div class="right" @click="tabFun('1')"> right </div> <div cla