- 博客(56)
- 收藏
- 关注
RSS订阅原创 css盒子模型
html中所有元素都可以看成一个盒子，他包括边距，边框，填充，实际内容简单来说盒子模型分为两种：W3C盒子模型（标准盒模型）设置width的时候，指的是单纯content的宽高盒子宽高=content+padding+border+marginIE盒模型（怪异盒模型）设置width的时候，指的是content+padding+border的宽高盒子宽高=width（content+padding+border）+margin设置盒子模型（css指定盒子模型种类）box-s
2021-11-30 11:43:14
248
原创 css实现可关闭的文字无缝滚动banner
技术栈 react，效果如图<div className="scroll"> <div className="marquee_box"> <div id="marquee_left"> <p>这里是滚动的内容内容内容内容内容内容内容内容内容内容内容内容内容。</p> </div> </div> <span className="close" onClick={()=>this.closeB
2021-07-07 14:45:46
264
原创 MAC 怎么查看8080端口是否被占用并且释放进程
1.查看端口被哪个程序占用sudo lsof -i tcp:port（port是端口号）如：sudo lsof -i tcp:8080 查看8080端口是否被占用2.看到进程的PID，可以将进程杀死。（PID是输入查看指令后“node”后面的那个数字）sudo kill -9 PID如：sudo kill -9 3210...
2021-05-10 15:11:59
4335
原创 谷歌浏览器无法携带cookie
在写项目的时候突然发现了一个奇怪的事情，前一天还能登陆，第二天浏览器就开始无限刷新了。排查了一下发现登陆之后请求都没有携带cookie导致了拦截器一直在跳登陆页面造成了死循环。除了谷歌浏览器之外，其他浏览器都没有类似的情况。因为谷歌浏览器在升级到80版本之后，Cookie的SameSite属性默认值由None变为Lax，Cookie 的SameSite属性用来限制第三方 Cookie，从而减少安全风险。最快的解决办法：1.如果你用的请求接口的方法是axios或者是基于axios封装的方法，那么要先设置
2021-04-21 18:11:44
1556
原创 Element UI 菜单高亮设置
其实这个功能在element ui官方文档中有写其实主要是这两个属性 <el-menu :default-active="$route.path" router> <el-submenu index="1"> <template slot="title"> <span>菜单栏</span
2020-10-22 15:36:53
2686
1
原创 vue-cli配置域名访问报错：Invalid Host header（无效的主机头）
在开发vue-cli脚手架项目的时候，配置了host : 127.0.0.1 dev.com想通过dev.com:8080去访问项目，dev.com这个域名后端已经配置好了跨域但是访问的时候会报Invalid Host header（无效的主机头）错误上解决方法：要修改webpack的配置，在项目的根目录下增加vue.config.js 文件module.exports = { productionSourceMap: false, devServer: { historyApi
2020-10-21 18:27:16
2136
1
原创 使用checkBox实现单选功能，可全部不选
给想要实现功能的type为checkbox的input 加 class=“checkElement”<script> var checkElement = document.getElementsByClassName('checkElement'); for(var i in checkElement) { checkElement[i].onclick=checkBack; } function checkBack(){ const fla
2020-10-09 20:05:00
1189
1
原创 vue 路由守卫 beforeEach （防止死循环）
代码写在router.js中，每次路由变化都会调用一次，这样不好的是获取用户的接口可能会调用多次，之后会对这里进行优化。关于路由守卫暂时只使用了这种，先记录下来，之后有时间学习其他的还会更新～// 路由守卫router.beforeEach((to, from, next) => { getUser().then(res => { // 未登录 if(res.resCode === 201){ const reBacklocation= window.loca
2020-06-15 16:41:31
1245
原创 iframe页面向父页面传值——postMessage用法
最近在做系统的迁移，需要将老的系统作为iframe嵌入到新系统中，其中某些信息需要通过iframe的页面传到父页面中，调用contentWindow，因为新系统和老的系统域名不一样，会报跨域问题，最后选择了postMessage这种方法。用法：iframe的页面中：window.parent.postMessage(你要传递的值,传递到那个域名);如:window.parent.postMessage('变量a','http://xxx.com');我是使用的vue，所以在create中监听
2020-06-11 11:19:56
2739
原创 vue生成uuid唯一标识
最近在写代码的时候，需要向后端传一个唯一字段作为标识，当多次提交内容不变的时候，标识不改，如果有内容改变，则标识改变，借鉴了一位大佬的uuid代码，但是太不好意思忘记是谁了，vue 使用watch监听对象的变化，如果变了调用一遍uuid的函数并且存在一个字段里就可以了。uuid() { var s = []; var hexDigits = '0123456789abcdef'; for (var i = 0;
2020-05-08 20:01:14
13801
1
原创 重写radio样式的方法——用图片代替
最近在开发中碰到要重写radio样式的问题，因为默认样式不太好看，所以用两张图片分别代替未选中和选中的样式代码如下：HTML代码：<input id="id1" type="radio"><label for="id1">选项1</label>CSS代码input[type='radio'] { position: absolute...
2020-03-02 16:36:12
740
原创 vue通过控制某个字段来决定是否启用点击事件
在项目中遇到一种情况，刚开始的时候卡片不能点击，在经过某个操作后，卡片的点击事件启动，可以被点击并执行事件内的代码。通过控制flag来控制点击事件是否启用第一种方法：<img src="poker.png" @click="flag && recard()" >第二种方法使用v-if：<button v-if="!show" @click="click...
2019-11-25 11:13:16
1778
原创 react——父组件props发生变化时调用的生命周期函数
在做项目的时候遇到问题：两个子组件和一个父组件子组件1改变了某个值通过状态提升到共同的父组件，然后子组件2要使用更新后的数据componentWillReceiveProps(nextProps) {//判断如果props发生改变 if (nextProps.keys !== this.props.keys) { this.setState({ keys...
2019-11-14 18:51:39
3906
原创 echarts折线图数据相同显示的却不是直线的问题
今天在开发是时候遇到了一个比较特别的问题项目中需要引入echarts。在使用双折现图的时候发现明明第二条折线数据的数组值，都为100但是显示的却不是一条直线。后来经过排查发现问题。问题出在我设置了stack这个属性stack：数据堆叠，同个类目轴上柱状图配置相同的 stack 值可以堆叠放置。stack 值的类型为 string，默认状态下为null。所以第二条折线的值实际上叠加了第一...
2019-11-13 16:29:13
2681
1
原创 react——Antdesign 使用checkableTag标签实现标签多选功能
具体实现功能参考标签多选功能，比较简单。这篇文主要记录一下我在开发这部分时遇到的一个现象。当时需求是超过标签的宽度省略文本内容并显示省略号，我十分自然的使用css来实现。就是当你给checkableTag添加样式的时候，overflow: hidden;text-overflow:ellipsis;white-space: nowrap;测试的时候发现在window上是没有问题的，一...
2019-11-12 17:38:32
4425
原创 antd react table扩展行(expandedRowRender，onExpand)异步记载数据再渲染问题
最近在做项目的时候遇到一种情况，需求是做可展开的表格，当点击展开时异步发送请求将数据渲染到展开的内容中。项目用的是react+Antdesign主要使用的就是Table组件的onExpand，expandedRowRender两个属性。expandedRowRender 额外的展开行 类型Function(record, index, indent, expanded):ReactNode...
2019-11-08 10:18:11
12267
4
原创 echarts-for-react——react项目中使用echarts
最近有在做的项目需要在react中使用echarts。安装npm install --save echarts-for-reactnpm install --save echarts然后导入echarts.js模块引入全部的import ReactEcharts from "echarts-for-react";减少包的大小也可以按需引入import echarts from ...
2019-11-07 16:06:41
3315
原创 react跨页面跨组件传值
做需求的时候遇到这样一个情况，要跨页面跨组件进行传值，两个页面并不是父子关系数据由a页面传到b页面在src目录下创建store目录，并在里面创建test.jsimport { createStore } from 'redux'const defaultState = { list: []}const store = createStore((state = defaultSta...
2019-11-04 11:31:49
2837
原创 Elemnt-ui el-pagination分页使用
获取当前页，点击下一页的时候刷新<el-pagination background layout="prev, pager, next" :total="1000" @current-change="currentPage" :current-page="page"></el-pagination>meth...
2019-08-02 18:22:00
1136
原创 调用本地摄像头使用HTML5 Canvas拍照并转为base64格式的图片
html代码： <video muted autoplay='autoplay' id='video'></video> <canvas id="canvas4" width="484px" height="484px"></canvas> js代码<script> var video = document.queryS...
2019-07-17 16:07:55
2658
4
原创 formdata上传文件的用法
html代码:<input type="file" accept="image/png,image/jpeg" id="file">需要绑定input的change事件进行触发js代码：$("#file").change(function (e) { var formData = new FormData(); formData.append("image_...
2019-07-10 17:49:22
231
原创 关于js变量函数提升的理解
一、变量提升在ES6之前，JavaScript没有块级作用域(一对花括号{}即为一个块级作用域)，只有全局作用域和函数作用域。变量提升就是将变量声明提升到它所在作用域的最开始的部分。几个例子来理解变量的提升：console.log(a); // undefinedvar a = 'global';console.log(a); // global实际提升的运行顺序： var a...
2019-06-11 15:47:47
131
原创 关于jqeury无法获取动态添加元素的解决办法
问题：<ul> <li></li> <li></li></ul>当li是通过jquery动态添加时，通过$(“ul li”)是无法对li进行操作的。原因是因为页面已经将JS加载完毕，此时新增请求动态添加节点，自然获取不到。解决办法：动态添加的标签要事件委托才能获取到节点1.通过on绑定事件（注意使用on绑定事...
2019-06-06 16:52:38
1591
原创 js移入移出事件被子元素触发解决办法
我们在写jquery效果时，常常会用到鼠标移入或鼠标移出的效果。但是当你的div是多层嵌套，有时就会出现你的鼠标没有移出外层的div，只是移入了内层的div，也会触发鼠标的移出事件。解决办法：使用mouseenter来代替mouseover；使用mouseleave来代替mouseout。他们的区别是：不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。只有在鼠标指针...
2019-06-05 21:50:10
1700
1
原创 数据结构——线性表
线性结构线性表：0或多个数据元素的有限序列，数据元素之间仅具有单一的前驱和后继的关系。特性：有限性，相同性，顺序性线性表分为两种：顺序表：用一组连续的存储单元一次存储数据。是随机存取在顺序表中，等概率情况下，插入和删除一个元素平均要移动表长的一半的元素，具体移动元素的个数与表长和该元素在表中的位置有关。优点：无需为表中元素之间逻辑关系而增加额外存储空间随机存储可快速存取表中任意...
2019-04-27 12:01:55
147
原创 数据结构——概述（什么是数据，数据结构，算法）
什么是数据？是信息的载体，在计算机科学中是指所有能输入到计算机中并能被计算机程序识别和处理的符号的集合。数据元素是数据的基本单位。构成数据元素的不可分割的最小单位为数据项，比如在一个学生信息表中，每个学生就是一个数据项什么是数据结构？简单来说就是数据和数据之间的关系 是一组存在一定关系的元素的集合以及对元素的操作 也是ADT（抽象数据类型）的物理实现。数据结构主要分为两类：按...
2019-04-24 20:53:07
409
原创 小程序环形动画效果
点击的时候按照设定的角度进行旋转。具体代码如下：<view class='time' bindtap='leftStart'> <view class='big-circle red first'></view> <view class='big-circle green right first' animation='{{leftAnima...
2019-04-19 16:29:31
804
原创 微信小程序-表单注册实例（自定义缓存数据测试）
login.wxml<form bindsubmit="formSubmit" bindreset="formReset"><view class="content"> <view class='user-input'> <input placeholder='请设置4-20位用户名' class='user' placeholder-s...
2019-04-16 21:01:28
594
原创 微信小程序-表单登录实例（自定义缓存数据监测登录）
index.wxml<view class='login-all'> <view class="form"> <view class='account'> <view class='title'>账号</view> <input placeholder='用户名/手机名/邮箱' placehol...
2019-04-16 20:59:45
809
原创 小程序报错Invoke event bindViewTap in page: pages/index/index
首先检查是否是目录的层级或者app.js中注册的问题排除之后查看你所要跳转的页面是否是属于tabBar已经跳转的页面因为如果不是tabBar跳转的页面bindViewTap: function() { wx.navigateTo({ url: '../logs/logs' }) },//可以使用wx.navigateTo/wx.redirectTo如果是...
2019-04-13 12:15:55
3129
原创 遍历数组的常用方法forEach，filter，map等
1.最传统的for循环遍历 var arr=[1,2,3,4]; for(var i=0;i<arr,length;i++){ console.log(arr[i]); } //优化版 for(var i=0;len=arr.length;i<len;i++){ console.log(arr[i]); }...
2019-04-11 19:46:35
385
原创 数组常用的方法
数组的两个属性1.constructor：返回创建此对象的数组函数的引用var arr=['a','b','c'];console.log(arr.constructor) //来查看arr是否是数组2.length：数组中元素的数目。数组的常用方法Array.isArray()用于确定传递的值是否是一个 Array，返回true或者false以下四个对数组进行操作的方法都不会改...
2019-04-11 19:40:21
126
原创 ES6基础知识——let、const关键字和变量的解构赋值
一、let和const关键字1.let关键字作用: 与var类似, 用于声明一个变量特点: 在块作用域内有效,不影响区块外的变量 不能重复声明 不会预处理, 不存在提升 使用let取代var是趋势应用: 循环遍历加监听什么是预处理变量提升？js执行之前要先进行预处理（预解析），就是找var和function，找到var声明并赋值，fu...
2018-11-28 15:38:10
254
原创 css文本超出div隐藏剩下内容并显示省略号
单行文本<style> .test { width: 300px; height: 30px; line-height: 30px; border: 1px solid black; white-space: nowrap;//强制在单行显示 overflow: hidden; text-overflow: ellipsis;//关键 }...
2018-11-08 10:22:25
587
原创 js图片切换实例
图片无缝滚动可控制左右（链接:https://pan.baidu.com/s/1Xu0TUVsLCEqb1kCmX2jgFg 密码:kmn5）图片切换带缩略图（链接:https://pan.baidu.com/s/1Ynd1bChKHM2So7zIrkW1HQ 密码:uzn9）...
2018-10-21 18:12:29
220
原创 移动端网页固定布局实例使用媒体查询rem进行布局。
新手简单移动端网页固定布局实例使用了媒体查询和rem单位进行布局，在手机和pc端显示的网页效果基本一致。实例中使用了iconfont图标，具体使用方法下次写啦。附实例代码（链接:https://pan.baidu.com/s/1HOH3WkP7FtJi41B2Eg9T4w 密码:1ams）...
2018-10-17 20:42:16
583
原创 ES5基础学习教程
浏览器对ES5的支持:IE8只支持defineProperty、getOwnPropertyDescriptor的部分特性和JSON的新特性IE9不支持严格模式, 其它都可以IE10和其他主流浏览器都支持了PC端开发需要注意IE9以下的兼容, 但移动端开发时不需要一、严格模式顾名思义，这种模式使得Javascript在更严格的语法条件下运行严格模式的出现作用：1. 消除Java...
2018-10-12 10:55:57
5876
原创 vue实战仿微信小项目，写死的数据不涉及到后台。
学习了一段时间的vue基础，参考教程简单的敲了一个小项目。模仿的聊天室界面。需要配置的环境：1.配置好vue的搭建环境，配置nuxt.js环境2.下载jquery插件，需要引入jquery，可以使用指令npm install jquery下载.具体搭建步骤可参考：mac版vue搭建（https://blog.csdn.net/qq_40678503/article/details/825...
2018-09-26 09:07:56
1300
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人