- 博客(27)
- 收藏
- 关注

原创 jsBridge H5和原生交互
jsBridge方式1:js调用原生约定方法名encyclopedia 注意需要判断设备类型 然后调用方法如下ios:window.webkit.messageHandlers.encyclopedia.postMessage({});android:window.android.encyclopedia();原生调用js 方法 window.testBridge = fun...
2019-12-17 11:31:03
1206

转载 iPhone X 兼容问题
iPhone X 兼容问题对容器设置对应的安全区域.routers{ box-sizing: border-box; padding: constant(safe-area-inset-top) constant(safe-area-inset-right) constant(safe-area-inset-bottom) constant(safe-area-inset-le...
2018-11-27 11:57:43
1352

原创 vue 拍照上传
vue 拍照上传 涉及技术点 canvas裁剪 base64 blob数据装换 forData 数据传递 ,还有hammer.js和exif-js具体代码如下<template> <div class="pic"> <div class="bg-box">
2018-11-27 11:49:07
2265
原创 vue-cli 环境变量 process.env的使用
话不多说直接看代码在package中的配置如下图举个本地运行的例子.env.serve;注意:除了VUE_APP_*变量之外,在你的应用代码中始终可用的还有两个特殊的变量: NODE_ENV- 会是"development"、"production"或"test"中的一个。具体的值取决于应用运行的模式。 BASE_URL- 会和vue.co...
2020-04-20 12:20:05
8892
1
原创 js setInterval 实现倒计时
<script>export default{ data() { return{ count:0 } }, methods:{ getcode() { //倒计时 const TIME_COUNT = 59; ...
2020-04-02 10:15:19
273
原创 vue api 封装 登录验证 状态提示 页面动画
下面是我在项目中api接口封装和状态码提示http.js:import axios from 'axios';import QS from 'qs';import {isJson} from "./common.js";import store from '../../store/'import { Dialog } from 'cube-ui';import router f...
2020-04-02 10:04:25
542
原创 vue bus 用法
公共bus.js//bus.jsimport Vue from 'vue'export default new Vue()组件A<template> <div> A组件: <span>{{elementValue}}</span> <input type="button" value="点击触发" @click...
2020-04-01 18:01:53
308
原创 vue router history nginx 相关配置
服务器配置 location ^~ /h5/usr { alias /usr/local/project/cpn/i84cpn-web-0.1/h5/usr; try_files $uri $uri/ /h5/usr/index.html; }前端配置router.js路由配置production 与location路径一致const ...
2020-04-01 15:16:05
193
原创 H5安卓软键盘弹出把底部内容顶上去处理
H5安卓软键盘弹出把底部内容顶上去处理解决方案就是,监听窗口变化,如果窗口变小就将 body html 高度变大使得内容能够全部展示出来,在窗口变回原来大小的时候body,html高度应该要还原,直接上代码如下<template> <div class="dedicatedLine-box" refs="dedicatedLine"> <div ...
2020-03-18 11:30:08
1278
原创 js 通过正则过滤 emoji 表情
<input type="text" v-model.trim="names" @input="emojistr"> emojistr(){ let _this = this; //可以过滤绝大部分emoji表情但是还是有小部分过滤不了 this.names = unescape(escape(_this.names).repl...
2020-03-17 15:06:26
2951
原创 ios12 input select 兼容问题
//**input ios12不兼容问题 弹出软键盘后点击完成不会自动回到原来底部 */ $(".join_item .name-inp").blur(function(){ setTimeout(()=>{ const scrollHeight = document.documentElement.scrollTop || docume...
2020-03-16 15:38:36
420
翻译 vue nextTick的用途和用法
用途nextTick应用场景:需要在视图更新之后,基于新的视图进行操作。详情参考这里简单来说,Vue 在修改数据后,视图不会立刻更新,而是等同一事件循环中的所有数据变化完成之后,再统一进行视图更新。/改变数据vm.message = 'changed'//想要立即使用更新后的DOM。这样不行,因为设置message后DOM还没有更新console.log(vm.$el.t...
2020-02-20 15:08:38
310
原创 让百度地图支持https
让百度地图支持https<script type="text/javascript"> //如果是在https环境,运用百度地图需要加上这个常量才不会报错 window.HOST_TYPE='2' </script>参考https://blog.youkuaiyun.com/weixin_34081595/article/details/914181...
2020-02-14 11:34:06
663
转载 fastclick 用法简洁
<scripttype='application/javascript'src='/path/to/fastclick.js'></script>1. 禁用缩放 `<meta name = "viewport" content="user-scalable=no" > ` 缺点: 网页无法缩放2.更改默认视口宽度 ...
2019-07-02 15:46:15
328
原创 checkbox和radio 自定义样式
<div class="radio-box"> <div class="radio-item"> <label class="radio-label"> <input type="radio" value="第一项"} name="选项"> <i></i>...
2019-06-12 16:41:35
416
原创 获取参数的方法
/** 获取参数的方法 **/ function getQueryString(parameterName, currentUrl,) { var rs = new RegExp("(^|[&,?])" + parameterName + "=([^\&]*)(\&|$)", "g...
2019-06-05 10:18:42
1182
原创 js 实现px转rem
!function(n, e) { var t = n.documentElement, i = "orientationchange" in window ? "orientationchange": "resize", d = function() { var n = t.clientWidth; n && (t.sty...
2019-06-05 10:14:13
654
原创 @import "../style/lines.scss" 导致background: url()路径无效问题
@import "../style/lines.scss" 导致background: url()路径无效问题解决方案是在webpack中的vue.config.js中配置configureWebpack: config => { let obj = {}; obj.resolve = { alias: { 'img': '@/ass...
2019-03-12 10:24:46
2382
原创 postcss cube-ui 单位问题
在移动端单位有时候我们用vw ,cube-ui默认会安装postcss-px-to-viewport 默认设置是如下 'postcss-px-to-viewport':{ viewportWidth: 375, viewportHeight: 667 , unitPrecision: 5, viewportUnit: 'vw', ...
2019-03-12 10:06:02
1009
原创 axios 封装
下面是对axios 封装,不喜勿喷,谢谢import axios from "axios";import qs from 'qs';import store from "../../store"axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'; a...
2018-11-27 17:57:24
402
原创 vue key的用法
在项目过程中继续扫码然后跳转地址不变参数值发生变化,此时页面不会刷新的,比如地址是https://www.liu.com/h5/online/index.html/#/encyclopedias?cycId=90然后继续扫码变成https://www.liu.com/h5/online/index.html/#/encyclopedias?cycId=91解决方法:给路由的router-vi...
2018-11-27 17:40:41
1230
转载 vue 音频播放 audio
componet 组件<template> <div class="di main-wrap" > <!-- 这里设置了ref属性后,在vue组件中,就可以用this.$refs.audio来访问该dom元素 --> <audio ref="audio" class="dn" :src="ur
2018-11-27 17:23:00
23443
2
原创 H5视频播放 vue-video-player
<template> <div class="video-page"> <div class="header-box"> <div class="headers"> <van-nav-bar @click-left="onClickLe
2018-11-27 17:07:05
3464
1
原创 ifame 嵌套微信公众号文章和 ios内容变大兼容处理
html&lt;div class="iframe-box"&gt; &lt;iframe id="iframes" src="" frameborder="0"&gt;&lt;/iframe&gt; &lt;/div
2018-11-27 16:45:59
385
原创 h5拨打电话
js拨打电话<template> <div> <div @click="dianwo">点我拨打电话</div> </div></template><script> export default { data () {
2018-11-27 11:27:17
769
原创 滚动监听fixed header颜色切换
html&amp;lt;template&amp;gt; &amp;lt;div ref=&quot;viewBox&quot; class=&quot;abc&quot;&amp;gt; &amp;lt;div :class=&quot;{fixed:true,bg:isColor}&quot;&am
2018-11-27 11:17:37
1007
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人