笔记
时遇¥.¥..
如何让我遇见你?
展开
-
tree 数据结构 已知当前值 递归找到当前值所在的对象
【代码】tree 数据结构 已知当前值 递归找到当前值所在的对象。原创 2023-03-09 17:36:51 · 111 阅读 · 0 评论 -
js new 运算符
mdn。原创 2023-02-23 16:46:39 · 93 阅读 · 0 评论 -
vue 浏览器 input type=“password“自动填充密码处理
autocomplete=“new-password” 也有问题。autocomplete=“off” 不生效。最后将type 值动态化处理好了。原创 2023-01-12 10:12:47 · 1055 阅读 · 0 评论 -
table tbody内容滚动
【代码】table tbody内容滚动。原创 2022-12-09 09:18:48 · 160 阅读 · 0 评论 -
前端附件下载
【代码】前端附件下载。原创 2022-11-11 15:39:38 · 303 阅读 · 0 评论 -
vue 渲染异常
【代码】vue 渲染异常。原创 2022-11-03 10:28:52 · 94 阅读 · 0 评论 -
vue 将data 重置为初始数据
【代码】vue 将data 重置为初始数据。原创 2022-10-18 13:27:03 · 971 阅读 · 0 评论 -
tree 数据结构 已知当前值 把他的所有祖先集都拿到一个数组
【代码】tree 数据结构 已知当前值 把他的所有祖先集都拿到一个数组。原创 2022-10-13 01:55:52 · 267 阅读 · 0 评论 -
利用 reduce 计算数组最大值
【代码】利用 reduce 计算数组最大值。原创 2022-09-28 17:43:37 · 273 阅读 · 0 评论 -
textarea 让多行输入框 高度随内容变化
正常来说 textarea 的高度是定死的,输入内容超出高度时只会产生内部滚动条,项目需求 要随内容增高而增高,示例代码<textarea class="input-area" autofocus maxlength="5000" placeholder="请输入内容"></textarea>const textarea = document.querySelector(".input-area"); textarea.focus() // 有页面缓存是 autofoc原创 2022-08-25 10:03:13 · 1965 阅读 · 0 评论 -
vite-vue3-ts 搭建项目时 项目中使用 @ 指代 src
vite-vue3-ts 搭建项目时 项目中使用 @ 指代 src。原创 2022-08-05 15:01:38 · 1001 阅读 · 0 评论 -
html css3 旋转
css3 旋转原创 2022-07-21 17:29:18 · 150 阅读 · 0 评论 -
前端环境配置 20220719
前端环境配置20220719。原创 2022-07-19 10:45:39 · 151 阅读 · 0 评论 -
vue 图片显示失败 显示默认图片
写法一 <img class="headerImg" :src="item.headImg || './images/common/rankingpic.jpg'" onerror="this.src='./images/common/rankingpic.jpg';" alt="">写法二 (在脚手架中 需要用require 拿到默认图片资源)<img class="headerImg" :src="''" :onerror="defaultImg" alt=""> //原创 2022-05-12 18:15:39 · 1078 阅读 · 0 评论 -
手写tab左右切换
效果 :点击左右两个按钮达到切换效果(利用transform 进行平移)<div class="app"> <div class="tab-wrap"> <div class="tab"> <div ref="itemWrap" class="item-wrap" :style="{transform: `translateX(${distance}px)`}"> <div v-for="(i原创 2022-03-02 10:54:40 · 473 阅读 · 0 评论 -
vue-amap画城市边界、自定义标记点、以及消息窗体
效果图代码如下main.js 中引入// 引入vueamap 高德离线地图import VueAMap from 'vue-amap'Vue.use(VueAMap)VueAMap.initAMapApiLoader({ key: '5c0afa7353977f66b3880f3c91ca01e4', // 插件集合 plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', '原创 2022-02-23 18:22:19 · 3073 阅读 · 8 评论 -
async await 理解
async await是一种把异步编程变成同步的方法 (看懂下面代码的执行顺序 )function func(num) { return new Promise(resolve => { console.log('func-执行') setTimeout(()=>{ resolve(num*2) },3000) }) } function func111(num) { ret原创 2022-01-12 16:08:16 · 155 阅读 · 0 评论 -
css backdrop-filter属性 用来做图片的部分模糊效果
backdrop-filter CSS 属性可以让你为一个元素后面区域添加图形效果(如模糊或颜色偏移)。 因为它适用于元素背后的所有元素,为了看到效果,必须使元素或其背景至少部分透明。mdn介绍示例:代码:<div class="img-box"> <div class="bottom"> backdrop-filter: blur(5px); </div> </div>.img-box { positi原创 2022-01-11 13:32:21 · 662 阅读 · 0 评论 -
相对路径和绝对路径回顾
相对路径的写法:1、./ 是当前目录<img src="images/bg2222.png" width="300" alt=""><img src="./images/bg2222.png" width="300" alt="">2、 ‘…/’ 表示父级目录 (写的时两个点再这上面显示三个点)<img src="../images/bg0000.png" width="300" alt="">3、/ 是根目录(看图看不明白的话就把下面的描述多读几遍原创 2021-12-21 17:41:23 · 97 阅读 · 0 评论 -
解决ios微信公众号h5页面新增底部前进后退导航栏产生的布局问题
现象:第一次出现微信底部默认导航的时候布局会错乱(在项目中底部弹窗显示不完整),在出现错乱的页面刷新又能恢复正常。问题产生原因:新增导航栏使网页脱离文档流的屏幕高度变小,有些布局没有重新计算(更加具体的原因就没有管了,项目已经是一个成熟的项目,用的框架也不是新框架,会存在样式穿透的问题,很多东西还是少动为妙)。问题分析和解决:底部导航栏是因为出现history记录才出现的,再加上我所作的项目刷新一下页面就能恢复正常。优先考虑在出现history后重新加载页面,监听屏幕高度变化(安卓机不会新增导航),再利原创 2021-12-21 13:55:06 · 6648 阅读 · 2 评论 -
js中 map() 和 forEach() 的区别
概要:同样是循环操作数组的方法,虽然 map 能做的 forEach 都能做,反过来也是如此。但是其中的差别还是可以探究一下的一、mdn上对map 和 forEach 的定义: forEach() 方法对数组的每个元素执行一次给定的函数。 map() 方法创建一个新数组,其结果是该数组中的每个元素是调用一次提供的函数后的返回值。 let arr = [1, 2, 3, 4] // 想输出 [2, 4, 6, 8] arr.forEach(item=>{ item =原创 2021-08-21 16:31:54 · 247 阅读 · 0 评论 -
uni-app循环中多次数据请求
概述:uni-app 上传图片的时候 ,多选上传图片,需要用到循环中掉接口上传。正常在循环中请求的时候 明明电脑上没有任何问题,但是在手机上就出现了选择多张图片同时上传,跟多次上传同一张的图片一样。正常思路(电脑上能行 但是手机上就是行不通)clickMethods() { this.list.forEach(item=>{ request({param:item}).then(res=>{ console.log(res) }) })}经大佬指点–传入上传的参数的时原创 2021-08-09 21:35:15 · 1722 阅读 · 0 评论 -
循环中删除数组子项
概要:在循环中删除数组子项时 数组索引发生了变化,造成程序异常–循环 能有效的避免这个问题function test() { var arr = [1,2,2,3,4,5]; for(var i=arr.length-1;i>=0;i--){ console.log(arr[i]); if(arr[i]==2){ arr.splice(i,1); } } console.log(arr);};test()附加 判断数组是不是包含另一个数组 checkArrInArr(原创 2021-08-08 16:20:29 · 135 阅读 · 0 评论 -
高德地图 圈出某个区域
<!doctype html><html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"> <title>行政原创 2021-07-12 13:42:58 · 896 阅读 · 0 评论 -
父子组件生命周期过程
加载渲染过程 父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted子组件更新过程 父beforeUpdate->子beforeUpdate->子updated->父updated父组件更新过程 父beforeUpdate->父updated销毁过程 父beforeDestroy-&原创 2021-06-28 22:04:37 · 78 阅读 · 0 评论 -
vuex 的第二种使用方式 modules
1. 文件建立和index.js 内容2. getters.js 统一管理变量3. 定义变量 使用和修改4. main.js 中引入5. 页面使用原创 2021-06-09 23:29:20 · 78 阅读 · 0 评论 -
自定义指令 做按钮权限vuecli element scss
/* 自定义指令 用于做按钮权限 1. 这里定义指令 showBtn 2. main.js 中用Vue.use(showBtn) 引入 import showBtn from "@/components/directive/index.js"; Vue.use(showBtn) 3. 页面中使用 <el-button v-showBtn="11"> 显示隐藏 1</el-button> */import Vue fr原创 2021-06-09 21:46:06 · 103 阅读 · 0 评论 -
自定义按钮组件vue cli element scss
目标:实现 颜色 、图标 、背景色 可配置(将按钮样式统一管理)先上样式看看效果1.在component下定义建好文件夹和对应得文件名称:2. button.vue中写静态通用样式 且引入btn.js 中得配置3.在btn.js中 管理这些按钮4.main.js中 注册全局组件import Button from "@/components/fallButton/button.vue"Vue.component(Button.name, Button)5. vue文件中引入且传入配置原创 2021-06-08 00:40:16 · 179 阅读 · 0 评论 -
简单的双向绑定 原生js
<body> <div id="app"> 输入:<input type='text' id='input' /><br> 动态值:<input type='text' id="show"/><br> </div> <script> let input = document.getElementById("input"); let show = document.get原创 2021-06-02 23:00:57 · 88 阅读 · 0 评论 -
常用 数组 增删改 练习
<script> // 涉及方法 pop(); ----- 删除数组最后一项 (返回值是已删除的项目,改变原来数组) // unshift(); ------(在开头)向数组添加新元素,并“反向位移”旧元素(返回新数组的长度,改变原来数组) // shift(); ------ 删除首个数组元素,并把所有其他元素“位移”到更低的索引(返回被“位移出”的字符串,改变原来数组) // push(); --------(在数组结尾原创 2021-05-31 17:39:15 · 72 阅读 · 0 评论 -
手写日历vue(简化版)
效果:一个很简单日历<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link href="./static/css/i原创 2021-05-30 10:00:09 · 595 阅读 · 0 评论 -
vuex使用方法
第一种使用方法(还有不同的方法下次整合进来,不过原理都是一样,)1. 在项目中建 store 文件夹文件夹下建如图所示文件。2.在index.js 中定义默认值 并将其他文件中的方法引入且注册到 vuex.Store 中 import Vue from 'vue'import Vuex from 'vuex'import * as getters from './getters' import * as actions from './actions'import * as mutatio原创 2021-04-07 23:57:07 · 250 阅读 · 0 评论 -
vscode 文件夹重叠打开关闭
原创 2021-04-07 21:51:20 · 182 阅读 · 0 评论 -
VScode前端常用插件(自用)
1. open in browser(必备)作用:在快捷菜单中添加了在默认浏览器查看文件选项2. live Server(必备)作用:在vscode中保持后页面会及时更新 不用手动刷新页面。3. Bracket pair Colorizer(必备)作用:在多个括号同时使用时 可以很好的分辨出对应的括号 不至于犯低级错误4. Auto close Tag 和 Auto Rename Tag作用: 自动闭合 html / xml 标签。自动完成另一侧标签的同步修改5.Chinese原创 2021-03-28 21:01:40 · 340 阅读 · 2 评论 -
输入框中的字符串转对象
项目要求做配置 数据都要从配置端输入 在需要的地方请求并应用由于数据从 input 框中直接获取 有些时候需要我们做类型转换,这次本人需要在配置端上传一个对象包括两个数组的数据:{ a : [] , b : [] }; 网上有三种方法将 这种字符串 转成 对象1.JSON.parse(str);2.(new Function(‘return’ + str))();3.eval("("+ str + “)”); var str = '{a: [1,2,3],b:[4,5,6]}' // 试过用原创 2021-03-03 13:52:36 · 455 阅读 · 0 评论 -
使用 vue 和element ui组件做上传图片功能
实现目标:上传本地图片到页面的指定位置, <el-upload ref="upload" class="avatar-uploader" :file-list="fileList" :show-file-list='false' list-type="picture" :action="uploadUrl" name="imgFile[]" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload" accept="原创 2020-11-29 10:34:14 · 213 阅读 · 0 评论 -
el-checkbox-group 的使用
问题描述:使用element-ui 做项目 ,遇到一大排checkbox ,每个都去model 一个变量,这样也能实现页面效果 。但是到数据对接的时候,后端就了找过来。要求要把选中的项用数组的形式提出来。。还是没有明白其中的道理 先学会怎么用吧 -_- <el-checkbox-group v-model="form.type"> <el-checkbox label="1" name="type">用人单保障规章制度情况</el-checkbox>原创 2020-10-22 21:09:40 · 2063 阅读 · 0 评论 -
js中foreach和for循环的区别
1、foreach定义:foreach又叫做增强for循环,相当于for循环的简化版,因此在一些较复杂的循环中不适用。结构:foreach(元素类型 元素名称:循环对象(数组、集合)){循环语句}特点:foreach在循环次数未知或者计算起来较复杂的情况下效率比for循环高。2、foreach与for循环的明显差别在于foreach循环时循环对象(数组、集合)被锁定,不能对循环对象中的内容进行增删改操作。3、实例: // for循环:可以修改循环语句 var a原创 2020-07-06 22:32:18 · 4177 阅读 · 0 评论 -
预编译补充练习1
a = 100; function demo(e) { function e () {} arguments[0] = 2; console.log(e); // 2 if(a) { var b = 123; // if 语句里以前可以放function 函数 现在不行了 function c() { ...原创 2020-05-28 11:30:25 · 115 阅读 · 0 评论 -
预编译
概述:预编译是js运行三部曲 1.语法分析 2.预编译 3.解释执行 中的中间步骤> 预编译发生在函数执行的前一刻> 1.函数声明整体提升 2.变量 声明提升预编译总共分成四部1). 创建AO对象2). 找形参和变量声明,将变量和形参名作为AO属性名,值为undefined3). 将实参值和形参统一4). 在函数体里面找到函数声明,值赋予函数体实例如下<script> function fn(a) { console.lo原创 2020-05-27 17:11:53 · 98 阅读 · 0 评论