ygman-CSDN博客

原创 css实现水平垂直居中的几种方式

水平垂直居中的几种方式总结了一下css实现水平垂直居中比较常用的几种方法居中元素宽高固定时的方法absolute + top:50% left:50% + margin负值absolute + top:0 left:0 right:0 botton:0 + margin:autoabsolute + top:calc left:calc居中元素宽高未知时的方法absolute...

2019-01-23 15:42:58 3516 1

在微信浏览器或者小程序中访问内嵌的h5页面时下拉会出现当前h5页面的域名地址，为了美观和安全开发的时候不希望看到这个网址。那么要怎么解决？参考微信浏览器禁止页面下拉查看网址这篇文章具体解决思路如下：要解决这种问题肯定不是只有单个页面，可能会涉及很多个页面，所以需要提供一种改动最小，最通用的解决方案，不去修改具体每个页面的代码。用各种js和DOM操作的手段也可以解决，但是会涉及兼容性等问题，改动比较多不合适多个页面的改动，具体的思路在上面那篇文章里我就不再赘述。改动最小最易复用的解决方

2020-09-28 17:53:09 2365 2

原创名次区间的正则及如何判断各区间之间是否有重叠

背景配置名次的时候要求输入1-3,5,7-10等这类可以是一个名次区间也可以是单个名次要求：1、只能输入名次区间或者单个名次及英文, 其他格式均提示错误2、输入的名次不能有重叠输入名次的正则校验let reg = /^[0-9]*(?:-\d+)?(?:,\d+(?:-\d+)?)*$/名次重叠判断判断重叠的思路来自这里具体思路如下：区间以[minNum, maxNum]的形式存放，有n组，先将n组区间以minNum值排序，然后再遍历数组，用当前组的最大值与下一组的最小值比较如果大于

2020-09-22 16:41:35 679

原创 setFieldsValue报错You cannot set a form field before rendering a field associated with the value

You cannot set a form field before rendering a field associated with the value.报错语句的含义：在呈现与该值关联的字段之前，不能设置表单字段值。this.props.form.setFieldsValue这个方法里面传值的时候只能是form中用到的参数(即是getFieldDecorator方法中的field)没有的field一律不允许多传，否则就会报错。报错事例如下：刚开始select1的值是无，select2被隐藏，之

2020-08-25 18:36:25 1072

原创 setFieldsValue的key是个变量

setFieldsValue设置一组输入控件的值，如果设置的key是个变量时要用[]包裹const recordId = 0const upgradeIdx = 1this.props.form.setFieldsValue({ [`upgradeData_${recordId}_${upgradeIdx}`]: '' })

2020-08-25 18:24:59 1934 2

原创 webpack基础配置

webpack的基础配置已经学习过无数遍，每次都是学完就忘，这次决定记录下来，把自己学习的过程记录下来，一是为了加强记忆，二是为了以后方便回顾。背景webpack是一款目前来说应用特别广泛的打包工具，也是提升前端开发level的一个重要技能。本篇主要探讨下webpack的入口、输出等，比较基础如果已经非常熟悉webpack了可不必细读也可绕道。概念官网的定义：（官网地址）本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 we

2020-08-11 09:56:15 1274 1

原创 Mac下设置iTerm2终端默认路径

问题：每次打开终端都要cd很多目录才能到想要的文件夹下面，希望每次打开都在想要的文件夹下面。具体操作方法如下：打开终端vim ~/.bash_profile然后点击i开始编辑，把下面代码输入文件内# 修改shell的默认路径# '/Users/zhen/work/'按照你自己的绝对路径修改cd /Users/zhen/work输入成功后点ESC键退出编辑并在终端输入:wq(保存编辑操作退出)。关闭当前终端重新打开就可以了。...

2020-06-22 16:41:43 5384 1

原创 ant-design-vue中default-expand-all无效的问题

问题：在代码中设置了default-expand-all属性树形结构还是没有展开原因：因为default-expand-all属性是用来设置默认值的，而初始值treeData通常情况下是需要调异步请求来获取数据的默认是空数组，在treeData是空数组的时候<a-tree>组件已经渲染了，没有树结构节点所以default-expand-all属性看起来也没有发挥作用了。解决：在渲染<a-tree>组件的时候先判断treeData数组长度大于0才渲染<templa

2020-05-09 18:21:47 3447 1

原创 ant-design-vue树形结构控件的改造

最近项目PRD需求如下有一个树形结构的菜单管理，与官网ant-design-vue中提供的a-tree不同图标不同每条数据hover的时候都有操作按钮解决方案第一个问题这是不修改a-tree的任何样式文件时出现的icon图标，与项目项目要求不符若要改成项目PRD要求的那样只需改动一些样式即可/deep/ .ant-tree li span.ant-tree-switche...

2020-04-14 12:53:58 14874 5

转载 ant-desigin-vue中form表单的使用

2020-04-13 17:51:22 1803

原创 form表单中关于一条form-item中多个必填项的prop设置

项目的技术支持：Vue+iView项目要求如下：输入链接一栏中两个输入框都必须填写并验证。输入链接一栏是由<FormItem>包裹起来的，即Form表单中一条FormItem需要校验两条必填值（或者更多）具体解决方法是在<FormItem>中再包裹一层<FormItem>代码如下：<template> <div> ...

2020-04-13 17:04:49 8106 1

原创实现微信小程序自定义tabbar

微信小程序原生组件自定义Tabbar创建tabbar代码文件配置信息tab页创建tabbar代码文件微信官网tabbar在根目录下创建文件夹custom-tab-bar及相关页面custom-tab-bar/index.jscustom-tab-bar/index.jsoncustom-tab-bar/index.wxmlcustom-tab-bar/index.wxsscust...

2020-03-16 19:16:29 1327

原创 JS中replace方法第二个参数是函数时如何使用

当replace()方法的第二个参数是函数而不是字符串时，将这个函数的返回字符串作为替换文本使用，这个函数是自定义的替换规则。该函数的参数说明当正则没有分组的时候第一个参数是正则捕获到的内容第二个参数是捕获的内容在原字符串中的索引位置第三个参数是原字符串var camelizeRE = /-/g;var str = 'name-zhen'var newStr = str.rep...

2019-11-21 14:21:41 2450

原创 JS构造函数中new、this、instanceof关键字的理解

首先说下new一个对象的过程function Person(name, age) { this.name = name this.age = age}var p1 = new Person('zhen', '22')创建一个新的对象，this指向这个对象p1，执行上面的代码即对this赋值。构造函数此外构造函数就像一个模版。可以new出多个实例，使用instanceo...

2019-11-20 17:35:48 1821

原创 Vue不同页面跳转时各页面生命周期的执行顺序

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。1、关于vue生命周期的理解推荐之前看到的详解vue生命周期这一篇，讲得很详细也很易懂。2、除了关于vue生命周期的详解网上也有很多关于父子组件之间...

2019-11-20 11:51:38 6607

原创 There are multiple modules with names that only differ in casing.

报错信息如下WARNING in ./src/__BASE__/components/ScrollView.vueThere are multiple modules with names that only differ in casing.This can lead to unexpected behavior when compiling on a filesystem with ot...

2019-09-26 17:28:12 483

原创 Mac下charles的安装和配置

下载安装官网地址：https://www.charlesproxy.com/download/官网下载的一般都会比较慢提供另外一个地址：https://xclient.info/s/charles.html配置1.为mac安装证书安装证书信任钥匙串证书下载完毕设置钥匙串始终信任配置charles菜单 Proxy–>SSL Proxying Settings电...

2019-09-17 10:29:47 1841

原创 Promise

同步异步JavaScript 是单线程的，在发出一个调用之后没有得到结果之前该调用就不返回，这种模式就是同步。所谓异步，就是调用在发出之后就直接返回了，调用者不会阻塞可以继续执行后续操作，而被调用者执行得到结果后通过状态、事件来通知调用者使用回调函数来处理结果。异步解决方案–Promise基础介绍Promise 对象是一个构造函数，用来生成promise实例。Promise表示一个...

2019-07-29 20:11:38 128

原创小程序--mpvue开发的生命周期

mpvue 继承自 Vue.js，其技术规范和语法特点与 Vue.js 保持一致。框架的原理mpvue 保留了 vue.runtime 核心方法，无缝继承了 Vue.js 的基础能力mpvue-template-compiler 提供了将 vue 的模板语法转换到小程序的 wxml 语法的能力修改了 vue 的建构配置，使之构建出符合小程序项目结构的代码格式： json/wxml/w...

2019-01-15 16:43:35 483

原创在一个电脑上设置两个git账户

如何比较方便的在同一台电脑上登录多个 Git 账户这里不仅限于 Github，而是基于 Git 版本工具的任何服务器。背景公司是gitLab，自己是github账号想在同一台电脑上使用，两者互不干扰。。准备github有两种登录方式一个是直接的账户密码方式，另外一个是用过 SSH 证书登录。第一种是使用账号密码登录，使用下面命令的时候需要输入用户名和密码就可以了，提交代码的时...

2019-01-10 16:19:42 5133 1

原创发布npm包时报错：You do not have permission to publish "package-demo".

错误信息：npm ERR! publish Failed PUT 403npm ERR! code E403npm ERR! You do not have permission to publish "package-demo". Are you logged in as the correct user? : package-demo提示没有权限，其实就是你的module名在npm上...

2019-01-09 15:31:23 6136

原创发布一个npm包的流程

nodejs默认已经安装好了。。首先在npm官网注册一个账号。牢记username、password、mail。注册好后，打开终端输入以下命令，会提示你输入用户名密码邮箱npm login在本地创建一个文件夹cd到该文件夹下面初始化一些基数配置信息mkdir package-demo-zhencd package-demo-zhennpm init -y上面命令执行...

2019-01-09 14:52:01 1120

原创数组遍历的几种用法---forEach()、map()、filter()、every()、some()

1、forEach() 用于遍历数组无返回值，会改变原来数组中的值let arr = [1, 3, 12, 2, 20, -1, 6, 17];arr.forEach((item, index, array) =&amp;gt; { array[index] = item * 2;});console.log(arr); // [2, 6, 24, 4, 40, -2, 12, 3...

2018-10-30 20:31:05 5868 1

原创 git 拉取远程分支报错 fatal: 'origin/dev' is not a commit and a branch 'dev' cannot be created from it

问题描述在学习廖剑锋老师git教程-多人协作这一节中，使用下面命令创建远程分支到本地的时候报错$ git checkout -b dev origin/dev错误提示：fatal: 'origin/dev' is not a commit and a branch 'dev' cannot be created from it后来发现是我的远程仓库上没有创建dev分支，后来根据廖老师...

2018-10-24 19:09:35 33071 15

原创小程序开发-wepy框架的创建与使用

在已安装好node、npm等的情况下，若还未安装请访问1、安装wepy命令行工具npm install wepy-cli -g2、在开发目录下生成项目文件wepy new mydemo#1.7.0之后的版本使用 wepy init standard mydemo 初始化项目，使用 wepy list 查看项目模板3、切换至项目目录cd mydemo4、安装依赖npm i...

2018-10-23 15:02:45 415

原创 fatal: could not create work tree dir ‘xxxx’: Permission denied

git clone --recursive git://github.com/isaacs/npm.git在执行上面命令从git上clone的时候报了错误，报这个错误的原因就是正在写入或者克隆git仓库的目录没有写入的权限。fatal: could not create work tree dir 'npm': Permission denied解决办法就是先修改目录的权限然后在进行操作...

2018-09-28 17:06:19 45950 7

原创小程序--背景图片固定不上滑

要实现的功能如下图：（页面上滑的过程中轮播图片保持固定不动）实现过程：1、首先还是要用到小程序的swiper组件2、要实现背景图片不随页面滚动可以用background-attachment:fixed 这个css属性实现3、然后把轮播的图片设置到background-image里4、问题：轮播图底部的面板指示点还是会随着页面滑动上去。解决办法就是把swiper自带的面板指示点隐藏（...

2018-09-26 14:57:36 8118

原创 js中的枚举类型和不可枚举类型

枚举：是指对象中的属性可以遍历出来，再简单点就是属性可以列举出来。可枚举性决定了这个属性能否被for…in查找遍历到。js中基本包装类型的原型属性是不可枚举的，如Object, Array, Number等，如果你写出这样的代码遍历其中的属性：var num = new Number();for(var pro in num) { console.log("num." + p...

2018-08-22 15:43:02 7590

原创 react之setRouteLeaveHook

setRouteLeaveHook是react Router离开页面的钩子函数具体使用如下：componentDidMount () { this.props.router.setRouteLeaveHook( this.props.route, this.routerWillLeave )},routerWillLeave () {...

2018-08-17 09:34:57 2008

原创 Webstorm编辑器的底部一直在闪烁显示Indexing

在网上找的解决办法，亲测有效。。方法：选择 File->Invalidate Caches / Restart…->Invalidate and Restart

2018-08-01 17:43:39 2493

原创 jsonp跨域请求原理

首先提一下浏览器同源策略的概念，为了保护用户访问的安全，现代浏览器使用了同源策略，既不允许访问非同源的页面。同源策略所谓同源是指：域名，协议，端口号完全相同http://www.baidu.com/detail.html http://www.example.com/detail.html 不同源域名不同http://www.baidu.com/detail...

2018-07-24 15:21:23 669 2

原创如何简单的让小程序的分享页拥有返回按钮

通常小程序的分享页面被再次打开的时候是这样的而正常的页面左上角是有返回上一步的返回按钮的然而如何在小程序的分享页拥有返回按钮呢？？？看到网上有一个思想拿来借用一下先进入首页的流程,再跳转进入对应的分享页面,这样进入分享页之后左上角就会有回到主页的返回按钮,相比于让用户熟悉小程序的回首页交互,这样更为合理.下面来写下具体的实现步骤要分享的页面positionDe...

2018-07-18 13:42:10 6761 3

原创非常简单易懂的DOM Diff算法简析

文章整理自阿里云栖视频 DIFF算法在执行时有三个维度，分别是Tree DIFF、Component DIFF和Element DIFF，执行时按顺序依次执行，它们的差异仅仅因为DIFF粒度不同、执行先后顺序不同。 Tree DIFF是对树的每一层进行遍历，如果某组件不存在了，则会直接销毁。如图所示，左边是旧属，右边是新属，第一层是R组件，一模一样，不会发生变化；第二层进入Compon...

2018-07-17 18:31:32 24852 2

原创最简单的安装React Devtools调试工具

在运行一个react项目的时候浏览器控制台会提醒你去安装react devtools调试工具Download the React DevTools for a better development experience: https://fb.me/react-devtools但是上面的链接我基本上没打开过记录下我安装React Devtools调试工具的步骤： 1、去git上下载r...

2018-07-04 17:40:05 52585 22

原创 javascript中的filter()

filter是javascript中一个常用的函数然额一直被我忽略，它用于把array中的某些元素过滤掉，返回剩下的所有元素。和map类似。array的filter()也接受一个函数，和map不同的是filter把传入的函数作用于每一个元素，然后根据返回值是true和false决定保留还是丢掉该元素。例1：去掉数组中的偶数let arr = [1, 2, 3, 4, 5, 6, 7...

2018-07-04 14:36:55 3920

原创小程序之利用swiper做tab切换

不知道怎么弄一个这样的gif图片，所以从网上盗了一张项目需求就是要实现一个这样的效果首先分析一下实现这样的效果都需要哪些部分 1、可以滑动的标签[ ‘健康’,’情感’,’职场’,’育儿’,’纠纷’….]，这里用小程序提供的组件scroll-view 2、可以滑动的内容模块，用小程序的组件swiper 3、关联这两个模块&lt;view class="section_nav...

2018-06-08 17:28:35 7776 5

原创 picker-view中的view的高度修改

picker-view组件的官方文档说： picker-view-column 仅可放置于picker-view中，其孩子节点的高度会自动设置成与picker-view的选中框的高度一致 indicator-style用来设置picker-view的选中框的样式wxml代码：<picker-view wx:if="{{years.length>0 && m...

2018-06-07 14:31:11 6703 3

原创修改微信小程序官方picker-view日期选择器

微信小程序问题之picker-view日期选择器项目需求截图，选择出生日期的时候需要用到微信的picker-view日期选择器然后就发现官方picker-view组件有一些问题： 1、初始化日期不是当前日期 2、选择不同月份，日期都是从1-31号（其实不同月份天数不同） 3、项目要求所选日期不能大于当前日期（既不能选择未来的日期）在官方代码上，根据项目需求做了些修改...

2018-06-07 14:05:57 9581 1

原创合并两个数组并去重

已经两次需要用到这个功能了，必须要记录一下写了一个方法用来实现该功能mergeArrayMerge (array1, array2) { array1.map((v, index) => { if (v !== '') { let idx = array2.indexOf(v) if (idx > -1) ...

2018-06-06 13:55:23 4682

svg模糊图片局部清晰透视图

简易倒计时插件

swiper的maxTranslate()是什么意思？

正则test方法匹配对象是怎么实现的？