wzp20092009的博客

摘要 本文介绍了一个基于Element UI的自定义树形选择组件实现方案。该组件通过组合el-input、el-popover和el-tree组件，实现了类似下拉树的功能，避免了使用级联选择器。主要特点包括：支持点击输入框或图标展开/收起树形菜单、可配置节点过滤功能、自定义节点渲染样式、点击外部区域关闭菜单等。组件通过v-model进行双向绑定，并提供了丰富的配置选项如禁用状态、占位文本、节点键名等。核心逻辑包括处理节点点击事件、设置当前选中值、同步显示标签等，为表单中需要树形选择但不想使用级联选择的场景提

ECharts 5.x 地图数据缺失问题解决方案 升级到 ECharts 5.x 后，发现地图模块报错找不到中国地图文件，原因是新版本移除了内置地图 JSON 文件。解决方案有两种：1) 手动下载中国地图 JSON 文件并注册；2) 通过 npm 安装相关依赖包（如 echarts-china-provinces-pkg）后引入地图数据。两种方法都需要使用 registerMap 方法注册地图数据。文中提供了地图 JSON 文件下载链接和代码示例。

js监听浏览器尺寸做缩放适配大屏或者系统

解决iframe加载时白色闪屏问题的方案 针对深色背景系统中iframe加载时出现白色闪屏的问题，文章提出以下解决方案： 设置iframe背景透明：通过CSS设置background-color: transparent 允许透明属性：在iframe标签添加allowtransparency="true" 加载时显示优化：使用visibility:hidden配合onload事件，待加载完成后再显示 最终方案同时应用以上三种方法，确保在不同环境下都能有效解决问题。

使用dompurify修复xss跨站脚本攻击漏洞。

通过控制台命令交互生成前端代码尝试。

前端文件下载方法(包含get和post)

在网页端播放媒体，如video、audio等标签，在频繁切换组件播放时经常出现The play() request was interrupted等错误提示，可以延时执行修复该问题

谷歌浏览器 video 元素设置 autoplay，我们原意是希望页面加载时自动播放，但实际上并没有自动播放，在控制台报错如下：Uncaught (in promise) DOMException: play() failed because the user didn’t interact with the document first.这里的意思是，是因为用户没有先和网页交互所以播放失败。

BroadcastChannel可以使不同浏览器窗口，Tab 页，frame 或者 iframe 下的不同文档之间可以通过相互通信。

新写一个正则，比如，在调用exec和test方法时交替返回true和false，乍一看还以为正则出了什么问题。

在某个工具类方法中定义该方法，兼容不同浏览器处理。

js提取字符串中的地址或者域名

这一版主要讲EventBus在VUE2中的使用。

loading加载动画

1. 问题在用 百度地图 3.0 api开发时发现，地图有时候有些瓦片图片加载不出来，最后导致白块出现2. 问题排查通过代码调试，最后发现是使用 map.setMapStyle 方法后出现，于是去 百度地图api 查阅相关方法使用，目前所使用的 3.0 的api 中只找到了 setMapStyleV2 的使用方法.setMapStyleV2(config: Object) 返回值(none) 设置个性化地图，参数为个性化配置对象导致问题用法：map.setMapStyle(mapSty

1. 安装 http 和 httpsnpm install http -Snpm install https =S2. 爬取数据处理const http = require('http');const https = require('https'); const getUrlData = async(url, type) => { let request = type === 'https' ? https : http; return new Promise((reso

问题已知两个经纬度点，求两点之间距离代码// 计算两点之间直线距离const algorithm = (point1, point2)=> { let [x1, y1] = point1; let [x2, y2] = point2; let Lat1 = rad(x1); // 纬度 let Lat2 = rad(x2); let a = Lat1 - Lat2;// 两点纬度之差 let b = rad(y1) - rad(y2); // 经度之差

问题已知两点(x1, y1) 和 (x2, y2)，求某点(x, y) 到两点确定的直线的距离代码通过海伦公式+三角形面积公式求高，即点到已知两点距离function getPointToLineDistance2(list, point){ let [[x1, y1], [x2, y2]] = list; let [x, y] = point; let b = Math.sqrt((x - x1) * (x - x1) + (y - y1) * (y - y1));

问题已知两点(x1, y1) 和 (x2, y2)，求某点(x, y) 到两点确定的直线的距离代码// 获取点到直线的距离function getPointToLineDistance(list, point){ let [[x1, y1], [x2, y2]] = list; let [x, y] = point; if(x1 === x2){ return Math.abs(x - x1); } else if(y1 === y2){

visibilitychange 事件说明visibilitychange 当其选项卡的内容变得可见或被隐藏时，会在文档上触发 visibilitychange (能见度更改)事件。具体使用document.addEventListener("visibilitychange", function() { if (document.visibilityState === 'visible') { // 浏览器选项卡可见 } else { // 浏览器选项卡不可见 }

其实这文跟上文 js判断点在连续折线哪一侧 有关系，主要用来测试台风点是否在警戒线以内1. 先准备测试数据let arr1 = [ [104, 0], [106, 0], [105, -1], [105, 1], [104, -1], [106, 1], [112, 4.5], [114, 4.5], [113, 3.5], [113, 5.5], [114, 3.5], [111, 5.5], [118, 11], [120, 11], [119, 10], [119,

其实这文跟上文 百度地图画24h和48h台风警戒线 有关系，主要用来判断台风点是否在警戒线以内1. 先判断点在两点坐标推导的直线哪一侧/**** @params { array } list 用来推导直线方法** @params { array } point 被用于判断在直线哪一侧的点** @description 判断点在线条左侧(小于0)还是右侧(大于0)*/function judgePointSideIn(list, point) { let [[x1, y1], [x2,

首先，感谢 百度地图API1. 台风警戒线坐标// 警戒线坐标数据let earlyWarnLine = [{ key: 24, name: '小时警戒线', color: 'red', list: [ [105, 0], [113, 4.5], [119, 11], [119, 18], [127, 22], [127, 34] ]},{

先从modal的配置中移除遮罩层<!-- 需要在外面的modal需要设置参数data-backgrop为false，这样就不会显示遮罩层了 --><div class="modal" id="topMenu-modal" tabindex="-1" role="dialog" data-backdrop="false"> <div class="modal-dialog" role="document"> <div class="m.

通过循环处理function getUrlParam(variable){ var query = window.location.search.substring(1); var vars = query.split("&"); for (var i=0;i<vars.length;i++) { var pair = vars[i].split("="); if(pair[0] == variable){return pair[1];} }.

// creates a global "addWheelListener" method// example: addWheelListener( elem, function( e ) { console.log( e.deltaY ); e.preventDefault(); } );(function(window, document) { var prefix = ''; var _addEventListener; var _removeEventListener; // v

export default { methods: { copy(value) { try{ const textarea = document.createElement('textarea'); document.body.appendChild(textarea); // 添加到body中 textarea.value = value; // 给dom设置值 textarea.select(); // 设置选中 const copyFalse = d

1. 封装JSON请求方法1> 安装 axiosnpm install axios2> 引入并封装axios请求路径 src/utils/requestJSON.jsimport axios from 'axios';// create an axios instanceconst service = axios.create({ method: 'get', crossDomain: true, dataType: 'json', cache: false,

代码很简单，获取 <link> 标签中 rel 相关设置的值为 icon 的标签元素，将 icon 地址的值赋给该标签的属性 href。// 比如某个路径 browerIconUrldocument.querySelectAll("link[rel*='icon']").forEach(item => { item.href = browserIconUrl;})...

概念-路由对象属性$route.query 一个 key/value 对象，表示 URL 查询参数。$route.path 字符串，对应当前路由的路径$route.fullPath 完成解析后的 URL，包含查询参数和 hash 的完整路径。分析当浏览器刷新时，触发 导航守卫 beforeEach方法等，只有在 next(path: to.path) 时改变了路由参数解决方案将 next(path: to.path) 修改为 next(path: to.fullPath)，这样就不会发生

Vue 3.0 终于在上2020-09-18发布了，使用了Typescript 进行了大规模的重构，带来了 Composition API RFC 版本，类似 React Hook 一样的写Vue，可以自定义自己的hook ，让使用者更加的灵活。vue 3.0 部分新特性。setup()ref()reactive()isRef()toRefs()computed()watch()LifeCycle Hooks(新的生命周期)Template refsglobalProperties

前言因为项目需要在vue用到websocket所以找了很多帖子与资料，但是原生的需要封装逻辑比较复杂，对于仅仅是使用学习成本比较大，第三方插件的话我找的有vue-socket.io、socket.io、socket.io-client，其中vue-socket.io与socket.io我使用时都遇到个问题，就是全局组件挂载后没有找到io实例，找到了io实例与相关方法但是却无法使用，例如on方法，使用时无任何报错，但是控制台没打印后台传输的数据，而最后找到了socket.io-client直接挂载io实例使

场景vue项目路由的路径由参数变量组成，虽然切换路径，但页面并未发生变化import User from '@/components/User';const router = new VueRouter({ routes: [ // 动态路径参数 以冒号开头 { path: '/user/:userId', component: User } ]})vue-router官方解释提醒一下，当使用路由参数时，例如从 /user/foo导航到 /user/bar，原来的

定义reduce() 方法对数组种的每个元素执行一个由您提供的 reducer (升序执行)，将其接口汇总为单个返回值。语法arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])相关参数callback 执行数组种每个值(如果没有提供 initialValue 则第一个值除外), 包含四个参数：accumulator 累加器累计回调的返回值，是上一次调用回调时返回的累计值，或

const modulesFiles = require.context('./modules', true, /\.js$/);// require.context accepts three params, search directory、whether search subdirectories and a regular expression to match files// you do not need `import app from './modules/app'`// it wi

原因babel-eslint版本过高解决修改 package.json中指定babel-eslint版本，然后运行相关命令# 移除整个依赖rm -rf node_modules# 清空缓存npm cache clean# 安装依赖npm install# 再次清空缓存npm cache clean# npm cache clean -force 强制清空缓存或者# 移除指定依赖npm uninstall babel-eslint# 清空缓存npm cache cle.

定位到vue文件问题所在位置export default { created() { // 告警所在 import(`@/md/${file}`).then(moduleFile => { // }).catch(err => {}); }}原因webpack 版本问题，webpack4中动态import不支持变量方式解决办法用 require方法替代 importexport default { created() { // 告警所在 requ.

在 vue 项目引入 md 文件 中安装了 html-loader 报错。原因当前项目安装的 html-loader版本过高，需要调整 html-loader版本解决办法先移除之前的版本npm uninstall html-loader安装较稳定版本npm i html-loader@1.3.0 --save...

1. 安装相关依赖npm i html-loader markdown-loader --save需要注意的是，请安装一些稳定的版本，避免报错{ "html-loader": "^1.3.0", "markdown-loader": "^5.1.0"}2. 配置md文件解析规则vue.config.js 中增加配置加载md文件的规则，如果没有则在项目根目录下新建该配置。// All configuration item explanations can be find in // h