橙子yq-CSDN博客

定义:postMessage() 方法用于安全地实现跨源通信。看看菜鸟的介绍<iframe style="width: 100%; height:100%" id="test" src="url" />// 接收子窗口消息window.addEventListener('message', this.Fn)Fn (e) { console.log(JSON.parse(e.data)) // 子窗口传来的消息}// 发送消息到子窗口this.ifr

2022-04-13 15:06:50 365

原创剩余时间,倒计时毫秒时间戳转换为时间格式HH:mm:ss时间差计算

handleT (mss) { var days = parseInt(mss / (1000 * 60 * 60 * 24)); var hours = parseInt((mss % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); // 不需要天数就去掉% (1000 * 60 * 60 * 24) var minutes = parseInt((mss % (1000 * 60 * 60)) / (1000 * 60)); var se.

2021-12-21 16:07:59 527 1

原创百度地图/高德地图异步加载

封装一个异步方法export const loadScript = (url, callback) => { let head = document.getElementsByTagName('head')[0] let script = document.createElement('script') script.type = 'text/javascript' script.defer = 'defer' if (callback) { script.onloa

2021-12-21 11:25:20 266

原创获取DOM元素及修改元素属性(a标签禁止默认跳转事件)

近期项目中遇到了这样的场景, 接口返回的是html, 我通过v-html渲染到页面中, 但是有个需求是修改a标签的打开方式, 这时候需要去操作dom节点去进行修改及使用我们制定的跳转方式打开a标签中的url~代码如下this.$nextTick(() => { // 1. 获取到所有p标签内的a标签节点 Array.prototype.slice.call(document.querySelectorAll(.readScroll p a)).map(item => {

2021-12-17 16:23:44 470 2

原创一个简单的移动端图片/PDF预览css

<div class="showAM"> <div class="countent> <img src="///" /> </div></div>.showAM { position:fixed; z-index:5; top:0; right: 0; left: 0; bottom:0;}.countent{ height: 100%; pa.

2021-11-25 11:27:25 513

原创 vue.draggable兼容安卓点击事件

APP用vuedraggable实现了拖拽功能后发现影响了部分安卓手机的点击事件,解决办法如下:把需要拖拽的类名加入到handle属性<vuedraggable class="wrapper" v-model="list" :disabled="disabled" aghost-class="ghost" :handle="'.textI'"> <transition-group> <div v-for="item in list" :key="it...

2021-11-08 16:43:05 804

原创 some数组遍历的用法/得到两组数组对象中某属性相同or不同的对象/对比两组数组中, 对象的某个值重复

很早就知道some方法, 最近需求需要排查两组数组中有相同id的对象和不同id的对象, 实际运用到了some的妙用~首先举例我的需求如下(得到id相同和id不同的数据):const aa = [{id: 12, name: 'xx'}, {id: 34, name: 'd'}, {id: 56, name: 'ab'}]const bb = [{id: 34, name: '不明人士'}, {id: 99, name: '瞄'}, {id: 12, name: '二哈'},{id: 09, n

2021-11-04 16:24:59 658

原创如何判断环境 & PC和移动端判断

环境判断方式一:const { host } = window.locationif (host.indexOf('生产域名')) !== -1) { // 生产环境}方式二:if (process.env.NODE_ENV === 'production) { // 生产} else if (process.env.NODE_ENV === 'SIT) {} else {}PC和移动端判断const isDEVPC = navigator.userA.

2021-11-04 16:11:59 177

原创高德地图报错TypeError: undefined is not a constructor

高德地图在开发聚合和路线规划时报错TypeError: undefined is not a constructor(evaluating 'new n.Driving(map:pe)) found in ...经排查, 原因是没有引入对应的插件, 我们来看看官方文档<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=密钥&plugin=AMap.Marke..

2021-11-04 16:09:04 3666

原创百度地图-点聚合点修改样式/背景图/字体颜色

this.markerClusterer=new window.BMapLib.MarkerClusterer(map, { markers:markersArr, styles: [{ url: './img/person-icon.png', size: new window.BMap.Size(50, 50), textColor: '#f04c0b' }] })

2021-09-26 15:12:52 1374

原创百度地图聚合点功能

接上一篇文章写到的百度地图基础功能, 本次聚合点功能基于上一篇的添加覆盖物, 不懂的可以先看看本人上一篇文章, 传送门2021-09-23 最全的百度地图API使用基础JS_m0_49031950的博客-CSDN博客11. 在引入百度地图的基础上, 再引入聚合点的包<script type="text/javascript" src="https://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.j

2021-09-23 14:05:42 1658 4

原创 2021-09-23 最全的百度地图API使用基础JS

最全的百度地图使用基础1.引入百度地图<scripttype="text/javascript"src="http://api.map.baidu.com/api?v=3.0&ak=你的密钥(在百度地图官网申请)"></script>2.html(设置宽高)<div id="container"></div>3.创建地图const BMapGL = window.BMap; var mp = new BMa...

2021-09-23 12:26:49 809 5

橙子yq的代码世界

原创微信支付踩坑和解决记录

原创微信支付基础使用

原创 vue3页面路由监听、获取上一页面路由地址

原创输入框用正则限制只能输入数字

原创获取路由域名和query参数

原创一、根据当前路由处理展示图标

原创前端scrollIntoView和scrollTo锚点实际项目运用

原创前端table相关问题解决

原创 echarts3/4带缺口多重/3层环形图问题解决

原创 echarts灰色底色的百分比饼图

原创 vue3 defineExpose defineProps defineEmits父子组件传值/方法

原创百度地图api标注物label文字换行

原创 transition缓动画pop层展开收起元素(无固定高度)多种写法对比CSS

原创 iframe窗口跨域消息传送postMessage