- 博客(48)
- 收藏
- 关注
RSS订阅原创 简洁的代码
记录在写项目过程中代码简化优化的过程，希望自己慢慢写出更高质量的代码1 const arr = this.arr.filter((a) => { return a.name.indexOf(this.findValue) === -1? null : a }) const arr = this.arr.filter((a) => { return.
2022-02-27 22:14:14
402
原创 js中是函数声明先提升还是变量先提升
console.log(typeof a) // "function" function a() {}var a = 1结论：函数声明提升先于变量声明提升只提升了声明,没有提升赋值function a() {}var a//a重复声明而不予理会，所以a的类型在输出时依旧为functionconsole.log(typeof a)a = 1...
2022-01-27 22:09:57
1172
原创 如何在手机上浏览未部署的vue项目
让手机和运行的项目处于同一个局域网使用npm run serve启动vue项目时显示的Network网址在手机浏览器地址栏输入该地址即可若同一网络下手机端还是不能访问，关闭防火墙
2022-01-03 00:24:40
441
原创 css、less中定义变量使用变量
比如：在根元素下设置一些变量:root { --color-text: #666; --color-high-text: #ff5777; --color-tint: #ff8198; --color-background: #fff; --font-size: 14px; --line-height: 1.5;}使用变量a { color: var(--color-text); text-decoration: none;}...
2021-12-26 11:16:23
2054
原创 关于axios的封装
经过实习和观察别人的代码，不断实战，找到了目前最合适自己的axios封装的方法减少依赖性，单独建个文件对axios进行封装：建个network文件夹，再建立个request.js文件为了扩展性，不要使用默认导出方式，使用命名导出//request.jsimport axios from 'axios'export function request(config){ //创建axios实例 const instance = axios create.create({ //配置.
2021-12-26 10:10:02
348
原创 优化Element的MessageBox 弹框
onDelete(id){ const res = this.$confirm('此商品将永久删除该文件, 是否继续?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }) console.log(res) }打印可知是一个Promise可用async和await优...
2021-12-22 15:14:27
1061
原创 标签选择器的坑
要实现的效果：第三个p标签为红色 <style> p:nth-child(3){ color: red; } </style></head><body> <div> <p>1</p> <p>2</p> <a href="#"></a> .
2021-12-08 19:32:52
222
原创 css3实现一边实心一边空心的圆
实现效果如图原理：利用border-left/border-right和border-radius，总宽度为div宽度+左边框宽度，半径是总宽度的一半代码如下<style> div{ width: 100px; height: 200px; border: 1px solid pink; border-left: 100px solid pink; ..
2021-12-07 16:31:50
679
原创 node实现文件图片上传
总结一下总是用到的图片上传功能，其它文件同理具体实现入口文件配置koa-body来支持文件上传const path = require('path')const Koa = require('koa')const app = new Koa()// KoaBody本身为函数app.use(KoaBody({ multipart: true,//开启文件上传 // 文件上传的详细信息 //KoaBody依赖formidable包来处理上传的文件 form.
2021-11-27 02:44:07
1010
原创 kao出现SyntaxError: Cannot use import statement outside a module的问题
因为用了ES6的import导入模块，换成require即可node下无法使用import，如果要使用的话要使用插件
2021-11-11 10:28:30
483
原创 element ui与事件
今天在实现回车搜索的功能时，给el-input绑定原生的事件@keyup.enter无效，我想到vue的.native修饰符，加上果然可以，查阅资料做个记录给elment ui绑定方法有两种方法element ui组件里面提供的事件方法原生方法加上.native修饰符 <el-input v-model="pageParams.keyword" placeholder="请输入内容" @keyup.enter.native="onSearch"></el-input>.
2021-11-05 20:57:36
626
原创 element-ui的tbale表格翻页后索引从1开始
我的需求：翻页页后编号的索引接着上一页最后一个出现的问题：翻页后从1开始解决方法：自定义索引通过给 type=index 的列传入 index 属性，可以自定义索引。该属性传入数字时，将作为索引的起始值。也可以传入一个方法，它提供当前行的行号（从 0 开始）作为参数，返回值将作为索引展示。 <el-table-column type="index" label="编号" width="50" :index="count"> </el-table-column>..
2021-11-05 16:17:32
502
原创 JS 对UTC 时间格式化
常用的方法可以放在公共文件夹下，当别的项目需要的时候，方便使用// 对UTC 时间格式转换成正常时间显示export const timeChange = UTCDateString => { if (!UTCDateString) { return '-'; } function formatFunc(str) { return str > 9 ? str : '0' + str } var dat.
2021-11-04 21:30:59
1661
原创 element ui之NavMen 展开和折叠菜单
el-menu标签加上collapse属性，绑定变量isCollapse(属性值为boolean类型)，通过变量控制收缩展开<el-menu :collapse="isCollapse">审查元素查看折叠后元素的宽度再通过三元表达式和isCollapse控制宽度 <el-aside :width="isCollapse?'60px':'150px'">加个按钮控制展开折叠，为了提高用户体验可以在鼠标移上的时候加提示文字<el-tooltip .
2021-10-27 14:31:30
2367
原创 props接收不到值
我先输出了父组件里面要传递的值，是有的再输出子组件props的值却为空且看控制台发现子组件的输出为空在前，父组件的输出在后由此可见是因为父组件要传递给子组件的数据是通过异步调用获取在赋值的，子组件的模板渲染早于要传递数据的赋值解决方法:获取数据后再渲染模板，通过v-if即可...
2021-10-24 15:33:47
586
原创 固定定位同时设置left和right
今天看到别人的代码，给固定定位设置left:0;right:0,固定定位的盒子就撑开了，我一直只使用他们来调整位置，原来还有这种调整盒子大小的作用，自己测试了下，写下该文章记录基础知识：首先固定定位和绝对定位都会脱标，相对定位不会脱标设置定位没有设置大小的盒子，脱标的盒子会根据自己内容撑开，相对定位的盒子撑满父元素测试后的结论给固定定位和绝对定位的盒子设置left:0;right:0可以实现横向撑满给固定定位和绝对定位的盒子设置top:0;bottom:0可以实现纵向撑满.
2021-10-15 12:01:50
927
2
原创 全局样式覆盖vant样式的方法
方法1：提高样式的层级，用!important方法2（推荐）：在入口文件调整加载顺序，把全局样式文件写在加载vant组件库样式后面，因为层叠样式表后者会覆盖前者// 加载vant组件库import Vant from 'vant';// 加载vant组件库样式import 'vant/lib/index.css'// 加载全局样式import "./style/index.less"...
2021-10-14 01:32:33
1539
原创 vant使用iconfont遇到的问题
vant的图标不能满足我做毕业设计的需求，我就使用了iconfont的图标按照iconfont官方的步骤也能正常使用遇到一些组件需要自定义图标的时候，按照需求显示不出来认真看使用方法我用的方法是font-class使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用所以使用的重点就是class那我们看一下类名是这么写的<i class="iconfont icon-xxx"></i>iconfont 查看font-fam.
2021-10-13 15:03:38
467
原创 关于vant的rem适配的PostCSS 配置
在vant文档里有写Rem布局适配，写不够详细，摸索了一番写下该文章PostCSS 配置安装依赖npm i postcss-pxtorem --save-dev//或者（-D 是--save-dev的简写）npm i postcss-pxtorem -D在项目根目录中创建postcss.config.js文件// postcss.config.jsmodule.exports = { //plugins用来配置要使用的相关插件 plugins: { //把px转.
2021-10-12 21:34:20
753
原创 swiper6插件使用遇到的坑
起因：我按照官方文档，下载引入swiper插件，报错找不到依赖解决过程报错的信息是This dependency was not found:...，依赖找不到，我查看了package.json里面的dependencies我确实已经安装了我想到之前某个插件引入是因为版本问题，这个也可能是因为版本问题我查看了下swiper插件的版本是最新的版本7.0.6，再依照报错的信息寻找依赖的包，发现引用的路径没有需要引入的文件夹所以我把node_module删掉，和package.json里面的de.
2021-09-26 18:58:54
621
转载 元数据（MetaData）
转载 阮一峰的网络日志元数据是用来描述数据的数据（Data that describes other data）。单单这样说，不太好理解，我来举个例子。下面是契诃夫的小说《套中人》中的一段，描写一个叫做瓦莲卡的女子：（她）年纪已经不轻，三十岁上下，个子高挑，身材匀称，黑黑的眉毛，红红的脸蛋－－一句话，不是姑娘，而是果冻，她那样活跃，吵吵嚷嚷，不停地哼着小俄罗斯的抒情歌曲，高声大笑，动不动就发出一连串响亮的笑声：哈，哈，哈！这段话里提供了这样几个信息：年龄（三十岁上下）、身高（个子高挑）、相貌.
2021-09-04 12:10:24
293
原创 清除浮动的方法
方法一：给标准的父元素强制给一个合适的高度方法二：clear属性方法三：隔墙法外墙法内墙法方法四：伪类本质：使用伪类方法利用css代码书写一堵内墙伪类选择器：通过选中的标签添加伪类，去选中标签的某个状态或位置:after这个伪类表示选中的是某个标签 内部 的最后的位置书写方法：前面必须加普通的选择器，后面连续书写伪类名称content 属性来指定要插入的内容,注意为字符串类型，必选参数将伪类添加给一个选中父盒子的选择器后面，一般给需要清除浮动的父盒子设置一个cl.
2021-08-26 13:40:54
76
原创 em与rem
rem转化为像素大小取决于页根元素的字体大小默认情况下浏览器通常有字体大小 16px，但这可以被用户更改为从 9px 到 72px的任何值根 html 元素将继承浏览器中设置的字体大小，除非显式设置固定值去覆盖。所以 html 元素的字体大小虽然是直接确定 rem 值，但字体大小可能首先来自浏览器设置。因此浏览器的字体大小设置可以影响每个使用 rem 单元以及每个通过 em 单位继承的值在 Chrome 开发工具下，你可以在已计算选项卡下看到一个元素继承的属性。em相对于使用em单位
2021-08-25 00:17:07
3138
原创 小程序添加好友的实现
实现的页面效果分析表message表用来记录好友请求，系统消息等分析表message需要的字段addlist：发送好友申请用户的openid，数组writeId：接收好友请求的用户比如上面的图，我作为用户登录后，申请添加“FHIGH”为好友，那我的openid就会添加到addlist字段数组里，而“FHIGH”的openid就是writeId字段的值实现添加好友按钮，绑定添加好友事件isFirend :用来判断是否是好有，是的话显示“已是好友”，不是则显示“添加好友”
2021-08-20 01:50:48
3745
原创 如何实现搜索历史记录
方法用缓存， 其中data为数组类型不是单个的值，因为搜索的历史记录是一个数组搜素内容时用wx.setStorage存入缓存,每次将搜索存入缓存的时候，为了避免重复添加，要先确定要存入的搜索内容是否已经存在数组里了，已经存在不添加，不存在添加到数组头部再写入缓存覆盖之前的数组如何判断数组是否有某个关键字es6之前用indexOfes6用includes()方法用来判断一个数组是否包含一个指定的值，如果是返回 true，否则false。如何将某个关键字写入数组的头部？unshift()方
2021-08-20 01:48:15
12534
原创 JavaScript 异步编程
文章目录js采用单线程模式工作的原因什么是单线程？如何解决耗时任务阻塞执行的问题同步模式异步模式js采用单线程模式工作的原因避免线程同步问题最初的js是为了实现页面的动态交互，而实现动态交互的核心是dom操作，那就决定了必须使用单线程模式，否则会出现很复杂的线程同步问题。如果不是单线程，其中一个线程修改了某个dom元素。另外一个线程同时又删除了这个dom元素，此时的浏览器无法明确该以哪个线程的工作结果为准。什么是单线程？在js执行环境中负责执行代码的线程只有一个单线程的优点：更安全，更
2021-08-15 18:29:20
225
原创 Array 对象方法
map()方法说明：返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值语法arr.map(function(value,index,arr),thisValuefunction(value,index,arr)：必须，数组的每个元素都会执行value必须 为当前元素的值index 可选 当前元素的索引值arr 可选 当前元素属于的数组对象注意事项不会改变原始的数组arr = [1, 2, 3];arr.map(value => value * 2);
2021-08-03 10:45:46
83
原创 箭头函数中的return
1.有大括号{}只有写return才有返回值，不写return无返回值2.只有一行语句，可省略大括号和return，利用起来让函数代码更加简洁const add1 = (a, b) => { a + b};console.log(add1(1, 2)); //undefinedconst add2 = (a, b) => { return a + b};console.log(add2(1, 2)); //3// 如果箭头函数只有一行语句 可以省略大括号和retu
2021-08-03 10:30:59
1598
原创 gitee码云的基础使用
注册https://gitee.com/远程(码云上)创建仓库安装两个工具两个工具:这两个工具是为了把远程仓库（就是我们第二步在码云上创建的仓库）克隆到本地git for windows（先安装）右击鼠标能看到这个就说明安装成功TortoiseGit（后安装,它用来操作第一个软件完成代码提交）使用tortoisegit的主要目的是：提供状态图标功能，可以更直观知道当前的代码状态右击鼠标能看到这个就说明安装成功克隆仓库到本地有两种取得 Git 项目仓库..
2021-06-28 15:46:56
141
原创 textarea如何实现根据内容高度自适应和最多显示
最近在写一个课程设计的时候，在实现评论功能的时候我发现我做的用户体验不好，只能显示一行的内容，我去观察了朋友圈的评论功能，点击评论，默认显示一行，当输入的文字超过一行会换行，输入框的高度会随着改变，用户可以看自己评论的所有文字，这个用户体验很好，那怎么实现呢？只需要给textarea标签加上auto-height=“true”，注意要给文字设置行高不然会出现叠影，那如何实现同时实现最多显示3行如果行高设置line-height: 40rpx; 再设置 max-height: 120rpx.
2021-06-25 13:56:49
1602
原创 手把手教你weui组件库的引入
引入组件方法一：通过 useExtendedLib 扩展库 的方式引入，这种方式引入的组件将不会计入代码包大小。方法二：通过npm方式下载构建，npm包名为weui-miniprogram如何使用本教程使用方法二右键项目在终端打开输入 npm init 初始化接下来都回车回车后在项目文件夹中会出现package.json再次在命令行中输入npm install weui-miniprogram项目文件夹中会出现node_modules 里面是weui.
2021-06-17 21:08:06
1638
原创 CSS3 calc() 函数
什么是calc()是一个函数，英文calculate(计算)的缩写，css新增加的功能，用来动态计算长度值为何为动态值使用表达式得到的值作用使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值最大的好处就是用在流体布局上，可以通过calc()计算得到元素的宽度，实现自适应宽度使用注意事项==运算符(加减乘除)==前后都需要保留一个空格，例如：width: calc(100% - 10px)；表达式中有“+”和“-
2021-06-16 01:09:27
304
原创 CSS 坐标系
CSS 坐标系概念：css3中网页不再是一个二维平面，而是一个三维空间，水平方向、竖直方向和垂直屏幕方向分别对应三维坐标系的x，y，z轴，如下图所示。箭头方向为正向，反之为负向(注意y轴方向与常规笛卡尔坐标系相反)...
2021-06-15 13:26:10
1384
原创 微信小程序update/remove成功但是updated/removed为0
我的需求:更新数据代码及错误分析update:function(){ db.collection('foods').doc('17453ede609bcedd09418b940de0d831').update({ data:{ price:10 } }) .then(res=>{ console.log('修改成功',res) }) .catch(err=>{ console.erro.
2021-05-12 21:31:23
764
原创 console
console.log()console.log()方法用于在控制台输出信息console.log方法会自动在每次输出的结尾，添加换行符它可以接受一个或多个参数，将它们连接起来输出var num=1999console.log('a', 'b', 'c');console.log('a',num,'c');//a b c//a 1999 c变量和字符串一起输出方法它可以接受一个或多个参数，将它们连接起来输出字符串拼接 +es6模板字符串可以有多个参数，如果第一个参
2021-05-12 14:59:50
1118
原创 小程序中转换类型后相加还是string类型
想要效果：js转换类型后相加得到数字类型代码及分析：data: { num:"0" },//this.data.num是字符串2 "2"//this.result 是数字类型3Number(this.data.num)this.result=this.result+this.data.num/我以为到this.result=this.result+this.data.num这段代码执行的是this.result=2+31.我猜想可能Number(this.data.nu.
2021-05-06 01:33:16
490
1
原创 微信小程序设置百分比无效 height: 100%
想要实现效果：container容器下两个子容器在页面垂直1：1代码<view class="container"> <view class="view1">1</view> <view>2</view></view>.container{ display: flex; flex-direction: column; height: 100%;}.container view{ flex: 1;.
2021-05-05 18:28:58
3591
原创 flex布局基础
文章目录必备知识display:flex父项常见属性flex-directionjustify-contentflex-wrapflex-flowalign-items(单行)align-content(多行)必备知识块级元素默认占一行，小程序中的view和div行内元素(display:inline;)不能设置宽高，设置宽高会导致行内元素没有显示行内块(display:inline-block)既能设置宽高，又不占一行在网页中要让块级元素一行显示的话，需要转换成行内块元素，消除块状特性，在小程
2021-05-05 16:57:14
2752
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人