caimingxian401的博客_caicaicai404_CSDN博客-js,Web,vue领域博主

caicaicai404

码龄4年

很懒，闲来无事只会写写博客

于 2017-01-10 加入CSDN

获得成就

获得46次点赞
内容获得25次评论
获得155次收藏

荣誉勋章

兴趣领域

#前端

#WebPack#面试#小程序#Node.js#Vue.js#TypeScript#ECMAScript 6#JavaScript#React.js#前端框架#CSS

TA的专栏

react
4篇
umi
mpvue
小程序
Web
12篇
下载图片
1篇
js
19篇
ajax
css
7篇
es6
地图
1篇
swiper
3篇
vue
8篇
npm
3篇
gulp
2篇

js中数组的number或string类型转换及其他api

将String类型的数组转为Number类型：a.map(Number)将Number类型的数组转为String类型：a.map(String) let a = ['1', '2', '3']; let b = [4, 5, 6]; console.log(a.map(Number)) console.log(b.map(String))打印结果：替换字符串中指定字符：a.replace(/指定字符/,'替换后的...

发布博客于 1 月前

修改React项目启动的IP和端口号

在package.json文件：把默认配置："start": "umi dev"改成："start": "set PORT=8001 && umi dev"或者:"start": "set PORT=8001 HOST=192.168.1.103 && umi dev"

发布博客于 1 月前

&& 与 ||在React中条件渲染的用法

在React开发中，我们经常会用到html的条件渲染，如使用三目运算来判断展示哪个html let a = true return ( <div> { a ? <div>111</div> : '' } </div> )利用&& 或者 || 运算符的短路写法可以实现更简的代码。 const q

发布博客于 1 月前

Object.values可遍历带不同key值的对象数组

返回数据如下，我需要全部遍历成一个列表：

发布博客于 1 月前

React实现动画锚点滚动效果，不改变路由

React实现锚点滚动，我个人用在填写过长form表单信息时，提交有未填写项，则自动滚动到对应信息位置。使用scrollIntoView，H5新增API：https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollIntoView代码如下：//滚动到指定锚点 scrollToAnchor = (anchorName: any) => { let state: any = { behavi.

发布博客于 8 月前

react脚手架安装命令行

淘宝镜像命令：npm install -g cnpm --registry=https://registry.npm.taobao.org1.全局安装命令：cnpm install -g create-react-app2.在自己的文件路径下：create-react-app my-projectName3.运行：cnpm start项目如下：在根目...

发布博客于 2 年前

win10下MongoDB的安装与配置

官网下载路径：https://www.mongodb.com/download-center/community下载完之后双击，一直next安装，其中这一步选择Custom注：这里取消InstallMongoDBcompass，自己安装一个可视化的工具，不然安装时间超长长长一开始我没勾选取消，安装了好久进度君都没反应，后面又手动卸载了全部文件再重新安装的，所以一定要取消...

发布博客于 2 年前

解决fullpage滑动，控制台的报错提示

应用fullpage移动端滑动效果，但控制台一直有报错提示[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See <URL>解决：给html 添加 touch-action: none;属性...

发布博客于 2 年前

vue form表单数据提交

利用v-model能比较便捷地上传用户信息的数据，不用一个个参数地拼接。直接在data根据要传的字段定义一个对象，再利用双向绑定得到值。下面写了传json格式跟formData格式的两种情况，根据实际参考<template> <div class="from_box"> <form action=""> <input ty...

发布博客于 2 年前

vue批量验证form表单数据

批量验证用户表单栏是否为空，正则判断是否正确参考文章：https://www.cnblogs.com/cengjingdeshuige/p/10185693.html然后进行了部分代码更改如下：<template> <div class="from_box"> <form action=""> &l...

发布博客于 2 年前

vue keep-alive案例全教程

该dome一个案例是用keep-alive实现 'form表单' 点击跳转 '阅读活动协议页' 再返回表单数据不刷新进行缓存。另一个是keep-alive实现 '信息列表页' 滚动到某一位置点击跳转'详情页'再返回，保留列表上次滚动到的位置。而且用keep-alive来实现这些效果，比使用vuex或者sessionStorage这两种方法要合理，不用重复调本地缓存，再渲染。效果图：...

发布博客于 2 年前

css引入自定义字体字体压缩

随便一个网站下载字体：https://www.fontke.com/再随便一个网站字体转换格式：https://www.fontke.com/tool/convfont/效果：<!DOCTYPE html><html><head> <meta charset="utf-8"> <m...

发布博客于 2 年前

gulp-rev-collector自定义rev-manifest.json后缀格式

修改源码，将common-1d6407e386.css文件命名格式改成common.css?v=1d6407e386(1)打开node_modules/_gulp-rev/index.js135行: //manifest[originalFile] = revisionedFile;//注释 manifest[originalFile] = originalFile + '?...

发布博客于 2 年前

gulp-autoprefixer运行时错误警告处理

gulp自动化打包中，使用gulp-autoprefixer能自动给css样式添加兼容前缀，后面我想按api的写法添加属性设置时运行时出现了错误提示：大概意思就是使用'browsers'导致了一些错误，如果确实需要使用选项，请将其重命名为'overrideBrowserslist'。应该是gulp-autoprefixer版本更新了，写法变了，我的版本是"^0.0.15"更改如下：...

发布博客于 2 年前

vue-keepAlive-template.rar

基于vue-cli3.0版本，用keep-alive组件实现案例: (1)'表单'跳转'阅读活动协议页'再返回缓存表单数据 (2)'信息列表'跳转'列表详情页'再返回缓存列表滚动位置

发布资源于 2 年前

用vue-cli3.0安装脚手架

vue-cli 3.0 正式版在18年 8月10号发布了！作为前端，当然是得赶紧用起来才能跟上脚步，而且不用不知道，一用就会爱上，因为3.0的版本，比2.0的配置文件简洁了很多，它好像是将大部分配置都放在了node_modules里面了。所以生成的脚手架只有两个主文件夹了。因为我电脑之前用的是vue-cli2.0，所以要先卸了2.0的先： npm uninstall -g vue-cl...

发布博客于 2 年前

npm更新命令行

查看自己npm ，跟node版本：npm -vnode -v使用命令行升级npm： npm install npm@latest -g

发布博客于 2 年前

Hbuilder将less自动编译成wxss

在开发小程序的时候我用的是Hbuilder,因为自己想用less预编译css样式，琢磨了下，发现了方法。打开Hbuilder -> 工具(T) -> 预编译器设置把.css改成.wxss点击确定就可以了 ...

发布博客于 2 年前

H5实现移动端，PC端页面分享

想做个页面分享功能，既要兼容移动端，也要兼容PC端。找了一轮，决定PC端用百度分享的api：http://share.baidu.com/code/advance移动端一开始想用soshm.js，发现ios没问题，但安卓手机在微信上点微博完全没反应：http://www.calledt.com/soshm/于是改用了nativeShare.js：https://github...

发布博客于 2 年前

web移动端,PC端页面分享

PC端打开：微信二维码弹窗提示分享,微博,qq分享跳到对应分享页。移动端分享：在qq,微信app打开时,因两者都不支持自定义按钮分享，所以都是提示点击右上角分享。其他浏览器打开则调起对应qq、微信、微博app实现分享

发布资源于 2 年前

H5点击生成图片dome

最近琢磨想在移动端实现点击按钮保存图片的功能。在网上搜了好久，发现普遍的方法是：html2canvas.js实现把html转图片，canvas2image.js则实现图片的下载。把网上的案例套用之后发现html转图片没啥问题，但是到了下载图片一堆bug啊，ios浏览器点击下载都是直接到一个图片的链接，再手动长按保存。安卓跟ios在微信打开都是'点击下载'是完全没反应啊，老爹。这样就玩不...

发布博客于 3 年前

点击按钮，html生成图片并下载

功能：点击html生成图片，提示用户长按保存，也有点击下载图片功能

发布资源于 3 年前

解决ios底部固定输入框，获取焦点时弹出输入法键盘挡住输入框

ios端比较常见的，就是在页面底部固定的输入框，如下，一旦获取焦点，弹出的输入法键盘就会把input输入框完全挡住，解决方法很简单，加上下面的几行代码即可 $(".replay_text").on("click", function() { setTimeout(function(){ document.body....

发布博客于 3 年前

H5页面唤起指定app，有就唤起，没有则跳转下载页

点击按钮，当已经安装了app则调起，否则跳转到应用宝或者App store下载页面（普通浏览器兼容，微信有权限限制，只能每次跳转下载页）<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=de

发布博客于 3 年前

input完美实现无闪烁只能输入1到999的整数

输入数字第一位不能为0，不能输入小数点，中文，英文。且输入整数以外的内容时，输入框违规内容不会一闪而过 <input type="tel" oninput="var v=this.value||'';v=v.replace(/[^\d]/g,'');if(v.length==1 && v==0){v=''};this.value=v.substr(0,3);"&...

发布博客于 3 年前

vue导航守卫beforeRouteLeave浏览器返回时，自定义弹窗提醒用户保存信息

H5页面中经常会遇到的情况，当前页面点击返回，想要提示弹窗"是否确认离开当前页面"之类的需求。自己试着看了一下网上的方法，大多是alert出系统弹窗。其实要实现自定义弹窗提示，也是很容易的。从另一个页面点击跳转到当前页（如下），点击浏览器返回按钮，则会弹窗下面的弹窗，点击弹窗确定按钮，页面返回上一页完整代码：<template> <div class="...

发布博客于 3 年前

vue步步深入（四）项目编写，路由配置

1.在App.vue页面写需要的组件<template> <div id="app"> <m-header></m-header> <tab></tab> <router-view&gt

发布博客于 3 年前

vue步步深入（三）脚手架文档的基本结构和处理

1."static"文件夹可以放静态资源2."src"文件夹里自动生成的几个文件夹可以删掉，后面我们可以建自己需要的文件夹3."App.vue"里面可以先删掉多余的东西，只留下最简单的模板<template></template><script>export default { }</script><st

发布博客于 3 年前

vue步步深入（二）package.json文件介绍和使用

1.运行项目，命令行:npm run dev2.“dependencies”依赖包，需引入页面使用3.“devDependencies”生产环境，只是开发阶段需要4.在给“dependencies”手动输入"fastclick": "^1.0.6"，安装fastclick插件。再在命令行中输入：...

发布博客于 3 年前

vue步步深入（一）环境搭建

1.npm命令行：vue init webpack 文件夹名字2.再写项目名，一般小写3.上下键控制选择，选择下面6KB轻量级那项，回车4.接下来的步骤如下图操作：这样项目初步的脚手架就搭好了,生成的文件夹目录如下：5.再输入命令行，进入AppleMusic文件夹cd AppleMusic6.输命令行，安装所有的依赖包npm installpackage.json文件介绍1.运行项目，命令行:np...

发布博客于 3 年前

禁止safari自动识别数字为电话号码，强加样式

写移动端页面时，一次在iphone手机的safari浏览器打开页面，突然发现每次页面加载完底部的电话号码，都会突然样式失控，变成不是自己最开始设置的效果，如下图一开始还以为自己样式不合理，后来终于发现是safari搞鬼，只需在页面头部加一句，就可以解决了：<meta name="format-detection" content="telephone=no" />...

发布博客于 3 年前

简单解决js计算rem单位首次加载页面瞬间布局错乱的问题

在写移动端布局时，有些人喜欢用单纯的CSS+百分比来控制字体单位，而有些人则喜欢用js来计算字体的单位以及处理屏幕兼容。这种方法其实是挺不错的，比用媒体查询能减少能多的后期处理。但是相信用过这个方法的人不少都会发现，在我们首次打开页面的时候，有时会出现一闪而过的布局错乱的问题，虽然只是短短的一瞬间，但每次看到都会让人觉得很不舒服。 (function() { document.addEvent...

发布博客于 3 年前

Swiper（三）：自定义点击事件swiper跳到指定页面

选择哪个按钮就会跳到指定的页面，这样我们就可以自己来定义swiper分页器的功能了。下面的例子可以应用在点击地图上的用户头像，则滚动到到对应用户的信息轮播图swiper的slideTo方法，swiper.slideTo(index,speed,runCallbacks);index：必填，需要跳到页面的索引speed：选填，切换速度（毫秒）runCallbacks：选填，...

发布博客于 3 年前

Swiper（二）：swiper自定义分页器样式

demo: （只是大概写了一下样式，重点在于"paginationBulletRender"里面的写法）<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <title>Swiper demo</title

发布博客于 3 年前

Swiper（一）：解决swiper动态加载下一页衍生的问题

swiper插件好用不假，但真正项目中的轮播图是不可能一直用静态数据的，当我们用动态数据渲染轮播图的每一页时，如果调轮播的方法放的位置不对，轮播图就会出现不能滑动的问题，解决方法，看下面例子：$.ajax({ type: "POST", url: XXX, //接口地址 data: { pag...

发布博客于 3 年前

高德地图清除指定覆盖物自定义覆盖物样式（完整dome）

该篇文章两个知识点：1.每次点击把手动添加的覆盖物存到自定义的数组，清除时再调用map.remove(传参)，并把数组置空;2.想自定义覆盖物样式：只需在callBackFn函数里，再添加content参数，里面可以添加我们自定义的标签名和样式，这样就算你想在里面画花都行了;效果图： dome:<!DOCTYPE html><html> &l...

发布博客于 3 年前

删除高德地图覆盖物

自己在地图上画的覆盖物 var addMarker = new AMap.Marker({ map: map, //icon: imgUrl, position: [Lng, Lat], offset: new AMap.Pixel(top, left), content: '<div class="' +...

发布博客于 3 年前

文本超出隐藏

单行文本超出隐藏 .single{ width: 60%;/*需要设置宽度*/ line-height:14px;/*设置line-heigh或上下padding可防止出现文字头部少了一截的情况*/ font-size: 12px; overflow: hidden; text-overflow: ellipsis;/*文字隐藏后添加省略号*/ white-space: n...

发布博客于 3 年前

js移动端文字提示框

一个简单的文字提示框，可用于接口数据返回失败时的文字提示，或用户错误操作时的提示 <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui"/>

发布博客于 3 年前

js把年月日时间转化成刚刚，几分钟前，几小时前，几天前（完整代码）

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script> var pretime = &q

发布博客于 3 年前

js判断是微信还是支付宝浏览器

判断是微信还是支付宝浏览器 var browser = navigator.userAgent.toLowerCase(); if(browser.match(/Alipay/i)=="alipay"){ console.log("支付宝app的浏览器"); }else if(browser.match(/MicroMessenger/i)=="micromesse...

发布博客于 3 年前

简单学会 ajax上传图片详细讲解(更换用户头像)

1：点击头像，调用标签<input type="file" name="file" id="user"/>2：平时我们正常ajax请求数据如下图假设我们的接口请求地址是 http:XXXXXXXXX?action=update_avatar&token=123 data里面是我们要拼接到接口请求地址的参数。左边是参数右边是对应的值3：而图片上传,你...

发布博客于 3 年前

百度api文字转语音效果

文字转语音接口：http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&spd=2&text=需要转语音的文字参数说明：lan=zh：语言是中文，如果改为lan=en，则语言是英文。ie=UTF-8：文字格式。spd=2：语速，可以是1-9的数字，数字越大，语速越快。text=**：这个是你要转换的文字。如何调用？1，调用前要用jav...

发布博客于 3 年前

点击按钮实现图片下载 W3C的download属性

W3C的download属性，亲测只适用于PC和移动端浏览器，打包成app无效<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css">

发布博客于 3 年前

js获取当前时间为整点，没有时分秒

时间格式为12:00:00,1:00:00 var t = new Date(); var now = t.toLocaleTimeString().replace(/^\D*/, '') var num = now.indexOf(':'); var time = now.substring(0, num) + ":00:00"; console.log(time);

发布博客于 4 年前

js实现数字从1动态递增到10

js实现数字从1动态递增到10 0 var num = 0; var t = setInterval(function(){ num++; var span1 = document.getElementById("span1"); span1.innerText = nu

发布博客于 4 年前

微信小程序开发视频完整版

共有34个教学视频

发布资源于 4 年前