- 博客(32)
- 问答 (1)
- 收藏
- 关注
RSS订阅原创 new URL()解析url
hash、host(含端口号)、hostname(不含端口号)、href、origin、password、pathname、port、protocol、search(序列化查询部分)get()：获取url中的某个参数（eg: b.searchParams.get(name) //laowang）toString(): 在 URL 对象上调用 toString() 方法将返回序列化的 URL。set(): 给url增加一个参数，当增加的参数已存在时，则替换第一个，其他的删除。sort()：按键名排序。
2023-03-22 22:43:30
813
原创 实现关闭页面（浏览器）时请求接口Navigator.sendBeacon()
文档链接：https://developer.mozilla.org/zh-CN/docs/Web/API/Navigator/sendBeacon参数：urlurl 参数表明 data 将要被发送到的网络地址。data 可选data 参数是将要发送的 ArrayBuffer、ArrayBufferView、Blob、DOMString、FormData 或 URLSearchParams 类型的数据。请求方式：默认为post请求...
2022-07-05 10:47:13
1293
原创 el-table复选框选中一行之后其他行禁用
el-table复选框选中一行之后其他行禁用<el-table ref="multipleTable" :data="mirrorTableData" @selection-change="mirrorSelectionChange" style="width: 100%"> <el-table-column type="selection"
2022-04-29 11:08:32
1090
原创 前端性能优化，prefetch与preload的区别是什么？
prefetch与preload的区别是什么？<link rel="prefetch" href="style.css" as="style"><link rel="preload" href="main.js" as="script">preload加载当前路由必须资源，优先级高。一般对于bundle spliting资源与Code spliting资源做preloadprefetch优先级低，在浏览器idle状态时加载资源，一般用于加载其他路由资源，如当页面出现lin
2022-04-18 11:01:27
935
转载 element-ui el-table使用v-if来控制列的显示隐藏 出现列位置错乱问题
描述：在el-table中使用v-if控制某些列的显示或者隐藏，当activeIndex数据发生改变时，下面这种写法会导致表格的列位置错乱，使用v-show没效果，截图及代码如下：<el-table ref="multipleTable" :data="tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize ) " tooltip-effect="dark" style="width: 100%" :row-key
2022-04-11 17:57:33
8324
5
原创 命令行操作删除node_modules
不支持vscode 请使用cmd进行命令操作第一步：安装删除工具 npm install rimraf -g第二步：使用删除命令 rimraf node_modules
2022-04-01 16:52:10
354
转载 vue2中的router-link
1.router-link<router-link>组件支持用户在具有路由功能的应用中点击导航。通过to属性指定目标地址，默认渲染为带有正确连接的<a>标签，可以通过配置tag属性生成别的标签。另外，当目标路由成功激活时，链接元素自动设置一个表示激活的css类名router-link属性有：to 、replace、 append、 tag、 active-class、 exact 、 event、 exact-active-class1.1 to（必填参数）表示目标路
2022-03-15 16:28:55
602
原创 防抖与节流
防抖当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始延时。防抖就是将多次操作变成一次eg: inputlet telInput = document.querySelector('input');telInput.addEventlistener('input',antiShake(demo,2000))//操作停止2s后才会发起请求（频繁操作不会一直发请求）//防抖封装function antiShake(fn,wa
2022-03-10 17:24:28
260
转载 http强缓存和协商缓存
1.浏览器缓存浏览器第一次请求时：浏览器在后续请求时：浏览器缓存包含两种类型，即强缓存（也叫本地缓存）和协商缓存，浏览器在第一次请求发生后，再次请求时：①浏览器在请求某一资源时，会先获取该资源缓存的header信息，判断是否命中强缓存（cache-control和expires信息），若命中直接从缓存中获取资源信息，包括缓存header信息；本次请求根本就不会与服务器进行通信；在firebug下可以查看某个具有强缓存资源返回的信息，例如本地firebug查看的一个强缓存js文件②如果没有命中强
2022-03-10 15:58:34
111
原创 微信小程序学习笔记(持续更新中...)
1.WXML和HTML区别①标签区别html: div span img awxml: view text image navigator② 属性节点不同html: wxml: 2.WXSS和CSS区别①wxss新增了rpx尺寸单位(自动进行单位换算)②wxss提供了全局样式和局部样式全局app.wxss, 局部.wxss仅对当前页面生效③wxss仅支持部分css 选择器id选择器，类选择器，元素选择器，并集选择器，后代选择器，伪类选择器3.常用组件swiper<s
2022-03-10 10:48:11
265
原创 weakset
1.weakset是什么?WeakSet 结构与 Set 类似，也是不重复的值的集合，只有三个方法，没有属性WeakSet.prototype.add(value)：向 WeakSet 实例添加一个新成员。WeakSet.prototype.delete(value)：清除 WeakSet 实例的指定成员。WeakSet.prototype.has(value)：返回一个布尔值，表示某个值是否在 WeakSet 实例之中。2.与set的不同点①WeakSet 的成员只能是对象②WeakSet
2022-03-10 10:45:22
115
原创 vue实现页面局部刷新
1.修改app.vue文件<template> <div id="app"> <router-view v-if="isRouterAlive"/> </div></template><script>export default { provide(){ return{ reload:this.reload } }, data(){ return{ is
2022-03-01 11:21:48
1130
原创 扁平数组转JSON树结构
扁平数组转JSON树结构data() { return { treeData:[ {id:1,orgName:'我是根元素',parentId:'0'}, {id:2,orgName:'我是根元素的子元素1',parentId:'1'}, {id:3,orgName:'我是根元素的子元素2',parentId:'1'}, ] }},methods:{ //扁平数组转树
2022-01-05 09:07:46
592
转载 vue组件通信方式
1.props/$emit简介props： props可以是数组或对象，用于接收来自父组件通过v-bind传递的数据。当props为数组时，直接接收父组件传递的属性；当 props 为对象时，可以通过type、default、required、validator等配置来设置属性的类型、默认值、是否必传和校验规则。$emit： 在父子组件通信时，我们通常会使用 $emit来触发父组件v-on在子组件上绑定相应事件的监听。代码实例下面通过代码来实现一下props和 $emit的父子组件通信，在这个实例
2021-12-21 17:09:35
72
原创 Chrome调试悬停之后出现的元素
Chrome调试悬停之后出现的元素1.F12打开控制台，悬浮到要出现的元素上面（找到目标元素）2.ctrl+shift+c 按键即可实现
2021-12-17 10:45:24
748
原创 react组件间通信的三种方式
1.父组件向子组件传值state:传递数据props:接收数据//父组件class Parent extends React.Component { state = { lastName: 'Tom' } render(){ return( <div className="parent"> 父组件： <Child name={this.state.lastName}/> </div&g
2021-12-09 17:33:23
318
转载 vue中利用路由meta控制页面是否需要登录
开发时经常会遇到有的页面需要登录之后才能进去，有的页面则不需要登录，我之前都是在需要登录的页面的created里面取判断有没有登录，最近发现这样做其实并不优雅，因为下次还有页面需要登录，那判断登录的代码又要重新写一遍可以在路由上标记需要登录的页面，然后在beforeEach的钩子函数里面去判断是否要判断登录定义路由的时候可以配置meta字段const router = new VueRouter({ routes: [ { path: '/foo', compone
2021-12-08 09:55:49
371
原创 react组件的 props
组件的 props1.props的作用接收传递给组件数据2.实现方式①函数//2.接收数据const Hello = (props) =>{ //props是一个对象 return ( <div> <h1>props:{props.name}</h1> </div> )}//1.传递数据ReactDOM.render(<Hello name="jack" age={23}/>,do
2021-11-26 10:01:25
442
转载 uni-app中将图片路径转成Base64
需求在uni-app项目开发中,需要将图片转成base64格式传递给后端1.图片路径转成base641.引入插件将下载好的插件引入到自己的项目中；这个插件中有个两种方法：一、pathToBase64（）图像路径转换为base64二、base64ToPath（）图像base64保存为文件插件地址：https://ext.dcloud.net.cn/plugin?id=123npm i image-tools --saveimport { pathToBase64, base64ToPath
2021-11-03 15:36:56
10686
3
转载 如何将图片路径转化成base64格式
function image(imgurl ) { //imgurl 本地图片路径 var img = imgurl ; function getBase64Image(img) { var canvas = document.createElement("canvas"); canvas.width = img.width; canvas.height = img.height; var ctx = canvas.getContext("2d"); ctx.drawIm
2021-07-27 09:16:27
1195
转载 为什么需要虚拟DOM，它有什么好处？
为什么需要虚拟DOM，它有什么好处？web界面由DOM树来构建，当其中一部分发生变化时，其实就是对应某个节点发生了变化。虚拟DOM就是为了解决浏览器性能问题而被设计出来的。若一次操作DOM中有十次更新DOM的动作，虚拟DOM不会立即操作DOM，而是将这十次更新的diff内容保存到本地一个js中，最终将这个js对象一次性attach 到DOM树上，在进行后续操作。避免大量无谓的计算量。所以，用js对象模拟DOM节点的好处是，页面的更新可以先全部反应在js对象（虚拟DOM）上，操作内存中的js对象的速度显然
2021-07-13 10:54:34
3010
原创 vue 两个同级页面中如何调用另一个页面的方法
vue 两个同级页面中如何调用另一个页面的方法1.新建一个js文件import Vue from 'vue'export default new Vue;2.两个页面中引入此文件import util from '../util'3.如何调用①调用方法页面methonds:{ functionA(){ //函数名字 参数 util.$emit('list','list') }}②别调用方法页面methonds:
2021-06-29 15:55:17
768
原创 文字超出宽度后显示省略号，及flex与超出显示省略号冲突问题
文字超出宽度后显示省略号，及flex与超出显示省略号冲突问题文字超出宽度后显示省略号就三行css样式我总是忘记拼写，背了好多遍还是忘，现在记录一下吧overflow: hidden;white-space:nowrap; text-overflow:ellipsis;在设置了弹性布局的元素里面超出显示省略号这三行代码会失效，下面说一下解决办法吧: 给设置了弹性布局的元素设置最小宽度为0min-width:0;...
2021-06-22 09:31:08
363
原创 new Date()日期格式标准化处理
new Date()日期格式标准化处理formatDate(cellValue) { if (cellValue == null || cellValue == "") return ""; var date = new Date(cellValue) var year = date.getFullYear() var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() +
2021-06-17 14:16:05
519
原创 去除富文本里面的标签
去除富文本里面的标签let reg = /<[^>]+>/gi;this.content.replace(reg,'');会得到一个不带样式的文本内容
2021-06-04 18:47:40
345
原创 vue 点击增加、删除一行input
vue 点击增加、删除一行input效果图：<div v-for="(item,index) in AllData" :key="index" style="margin-top:10px"> <el-input v-model="item.data" placeholder="请输入..." style="width:300px"></el-input> <el-button type="primary" @c
2021-03-19 16:17:19
910
1
原创 vue实现置顶
vue实现置顶话不多说上代码<ul > <li v-for="(item,index) in info" :key="index">{{ item.id }} <button @click="aaa(item,index)">置顶</button> </li></ul>data() { return { info: [ {i
2021-03-19 14:16:29
1513
原创 js对象属性名为数字或者布尔值时如何取属性值？
js对象属性值如何取let obj = { name:'aaaa', 1:'bbbb', true:true}js对象属性名为普通字符串时通过点号来访问eg: obj.namejs对象属性名为数字时可以用obj.[1]和 obj.[‘1’] 来访问，但是不能用点号.访问js对象属性名为布尔值时可以用obj.[true]和 obj.[‘true’] 来访问，还可以用.来访问...
2021-03-04 13:45:35
2720
4
原创 javascript typeof
以下代码输出什么console.log(typeof typeof 1);答案：string解析：typeof 1 为’number’ ，typeof 'number’为 string
2021-03-04 09:28:56
126
1
原创 el-upload 基本使用方法
el-upload 基本使用方法基本使用方法<el-upload class="upload-demo" action="/post/api" accept=".xls,.xlsx" :on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove" multiple :limit="3" :on-exceed="handleExceed" :file-lis
2021-03-02 11:27:41
2568
1
原创 ElementUI table复选框回显问题
ElementUI table复选框回显问题html代码 <el-table :data="tableData" ref="multipleTable" tooltip-effect="dark" @selection-change="handleSelectionChange">js代码//arr为res.data里面的数据that.tableData.forEach(row => { for (let j in arr) { if (row.i
2021-03-01 14:45:57
761
空空如也
JSEncrypt加密
2023-04-10
JSEncrypt加密
2023-04-10
jsencrypt加密解密
2023-03-19
vue 打包出来dist 在服务器上打开报错
2022-08-30
toLocaleString 在app上没有生效什么原因？
2021-10-12
TA创建的收藏夹 TA关注的收藏夹
TA关注的人