自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(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 1105

转载 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 1289

原创 vue 拍照上传

vue 拍照上传 涉及技术点 canvas裁剪 base64 blob数据装换 forData 数据传递 ,还有hammer.js和exif-js具体代码如下<template> <div class="pic"> <div class="bg-box">

2018-11-27 11:49:07 2194

原创 vue-cli 环境变量 process.env的使用

话不多说直接看代码在package中的配置如下图举个本地运行的例子.env.serve;注意:除了VUE_APP_*变量之外,在你的应用代码中始终可用的还有两个特殊的变量: NODE_ENV- 会是"development"、"production"或"test"中的一个。具体的值取决于应用运行的模式。 BASE_URL- 会和vue.co...

2020-04-20 12:20:05 8756 1

原创 js setInterval 实现倒计时

<script>export default{ data() { return{ count:0 } }, methods:{ getcode() { //倒计时 const TIME_COUNT = 59; ...

2020-04-02 10:15:19 232

原创 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 498

原创 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 255

原创 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 163

原创 H5安卓软键盘弹出把底部内容顶上去处理

H5安卓软键盘弹出把底部内容顶上去处理解决方案就是,监听窗口变化,如果窗口变小就将 body html 高度变大使得内容能够全部展示出来,在窗口变回原来大小的时候body,html高度应该要还原,直接上代码如下<template> <div class="dedicatedLine-box" refs="dedicatedLine"> <div ...

2020-03-18 11:30:08 1155

原创 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 2813

原创 ios12 input select 兼容问题

//**input ios12不兼容问题 弹出软键盘后点击完成不会自动回到原来底部 */ $(".join_item .name-inp").blur(function(){ setTimeout(()=>{ const scrollHeight = document.documentElement.scrollTop || docume...

2020-03-16 15:38:36 392

翻译 vue nextTick的用途和用法

用途nextTick应用场景:需要在视图更新之后,基于新的视图进行操作。详情参考这里简单来说,Vue 在修改数据后,视图不会立刻更新,而是等同一事件循环中的所有数据变化完成之后,再统一进行视图更新。/改变数据vm.message = 'changed'//想要立即使用更新后的DOM。这样不行,因为设置message后DOM还没有更新console.log(vm.$el.t...

2020-02-20 15:08:38 268

原创 让百度地图支持https

让百度地图支持https<script type="text/javascript"> //如果是在https环境,运用百度地图需要加上这个常量才不会报错 window.HOST_TYPE='2' </script>参考https://blog.csdn.net/weixin_34081595/article/details/914181...

2020-02-14 11:34:06 609

原创 去除特殊符号正则

去除特殊符号 ——————> s=s.replaceAll("[^\u4e00-\u9fa5a-zA-Z0-9]","");

2019-10-21 14:47:20 2155

转载 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 300

原创 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 358

原创 获取参数的方法

/** 获取参数的方法 **/ function getQueryString(parameterName, currentUrl,) { var rs = new RegExp("(^|[&,?])" + parameterName + "=([^\&]*)(\&|$)", "g...

2019-06-05 10:18:42 1122

原创 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 587

原创 @import "../style/lines.scss" 导致background: url()路径无效问题

@import "../style/lines.scss" 导致background: url()路径无效问题解决方案是在webpack中的vue.config.js中配置configureWebpack: config =&gt; { let obj = {}; obj.resolve = { alias: { 'img': '@/ass...

2019-03-12 10:24:46 2292

原创 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 950

原创 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 369

原创 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 1175

转载 vue 音频播放 audio

componet 组件&lt;template&gt; &lt;div class="di main-wrap" &gt; &lt;!-- 这里设置了ref属性后,在vue组件中,就可以用this.$refs.audio来访问该dom元素 --&gt; &lt;audio ref="audio" class="dn" :src="ur

2018-11-27 17:23:00 23203 2

原创 H5视频播放 vue-video-player

&lt;template&gt; &lt;div class="video-page"&gt; &lt;div class="header-box"&gt; &lt;div class="headers"&gt; &lt;van-nav-bar @click-left="onClickLe

2018-11-27 17:07:05 3305 1

原创 ifame 嵌套微信公众号文章和 ios内容变大兼容处理

html&amp;lt;div class=&quot;iframe-box&quot;&amp;gt; &amp;lt;iframe id=&quot;iframes&quot; src=&quot;&quot; frameborder=&quot;0&quot;&amp;gt;&amp;lt;/iframe&amp;gt; &amp;lt;/div

2018-11-27 16:45:59 331

原创 h5拨打电话

js拨打电话&lt;template&gt; &lt;div&gt; &lt;div @click="dianwo"&gt;点我拨打电话&lt;/div&gt; &lt;/div&gt;&lt;/template&gt;&lt;script&gt; export default { data () {

2018-11-27 11:27:17 620

原创 滚动监听fixed header颜色切换

html&amp;amp;lt;template&amp;amp;gt; &amp;amp;lt;div ref=&amp;quot;viewBox&amp;quot; class=&amp;quot;abc&amp;quot;&amp;amp;gt; &amp;amp;lt;div :class=&amp;quot;{fixed:true,bg:isColor}&amp;quot;&am

2018-11-27 11:17:37 968

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除