- 博客(96)
- 收藏
- 关注
RSS订阅原创 react中使用antd按需加载及图标的使用
antd按需加载antd按需加载首先需要安装antdnpm install antd --save而需要使用antd图标的时候则需要安装npm install --save @ant-design/icons安装按需加载包npm install babel-plugin-import --save--dev然后再webpack.config.js中添加下面代码：[ "import", {libraryName:"antd",style:"css"}]位置在：...
2020-10-19 17:36:37
2451
原创 node.js中exports与module.exports的区别
CommonJSNode应用是由模块组成的，采用的是CommonJS模块规范。根据规范一个文件就是一个模块，有自己单独的作用域，在一个文件中定义的变量，函数，类都是私有的，对其他的文件不可见。根据规范，每个模块内部，module代表当前的模块，这个变量是一个对象，他的exports属性是对外的接口。module.exports用于输出文件对象，require用于加载模块。node在执行一个文件的时候会在文件内部生成exports对象和module对象，module对象又一个属性为export
2020-10-09 10:22:05
313
原创 微信小程序查看官方样式及修改checkbox样式为圆圈
小程序中checkbox的样式是正方形的，设计图上给的是一个圆圈，在查看官方demo的时候发现了怎么修改的首先在微信官方文档上找到复选框的demo然后审查代码找到复选框的样式部分可以看到复选框的class为wx-checkout-input选中的样式为wx-checkbox-input-checked这样我们就可以自己修改样式了先弄成圆圈： <checkbox class="interestthreecheckbox" value="{{item.id}}"/>
2020-09-18 16:59:40
2694
1
原创 css中网页缩放属性zoomtransform中的scale
如果项目的版心是1300px的话，如果小屏观看的话会有横向的滚动条，这个时候再去改项目的样式的话就比较的麻烦了，可以使用zoom来缩放页面zoom支持的类型有：类型说明百分比zoom:50%;表示缩小到原来的一半数值zoom:0.5;表示缩小到原来的一半mormal关键字zoom:normal;等同于zoom:1;虽然谷歌等浏览器支持了zoom但是zoom并不是标准的属性css3中transform的scaletransform中的scale是明.
2020-09-18 16:31:55
1452
原创 react中安装及配置less
react项目中使用less1. 暴露webpack配置项，安装依赖react项目创建的时候是看不到webpack相关的配置文件的，所以需要先暴露出来，使用下面的命令：npm run eject然后安装less相关的依赖：yarn add less less-loader -D2. 修改webpack.config.js进入config目录下的webpack.config.js文件中，添加下面两行const lessRegex= /\.less$/;const lessModule
2020-09-16 21:14:00
1228
1
原创 删除一个数组中和另一个数组的相同元素
项目中有个需求，公司中所有的图片可以分组，第一组添加几张图片后还可以继续添加，这个时候获取到的所有图片就要把已经添加的图片给过滤掉将已经添加的图片的图片ID合为一个数组，然后全部图片的数据使用filter过滤let arr=this.pictrueList.map(ee=>ee.picture_id)this.companyVideoList=res.data.filter(ee=>!arr.includes(ee.id))这样就实现过滤了...
2020-09-02 18:31:18
1257
原创 彻底搞懂css中的单位px、em、rem
css单位px单位px代表着绝对尺寸，不会因其他元素的尺寸变化而变化，利用排序设置的字体集元素宽高比较稳定和精准，但是不能随着浏览器的缩放而变化，所以不适用于响应式网站em单位em和rem都是灵活的可扩展的单位，由浏览器转化为像素值，具体取决于设计图中的大小。很多人认为em单位是相对于父元素的字体的大小，但是根据w3标准，他是相对于使用em档位的元素的字体的大小，也就是使用em单位的元素的本身。父元素的字体大小可以影响em值，是因为继承。<style> #wrap{
2020-09-02 13:40:05
258
原创 小程序中跳转页面的几种方式
小程序中跳转的几种方式//1. switchTabwx.switchTab({ url:"/pages/index/index"})//这个只能跳转到tabBar配置的页面，关闭其他所有的非tab页面//2. navigateBackwx.navigateBack({ delta:2})//返回到上一级页面，或者是上几级页面，（delta是返回的页数，如果delta大于了栈中存放的页面数就返回首页，默认值为1）//3.redirectTowx.redirectTo({
2020-08-25 14:03:20
948
1
原创 使用el-tag文字过长超出隐藏
el-tag的使用在项目中使用el-tag的时候遇到了文字过长的问题，而tag不能换行，我使用的方法是截取字符串超过多吵得长度就截取到显示…<el-tag v-for="(tag,index) in tags" :key="tag.name" closable @close="handleClose(tag,index)"> {{tag.name_zh.length>50?tag.name_zh.substring(0,49)+'...':tag.name_zh
2020-08-13 17:03:27
7441
1
原创 element中合并单元格的使用
合并单元格在HTML中使用elementui-table<el-table :data="tableData" style="width: 100%" border :span-method="arraySpanMethod" > <el-table-column prop="type" :label="$t('i18n.productType')" width="130"> <temp
2020-08-13 16:42:12
653
原创 小程序制作全局nodata组件
nodata全局组件nodata在很多的页面都会用到所以就考虑做一个全局的组件代码如下，html：<view class="noDataBox"> <image mode="widthFix" src="https://gitee.com/my466879168/picBed/raw/master/image/20200813161457.jpg"></image> <view class="tipstxt"> 暂无数据
2020-08-13 16:41:38
466
原创 小程序中轮播图的指示点换成数字显示
UI图中轮播显示的是数字而不是指示点，所以需要自己用css写一下效果：html相关代码<view class="page-section page-section-spacing swiper"> <swiper class="swiperBox" indicator-dots="{{indicatorDots}}" bindchange="swiperChange" autoplay="{{autoplay}}" interval="{{interval}}" duration
2020-08-05 11:03:13
2022
原创 使用css制作跳动的心
利用css动画制作跳动的心代码如下：<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <script src="./moment.js"></script> &l
2020-08-05 10:57:37
571
原创 使用css制作心形图案并且添加动画心动效果
个人博客已经建好，欢迎各位前来访问 http://mengyang.info/纯css制作心形图案首先制作一个正方形并且旋转45度.heart{ position: absolute; margin: auto; top: 0; right: 0; bottom: 0; left: 0; background-color: pink; height: 50px; width: 50px; transform: rotate
2020-07-28 21:53:40
806
1
原创 nuxt项目添加百度统计的代码
在nuxt项目中添加百度统计的代码个人博客已经建好，欢迎各位前来访问 http://mengyang.info/在plugin文件夹中新建一个js文件，添加如下的代码：export default ({app: {router}, store}) => { /* 每次路由变更时进行pv统计 */ router.afterEach((to, from) => { /* 告诉增加一个PV */ try { window._hmt = window._hm
2020-07-27 22:46:55
2173
原创 fieldset标签的使用
fieldset标签的使用fieldset用于组合相关的元素将元素分组当一组表单元素放到 标签内时，浏览器会以特殊方式来显示它们，它们可能有特殊的边界、3D 效果，或者甚至可创建一个子表单来处理这些元素。legend标签为 fieldset 元素定义标题实例<form> <fieldset> <legend>健康信息</legend> 身高：<input type="text" /> 体重：<
2020-07-26 11:04:29
5937
原创 在服务器上使用pm2来守护项目
pm2介绍pm2是nodejs的一个带有负载均衡功能的应用进程管理器的模块，类似有Supervisor，forever，用来进行进程管理。对于线上的项目，如果直接使用npm启动项目，报错了可能直接停止导致整个服务崩溃，终端关掉的话也可能导致项目停止。使用在项目中的package.json中写入pm2脚本："scripts": { "dev": "nuxt", "build": "nuxt build && npm start", "start": "nu
2020-07-26 10:54:56
483
转载 去掉input的type为number输入框的右侧箭头
去掉input输入框右侧的箭头在项目中不需要这个箭头直接手动输入input::-webkit-outer-spin-button,input::-webkit-inner-spin-button { -webkit-appearance: none;}input[type="number"]{ -moz-appearance: textfield;}禁用鼠标滚轮上下滑动<input type="number" onmousewheel="return false;">
2020-07-26 10:06:53
1668
原创 在vue中使用数字滚动插件vue-count-to
在vue中使用vue-count-to使用插件下载插件npm install vue-count-to页面中引入import countTo from "vue-count-to"components:{countTo}<countTo :startVal="startVal" :endVal="endVal" :duration="1500"></countTo>参数参数描述类型startVal开始值Numbere
2020-07-25 21:05:16
1020
原创 git add .与git add -A的区别(版本不同时候的区别)
git add .与-A的区别（不同版本下的区别）以前写过一篇文章讲述了git add .与-A的区别，文章在此git add .与git add -A的区别,其中讲述了add .包含了修改的文件和新文件但是不会监听删除的文件，而-A则是可以提交所有的文件包含了删除的，但是最近在使用的过程中发现了git add .竟然也可以提交删除的文件原因在于版本的不一样：2.0的版本中git add . 也可以提交所有的文件了，而1.0当中删除的文件不能提交，下面是区别Git Version 1.x:
2020-07-25 20:31:23
1256
原创 css中英文单词换行的问题
单词换行的问题在项目中有时候会遇到英文很长的句子，然后当div剩下的部分不足以放下一个单词的时候，单词就会换行显示，这样的话尾部就会空了很大的地方显得很不好看解决方法可以通过两个css属性来实现这个需求：word-wrap:break-word;word-break:break-all;word-wrapword-wrap用来控制换行，有两种值：+ normal+ break-word(这个值用来强制换行的，内容将在边界内换行，在中文中是没有任何问题，英文语句也是没有任何问题，但是对于很
2020-07-25 19:33:44
8075
原创 vscode中安装less插件并配置使用
1. 在扩展中搜索easy less这个插件并安装[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qOQNykDZ-1595675085654)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20200725183501276.png)]2. 打开右下角的设置选项搜索less找到json文件[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-H1erq
2020-07-25 19:05:18
2868
原创 使用el-image引入相对路径的图片报错
在vue中使用elementui中的组件el-image引入相对路径图片报错的解决办法原因：assets目录下的资源文件引入错误是因为在使用webpack打包的时候路径发生了变化，并且文件名也会改变只有public文件夹下的文件是原样打包的不会改变使用的时候通过require引入即可<el-image src="require('../../../assets/img/xxx.jpg')"></el-image>或者在data中定义：data(){ return {
2020-07-23 21:14:22
6509
原创 从后台接口动态获取样式字段渲染html
动态渲染样式在后台管理项目中可以设置前台首页banner上的按钮的位置字体颜色等等样式，虽然知道用style动态绑定样式，但是很多写法都是错误的，弄了许久才弄好，现在把代码贴出来记录一下后台接口返回的数据中样式都写道一个字段里了先转换一下：scope.extend=JSON.parse(scope.extend)temporary.language=scope.languagetemporary.title=scope.titletemporary.imageUrl=scope.url
2020-07-20 20:49:24
859
原创 typora和picgo配合快速上传博客图片到gitee上
typora和picgo配合上传图片到gitee上在gitee上创建仓库然后到设置里面新建一个私人令牌记录下新生成的私人令牌然后再picgo里面使用配置picgo首先插件设置中搜索gitee-uploader这个插件并安装下载之后图床设置中设置gitee,repo仓库：用户名/仓库名，branch分支：默认为master分支，token：刚才设置的令牌，都输入完后点击确定typora设置打开文件中的偏好设置，找到图像，上传服务选择PicGo(app),PicGo路径选择程序的地址，这
2020-07-20 20:29:45
474
原创 在服务器上安装node、git等环境
linux下安装环境下载二进制安装node使用wget命令下载node包，目录随意放我的是放在root里面，安装包是编译好的文件，解压之后在bin里面就已经有node和npm了，不需要再重复编译。wget https://nodejs.org/dist/v12.18.2/node-v12.18.2-linux-x64.tar.xz tar xvf node-v12.18.2-linux-x64.tar.xz创建软链接，使node和npm可以在全局使用ln -s /root/node
2020-07-14 20:34:18
438
原创 mac中终端ssh连接服务器隔一段时间就掉线也就是界面卡着不动输入不了的解决办法
终端在链接上服务器的时候过一段时间之后就无法再次操作了，输入内容的时候过一点时间会提示已经断开ssh连接了,解决方法是让本地隔一段时间就像服务器发一次请求在本地打开配置文件：sudo vim /etc/ssh/ssh_config在文件中添加下面的参数：ServerAliveInterval 60 #每隔60秒就向服务器发送一个请求ServerAliveCountMax 3 #允许超时的次数，一般都会响应这样就不会断开了...
2020-07-12 00:08:12
3153
原创 mac中在终端中使用ssh方式登录云服务器以及设置别名
登录云服务器在终端中使用命令ssh登录云服务器命令行格式：ssh -p 端口号 用户名@ip地址 例如 ssh -p 22 root@127.0.0.1如果服务器多的话可以给服务器设置别名然后ssh 别名登录创建~/.ssh/config文件为每台服务器指定登录信息和验证方法：$ vim ~/.ssh/config # 服务器1Host blog HostName 127.0.0.1 Port 22 User root# 服务器2Host www Hos
2020-07-12 00:06:03
1536
原创 mac中如何显示隐藏文件和文件夹
mac中显示隐藏的文件夹mac为了防止用户意外更改或删除Mac运行所需要的数据，会隐藏一些文件和文件夹，按快捷键shift+command+.就可以显示出来,或者是使用终端输入一下两行命令，即可显示所有的隐藏文件和文件夹：defaults write com.apple.finder AppleShowAllFiles TRUE killall Finder...
2020-07-12 00:03:02
288
原创 Mac安装homebrew报错curl: (7) Failed to connect to raw.githubusercontent.com port 443: Operation的解决办法
在mac上安装homebrew的时候一般都是在终端输入以下的命令安装的：/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"但是在网络有问题的时候会报错443这个时候只需要下载brew_install.rb文件然后控制台执行ruby brew_install.rb这个命令即可安装下载地址：https://pan.baidu.com/s/1tvgcz-_jB39
2020-07-12 00:01:22
1119
原创 vue混入mixin的用法
vue中管理mixin的用法诸恶中提供了一种混合机制-mixins,可以用来高效的实现组件的复用，mixin与普通组件之间的区别：普通组件在父组件中引用后相当于开辟了一个独立的空间，根据父组件中传过来的props值来进行相应的操作mixin则是在引入组件后，将mixin组件中的各种数据方法与父组件中的相应内容合并在一起，父组件的各种方法都被扩充了mixin的作用：多个组件都可以共享数据和方法，在引入mixin组件后，mixin中的数据和方法合并到该组件中，可以直接使用，钩子函数两个都会被调用，mix
2020-07-11 23:59:34
581
原创 nginx文件夹的目录和主配制文件nginx.conf的位置
查看nginx是否安装linux中查看nginx的安装位置在命令行输入ps -ef | grep nginxroot 973 1 0 19:14 ? 00:00:00 nginx: master process /usr/sbin/nginx -c /etc/nginx/nginx.confnginx 975 973 0 19:14 ? 00:00:00 nginx: worker processroot 15720 156
2020-07-11 23:57:52
7767
原创 vue+elementui项目中使用el-table在el-table-column上使用v-if的时候乱序和样式错乱的问题
样式错乱的问题项目的需求是点击不同的按钮在一个表格上进行不同数据的展示，当使用v-if切换的时候，写在后面的列竟然跑到了前面显示解决方法在需要使用v-if渲染的el-table-column元素上加上一个不重复的key值即可解决问题<el-table-column v-if="status ===3" :key="Math.random()">是否在线</el-table-column><el-table-column v-if="type !=3" :key="Ma
2020-07-10 20:57:20
4825
1
原创 点击邮箱名跳转到相对应的邮箱登陆页面
用户注册后点击邮箱跳转相应的邮箱登陆页面需求：激活链接已发送至xxx@xx.xxx，请在24小时内点击激活链接，当点击邮箱的时候跳转到相应的邮箱登陆页面<p @click="goToEmailAddress">{{email}}</p>goToEmaulAddress(){ let address =goToEmail(this.email) if(address){ window.location.href=address }else{ ret
2020-07-10 10:08:15
1770
原创 在vue中使用document.execCommand实现复制文本的功能
在vue中复制文本项目中需要实现的功能：展示出来直播地址 超出隐藏，后面有个复制按钮，点击可以复制地址html代码：<div> <span>{{watch_url }}</span> <div @click="copy(watch_url)" > 复制 </div></div>JS代码：copy(e) { //创建一个input框 const input = document.cre
2020-07-07 22:02:18
2135
原创 css3动画的使用图片上下循环跳动
animation动画使用图片上下循环跳转html代码：<div class="siteicon"> <img src="./siteicon.png" alt=""> <p>点击跳转</p> </div>css代码：@keyframes icon{ 0%{ opacity: 0.8; transform: translate(0,0); } 50%{ opacity: 1; transform:
2020-07-07 22:00:05
2154
原创 WordPress Rest API访问失败404(访问wp-json)
访问/wp-json报404错误安装的WordPress版本是5.0.2，据说是5版本以上已经是默认的的开启了rest API服务，但是怎么访问都是报错404，需要使用nginx重定向才能使用1. 修改固定链接在WordPress设置中的固定连接设置中将固定链接设置改为除朴素外任意一种，最好还是数字型2.修改nginx.conf文件使用ps -ef | grep nginx查看nginx所在的位置和conf文件所在的位置，然后编辑conf文件在server中插入以下几句话来进行重定向if
2020-07-06 22:11:41
5048
3
原创 使用moment获取当前月份最后一天的23点59分
获取当前月份最后一天//1. 先用moment把时间转化为moment时间let time=moment("Mon Jun 06 2020 00:00:00 GMT+0800 (中国标准时间)")console.log(time);//Moment {_isAMomentObject: true, _i: "Mon Jun 06 2020 00:00:00 GMT+0800 (中国标准时间)", _isUTC: false, _pf: {…}, _locale: Locale, …}//2. 使用e
2020-07-06 18:06:00
4493
原创 使用element中el-table动态增减表头列的时候出现抖动闪动的问题
el-table表格抖动的解决办法动态切换表头的时候闪烁是因为表头重新计算高度导致的，重写表格样式即可//重写表格样式，不在自动计算，解决表格渲染时闪烁问题//不写这个使用v-if重新渲染表格的时候会再次计算下宽高，导致了抖动div高度=table容器高度/行数.el-table .cell{ height:20px!important;}表头变动的时候数据可能会下掉，使用element中的dolayout函数解决element中写到：doLayout方法 对Table进行重新布局。当
2020-07-06 10:03:41
6907
2
原创 css cursor中鼠标悬停禁用样式
鼠标悬停时禁用的样式cursor:not-allowed;//是禁用的样式 一个圆圈中间一个斜杠//其中还有一个属性也是这个样式 cursor:no-drop;cursor在项目中最常用的属性是pointer小手样式属性
2020-07-05 21:23:06
11723
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人