![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
JavaScript
facing-screen
知识,是一种信仰。(此博客为个人日志,如有帮助点赞是美德;如有谬误,欢迎斧正。)
展开
-
Vue3 中的5种常见的组件传值方式,Vue3事件总线(无需插件)
Vue3 中常见的组件传值方式:Props:这是 Vue 中最常见的组件传值方式,即在父组件中定义 prop 并将数据传递给子组件。Event Bus:可以通过事件总线在两个组件之间进行通信,即定义一个中央事件处理器,父组件和子组件通过它进行通信。Provide/Inject:可以在父组件中提供数据,并在子组件中注入这些数据,从而实现组件传值。Slots:可以在父组件中嵌入子组件,并在子组件中使用插槽传递数据。Vuex:Vuex 是 Vue 官方推荐的状态管理工具,也可以用于组件之间的数据通信。原创 2023-02-13 01:09:41 · 981 阅读 · 1 评论 -
Vue3+Ant-design项目启用ts/typescript
搜索了一圈很多说修改配置文件的,其实只需要通过如下命令安装@vue/cli-plugin-typescript即可启用ts支持。原创 2022-10-17 14:10:28 · 1164 阅读 · 2 评论 -
关于Cesium渲染PrimitiveCollection和图层的树状管理的问题
我们知道,Cesium.Scene有一个成员叫primitives,它是一个PrimitiveCollection的实例,我们可以add新的Cesium.Primitive的实例进去,它会自动将之渲染到场景里。但是当我们需要进行图形集管理的时候就不能把所有的primitive添加到这里面了,于是Cesium新人就有一个问题:怎么渲染自己new的PrimitiveCollection?原创 2022-10-11 20:40:45 · 976 阅读 · 0 评论 -
Reactjs之Vue用户0基础上手Reactjs笔记
提示:本文站在vue用户的角度通过对比的方式对常用场景进行介绍和总结,以便快速上手react,深度有限,欢迎讨论交流。Vue: 一个(包含data、生命周期钩子、methods、template等特殊属性的)JavaScript对象;React: 一个函数或一个(继承React.Component类并且包含一个render方法的)类。render函数的返回值为被括号包裹的jsx。jsx:具有 JavaScript 的全部功能的xml模板语言,和vue的template里的东西很像。Vue:React:官网案原创 2022-06-03 15:00:00 · 176 阅读 · 0 评论 -
vue前后端分离项目部署,apache反向代理配置
vue前后端分离项目部署,vue前后端分离项目必然会出现前后端不同域问题,当然,你可以在前端拼接目标域并在后端处理好跨域,但更优雅的方式是给apache配置反向代理。部署步骤:把npm run build 构建生产的文件(dist目录里的所有文件)拷贝到服务器的某目录下; 在apache的配置文件httpd.conf里添加一个虚拟主机(这个很简单,可以参考下面示例的VirtualHost标签转载 2022-03-16 17:45:06 · 1515 阅读 · 0 评论 -
wordpress插件开发时如何通过js调用图库/媒体选择器的问题
wordpress插件开发时如何通过js调用图库/媒体选择器的问题原创 2022-03-06 22:51:37 · 558 阅读 · 0 评论 -
js获取本地图片文件的原始宽高尺寸
<!-- 关键api:URL.createObjectURL(object) object:File 对象或 Blob 对象 参考:https://developer.mozilla.org/zh-CN/docs/Web/API/URL/createObjectURL --><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <.原创 2021-04-16 17:09:23 · 1942 阅读 · 2 评论 -
eslint 禁用命令
eslint 禁用命令 1 2 3 4 5 6 /* eslint-disable */ ESLint 在校验的时候就会跳过后面的代码 还可以在注释后加入详细规则,这样就能避开指定的校验规则了 /* eslint-disable no-new */ 常用:'rules': {"comma-dangle": ["error","never"],//是否允...转载 2021-04-09 14:12:26 · 594 阅读 · 1 评论 -
前端网页/html播放mp4、avi、flv等视频,兼容ie7/7+ 调用flash/windows media player播放视频
废话不多说,先总结下亲测的几种方法:video标签法(最常用,兼容现代浏览器、ie9/9+;支持格式:MP4、ogg、webm) flash大法(兼容大多数浏览器、ie7/7+,逐渐被淘汰,chrome目前已经默认禁用flash;支持格式:MP4其他没测) wmp大法(全称windows media player,只有ie7/7+支持;支持格式:MP4、avi其他没测)注:flash方法播放视频时flvplayer.swf文件要确保能用,我就被这货坑了这里给一个: https://pan.ba原创 2021-03-23 17:13:58 · 11029 阅读 · 5 评论 -
js判断对象任意深度的key属性是否存在,js的iset方法
// isset.jsmodule.exports = (obj, keyPath) => { const keys = keyPath.split('.'); for (const idx in keys) { if (Object.hasOwnProperty.call(obj, keys[idx])) { obj = obj[keys[idx]]; } else { return false;原创 2020-11-18 15:32:11 · 879 阅读 · 0 评论 -
krpano.js导出为模块方便vue等框架使用的问题
作为一个全栈(干),前端commonjs amd 那些东西没有研究过,一直用es6内置的export和import(不香吗?)。最近写一个全景项目,有一个krpano.js文件官网案例是标签引入,可我的项目是基于vue,无法按照官网的案例使用。我尝试使用export default导出里面的关键函数embedpano,但是会出现一些怪异的报错。最后在so上找到了一个实现,做了点改动就有了下面这段代码:(function (root, factory) { if (typeof module原创 2020-09-30 09:00:30 · 478 阅读 · 1 评论 -
element-ui $prompt输入弹框和$confirm确认弹框用法--输入框默认值、校验、阻止关闭等问题
element-ui $prompt输入框弹窗用法实例: this.$prompt('请输入文件夹名称:','提示',{ confirmButtonText: '确定', cancelButtonText: '取消' }).then(({value}) => { console.log(value); utils.aja原创 2020-09-02 10:41:25 · 43422 阅读 · 3 评论 -
vue属性/子属性监听watch的几种方法
特殊字符法 特殊字符+deep法 直接deep法 常规法 计算属性法(这里没写,有空了再补) 直接用如下代码示例吧: data(){ return { goBackHeader:'添加排班', scheduleForm:{ scheduleName:null, scheduleSimpleName:null, ...原创 2020-05-26 16:24:15 · 585 阅读 · 0 评论 -
vue报错:Property or method "xxx" is not defined on the instance but referenced during render.
vue报错:Property or method "attendanceDetaill" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.原因:attendanceDetail原创 2020-05-14 12:02:59 · 722 阅读 · 0 评论 -
nodejs获取一个可用的端口,检查端口是否被占用(完美方案)
nodejs检查端口是否被占用,先看个运行效果:PS D:\software\wamp\www\subtitleGo> node t.js8022 ====被占用用====:8023 ====被占用用====:8024 ====被占用用====:8025 ====端口:8025可用====没错,它会一直递增检测端口是否可用,直到可用。代码:const ne...原创 2020-04-05 14:00:34 · 7323 阅读 · 1 评论 -
layui动态渲染select表单、初始化默认值、change事件监听等
layui动态渲染,初始化默认值 var html = ''; html += '<select name="" lay-search lay-verify="required" >'; data.forEach(function(elem){ if(elem['id'] == projectTypeId){ html += '<option selec...原创 2020-03-18 10:27:50 · 3560 阅读 · 0 评论 -
开发浏览器插件/扩展应用开发
今天尝试了下开发浏览器扩展,在qq浏览器上测试的,其他的也类似目录:配置:// manifest.json{ "name": "ADKILL", "version": "1.0", "manifest_version": 2, "description": "hello Ad ko", "icons": { ...原创 2019-12-30 16:36:10 · 1230 阅读 · 2 评论 -
jwt的个人理解
概念:jwt全名json web token,是一种web登录验证和授权技术官网debug:#debug应用场景: 授权这是使用JWT最常见的场景。一旦用户登录,每个后续请求将包括JWT,允许用户访问允许使用该令牌的路由、服务和资源。单点登录是当今广泛使用JWT的一个特性,因为它具有较小的开销和易于跨不同域使用的能力。 信息交换JSON Web令牌是安全地在各方之间传输...原创 2019-11-24 16:57:21 · 274 阅读 · 0 评论 -
js多线程new worker报错cannot be accessed from origin 问题
----Web Workers 为 Web 前端网页上的脚本提供了一种能在后台进程中运行的方法。一旦它被创建,Web Workers 就可以通过 postMessage 向任务池发送任务请求,执行完之后再通过 postMessage 返回消息给创建者指定的事件处理程序 ( 通过 onmessage 进行捕获 )。more》----错误:Uncaught DOMException: ...原创 2019-11-22 10:17:51 · 4701 阅读 · 0 评论 -
js录制系统/麦克风声音(基于electron)
最近想用electron写一个和音视频相关的软件,尽管在写之前都想好了要用哪些技术,但依然写得很艰难,今天对相关知识的个人理解做个记录和整理。先看几个浏览器api1、AudioContext构造器AudioContext接口表示由音频模块连接而成的音频处理上下文;它可以控制它所包含的节点的创建,以及音频处理、解码操作的执行。做任何事情之前都要先创建AudioContext对象,因为......原创 2019-11-15 17:58:50 · 8720 阅读 · 14 评论 -
jstree上手文档 [初始化时默认选中、全部展开、获取实例的数据等问题]
jstree官网:https://www.jstree.com/-------------------实例化tree.jstree()默认样式:var container = $('#xxx'); //container:tree的目标容器(jqery对象)container.jstree({ 'plugins': ["st...原创 2019-07-25 15:50:57 · 1715 阅读 · 0 评论 -
[笔记]image对象如何添加class
1、image对象可以添class,但不能以属性.class的方法添加,而因该把他当成一个节点2、JS添加和删除class名 添加:节点.classList.add("类名"); 删除:节点.classList.remove("类名");添加有下面这三种简单语句。 document.getElementsByTagName('body')[0].className = 'sno...原创 2018-02-25 00:36:12 · 2470 阅读 · 0 评论 -
js移动端判断跳转
js移动端判断跳转,只一行默默收藏if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))...转载 2018-02-24 18:55:42 · 376 阅读 · 0 评论 -
用js实现的刷新页面
一、先来看一个简单的例子: 下面以三个页面分别命名为frame.html、top.html、bottom.html为例来具体说明如何做。 frame.html 由上(top.html)下(bottom.html)两个页面组成,代码如下:复制代码 代码如下:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <...转载 2018-02-11 20:08:09 · 222 阅读 · 0 评论 -
淘宝触屏版适配代码,趴下来以后写移动端页面的时候可以参考下
顺便说几个属性:1、window.devicePixelRatio 它的官方的定义为:设备物理像素和设备独立像素的比例,也就是 devicePixelRatio = 物理像素 / 独立像素。css中的px就可以看做是设备的独立像素,所以通过devicePixelRatio,我们可以知道该设备上一个css像素代表多少个物理像素。例如,在Retina屏的iphone上,devicePixelRa...转载 2018-02-03 22:41:08 · 1255 阅读 · 0 评论 -
JS事件监听手机屏幕触摸事件 Touch
JS移动客户端--触屏滑动事件移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成。但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件。处理touch事件能跟踪到屏幕滑动的每根手指。以下是四种touch事件touchstart: //手指放到屏幕上时触发touchmove: //手指在屏幕...转载 2018-02-09 22:45:11 · 6658 阅读 · 0 评论 -
html中的em和rem到底该如何使用,自适应效果中如何确定文字大小/字号?
如今手机屏幕繁多,自适应效果中如何确定文字大小/字号?em rem vm vw vh你都了解吗? 先说说em和rem em:继承父级的,假设html的font-size默认为16px,body字体大小定义为50%,那么在body里字体大小就是1em=8px了。可当你又定义了一个div,然后把字体设置成了50%,请问,现在div下的1em等于多少?因为继承了父级的值,现在这个di转载 2018-02-03 18:42:47 · 1001 阅读 · 0 评论 -
[笔记]关于JavaScript定时器如何清除和重启
定时器的清除和重启方法://var t=setInterval(fun1,500) //fun1是你的函数var fun1=function(){ //写入你的函数;}clearInterval(t)//清除定时器t=setInterval(fun1,500)//重新开始定时器提示:要先清除,后设置,否则定时器永远清除不了。例子:一个可复用的延时显隐下拉菜单的j...原创 2018-02-03 17:15:05 · 9525 阅读 · 0 评论 -
如何利用JS判断当前来路域名并跳转到指定页面
1.如何利用JS判断当前来路域名并跳转到指定页面var href = location.href ; //获取当前请求路径if(href.indexOf("baidu")>-1){ //跳转 location.href = "http://baidu.com";}var href = location.href ;if(href.indexOf("baidu")>...原创 2017-09-11 00:53:38 · 22692 阅读 · 1 评论 -
关于 如何判断-浏览器首次访问判断
关于 如何判断-浏览器首次访问判断没看懂,只会用,先记下来,~汗!!!!页面首次访问判断 GO //1浏览器关闭则window.name为空,可以实现跨域,数据传递 alert((window.name == "" ? "是" : "不是") + "第一次开这个窗口!")window.name = "00";//cookie判断func原创 2017-08-14 23:00:02 · 1609 阅读 · 0 评论 -
前端自动打包工具webpack的安装和使用
一、准备要使用webpack工具,最好了解一些基础的文件目录操作的命令行,win all里的一些常用的命令行http://blog.csdn.net/qq_36110571/article/details/79338914二、安装webpack先去node官网下载安装node.js,然后win+R cmd 运行命令提示符;输入npm webpack -g # 回车等...原创 2018-02-19 23:33:19 · 1968 阅读 · 0 评论 -
移动开发框架,Hammer.js 移动设备触摸手势js库
原文:https://www.cnblogs.com/zhwl/p/3525238.htmlhammer.js是一个多点触摸手势库,能够为网页加入Tap、Double Tap、Swipe、Hold、Pinch、Drag等多点触摸事件,免去自己监听底层touchstart、touchmove、touchend事件并且写一大堆判断逻辑的痛苦。hammer.js不但支持触摸屏设备的浏览器,在桌面浏览器上...转载 2018-03-05 22:44:43 · 335 阅读 · 0 评论 -
面试的信心来源于过硬的基础 viewport、跨域、 渲染优化、数组乱序、盒子垂直水平居中、meta、消除transition闪屏、JS 判断设备来源
原文:面试的信心来源于过硬的基础在过去的一年很多人不满于公司没有福利、人际关系不好相处、没有发展前途的境遇等等,想着在开年来换一份工作来重新开始自己,那么 你 准备好了吗?下面是本人整理的一份面试材料,本想自己用的,但是新年第一天 公司突然给了我个惊喜,涨工资了!!!1、 viewport<meta name="viewport" content="width=device...转载 2018-04-19 21:38:01 · 418 阅读 · 0 评论 -
一个用原生JavaScript实现的日历小工具,开箱即用
----------------用原生JavaScript实现的一个日历小工具,开箱即用,可用于做签到记录、日程等显示控件,具体自己发挥啦效果如下图,可以自行美化 >>点击体验<<<div id="signinRecord" class="">err</div><style>.selectedDate{ ...原创 2019-04-25 00:08:23 · 314 阅读 · 0 评论 -
requirejs的简单使用,requirejs报错Uncaught Error: Mismatched anonymous define() module: …
在使用js模块加载库requirejs时,按照官网[http://www.requirejs.cn]的示例引入jQuery:// js/lib/main.js:require.config({ baseUrl:'js/lib', paths:{ jquery:'jquery.min' }});define(['jquery'], func...原创 2019-01-10 22:10:06 · 15942 阅读 · 0 评论 -
编译nwjs/node-webkit可用的sqlite3简单靠谱的解决方案/在nwjs里使用sqlite
大胸弟,如果你和我一样把官方给的方法和网上的文章都试过了还是编译不过,但又必须在nwjs里使用sqlite数据库,那么请继续往下看。我的解决方法就是:不编译来吧,拥抱html5吧,具体来说就是那个叫websql的东西,操作简单,神清气爽/*Web SQL Database的API并不是HTM5规范的一部分而是自己拥有独立规范;可以在新版的 Safari, Chrome 和 Oper...原创 2018-12-01 20:35:10 · 1853 阅读 · 1 评论 -
关于用nw(node-webkit)开发windows桌面软件遇到的问题,包括nw项目打包、win10 C盘读写文件没权限等问题的解决方法
问题背景作为一只只懂web的php猿,突然有一天老板和你说:“我们最近需要开发一个桌面软件,它的功能很简单,我相信你能搞定它。”是熬夜去啃c++呢还是和老板说我搞不了这个,我想辞职。当然,作为一个由前端刚刚转入后端我还有第三条路,用nw试试呗。当时是有3个方案的:1、php的winbinder度之发现官网都打不开了 [http://winbinder.org/这个 ],下一个;2、ph...原创 2020-02-26 17:54:59 · 1874 阅读 · 3 评论 -
HTML用JS导出Excel的五种方法,无需js-xlsx库
原文地址:https://blog.csdn.net/aa122273328/article/details/50388673 这五种方法前四种方法只支持IE浏览器,最后一个方法支持当前主流的浏览器(火狐,IE,Chrome,Opera,Safari)<!DOCTYPE html><html><head lang="en"> <met...转载 2018-10-02 13:55:22 · 2747 阅读 · 0 评论 -
学习nodejs的一点笔记
>>1、模块:一个文件即为一个模块1)global可以声明全局变量 (跨模块) 例如:global a = 100; console.log(global.a); //输出1002)module对象:当前模块的filename、子模块等信息3)module.expors.obj //将obj对象声明为全局对象4)__fil...原创 2018-08-22 20:44:09 · 180 阅读 · 0 评论 -
JS 对象(Object)和字符串(String)互转方法、JS遍历对象
原文:https://www.cnblogs.com/fps2tao/p/8723164.html1、对象(Object)和字符串(String)互转利用原生JSON对象,将对象转为字符串var jsObj = {};jsObj.testArray = [1,2,3,4,5];jsObj.name = 'CSS3';jsObj.date = '8 May, 2011';var...转载 2018-08-30 22:08:12 · 2921 阅读 · 0 评论