- 博客(27)
- 收藏
- 关注
原创 js对象扁平化 字符串转对象 扁平化对象转字符串
js对象的扁平化传入一个对象 获取他扁平后的对象 如果嵌套多层已.的方式呈现设计思路 判断当层结构是不是对象并且不是空对象 满足条件递归 链接每次递归的key存放到数组里 在最后一层进行数组的join方法生成key window.isobj = function isEmptyObject(elem) { for (var key in elem) { return false } r
2022-04-30 22:25:37 362
原创 vue项目配置打包优化 gzip压缩 更改输出js img css文件名 cdn加速
vue config文件配置全局cdn加速const CompressionWebpackPlugin = require('compression-webpack-plugin')// "compression-webpack-plugin": "^5.0.2",const cdnDependencies = require('./cdn')const HtmlInjectConfigPlugin = require('./src/plugins/html-inject-config-plugi
2022-04-22 16:35:23 2396
原创 vue3+element plus搭建后台管理系统
项目地址:https://gitee.com/mangoxin1/mango-fd采用vue3和vite2和element plus搭建后台管理系统内部封装多个组件 支持页面关闭 支持iframe内嵌跳转 新窗口打开 全屏打开当前组件封装组件 表格crud<script setup>import { reactive, ref, toRaw } from "vue";import { get } from "lodash";import { getfrom } from "./m
2022-04-11 18:11:10 2681 3
原创 vue项目axios实现多实例共享一个拦截器
axios配置多实例共享拦截器定义一个class 在class内部写上axios拦截器方法import axios from 'axios'import NProgress from 'nprogress' // 进度条import 'nprogress/nprogress.css' // 引入样式import store from '@/store'// 携带部分参数白名单const whiteList = [ '/oauth2/v3/user/login/apply', '
2022-04-09 21:57:15 1918
原创 简单封装一个element弹窗
简单封装一个element弹窗 适合在脚本和js里调用或者在vue页面函数内调用import Vue from 'vue'export default function(component, options = { dialog: {}}, cb) { return new Promise(async(resolve, reject) => { const dialog = { appendToBody: true, // 对话框遮罩层是否插入至 body 元素上
2022-03-21 15:40:57 1512 2
原创 vue2源码学习
学习vue源码前置知识在学习源码前需要了解Vue2版本源码中用到的类型检查工具,flow,Java script是动态弱类型语言,对数据类型不严格,在生产阶段往往会产生一些bug,flow是Facebook 出版的类型检查工具,和ts一样,可以使项目在开发阶段就把类型检查相关的bug解决和避免了解vue源码目录compilercompiler目录是vue编译相关代码里面有模板解析成 ast 语法树,ast 语法树优化,代码生成等功能。corecore 目录包含了 Vue.js 的核心代码,包括内
2022-02-23 16:30:31 1972
原创 vue项目调用企业微信扫码权限skd,js-sdk
企业微信移动端项目调用扫码定位功能实现,获取code采用vue来搭建本项目,如果需要调用企业微信js-sdk就需要给登录接口传code,code在index.html获取 function getUrlParam(name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象 var r = win.
2021-12-28 10:38:45 1193
原创 数组转树,树转数组攻略大全
数组转树,树转数组攻略大全 let list = [ //数据结构 { pid: null, id: 1, serialNumber: '1', }, { pid: 1, id: 11, serialNumber: '1', }, { pid: 11,
2021-11-09 10:17:01 280
原创 element表格攻略大全,表头合并,表格合并,动态添加一列
elementui表格攻略大全,表头合并,表格合并,动态添加一列element合并表头与合并表格,需求就是这样,数据结构中需要有一个大类集合,由于数据结构是我定的,图二是这个表格的数据结构[ { fuelType: '固体燃料(吨)', fuelVarieties: '无烟煤', unitCalorific: '', oxidationRate:'', calorificPower:''
2021-11-04 14:38:07 1731
原创 vant图片上传和编辑时回显
vant图片上传和编辑时回显首先在html部分使用组件 定义添加删除事件 和最大上传数量 还有data的图片数组<van-uploader @delete="deleteimg" :after-read="clickUpload" v-model="fileList" multiple :max-count="6" /> //deleteimg删除图片触发 //clickUpload上传完触发 //fileList数组fileList:[],然后开始写添加图片的事件clickUp
2021-09-03 14:43:35 2847
原创 解决html路径传参和中文参数乱码问题
解决html路径传参和中文参数乱码问题众所周知,页面传参在不使用框架的情况下,只能通过url后面的路径传参,并且路径传参不可以传入对象,只能拼接字符串,下面是示例,由于项目是在老项目改动,所以使用到了vue,下面的encodeURI可以对中文字符进行编码,后面的就是要拼接的字符串,做完这些就可以进行跳转了 var searchUrl =encodeURI("individualStandard.html?searchText="+this.selectBox.materialCode
2021-08-25 17:16:47 1304 1
原创 不用插件实现vue移动端上传图片和回显图片,开箱即用的移动端上传图片
不用插件实现vue移动端上传图片和回显图片,贴入一段html代码,比较乱,但是可以开箱即用,样式可以自行调改,里面的img是我从阿里矢量图里当下来的 可以自行查找<input @change="fileChange($event)" type="file" id="upload_file" multiple style="display: none"/> <div class="add" @click="chooseType"> <div cl
2021-08-25 14:23:01 616
原创 antd ant design vue 树形控件 check 具体详解
Ant design vue pro 树形控件操作 下面是我的树形控件使用的地方 <a-tree v-if="treeData && treeData.value && treeData.value.length" :checkedKeys="modelRef.menuIds" :replace-fields="{ children: 'children', title: 'label', k
2021-08-03 17:25:43 5968 5
原创 vue3后端返回文件流前端导出xlsx
vue3后端返回文件流前端导出xlsx因为使用vue3,所以我采用axios,可以在promise的then里取到流const sdownload=async()=>{const re=await download().then(re=>{ //在.then里可以获取到data//ant的成功消息提示 notification.success({ message: '提示', description: '操作成功', }
2021-07-16 14:22:09 2504
原创 使用Vue3+Ant Design Vue pro搭建后台管理系统
使用Vue3+Ant Design Vue pro搭建后台管理系统表单验证方面安迪赞vue提供了from表单项 在item里可以添加自定义内容 当然每个选项输入框或者下拉框都需要绑定验证规则 ,安迪赞vue的验证规则我采用了下面这种方式绑定在setup里定义双向绑定数据项 数据项的名字要和表单内容双向绑定的一直每一个括号对应一个自身的验证规则 ,它可以对应很多项验证规则定义完验证给i则需要和表单内容绑定在一起,这个时候需要用到安迪赞vue的表单验证api,然后用他们进行绑定,下面的use
2021-05-28 18:15:57 4378 1
原创 v-model和.sync
v-model="test" test: '',然后再子组件绑定一个model,里面有俩个属性,prop是传回的值,msg是传回的数据,cc是自定义事件 model: { // 使用model, 这儿2个属性,prop属性说,我要将msg作为该组件被使用时(此处为aa组件被父组件调用)v-model能取到的值,event说,我emit ‘cc’ 的时候,参数的值就是父组件v-model收到的值。 prop: 'msg', event: 'cc' }, props.
2021-04-25 20:50:04 99
原创 数组方法
数组方法let arr=[12,3,123,1,23,12,3,123,123]let a=12arr=arr.filter(item=>{ return item!=a})console.log(arr);let b=[ {name:'魏建新',age:12}, {name:'魏建新',age:13}, {name:'魏建新',age:14}, {name:'魏建新',age:15},]let c=b.map(item=>{ return it
2021-04-21 13:58:51 79
原创 使用Object.defineProperty监听一个数据的改变和获取
html结构 <input type="text" id="input" > <button id="btn"></button> <input type="button" id="zhikon">let obj={ name:'魏建新', age:25}定义一个对象let zk=document.getElementById('zhikon')获取置空按钮let input=document.getElement
2021-04-19 11:06:47 327 2
原创 Vue响应式
什么是响应式修改 data 属性之后,vue 立刻监听到data 属性被代理到 vm 上#3.2 Object.defineProperty#3.3 模拟实现
2021-04-18 23:07:07 84
原创 简述diff算法
你如何理解vue中的diff算法1.diff算法是虚拟dom技术的必然产物,通过新旧虚拟dom做对比,将变化的地方更新在真是dom上,另外也需要diff高效的执行对比过程,从而降低时间的复杂度2.vue中的diff执行时刻是组件实例执行其更新函数时,他会对比上一次渲染结果oldvnode的新的渲染结果newvnode,此过程称为patc3.diff过程整体遵循深度优先,同层比较策略,俩个节点之间比较会根据他们是否拥有子节点或者文本节点做不同操作,比较俩组节点是算法的重点,假设头尾节点可能相同会做四次对
2021-04-18 17:45:55 3024
原创 回流和重绘
回流和重绘什么时候发生回流页面第一次渲染的时候添加删除可见的dom元素元素的位置发生变化元素的尺寸发生变化(包括外边距 ,内边距等)浏览器的窗口尺寸变化(因为回流是根据视口的大小来计算元素的位置和大小的)什么时候发生重绘(回流一定触发重绘 ,重绘不一定触发回流当页面中元素样式的改变并不影响它在文档流中的位置时(例如:color、background-color、visibility等),浏览器会将新样式赋予给元素并重新绘制它,这个过程称为重绘。如何避免回流重绘避免使用table
2021-04-18 14:10:05 86
原创 css左侧盒子固定右边自适应
盒子左侧固定右边自适应使用浮动加外边距设置父盒子高度,让子盒子高度100%继承父盒子,给做盒子设置宽度和浮动背景色,然后给右侧盒子设置marginleft宽度和背景色 <style> .box{ height: 50px; } .box >div{ height: 100%; } .box1{ width: 20px;
2021-04-18 13:53:23 2141
原创 从浏览器地址栏输入url到显示页面的步骤
从浏览器地址栏输入url到显示页面的步骤在浏览器地址栏输入URL浏览器查缓存,如果请求资源在缓存中并且新鲜,跳转到转码步骤如果资源未缓存,发起新请求如果已缓存,检验是否足够新鲜,足够新鲜直接提供给客户端,否则与服务器进行验证。检验新鲜通常有两个HTTP头进行控制HTTP1.0提供Expires,值为一个绝对时间表示缓存新鲜日期HTTP1.1增加了Cache-Control: max-age=,值为以秒为单位的最大新鲜时间浏览器解析URL获取协议,主机,端口,path
2021-04-17 15:38:47 281 1
原创 js面试题
js同源跨域解决同源: 协议,域名,端口相同,同源策略是一种安全协议,指一段脚本只能读取来自同一来源的窗口文档跨域: 不能执行其他网站的脚本,是由同源策略造成的,浏览器施加的安全限制,防止恶意攻击网站解决: 1.jsonp,动态创建一个script标签 2.cors:跨资源共享 3.反向代理 4.window+ifram作用域,作用域链,延长作用域链作用域: 变量的有限范围,分为全局作用域,局部作用域,块级作用域{}预解析: 把变量的声明提升到当前作用域的最前面,只会提升声明
2021-04-16 23:18:22 140
原创 VUE面试题
【深度讲解+面试回答】tcp/ip协议三次握手、四次挥手,通俗易懂,亲自解答TCP/IP协议是面向链接的可靠的安全协议,三次握手是保证建立安全的链接,它运用了全双工通信,全双工通信就是允许数据在俩个方向上同时传输,他的能力相当于俩个单工通信的结合三次握手:第一次挥手客户端向服务端发送报文请求,在报文里面sin位和标志位是惟一的,当服务端接收到客户端的请求报文后就知道客服端要和服务端进行链接,于是有了第二次握手,在第二次握手中服务端接收带了请求,并且确认无误,但是在二次握手之后,服务端只接受了客户端的链接
2021-04-16 23:14:43 530
原创 关于前端js的面试题
常见兼容性问题不同浏览器的标签默认的外补丁和内补丁不同不加样式控制的情况下,各自的margin 和padding差异较大。解决方案:CSS里 *{margin:0;padding:0;}块属性标签float后,又有横行的margin情况下,在IE6显示margin比设置的大IE6中后面的一块被顶到下一行解决方案:在float的标签样式控制中加入 display:inline;将其转化为行内属性图片默认有间距几个img标签放在一起的时候,有些浏览器会有默认的间距。 使用float属性为img
2021-04-16 23:10:37 176
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人