博客园 - 哓番茄
uuid:24b78886-0ed1-41c2-8670-e3f31dcf42c4;id=64595
2022-09-20T05:57:42Z
哓番茄
https://www.cnblogs.com/Tohold/
feed.cnblogs.com
https://www.cnblogs.com/Tohold/p/13712581.html
关于使用通过ip访问网站无法使用多媒体,MediaDevices.getUserMedia()为undefined的解决方案--(亲测可用)。 - 哓番茄
遇到问题我们首先要搞明白为什么。当web前端通过vidoe+canvas+MediaDevices.getUserMedia()的方式调用本地多媒体设备(不局限于摄像头)时。存在一个安全问题,为了用户的隐私安全,http协议无法使用多媒体设备。因为像摄像头和麦克风属于可能涉及重大隐私问题的API,g
2020-09-22T07:39:00Z
2020-09-22T07:39:00Z
哓番茄
https://www.cnblogs.com/Tohold/
【摘要】遇到问题我们首先要搞明白为什么。当web前端通过vidoe+canvas+MediaDevices.getUserMedia()的方式调用本地多媒体设备(不局限于摄像头)时。存在一个安全问题,为了用户的隐私安全,http协议无法使用多媒体设备。因为像摄像头和麦克风属于可能涉及重大隐私问题的API,g <a href="https://www.cnblogs.com/Tohold/p/13712581.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/Tohold/p/13279615.html
vue 实现 内容滚动播出 - 哓番茄
效果如图 代码 <template> <div id="mar"> <!--主div分三部分,图标,系统公告名字,展示区域--> <div class="header"> <!--图标--> <img src=""> <!--名字--> <span class="announcement">系统公告
2020-07-10T07:48:00Z
2020-07-10T07:48:00Z
哓番茄
https://www.cnblogs.com/Tohold/
【摘要】效果如图 代码 <template> <div id="mar"> <!--主div分三部分,图标,系统公告名字,展示区域--> <div class="header"> <!--图标--> <img src=""> <!--名字--> <span class="announcement">系统公告 <a href="https://www.cnblogs.com/Tohold/p/13279615.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/Tohold/p/12868059.html
openlayser 移动端禁止地图旋转 - 哓番茄
旋转属于交互事件,禁止旋转需要在interation里面去定义, 相关设置: https://openlayers.org/en/latest/apidoc/module-ol_interaction.html import {defaults as defaultInteractions} fro
2020-05-11T03:38:00Z
2020-05-11T03:38:00Z
哓番茄
https://www.cnblogs.com/Tohold/
【摘要】旋转属于交互事件,禁止旋转需要在interation里面去定义, 相关设置: https://openlayers.org/en/latest/apidoc/module-ol_interaction.html import {defaults as defaultInteractions} fro <a href="https://www.cnblogs.com/Tohold/p/12868059.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/Tohold/p/12850116.html
Openlayers 定位,添加自定义图标,点击图标弹框 - 哓番茄
之前已经把地图展示出来,现在可以在地图上做相关操作。 首先定义一个位置图层,这样可以动态操作 import Feature from 'ol/Feature' import {Vector as VectorLayer} from 'ol/layer' import GeoJSON from 'ol
2020-05-08T05:59:00Z
2020-05-08T05:59:00Z
哓番茄
https://www.cnblogs.com/Tohold/
【摘要】之前已经把地图展示出来,现在可以在地图上做相关操作。 首先定义一个位置图层,这样可以动态操作 import Feature from 'ol/Feature' import {Vector as VectorLayer} from 'ol/layer' import GeoJSON from 'ol <a href="https://www.cnblogs.com/Tohold/p/12850116.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/Tohold/p/12848924.html
Vue + OpenLayers - 哓番茄
Vue中使用OpenLayers,之前写了是 OpenLayers 5.3的版本,最近又开始一个项目,继续采用的是Vue + OpenLayers (6.3.1), 这个项目主要是做气象数据,需要在地图上展示不同站点,数据查询,温度区域的展示,风场的展示等等,我会陆续更新。 从最开始的展示地图开始
2020-05-08T02:20:00Z
2020-05-08T02:20:00Z
哓番茄
https://www.cnblogs.com/Tohold/
【摘要】Vue中使用OpenLayers,之前写了是 OpenLayers 5.3的版本,最近又开始一个项目,继续采用的是Vue + OpenLayers (6.3.1), 这个项目主要是做气象数据,需要在地图上展示不同站点,数据查询,温度区域的展示,风场的展示等等,我会陆续更新。 从最开始的展示地图开始 <a href="https://www.cnblogs.com/Tohold/p/12848924.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/Tohold/p/12845486.html
Vue使用JSBridge与原生APP通信 - 哓番茄
JSBridge.js let isAndroid = navigator.userAgent.indexOf('Android') > -1 || navigator.userAgent.indexOf('Adr') > -1 let isiOS = !!navigator.userAgent.m
2020-05-07T12:44:00Z
2020-05-07T12:44:00Z
哓番茄
https://www.cnblogs.com/Tohold/
【摘要】JSBridge.js let isAndroid = navigator.userAgent.indexOf('Android') > -1 || navigator.userAgent.indexOf('Adr') > -1 let isiOS = !!navigator.userAgent.m <a href="https://www.cnblogs.com/Tohold/p/12845486.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/Tohold/p/12844348.html
css设置滚动条样式 - 哓番茄
滚动条几个属性,主要有下面7个属性 ::-webkit-scrollbar 滚动条整体部分,可以设置宽度啥的::-webkit-scrollbar-button 滚动条两端的按钮::-webkit-scrollbar-track 外层轨道::-webkit-scrollbar-track-piece
2020-05-07T09:23:00Z
2020-05-07T09:23:00Z
哓番茄
https://www.cnblogs.com/Tohold/
【摘要】滚动条几个属性,主要有下面7个属性 ::-webkit-scrollbar 滚动条整体部分,可以设置宽度啥的::-webkit-scrollbar-button 滚动条两端的按钮::-webkit-scrollbar-track 外层轨道::-webkit-scrollbar-track-piece <a href="https://www.cnblogs.com/Tohold/p/12844348.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/Tohold/p/12834992.html
git仓库导入新项目或导入已建项目命令 - 哓番茄
命令行指令 Git 全局设置 git config --global user.name "name" git config --global user.email "your@email.com" 创建新版本库 git clone your address cd kdl-map touch REA
2020-05-06T02:52:00Z
2020-05-06T02:52:00Z
哓番茄
https://www.cnblogs.com/Tohold/
【摘要】命令行指令 Git 全局设置 git config --global user.name "name" git config --global user.email "your@email.com" 创建新版本库 git clone your address cd kdl-map touch REA <a href="https://www.cnblogs.com/Tohold/p/12834992.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/Tohold/p/12068993.html
vue动态加载组件 - 哓番茄
WrWeeklyWorkReport: resolve => require(['@/pages/workWeeklyManage/workWeekly/draftEdit.vue'], resolve) 引入组件 //正常加载 import index from '../pages/index.v
2019-12-19T09:22:00Z
2019-12-19T09:22:00Z
哓番茄
https://www.cnblogs.com/Tohold/
【摘要】WrWeeklyWorkReport: resolve => require(['@/pages/workWeeklyManage/workWeekly/draftEdit.vue'], resolve) 引入组件 //正常加载 import index from '../pages/index.v <a href="https://www.cnblogs.com/Tohold/p/12068993.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/Tohold/p/11850853.html
微前端框架 single-spa - 哓番茄
单体应用对比前端微服务化 普通的前端单体应用 微前端架构 1.基本概念 实现一套微前端架构,可以把其分成四部分(参考:https://alili.tech/archive/11052bf4/) 加载器:也就是微前端架构的核心,主要用来调度子应用,决定何时展示哪个子应用, 可以把它理解成电源。 包装器
2019-11-13T08:48:00Z
2019-11-13T08:48:00Z
哓番茄
https://www.cnblogs.com/Tohold/
【摘要】单体应用对比前端微服务化 普通的前端单体应用 微前端架构 1.基本概念 实现一套微前端架构,可以把其分成四部分(参考:https://alili.tech/archive/11052bf4/) 加载器:也就是微前端架构的核心,主要用来调度子应用,决定何时展示哪个子应用, 可以把它理解成电源。 包装器 <a href="https://www.cnblogs.com/Tohold/p/11850853.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/Tohold/p/11512638.html
elementui禁用全选按钮 - 哓番茄
document.getElementsByClassName('el-checkbox__input')[0].classList.add('is-disabled') document.getElementsByClassName('el-checkbox__original')[0].disa
2019-09-12T08:37:00Z
2019-09-12T08:37:00Z
哓番茄
https://www.cnblogs.com/Tohold/
【摘要】document.getElementsByClassName('el-checkbox__input')[0].classList.add('is-disabled') document.getElementsByClassName('el-checkbox__original')[0].disa <a href="https://www.cnblogs.com/Tohold/p/11512638.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/Tohold/p/11331974.html
nginx 刷新显示404 - 哓番茄
HTML5 History 模式 vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载。 如果不想要很丑的 hash,我们可以用路由的 history 模式,这种模式充分利用 history.pushStat
2019-08-10T08:17:00Z
2019-08-10T08:17:00Z
哓番茄
https://www.cnblogs.com/Tohold/
【摘要】HTML5 History 模式 vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载。 如果不想要很丑的 hash,我们可以用路由的 history 模式,这种模式充分利用 history.pushStat <a href="https://www.cnblogs.com/Tohold/p/11331974.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/Tohold/p/11325926.html
Nginx Windows详细安装部署教程 - 哓番茄
一、Nginx简介 Nginx (engine x) 是一个高性能的HTTP和反向代理服务器,也是一个IMAP/POP3/SMTP服务器。Nginx是由伊戈尔·赛索耶夫为俄罗斯访问量第二的Rambler.ru 站点(俄文:Рамблер)开发的. 它也是一种轻量级的Web服务器,可以作为独立的服务器
2019-08-09T03:06:00Z
2019-08-09T03:06:00Z
哓番茄
https://www.cnblogs.com/Tohold/
【摘要】一、Nginx简介 Nginx (engine x) 是一个高性能的HTTP和反向代理服务器,也是一个IMAP/POP3/SMTP服务器。Nginx是由伊戈尔·赛索耶夫为俄罗斯访问量第二的Rambler.ru 站点(俄文:Рамблер)开发的. 它也是一种轻量级的Web服务器,可以作为独立的服务器 <a href="https://www.cnblogs.com/Tohold/p/11325926.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/Tohold/p/10709223.html
VUE组件如何与iframe通信问题 - 哓番茄
ue组件内嵌一个iframe,现在想要在iframe内获取父vue组件内信息,采用的是H5新特性PostMessage来解决跨域问题。 postMessage内涵两个API: onMessage:消息监听 postMessage:消息发送 举个栗子,比如我要改变iframe内字体变成跟父级一样,直接
2019-04-15T02:31:00Z
2019-04-15T02:31:00Z
哓番茄
https://www.cnblogs.com/Tohold/
【摘要】ue组件内嵌一个iframe,现在想要在iframe内获取父vue组件内信息,采用的是H5新特性PostMessage来解决跨域问题。 postMessage内涵两个API: onMessage:消息监听 postMessage:消息发送 举个栗子,比如我要改变iframe内字体变成跟父级一样,直接 <a href="https://www.cnblogs.com/Tohold/p/10709223.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/Tohold/p/10690180.html
判断 iframe 是否加载完毕 - 哓番茄
方法一、jQuery load() 方法二、onreadystatechange 方法三、attachEvent
2019-04-11T07:49:00Z
2019-04-11T07:49:00Z
哓番茄
https://www.cnblogs.com/Tohold/
【摘要】方法一、jQuery load() 方法二、onreadystatechange 方法三、attachEvent <a href="https://www.cnblogs.com/Tohold/p/10690180.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/Tohold/p/10690167.html
iframe跨端口报错 Blocked a frame with origin from accessing a cross-origin frame - 哓番茄
前言 在不同的端口号,甚至是不同的ip进行iframe嵌套的时候,在父页面调用子页面的方法的时候,报错 问题原因 在不同端口号下,不能使用传统的iframe嵌套调用方法。 因为 同源安全策略 你不能用javascript访问一个<iframe>,如果你能做到这一点,那将是一个巨大的安全缺陷。对于同一
2019-04-11T07:48:00Z
2019-04-11T07:48:00Z
哓番茄
https://www.cnblogs.com/Tohold/
【摘要】前言 在不同的端口号,甚至是不同的ip进行iframe嵌套的时候,在父页面调用子页面的方法的时候,报错 问题原因 在不同端口号下,不能使用传统的iframe嵌套调用方法。 因为 同源安全策略 你不能用javascript访问一个<iframe>,如果你能做到这一点,那将是一个巨大的安全缺陷。对于同一 <a href="https://www.cnblogs.com/Tohold/p/10690167.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/Tohold/p/10478443.html
React与Vue - 哓番茄
React和vue都是做组件化的,整体的功能都类似,但是他们的设计思路是有很多不同的。使用react和vue,主要是理解他们的设计思路的不同。 如果你喜欢用(或希望能够用)模板搭建应用,请使用Vue 如果你喜欢简单和“能用就行”的东西,请使用Vue 如果你的应用需要尽可能的小和快,请使用Vue 如果
2019-03-05T09:49:00Z
2019-03-05T09:49:00Z
哓番茄
https://www.cnblogs.com/Tohold/
【摘要】React和vue都是做组件化的,整体的功能都类似,但是他们的设计思路是有很多不同的。使用react和vue,主要是理解他们的设计思路的不同。 如果你喜欢用(或希望能够用)模板搭建应用,请使用Vue 如果你喜欢简单和“能用就行”的东西,请使用Vue 如果你的应用需要尽可能的小和快,请使用Vue 如果 <a href="https://www.cnblogs.com/Tohold/p/10478443.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/Tohold/p/10452869.html
原生js监听input值发生变化 - 哓番茄
原生JS中可以使用oninput,onpropertychange,onchange oninput,onpropertychange,onchange的用法 1) onchange 触发事件必须满足两个条件: a)当前对象属性改变,并且是由键盘或鼠标事件激发的(脚本触发无效) b)当前对象失去焦点
2019-02-28T12:19:00Z
2019-02-28T12:19:00Z
哓番茄
https://www.cnblogs.com/Tohold/
【摘要】原生JS中可以使用oninput,onpropertychange,onchange oninput,onpropertychange,onchange的用法 1) onchange 触发事件必须满足两个条件: a)当前对象属性改变,并且是由键盘或鼠标事件激发的(脚本触发无效) b)当前对象失去焦点 <a href="https://www.cnblogs.com/Tohold/p/10452869.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/Tohold/p/10449933.html
防抖函数与节流函数 - 哓番茄
应用场景 实际工作中,我们经常性的会通过监听某些事件完成对应的需求,比如: 常规实现,以监听 scroll 事件为例 我们先来看一下scroll事件的触发频率 效果如下: 从效果上,我们可以看到,在页面滚动的时候,会在短时间内触发多次绑定事件。 我们知道DOM操作是很耗费性能的,如果在监听中,做了一
2019-02-28T05:51:00Z
2019-02-28T05:51:00Z
哓番茄
https://www.cnblogs.com/Tohold/
【摘要】应用场景 实际工作中,我们经常性的会通过监听某些事件完成对应的需求,比如: 常规实现,以监听 scroll 事件为例 我们先来看一下scroll事件的触发频率 效果如下: 从效果上,我们可以看到,在页面滚动的时候,会在短时间内触发多次绑定事件。 我们知道DOM操作是很耗费性能的,如果在监听中,做了一 <a href="https://www.cnblogs.com/Tohold/p/10449933.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/Tohold/p/10444162.html
原生js 实现better-scroll效果,饿了么菜单内容联动,即粘即用 - 哓番茄
上面只是一个better-scroll基本的功能; git上是我仿饿了么实现购物的一些基本功能,也是下载即用 https://github.com/a653398363/moblieShopping
2019-02-27T07:44:00Z
2019-02-27T07:44:00Z
哓番茄
https://www.cnblogs.com/Tohold/
【摘要】上面只是一个better-scroll基本的功能; git上是我仿饿了么实现购物的一些基本功能,也是下载即用 https://github.com/a653398363/moblieShopping <a href="https://www.cnblogs.com/Tohold/p/10444162.html" target="_blank">阅读全文</a>