- 博客(37)
- 收藏
- 关注
RSS订阅
转载 vue中bus.$on事件被多次绑定
vue中eventbus被多次触发（vue中使用eventbus踩过的坑）【bus.$on事件被多次绑定】问题描述：只要页面没有强制刷新，存在组件切换，bus.$on方法会被多次绑定，造成事件多次触发解决办法一：在每次调用方法前先解绑事件( bus.$off )，然后在重新绑定( bus.$on ) bus.$off("backUpLevel"); bus.$on...
2019-09-07 21:24:41
1123
转载 vue_axios请求封装、异常拦截统一处理
1、前端网络请求封装、异常统一处理vue中采用axios处理网络请求，避免请求接口重复代码，以及各种网络情况造成的异常情况的判断，采用axios请求封装和异常拦截操作；axios 请求封装// 引入axios文件包import axios from 'axios'// POST 方法封装 (参数处理)export const postRequest = (url, params)...
2019-09-07 20:47:43
2105
转载 小程序分包（Taro分包案例）
为什么要使用小程序的“分包加载”方案微信小程序限制了代码包不能超过 2MB，限制大小是对小程序启动速度的考虑，但是2MB 大小严重限制了小程序功能的扩展，业务需求可能需要更大的体积，综合考虑微信推出了“分包加载方案”分包加载某些情况下，开发者需要将小程序划分成不同的子包，在构建时打包成不同的分包，用户在使用时按需进行加载。在构建小程序分包项目时，构建会输出一个或多个分包。分包小程序必定含有...
2020-07-29 17:16:04
2604
转载 H5开发踩坑之旅
1、H5页面在IOS后退不刷新该现象与往返缓存(bfcache)有关系//ios端浏览器回退功能不刷新页面，android端不存在let isIos = /^.*((iPhone)|(iPad)|(Safari))+.*$/;if (isIos.test(navigator.userAgent)) { window.onpageshow = function(event) { ...
2020-07-29 17:15:39
724
转载 Rem.js
750 代表设计稿的宽度;100 代表换算比例,写100是 为了好计算；比如，一个元素的宽度是100px，就可以写1rem，以及1px=0.01rem // rem 前端自适应代码 (function (win) { let doc = win.document, docEl = doc.documentElement, timer = null; ...
2020-07-29 17:15:03
204
转载 vue Bus总线
vue中我们经常遇到组件之间的通信，通常的通信方式有 父 → 子、子 → 父、兄弟组件 之间的通信。通常处理方式如下：父 → 子：props传递数据 / vuex；子 → 父：bus事件总线 / vuex;兄弟组件：bus事件总线 / vuex;在一些简单的项目中，我们没有必要使用Vuex，此时可以使用 公共事件总线（Event Bus） 来处理1、创建事件总线创建一个名为 bus.js 的JS文件import Vue from 'vue';export default n
2020-07-29 17:14:24
541
1
转载 类似百度搜索关键字，并高亮显示
1、类似百度搜索关键字，并高亮显示关键字内容1.1 关键字高亮函数设置heghlight() { this.searchKeyInfo(); // 页面中需要高亮的容器 let searchArea = [$('.infoTitle'),$('.infoTag'),$('.schInfoBody'),$('.schIn...
2020-07-29 16:56:59
947
转载 Taro小程序分包
为什么要使用小程序的“分包加载”方案微信小程序限制了代码包不能超过 2MB，限制大小是对小程序启动速度的考虑，但是2MB 大小严重限制了小程序功能的扩展，业务需求可能需要更大的体积，综合考虑微信推出了“分包加载方案”分包加载某些情况下，开发者需要将小程序划分成不同的子包，在构建时打包成不同的分包，用户在使用时按需进行加载。在构建小程序分包项目时，构建会输出一个或多个分包。分包小程序必定含有...
2020-01-07 14:23:05
3456
2
转载 H5踩坑之旅
1、H5页面在IOS后退不刷新该现象与往返缓存(bfcache)有关系//ios端浏览器回退功能不刷新页面，android端不存在let isIos = /^.*((iPhone)|(iPad)|(Safari))+.*$/;if (isIos.test(navigator.userAgent)) { window.onpageshow = function(event) { ...
2020-01-07 14:21:46
395
转载 Rem.js
750 代表设计稿的宽度;100 代表换算比例,写100是 为了好计算；比如，一个元素的宽度是100px，就可以写1rem，以及1px=0.01rem // rem 前端自适应代码 (function (win) { let doc = win.document, docEl = doc.documentElement, timer = null; ...
2020-01-07 14:20:28
93
转载 移动端 h5 界面软键盘搜索功能实现
问题描述： 移动端搜索框输入文字后，点击软键盘的搜索，实现搜索功能解决方法： 对应移动端按键响应事件onkeypress（或者keyup） 按键编码为13， document.onkeyup = function (e) { var code = e.charCode || e.keyCode; if (code == 13) { t...
2019-09-07 22:10:34
655
转载 vue如何在页面刷新时保留状态信息
1、通过本地存储 state中的数据，页面刷新成功后再次从本地存储中读取state数据// vuex中的数据发生改变时触发localStorage的存储操作localstorage.setItem('state', JSON.stringify(this.$store.state))// 页面加载的时候在created中获取本地存储中的数据localStorage.getItem(...
2019-09-07 22:00:37
6867
2
转载 VUE中assets与static的区别
1、相同点： 文件夹中的资源在html中使用都是可以的。2、不同点：使用assets下面的资源，在js中使用的话，路径要经过webpack中的file-loader编译，路径不能直接写2.1 static :该目录下的文件是不会被wabpack处理的，它们会被直接复制到最终的打包目录下面（默认是 dist/static ），且必须使用绝对路径来引用这些文件。这是通过在 config....
2019-09-07 22:00:13
966
转载 flex 伸缩布局
1、设置伸缩布局 display: flex;2、设置固定宽度 flex-basisflex-basis: 值;3、弹性盒子实现多行排列 flex-wrapflex-wrap : nowrap; // nowrap 默认不换行 // wrap 换行4、设置水平方向对齐方式 justify-contentjustify-co...
2019-09-07 21:59:51
212
1
转载 关于Content-Type几种值的区别及用法
#####1、Content-Type 的值类型：1.1 application/json：消息主体是序列化后的 JSON 字符串1.2 application/x-www-form-urlencoded：数据被编码为名称/值对。这是标准的编码格式1.3 multipart/form-data： 需要在表单中进行文件上传时，就需要使用该格式。常见的媒体格式是上传文件之时使用的1...
2019-09-07 21:59:30
475
转载 axios的兼容性问题
1、axios在PC端浏览器的兼容性问题axios支持IE8+，但原理是基于promise之上实现的，因此会存在不兼容IE的问题。trident内核的浏览器下会报：vuex requires a Promise polyfill in this browser解决方案：（1）、首先安装 babel-polyfill，来解决IE不支持 promise对象的问题npm ...
2019-09-07 21:58:47
1421
转载 indexOf的兼容性问题
问题：indexOf 在目前的主流流浪器中都能正常显示，但是在 IE9 以下存在兼容性问题解决方法：1、首先判断当前环境下的数组有没有 indexOf 方法2、若当前环境下数组没有 indexOf 方法，则需要自定义一个 indexOf 方法，第一个参数为要查找的元素，第二个参数为查找的起始位置3、在数组中查找到需要查找的元素，返回该元素第一次出现的位置（即 return i ）；若没有查...
2019-09-07 21:58:24
1019
转载 Websocket 实现过程
websocket1、websocket是下一代客户端和服务器的异步通信方法2、服务器可以在给定的时间内，任意时刻互相推送消息3、使用 ws 和 wss协议用于任意的客户端和服务器程序特点：websocket服务器和客户端可以互相推送消息，xhr会受到域的限制，但是websocket为指定目标创建，允许 跨域用法：1、创建socket实例var socket = new WebSo...
2019-09-07 21:57:54
398
转载 小程序利用canvas绘制分享图
1、DOM中创建canvas<canvas canvas-id="shareCanvas" style="width:250px;height:460px"></canvas>2、创建canvas画布var canvas = wx.createCanvasContext('shareCanvas')3、绘制分享图内容// X: x坐标 ， Y：y坐标 , W...
2019-09-07 21:57:13
247
转载 城市选择（小程序 - 热门城市 - wepy）
项目中采用的小程序框架 wepy 来搭建小程序项目1、搭建城市选择的dom结构1.1 dom结构<view class="container "> <view class="selectCityBox"> <view class="selectCityTop"> <view cla...
2019-09-07 21:56:37
551
转载 三级联动选择地区（小程序-wepy)
项目中采用的小程序框架 wepy 来搭建小程序项目1、父组件 中显示弹框结构，以及引入三集联动的组件1.1 父组件中 弹框结构<wxc-popup class="selAddressPopupBox J_Popup" wx:if="{{ selFlag }}" animation-mode="bottom" align="bottom" @tap.stop="hidePopup...
2019-09-07 21:56:10
593
转载 小程序中强制页面刷新
1、tab页面切换时强制页面数据刷新// pageTabB => pageTabAwepy.switchTab({ url: '/pages/pageTabA', success(){ let page = getCurrentPages().pop(); if( page == undefined || page == null ) return;...
2019-09-07 21:55:48
10073
转载 时间格式化函数
方法一：1、字符串时间转换为时间戳 // 字符串时间转换为时间戳 getDateTimeStamp (dateStr) { return Date.parse(dateStr.replace(/-/gi,"/")); }2、时间戳格式化成 几小时前 // 时间格式化函数 timeTampFormat(timest...
2019-09-07 21:39:20
1167
转载 VUE 常见指令
1、常见指令1.1 v-text 用来设置当前元素的文本内容，相当于innerText注意：会覆盖元素的默认内容 <h1 v-text='msg'></h1>1.2 v-html 更新DOM对象的textContent注意：不要使用v-html展示用户输入的内容1.3 v-bind 为html元素绑定属性<a v-bind:href="url">...
2019-09-07 21:38:42
179
转载 路由导航钩子
路由导航钩子：主要用来拦截导航，让其完成跳转或者取消跳转1、全局钩子： beforeEach、beforeResolve、 afterEach(after钩子没有next方法，不能改变导航)router.beforeEach( (to,from,next) => { //do something next(); // 该方法调用resolve钩子 next(false);...
2019-09-07 21:37:57
932
转载 Vue.directive 自定义指令
1、简介：除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。有的情况下，仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。问题：当页面加载时，该元素将获得焦点 (注意：autofocus 在移动版 Safari 上不工作)。事实上，只要你在打开这个页面后还没点击过任何内容，这个输入框就应当还是处于聚焦状态。现在让我们用指令来实现...
2019-09-07 21:37:15
180
转载 获取鼠标相对盒子的位置
1、 获取鼠标相对盒子的位置// 获取鼠标相对盒子的位置 getMousePos(event, el) { event = event || window.event; var pagex = event.pageX || scroll().left + event.clientX; var pagey =...
2019-09-07 21:35:08
498
转载 html2Canvas将html转化成图片
1、安装html2Canvsnpm install html2canvas --save2、相应组件中引入html2Canvasimport html2canvas from 'html2canvas'3、创建需要生成图片的html<div id="sharePicBox"> <div>需要生成图片的html</div></d...
2019-09-07 21:33:58
1694
转载 echarts中的map地图的使用
1、vue项目中 npm install echarts --save 安装echarts依赖2、main.js中引入相关依赖import echarts from 'echarts'//注意：echarts3.0以后已经不包含地图文件了，需要手动引入china.js文件import 'echarts/map/js/china'//将echarts绑定到vue的原型上Vue....
2019-09-07 21:33:04
3165
转载 vue移动端px转rem
环境：vue-cli + webpack + lib-flexible + px2rem-loader1、安装 lib-flexiblenpm install lib-flexible -save2、main.js中引入lib-flexibleimport 'lib-flexible/flexible'3、在 index.html 中设置好meta放缩比例<meta name...
2019-09-07 21:31:54
336
转载 MD5、Base64 加密
1、前端MD5加密1.1 npm 安装js-md5 npm install js-md51.2 项目中引入 MD5// vue 项目中引入 js-md5import md5 from "js-md5";// script 中引入 js-md5<script src="~/js-md5"></script>1.3 ...
2019-09-07 21:30:33
200
转载 vue复制到剪切板
VUE 中实现复制到剪切板，在电脑任何位置可复制功能1、环境vue 、 clipboard2、使用步骤1） 安装依赖包 npm install vue-clipboard2 --save引入安装包1、 脚手架搭建的用户import Vue from 'vue'import VueClipboard from 'vue-clipboard2'Vue.u...
2019-09-07 21:29:38
468
转载 VUE 生成二维码插件
1、qrcodejs2安装 qrcodejs2 （注意：安装的是qrcodejs2，不要安装qrcode —> 会报错）npm install qrcodejs2 --save页面中引入<script> import QRCode from "qrcodejs2" export default { d...
2019-09-07 21:28:28
251
转载 Vuex详细教程
1、使用Vue脚手架构建好项目后1.1 安装Vuex// 生产环境中需要使用npm install Vuex --save 1.2 新建一个 store 文件夹，并在文件夹下新建 store.js ，文件中引入 Vue 和 Vueximport Vue from 'vue'import Vuex from 'vuex'1.3 使用 vuex，通过&n...
2019-09-07 21:23:08
138
转载 组件之间的通信
1、父子组件通信####1.1父组件到子组件方式：通过 props 属性传递数据注意：子组件无法直接使用父组件的数据//============= 父组件 =================<aaa :money="bar"></aaa> important aaa from '......'var vm = new Vue({ el: '#app...
2019-09-07 21:21:06
134
转载 VUE全局过滤器filter
1、过滤器1.1 过滤器科用在两个地方：双花括号插值 和 v-bind 表达式 中。过滤器应该被添加在js表达式的尾部，由管道符号指示// 双花括号中{{ message | capitalize }}// 在v-bind 中<div v-bind:id=" rawId | formatId"></div>####1.2 定义...
2019-09-07 21:17:10
300
转载 Vue多页面应用程序的构建
1、利用vue脚手架快速搭建项目目录1.1、 vue init webpack test 生成项目目录1.2、 npm install 安装项目依赖1.3、 npm run dev 运行项目页面2、新建项目文件：根目录下： html文件one.html、two.htmlSrc目...
2019-09-07 21:15:05
315
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人