自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(85)
  • 资源 (1)
  • 收藏
  • 关注

原创 一个简单的ajax请求hooks useAxios

实现功能传递参数调用ajax请求获取数据返回数据,loading,错误信息useAxios hooks// useAxios hookimport { useState, useEffect } from 'react';import axios from 'axios';axios.defaults.baseURL = 'https://jsonplaceholder.typicode.com';const useAxios = ({ url, method, body = nul

2021-05-27 09:37:50 1630 1

原创 简单请求与预检请求

预检请求什么是预检请求?对那些可能对服务器数据产生副作用的 HTTP 请求方法(特别是 GET 以外的 HTTP 请求,或者搭配某些 MIME 类型的 POST 请求),浏览器必须首先使用 OPTIONS 方法发起一个预检请求(preflight request),从而获知服务端是否允许该跨域请求。服务器确认允许之后,才发起实际的 HTTP 请求。在预检请求的返回中,服务器端也可以通知客...

2020-02-27 18:03:31 3793

原创 css+js实现轮播banner

基本功能轮回播放自定义过渡时间、间隔时间上一张、下一张完整代码<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { padding: 0...

2020-02-25 19:17:28 403

原创 vscode正则匹配替换console.log(.*)

用空白替换所有的console.log()开启正则匹配使用正则表达式console.log(.*)匹配所有console.log内容,再使用空白替换全部

2020-02-25 14:43:03 2617

原创 grid+scss实现bootstrap栅格系统

grid + scss 20行代码实现 bootstrap 栅格系统vscode插件html文件的热加载sass编译栅格核心style.scss.row { display: grid; grid-template-columns: repeat(12, 1fr); gap: 10px;}@media screen and (max-width:768px) {...

2020-02-24 11:04:40 634

原创 在Vue中v-model如何和Vuex结合起来

?.vuemutations.js当读取name的时候返回的是mapState中的this.nickName,当输入数据的时候执行computed的name的set调用mutations的方法进行修改

2019-09-26 18:38:29 1945

原创 安卓、ios h5点击复制内容解决方案

let H5copyLink = () => { if (navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) { /** * ios中不能复制属性值,只能复制文本元素节点; * (解决方案:可以把文字颜色设成背景色就能达到隐藏看不见的效果不影响显示); ...

2019-09-24 16:51:38 887

原创 antDesignPro区块源码学习

1.MVC分层在antDesignPro区块组件中,看不到state,全部被放到了model中去了,page页面只管显示交互,数据全部都在model中。通过connect来将page和model关联。2.@connect修饰符antDesignPro中个人中心区块代码说明@connect修饰符(类似java中注解)第一个回调函数作用:将page层和model层进行链接,返回model层...

2019-09-16 13:38:56 1436

原创 antDesign国际化

侧边栏/全局header的国际化可以通过修改src直接目录下的locale文件如果没起作用,检查一下路由配置的name是否相同区块内容的国际化可以通过在区块目录下创建locale文件,并引入import { FormattedMessage, formatMessage } from ‘umi-plugin-react/locale’;配置语言文件使用当切换语言时会自动...

2019-09-14 15:50:51 1798 1

原创 antDesignPro大坑 Maxium call stack size exceeded

用cnpm安装区块cnpm run fetch:blocks再安装一些区块用npx umi block add DashboardAnalysis --path=/dashboard/analysis会导致不兼容巨坑还得用npm安装https://github.com/ant-design/ant-design-pro/issues/4421https://github....

2019-09-08 14:29:26 1387

原创 antDesignPro修改底部默认的蚂蚁金服体验出品的版权信息

修改antdesign下边的版权信息const footerRender: BasicLayoutProps['footerRender'] = (_, defaultDom) => { return React.cloneElement(defaultDom as ReactElement, { links: [], copyright: '呵呵'}); }h...

2019-09-08 13:50:57 5636

原创 vscode nvue文件类型支持

2019-09-06 09:37:33 7037 3

原创 html5语义标签

文章目录新增元素新增结构元素headerhgroupnavsectionarticleasidefooter新增功能元素videoaudioembedmarkprogresstimerubycanvascommanddetailsdatalistdatagrid![在这里插入图片描述](https://img-blog.csdnimg.cn/20190828204019321.png?x-oss-...

2019-08-28 20:44:35 591

原创 bootstrap栅格系统原理,grid做一个不用设备监听的响应栅格

栅格系统,把屏幕分成了十二份然后是设备监听bootstrap源码下边这个div在屏幕宽度>767px的时候占3份,<768px占6份也就是在电脑宽屏上横屏可以放四个(12/3),手机上横屏可以放两个(12/6)<div class="col-xs-6 col-sm-3" style="background-color: #dedef8; box-sh...

2019-08-27 22:16:48 187

原创 css margin合并 为什么子元素的margin-top把父元素也给撑下来了

比如这样我们的本意是这样我们只需要在父容器上加上一个overflow:hidden问题就解决了块级元素的上边距与下边距有时会拼合成一个外边距,这样的现象称为“margin合并”margin合并出现的条件:块级元素只发生在垂直方向margin合并的3种场景:相邻兄弟元素margin合并父级和第一个/最后一个子元素(上边的情形)空块级元素margin合并...

2019-08-26 18:39:32 776 1

原创 AntDesignPro初体验

AntDesignPro文档https://pro.ant.design/docs/getting-started-cn按照文档命令走npm create umi Select the boilerplate type (Use arrow keys)❯ ant-design-pro - Create project with an layout-only ant-design-...

2019-08-25 19:54:33 305

原创 js new运算符的本质

文章目录两个辅助函数测试完整代码两个辅助函数Function.prototype.method = function (name, func) { this.prototype[name] = func; return this;}Object.create = function (o) { var F = function () { }; F.proto...

2019-08-23 23:45:58 243

原创 闭包

闭包的定义闭包包含自由(未绑定到特定对象)变量,这些变量不是在这个代码块内或者任何全局上下文中定义的,而是在定义代码块的环境中定义(局部变量)。 -----百度百科在日常JavaScript的代码编写中闭包是非常普遍的,只不过这种使用方法太普通了,我们并没有注意到。如果java程序员转的JavaScript一定会惊叹这种强大灵...

2019-08-21 19:29:01 148

原创 webpack打包多页面demo

项目地址:https://github.com/withwz/webpack-mulitpage-demo目录结构package.json{ "name": "wptest", "version": "1.0.0", "description": "", "private": true, "scripts": { "dev": "cross-env NODE_...

2019-08-19 21:58:25 464

原创 css3渐变背景

线性渐变(Linear Gradients)语法background: linear-gradient(angle, color-stop1, color-stop2, 3 ,4 ,5…);angle属性说明:0度是由下向上渐变;关键词:to top 0degto right 90degto bottom 180degto left -90deg径向渐变语法...

2019-08-18 19:45:57 199

原创 grid布局属性总结

Grid 布局则是将容器划分成"行"和"列",产生单元格,然后指定"项目所在"的单元格,可以看作是二维布局。容器的属性属性 llllllllllllllIIIIIIIIIIIIIIIIIIIIIIII描述display属性指定容器采用grid布局grid-template-columns指定每一列的列宽 属性值详解grid-template-rows指...

2019-08-16 15:49:51 637

原创 web性能优化

文章目录http请求DOM优化CSS优化移动端服务端http请求合并JS/CSS文件非可视屏幕内内容延时加载 例如 懒加载图片获取数据首选get,浏览器执行XMLHttpRequest POST请求时分成两步,先发送Http Header,再发送data。而GET只使用一个TCP数据包(Http Header与data)发送数据,所以首选GET方法。有“阴谋预加载”,比如...

2019-08-14 14:16:51 117

原创 css123全部选择器整理

css3选择器基本选择器层次选择器伪类选择器伪元素属性选择器动态伪类选择器目标伪类选择器语言伪类选择器UI元素状态伪类选择器结构伪类选择器否定伪类选择器基本选择器选择器类型描述兼容性css版本*通配选择器*{margin:0;padding:0}, .demo * {background:orange}all1E元素选择器ul {backgroun...

2019-08-13 17:21:55 353

原创 flex属性快速查询

文章目录容器的属性项目的属性Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。容器的属性属性描述flex-direction属性决定主轴的方向(即项目的排列方向)flex-wrap项目的换行方式flex-flowdirection和warp的缩写默认是row nowrapjustify-content...

2019-08-12 21:12:47 183

原创 css 所有display属性快速查询

css2.x属性描述none此元素不会被显示block此元素将显示为块级元素,此元素前后会带有换行符inline此元素会被显示为内联元素,元素前后没有换行符inline-block行内块元素,既有宽高是内联list-item此元素会作为列表显示 示例:https://codepen.io/bb798sky/pen/PMLzvYtable...

2019-08-12 20:51:43 335

原创 JavaScript 严格模式(use strict)

2019-08-12 20:05:56 148

原创 [Sass]混合宏 VS 继承 VS 占位符

https://www.imooc.com/code/7041 ←a) Sass 中的混合宏使用@mixin mt($var){ margin-top: $var;}.block { @include mt(5px); span { display:block; @include mt(5px); }}.header { color: oran...

2019-08-12 19:56:51 238

原创 css3 transform 变形

文章目录transform语法坐标轴说明2D变形函数3D变形函数transform-origin属性transform语法transform: none|transform-functions [transform-functions]* ;可以有多个变形坐标轴说明z轴是垂直屏幕指向我们的https://codepen.io/bb798sky/pen/MNPedL可以从这个例...

2019-08-10 15:36:01 209

原创 css3 transition

transition四个属性transition: property duration timing-function delay;属性描述transition-property指定过渡的属性比如 width height transformtransition-duration过渡时间 单位可以是s mstransition-timing-functi...

2019-08-09 17:07:54 588

原创 css3动画 animation

animation 实现一个旋转鼠标放上暂停https://codepen.io/bb798sky/pen/KOeEZE

2019-08-09 12:56:32 211

原创 理解reduce方法,手写一个reduce方法

代码比白话更容易解释了…Array.prototype.myReduce = function (f, value=0) { for (let i = 0; i < this.length; i++) { value = f(this[i], value) } return value}let data = [4,8,15,16,23,42]let add =...

2019-08-06 19:20:34 2196

原创 koa 图片上传

app.jsconst koa = require("koa")const koaBody = require('koa-body');const app = new koa()const router = new Router();app.use(koaBody({ multipart: true}));const uploadImg = require("./routes...

2019-08-06 16:02:25 1351

原创 taro 小程序利用两层循环给选中的规格加样式

1、获取两层数组循环索引,外层索引作十位数,内层索引作个位数,生成一个一维数组2、再通过两层索引拼成的字符串同生成的数组中的索引作对比className={`sku__item ${(index + '' + indes) === selectedSku[index] && "sku__item_active"}`}完整代码import Taro, { Component...

2019-08-05 15:11:39 1556

原创 taro小程序里用css弹出选择规格的窗口

constructor() { super(...arguments) this.state = { bgShadow: false, skuPop: false } } handleClickBtn() { this.setState(() => { return { skuPop: !thi...

2019-08-04 20:31:41 1068

原创 koa动态路由

router.get("/news/:aid", async (ctx) => { console.log(ctx.params, 'ctxxxxxxxxxxxxxxxxxxxxx') ctx.body="news detail"});请求一下localhost:5000/news/111可以看到在ctx.params种有动态路由带的参数...

2019-08-04 15:08:43 584

原创 js处理异步的几种方式

1、回调函数封装了异步操作的函数接受一个匿名函数作为参数,当异步操作执行完后调用这个传递进来的匿名函数;function getData(callback){ setTimeout(() => { let name = 'xxx' callback(name) }, 1000);}getData((d)=>{ console.log(d)})缺...

2019-08-04 14:37:14 4700

原创 jsx种map循环中使用if判断

用三目运算符,jsxmap中不能再用判断语句,但是可以用表达式 { navList.map((item, index) => ( <View className='nav-title__item' onClick={this.changeNavState.bind(this, index)} key={item.title} ...

2019-08-03 17:51:38 6520

原创 类似taro-ui tab切换的导航动画

import Taro, { Component } from '@tarojs/taro'import { View } from '@tarojs/components'import './index.scss'export default class repairmanList extends Component { config = { navigationBarTit...

2019-08-03 11:43:30 2559 1

原创 at-ui at-table 中使用自定义table插入图片

https://at-ui.github.io/at-ui/#/zh/docs/table columns1: [ { title: "姓名", key: "name" }, { title: "操作", render: (h, params) => { ...

2019-07-28 12:50:23 250

原创 cssbem规范

规范BEW指 块(block),元素(element),修饰符(modifier)。__用来连接B和E 。_用来连接B和M,E和M,如 search__btn_active。-用来连接含多个单词的B或E或M。示例块:例如搜索框块,log的块,菜单块search块,用search和元素(ipt、btn)连接<ul class="search"> <input c...

2019-07-22 17:40:58 254

直线站点连接

直线站点连接

2018-11-29

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除