一键写代码的博客

惨痛的bug描述元旦了，用户使用网站设置日期2022-1-1。保存后，再查看，居然变成了2020-1-1号。 然后再保存一下，居然变成了2019-1-1。以为见鬼了。查找原因，居然是前端日期格式化导致的问题。很遗憾，前任留下的bug，只能我们来背。问题复现// 时间戳： 1546272000000 真实时间是 2019-01-01 00:00:00var d = new Date(1546272000000);console.log(d.getUTCFullYear() + '/ '+ d.g

1、需求描述：日期选择的时候，限制选择范围，譬如只能选今天之后的日期。最后效果如下：2、实现方式：借助于官方api picker-options实现。三、示例1、设置今天及以后可以选择组件代码<el-date-picker v-model="date1" type="date" placeholder="选择日期" :picker-options="pickerOptions"></el-date-picker

前言：当我们在插件开发的时候，肯定需要对外暴露函数，使用者调用插件内的方法，如果插件内的某些操作是异步的，就需要等异步完成后，通知使用者处理结果，使用者然后再去执行其他的操作。我们在vue中，可以通过实例化vue来实现事件总线。 或者通过Vuex来完成类似的操作。如果是纯插件的时候，我们最好通过js自己完成封装。示例如下： window.onload = function () { var oproto = Object.prototype var aproto = Ar

小程序官方文档：map组件支持的属性和事件：bindregionchange eventhandle 否 视野发生变化时触发， 2.3.0然而，大坑的是，在wepy2框架中，我们这样使用： <map class="map" id="map" controls="true" :longitude="longitude" :latitude="latitude" scale="15" :sub

先说坑：api.abc.com这个域名，写cookie重定向到static.abc.com这个域名，发现，cookie没有写成功，前端在代码中获取不到cookie。使用控制台查看，报错this Set-Cookie was blocked because its Domain attribute was invalid with regards to the url 。看字面意思，就是设置cookie非法了，操作不对。查后台代码，后台设置cookie时，是这样玩的：set-cookie: use

实现效果：wepy2小程序代码<style lang="less" scoped>.draw_box { // position: relative; // width: 600rpx; // height: 600rpx; width: 600rpx; height: 600rpx; display: flex; justify-items: center; margin: 0 auto; background-repeat: no-repeat;

几种设置publicPath后，再对比打包后的index.html文件测试背景：每次打包build完后，都单独生成一个/dist文件夹，且dist中每次都只有相同文件目录部署的时候，前端打包的文件部署在服务器的一个静态资源目录下我们是放在这个目录下的根目录还是在这个目录下的一个文件夹内，都需要前端正确设置publicPath才能正确访问的。打包后的文件目录：├─dist ├─css ├─img └─js index.html一、不设置publicPath时，既设置为''，部署后请求

方法就是在输入框失去焦点后（关闭键盘）让页面滚一下（select 标签导致页面底部留白此方法行不通，当用户未改变select 选中的项就关闭选择框不能触发 change 事件，当用户选中后关闭选择框也不会触发blur事件, 除非点击非select 区域才会blur）1、原生页面const windowHeight = window.innerHeightinput.addEventListener('blur', function () { let windowFocusHeight = wi

一、校验数字的表达式数字：^[0-9]*$n位的数字：^\d{n}$至少n位的数字：^\d{n,}$m-n位的数字：^\d{m,n}$零和非零开头的数字：^(0|[1-9][0-9]*)$非零开头的最多带两位小数的数字：^([1-9][0-9]*)+(\.[0-9]{1,2})?$带1-2位小数的正数或负数：^(\-)?\d+(\.\d{1,2})$正数、负数、和小数：^(\-|\+)?\d+(\.\d+)?$有两位小数的正实数：^[0-9]+(\.[0-9]{2})?$有1~3位小数

需求描述： 使用多Y轴图标显示。我们知道，echart官方demo是有这样的图标的。https://echarts.apache.org/examples/zh/editor.html?c=multiple-y-axis那么，我们引入v-cahrt的又该如何实现这个需求呢？答案是可以的。<ve-histogram height="8rem" :data="chartData" :yAxis="yAxis"

轮播图1、swiper.js视频音频播放1、video.js时间日期处理1、moment.js图像浏览1、viewer.js jQuery 图像浏览插件2、cropper.jsjQuery简单且功能强大的图片剪裁插件3、lazy.js 图片懒加载库图表1、echart 百度开发的功能强大的图表库2、highcharts兼容 IE6+、完美支持移动端、图表类型丰富、方便快捷的 HTML5 交互性图表库弹窗1、modalbox.js2、Popper.js 轻量级 tooltips

老项目，jq+ligerUi grid写的后台项目，现在需要借鉴Element-ui 等新框架，将表格的操作列固定在右侧。ligri ui 文档： http://www.ligerui.com/api/index.htmhttp://www.ligerui.com/demo.html文档说的不清不楚。实际操作： var grid = $('#grid').ligerGrid({ columns: columns, root: 'rows', record: 'total.

需求描述：移动端图片点击可以放大预览。找了一圈，找到一个github star 星星数不多，但是很满足需要 也很好用的插件。github地址：https://github.com/KyLeoHC/ImageViewer使用方式很简单：简单描述一下：var imageViewer = new ImageViewer();imageViewer.setOption({ // duration: 1000, container: 'body', autoLoadImage:.

常见需求：滚动页面到某个位置的时候，对应的导航菜单高亮。点击菜单，可以直接滚动到对应的位置。如果解决：1、web端参考资料：a:引入navScroll.jshttp://webjyh.com/navscroll/http://demo.webjyh.com/navScroll/2、使用新的版本，可以用在vue项目中https://www.npmjs.com/package/navscroll...

1、解析url参数/** * 解析url参数 * @example ?id=123&name=jack * @return Object {id:12345,name:jack} */function urlParse(links) { let url = links || window.location.search; let obj = {}; let reg = /[?&][^?&]+=[^?&]+/g; let arr = url.matc

声明： 来源是看到一篇老外写的文章，整理翻译成中文es6的模块导出大致有导出单个名称、default默认值、还有导出多个list三种形式三种方式导出、导入大致如下：// Name Export | Name Importexport const name = 'value'import { name } from '...'// Default Export | Default Importexport default 'value'import anyName from '...'.

需求：使用element的upload组件，上传文件到阿里云服务器。上传前，先请求自己后台的接口，返回阿里云上传相关的凭证key等信息后才能正确上传。那如何解决呢？答案是element上传组件中的 http-request 自定义上传。 <el-upload ref="upload" class="upload-demo" action :http-request="handleUpload" :auto-upload="false" multiple :on-e.

1、正确的解决方案<el-input style="width:200px;" v-model="relationForm.fee" oninput="value=value.replace(/[^0-9.]/g,'')" :placeholder="代理费" ></el-input>可以输入数字和小数点oninput =“value=value.replace(/[^\d]/g,’’)” //只能输入数字oninput =“value=va

redux相当于在vue技术栈中使用的vuex一样。那如何使用呢？常见的搭配：redux + react-redux + redux-thunk或是 redux + react-redux + redux-saga其他的mobox之类的，也有很多了。主流的就是这上面的两种。本来，只有一个redux，其实就是可以使用了。但是，为了在react技术中，使用的很爽，就加了一个react-redux，帮我们解决了redux中一些比较常用放繁琐的功能，就是加了几个api，让我们用redux比较顺手而已.

需求描述：js脚本判断网页是在什么环境中打开的。内置浏览器，还是app内嵌入式的webview打开的，亦或是在微信浏览器内打开的，还是用pc端打开的。查了一圈资料，原理基本上就是通过navigator对象上的信息来做文章，更具体一点是，navigator.userAgent这个对象上的信息。借鉴（chāo xí）zepto.js的浏览器嗅探代码，改写为下面这样的。// 浏览器嗅探export function detect(navigator) { let ua = navigator.us.

需求：轮询或websork，根据后台最新的消息，网页端播放消息提示音。解决办法：根据接口返回的内容， try { // ajax 请求略 const audio = new Audio('/static/music/aa.mp3') audio.play() } catch (err) { console.log(err) }new一个Audio,放一个声音文件，再paly(）就可以了。火狐浏览器，需要用户.

参考1、http://0e2.net/post/79.html

vscode来编码vue前端项目的时候，我们像用eslint来做代码规范检查，配合一些代码格式化工具，能够让我们编写代码爽歪歪。但是，这其中的配置，搭配，是个坑，大坑。搞了一大圈，各种说法都有，各种配置都有，整个人都不好了。特此记录一下正确的解决办法。方案一：Eslint + prettier + stylelint方案大体可以参考：http://www.imooc.com/article/details/id/292407【vue项目整合Eslint和stylelint规范代码】安装依赖：n

需求：有时候，需求就是这么。。。。。。要求，点击swiper cell ，触发滑动展示，官方文档说明，可以调用实例的open方法，传参，‘left’ 'right’发现传参后，根本没用效果。查看官方ISSUS后，得到了解决办法。 handleClick(event) { event.stopPropagation(); this.$refs["cell"]...

get请求方式var downURL = '下载接口' var getData = '?starTime=20180922&endTime=20180925'var request = downURL+getDatawindow.open(request)或者是用a标签，herf属性指向下载的地址。比较简单。直接下载。post请求方式。第一步：让后端将下载的接口的r...

1、关于前端实现文件下载功能https://segmentfault.com/a/1190000019359452?utm_source=tag-newest2、前端文件下载(无刷新)方法总结https://www.cnblogs.com/willingtolove/p/10686208.html...

// tempelate<div v-show="showImgBtn" class="upload-wrap"><el-button size="small" @click="handleUploadCLick">选择图片<input ref="fileBtn" class="upload_input" type="file" accept="image/jpg...

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Comp...

排序算法1.冒泡排序次比较相邻的两个数，如果后一个比前一个小，换位置示例：var arr = [3, 1, 4, 6, 5, 7, 2];function bubbleSort(arr) {for (var i = 0; i < arr.length - 1; i++) { console.log(i,arr) for(var j = 0; j < arr....

<script> window.onload = function () { var content = '<P><img src="http://bbs.cn.yimg.com/user_img/200701/31/jisuanji986_117025184198149.jpg" mce_src="http://bbs.cn.yimg.com/u...

checkFileType(str) { const lastFileName = str.substring(str.lastIndexOf('.'), str.length) return lastFileName.toLowerCase()},

问题描述在echats图表使用tabs选项卡切换时，只有第一个图表宽度显示正常，echats图表宽度设置的100%，但是第二个，第三个。。。都图表宽度都只显示100px宽度，所有的东西都压缩显示在一小块，显示不完整。原因：由于v-show只是设置了元素的display属性为none，在切换的时候没有获取到元素的宽高所有会有问题，echats图表在初始化数据的时候，元素被隐藏了，获取不到宽高。...

创建公共的vue-icon组件// components/Icon-svg<template> <svg :class="svgClass" aria-hidden="true"> <use :xlink:href="iconName"></use> </svg></template> <scr...

函数节流 和函数防抖定义在公共的工具函数库中：utils.js文件/** * 函数节流 * @param fn * @param interval * @returns {Function} * @constructor */export function _throttle(fn, time) { let last let timer const interval ...

为什么会有这个需求呢？项目div的背景颜色需要动态绑定，修改背景颜色和透明度，但是div元素内部有文本元素，文本元素的透明度不能改变，用十六进制颜色加opacity属性来设置的话，会导致内部子元素一起透明，不符合要求。 /** * 十六进制颜色转换为带透明度的颜色 * @param _color 十六进制颜色 * @param _opactity 透明度 ...

数据库里存的是bytes字节数，要求转换成KB显示，用到了下面的函数，相当给力，特拿来分享！1、推荐 function sizeFilter($bytesize) { let $i = 0 // 当$bytesize 大于是1024字节时，开始循环，当循环到第4次时跳出； while (Math.abs($bytesize) >= 1024) { ...

项目需求：系统公告，要从右忘左循环播放的牛皮广告效果。实现：方案一：使用定时器和CSS3的过渡属性来实现。<template> <div class="notice-card-wrapper"> <div id="message-wrap" ref="out" class="message"> <div id=...

1、js实现图片资源转化成base64的各种场景 （非常推荐，原理和实现都有。）

1、vue+axios上传图片文件和数据2、萌新用vue + axios + formdata 上传文件的爬坑之路3、使用axios上传照片的方法 （推荐，正解）4、前端本地文件操作与上传（原理型的文章）5、new FormData() 前端上传文件图片到服务器 （提到了node.js,koa框架）6、前端分片点断上传的实现7、express，koa2等node处理前端上传图片并保存到...

我接触过的前端数据结构与算法http://caibaojian.com/data-structures-and-algorithms.html