前端
maggie_live
这个作者很懒,什么都没留下…
展开
-
echarts饼图实例
1.引入jquery文件2.引入echart文件在html页面中给id为echartsPie的div宽和高度echarts初始化echarts的optionseries中的data设置最终效果图原创 2018-04-17 17:28:48 · 1357 阅读 · 0 评论 -
vue中使用编辑器vue-quill-editor踩过的坑
结合vue+element-ui+vue-quill+editor二次封装成组件1.图片上传分析原因项目中使用vue-quill-editor富文本编辑器,在编辑内容的时候,我们往往会编辑图片,而vue-quill-editor默认的处理方式是直接将图片转成base64格式,导致上传的内容十分庞大,且服务器接受post的数据的大小是有限制的,很有可能就提交失败,造成用户体验差。引入elem...原创 2019-03-20 18:04:40 · 19078 阅读 · 2 评论 -
走过时间、时间戳、日期的坑
获取当前时间一个小时每隔5分钟的时间数组function getDateArray(endDate, splitTime, count) { if(!endDate) { endDate = new Date(); // 输入标准时间 } if(!splitTime) { splitTime = 5 * 60 * 1000; } if(!count) { ...原创 2019-03-27 16:24:41 · 286 阅读 · 0 评论 -
设置、获取、删除cookie
// 设置cookiefunction setCookie(name, value, days, domain) { // var days = 30 || days; // var domain = location.hostname.split('.')[1] + '.' + location.host.split('.')[2] || domain; days = ...原创 2019-03-27 16:27:22 · 215 阅读 · 0 评论 -
vue-cli 统一封装axios,使用拦截器统一出来请求前和请求后处理
Axios是基于Promise机制实现的异步的链式请求框架。体积小,源码易懂。非常适合做基础的请求库。拦截器的作用,在请求钱对发送的数据、逻辑进行处理,或者在响应后对响应数据做处理。请求前处理配置相同的请求数据,如headers、token添加loading效果1.axios的封装1.使用vue-cli创建项目首先在vue-cli项目的src路径下新建utils和api文件夹,在u...原创 2019-05-10 09:35:13 · 4718 阅读 · 5 评论 -
element-ui插件datepicker日期选择器控制选择时间范围
单日期选择器1.今天以及今天之后的日期<el-date-picker v-model="value1" type="date" placeholder="选择日期" :picker-options="pickerOptions0"></el-date-picker><script>export ...原创 2019-05-24 17:46:25 · 7249 阅读 · 1 评论 -
vue-cli3 使用svg-sprite-loader的使用
1.为什么使用svg-sprite-loader?用来根据导入的svg文件自动生成symbol标签并插入html,接下来就可以在模板忠方便地使用svg-sprite技术了通常我们项目都是使用iconfont阿里巴巴图标矢量库,缺点:操作繁琐,每次ui需要加一些新的图标的时候,都要重新下载图标库的项目,然后把整体的文件(其中包括css,svg,ttf,woff等)替换掉。如果更改名称的...原创 2019-05-13 11:00:56 · 2952 阅读 · 0 评论 -
vue-cli3 适配移动端rem
使用vue-clinpm install -g @vue/cli // 使用vue-cli3版本自定义功能配置TypeScriptTypeScriptProgressive Web App (PWA) SupportRouterVuexCSS Pre-processorsLinter / FormatterUnit TestingE2E Testing...原创 2019-05-17 17:48:30 · 6193 阅读 · 0 评论 -
webpack4 TypeError: htmlWebpackPlugin.getHooks is not a function
1.使用vue-cli3,打包产生的问题;解决方案:npm i htnl-webpack-plugin@next参考https://github.com/jantimon/html-webpack-plugin/issues/1068原创 2019-05-31 14:59:01 · 3817 阅读 · 2 评论 -
js继承es5、es6的7种方式
构造函数、原型对象1.构造函数function A(name) { this.name = name; this.arr = [1]; this.say = function(){ console.log('hi') }}注意:数组和方法都属于”实例引用属性“,但是数组强调私有、不共享的。方法需要复用、共享;在构造函数中,一般很少有数组形式的引用属性,大部分情况都是:...原创 2019-07-15 16:07:14 · 327 阅读 · 0 评论 -
vue-cli3创建项目(1)
创建项目1.打开新的终端 / 命令行窗口。2.使用命令npm i -g @vue/cli。3.运行完后输入命令vue ui,浏览器上自动打开http://localhost:8000地址。4.浏览器打开显示:5.点击创建6.手动配置项目7.选择功能,可以引入babel、TypeScript、Progressive Web App(PWA)Support、Router、Vuex等功...原创 2019-07-12 16:09:36 · 669 阅读 · 0 评论 -
如何通过动态更改vue中的样式?
通过使用v-bind绑定class和style动态的改变DOM元素的样式。v-bind的基本用法以及它的语法糖,它主要用法是动态更新HTML元素上的属性。绑定class的几种方式1.对象语法给v-bind:class设置一个对象,可以动态地切换class。例如:<div id="app"> <div :class="{'active': isActive}">&...原创 2019-07-17 10:57:38 · 2230 阅读 · 0 评论 -
vue自定义指令
自定义指定的注册方法分为全局注册和局部注册,比如注册一个v-focus的指令,用于input、textare元素初始化时自动获取焦点。// 全局注册Vue.component('focus', { ...});// 局部注册var app = new Vue({ el: '#app', directives: { focus: { ... } ...原创 2019-07-17 15:22:18 · 119 阅读 · 0 评论 -
vue 12种通信方式
Vue组件间的通信方式1. props传递数据在父组件中使用儿子组件<template> <div> 父组件:{{mny}} <Son1 :mny="mny"></Son1> </div></template><script>import Son1 from "./Son1";expor...原创 2019-08-14 11:52:45 · 379 阅读 · 0 评论 -
CSS3常见一些属性
1.-webkit-text-size-adjust pc端小于12px的文本会被浏览器强制以12px显示,通过CSS属性-webkit-text-size-adjust:none;html{-webkit-text-size-adjust: none;} 但是在移动设备上如手机和平板上横屏和竖屏会导致字体变大,-webkit-text-size-adjust: 100%禁止字...原创 2018-10-26 11:36:07 · 529 阅读 · 0 评论 -
iPhone X适配 webpage
屏幕尺寸iphoneX的适配——安全区域(safe area)safe area确保不会被设备圆角(corners),传感器外壳(sensor housing,齐刘海)以及底部的Home Indicator遮挡一.顶部通栏 之前的版本采用状态栏20pc+导航栏44pt,iphone X做全面屏并多一块小刘海,因此iphone单独采用状态栏44pt+导航栏44pt,...原创 2018-10-26 10:42:29 · 346 阅读 · 0 评论 -
js去除日期字符串时分秒
方案一:var date = "2018-10-08 00:00:00";var newDate=/\d{4}-\d{1,2}-\d{1,2}/g.exec(date)newDate="2018-10-08";方案二:var time_str= '2014-9-19 13:19:21';var t = time_str.substr(0,10); ...转载 2018-10-09 10:40:02 · 28900 阅读 · 1 评论 -
图片延时加载插件jquery.lazyload.js使用方法
最近在写项目的时候,列表页需要加载很多图片,下载图片花费很多时间,那么就会影响这个网页的加载速度,用户体验差,很可能出现卡顿现象。因此,有选择性的请求图片,能够明显的减少服务器压力和流量,也能够减少游览器的负担。将页面上img的src属性设置为默认图片,而图片真实路径设置在data-original中。当滚动页面的时候lazyload.js计算图片位置和滚动的位置,先加载默认图片,后加载真实图片。...原创 2018-04-13 16:47:14 · 539 阅读 · 0 评论 -
url地址栏获取中文参数乱码
一:Js的Url中传递中文参数乱码问题,重点:encodeURI编码,decodeURI解码:1.传参页面Javascript代码:function send(){ var url = "test01.html"; var userName = $("#userName").html(); window.open(encodeURI(url + "?userName=" + userName...原创 2018-04-25 16:37:32 · 3047 阅读 · 0 评论 -
移动端rem布局,加载瞬间页面缩小
在移动端rem布局在加载渲染页面的时候会出现元素由小到恢复正常一个现在。项目的设计稿是以750px,用以下代码设置html根元素font-size的代码。 在完成整个页面的时候,我们在手机就看到了加载元素会先变小后恢复正常。1.js加载顺序与加载方法 页面加载顺序通常是“从上往下”加载的,所以把上面这段代码发在head内,但还是出现上述问题。在网上也查找一些资料,换成原生写法,优化加...原创 2018-07-07 20:36:18 · 4075 阅读 · 2 评论 -
返回顶部js/jq
返回顶部 网页中常带返回顶部的功能,当用户滚到一定的界面的时候点击该功能立即返回顶部。1.使用锚标记在页面顶部加入隐藏的锚点进行标记<a name="top" id="top></a>在页面底部加入访问链接<a href="#top" target="_self">返回顶部</a>点击返回顶部按钮,会直接跳至页面顶部,并且ur原创 2018-04-27 15:47:25 · 437 阅读 · 0 评论 -
零散的JavaScript知识
1.谈谈优雅降级和渐进增强的区别 渐进增强:针对低版本浏览器进行构建页面,保证最基本的功能然后再针对高级浏览器进行的效果、交互等改进和追加功能达到更好的用户体验 优雅降级:一开始就构建完整的功能,然后再针对低版本浏览器进行兼容。2.描述cookies,sessionStorage和localStorage的区别? 相同点:都是保存在浏览器端,且同源 区别: 1、cookie在浏览器和...原创 2018-07-07 20:50:10 · 846 阅读 · 2 评论 -
Meta标签
Meta标签是HTML语言head区的一个辅助性标签。它位于HTML文档头部的head标记和title标记之间,它提供用户可不见的信息。它可用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他web服务。1.声明文档使用的字符编码<meta charset="UTF-8"/>或<meta http-equiv="Content-Type" ...原创 2019-07-18 14:11:48 · 158 阅读 · 0 评论 -
使用js把Unix时间戳转化成普通日期
方法一:var time = 1523141099;var unixTimestamp = new Date(time*1000);var commonTime = unixTimestamp.toLocaleString()方法二Date.prototype.Format = function (fmt) { var o = { "M+": this.getMonth...原创 2018-06-07 11:40:54 · 7978 阅读 · 0 评论 -
前端性能优化?
content方面减少HTTP请求:合并文件、css精灵、inline 图片减少DNS查询:DNS查询完成之前浏览器不能从这个主机下载任何文件。方法:DNS缓存、将资源分布到恰当数量的主机名,平衡并行下载和DNS查询避免重定向:多余的中间访问使AJAX可缓存非必须组件延迟加载未来所需组件预加载减少DOM元素数量将资源放到不用的域下:浏览器同时从一个域下载资源的数目有限,增加域可以提高并行下载量减少...原创 2018-10-10 19:09:37 · 200 阅读 · 0 评论 -
mac下webpack4 配置
环境:mac操作系统node1.安装webpack npm由于连接是国外的网站,运行速度要稍微慢些,可以用淘宝镜像npm install -g cnpm --registry=https://registry.npm.taobao.org全局安装webpack、webpack-cli、webpack-dev-server。cnpm install webpack webpack-cli webp...原创 2018-06-28 17:08:59 · 1084 阅读 · 0 评论 -
使用webpack4 兼容ios8 自动添加前缀
最近写了移动端的项目,没有考虑到要兼容ios8。flex布局和css3的transform等没有起到作用。Safari是用webkit内核,需要增加一些前缀,才能起到作用。用webpack构建css样式的时候,使用postcss-loader加载器去做自动加载前缀。 flex布局,添加前缀:display: flex;display: -webkit-flex; justif...原创 2018-07-24 20:56:10 · 1410 阅读 · 0 评论 -
用js去掉字符串的第一个字符或者最后一个字符
stringObject.substring(start,stop) //截取的是开始与结束的字符串。stringObject.substr(start,length) //截取的是开始与字符串长度。var str = 'abc,def,hgi';str = str.substr(1); //删除第一个字符str = str.substr(0, str.length-1); s...原创 2018-08-09 17:44:34 · 112399 阅读 · 0 评论 -
微信分享朋友、朋友圈、QQ、QQ空间
1.准备工作 APPID公众号id、申请好友分享接口、ip白名单、js接口安全域名设置(必须是通过备案)。要先登录微信公众平台进入“公众号设置”的功能设置里填写“JS接口域名”2.引入js注意:支持使用AMD/CMD标准加载方法<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></scrip...原创 2018-08-07 15:54:13 · 664 阅读 · 0 评论 -
vue element-UI table嵌套表格 无法更新视图
1.点击“编辑”,当前的div显示“删除”;2.查看row.isShow = true,但是视图没有更新;代码如下:<template> <el-table :data="tableData4" style="width: 100%" max-height="250"> <el-table-column fi...原创 2018-08-07 19:36:37 · 8516 阅读 · 0 评论 -
移动端兼容性问题集
1.input获取焦点时,页面被放大// ios全屏<meta name="apple-mobile-web-app-capable" content="yes"><meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0...原创 2019-08-12 15:33:19 · 931 阅读 · 0 评论