bingmoujs的博客

原创 echarts地图下钻+平面3D效果+自定义toolTip+自定义立体数据图层

自定义toolTip比较简单，这里相关背景图使用import导入，关键点是自定义position位置（不自定义会出现安阳定在濮阳的情况），获取地图json中的centorid的坐标（这里的坐标自己可以直接修改位置），通过convertToPixel将地理坐标转换为屏幕坐标，相当好用。自定义立体图层，直接参考代码吧，网上也找过相关的参考，他们的实现方式是主体柱形部分采用左右多层次渐变的方式，要求上下渐变就不太合适。导入到地图组件使用，通过下拉框或者点击地图获取name实现json切换。

原创 CSS中禁用DOM事件

表示元素不应对鼠标事件进行响应。这包括鼠标的点击、悬停和其他鼠标相关的动作。这个属性指定当鼠标指针设备（如鼠标）在元素上时，事件应该有什么表现。

原创 JS操作dom修改Element中DatePicker的数据

let start = document.querySelector('input[placeholder="请选择开始日期"]');

原创 css渐变边框的两种方案

方案一：双层元素，使用一个单独的元素作为渐变色背景放在最下层，上层设置一个透明的 border 和纯色的背景（需要设置 background-clip: padding-box 以避免盖住下层元素的 border）, 上下两层设置相同的。这三个属性，每个属性设置两组值，第一组用于设置border内的单色背景，第二组用于设置border上的渐变色。方案二：单层元素，为其分别设置。

原创 图像热点链接

每一对 "x,y" 坐标都定义了多边形的一个顶点（"0,0" 是图像左上角的坐标）。第一个坐标是矩形的一个角的顶点坐标，另一对坐标是对角的顶点坐标，"0,0" 是图像左上角的坐标。x 和 y 定义了圆心的位置（"0,0" 是图像左上角的坐标），z 是以像素为单位的圆形半径。多边形：shape="poly"，coords="x1,y1,x2,y2,x3,y3,..."矩形：shape="rectangle、rect"，coords="x1,y1,x2,y2"(2)浏览器会忽略超过图像边界范围之外的坐标。

原创 css属性mask遮罩

可以设置 alpha（默认）表示使用遮罩图像的 alpha 通道，或者 luminance 表示使用遮罩图像的亮度。可以设置 repeat（默认）、no-repeat、repeat-x、repeat-y 等。: 定义遮罩的起始位置。可以设置 border-box（默认）、padding-box 或 content-box。: 定义遮罩的位置。可以设置具体的水平和垂直定位值，也可以使用关键字 center 居中对齐。可以设置具体的宽度和高度值，也可以使用关键字 auto 自动缩放。: 定义要用作遮罩的图像。

原创 报错：Unable to preventDefault inside passive event listener invocation

"Unable to preventDefault inside passive event listener invocation"是浏览器开发中的一个警告信息。这个警告通常出现在使用passive事件监听器时，当在事件处理函数中调用preventDefault()方法时会引发该警告，不会实际影响使用，就是控制台一直报红贼难看。1.新建公用文件：browserPatch.js（可以是在common目录或者untils目录，根据自己的项目定）ts转行书写格式同理。

原创 svg怎么用，后端返回svg文件流引入

xml语言，svg使用该语言定义。

原创 this.$forceUpdate()

this.$forceUpdate() 是 Vue.js 的一个实例方法,用于迫使 Vue 实例重新渲染页面。

原创 uniapp触感反馈（短震动）

使用 uni-app 开发一款 app，需求中有一项是点击 触感反馈，查阅了 uni-app 相关文档，发现并没有对应的 api，最开始尝试用“震动”的方式来模拟“触感反馈” , 但是感觉效果并不好，因为在ios中并不支持短震动(15ms), 只支持长震动(400ms)。在这里记录一下最后的处理方式。在文档中只找到了uni.vibrateShort的方法，来开启短震动。uniapp官网文档。

原创 树形数组对象扁平化与反向转换

将树形数组对象扁平化是将具有层级结构的对象数组转换成一个简单的、没有嵌套的对象数组的过程。这通常涉及到递归遍历树结构，并将每个节点添加到一个新的数组中。扁平化数组对象组装成树形数组对象是一个常见的编程问题。这通常涉及到将一组具有父子关系的对象转换成一个树形结构。以下是一个基本的步骤和示例，说明如何实现这一过程。

原创 在js中，字符串“false”会被当做true

在JavaScript中，字符串"false"可以被转换为true，因为JavaScript的弱类型语言允许自动类型转换。在条件判断中，如果字符串"false"被操作符转换为布尔值，非空字符串将被转换为true。这是因为JavaScript中的假值只有以下几种：false、undefined、null、0、NaN和空字符串("")。所以，判断不要懒省事（直接用或者==），使用===校验，免得排查错误加班🤪。

原创 cookie的httpOnly设置与使用问题

设置一个 HttpOnly 的 cookie 意味着该 cookie 不能通过客户端脚本（如 JavaScript）进行访问。这是一个安全措施，通常用于减少某些类型的攻击，如跨站脚本攻击 (XSS)。以下是如何在不同的上下文中设置 HttpOnly cookie：1. 在 HTTP 响应中：如果你正在使用纯 HTTP/HTTPS（没有特定的后端语言或框架），你可以在 HTTP 响应的 Set-Cookie 头中设置 HttpOnly 属性：HttpOnly;

原创 前端可视化大屏自适应终极解决方案autofit.js

因为目前市面上适配工具每一个都无法做到完美的效果，做出来的东西都差不多，最终实现效果都逃不出白边的手掌心，可以解决白边问题的，要么太过于复杂，要么会影响dom结构。如果你使用的地图是基于canvas绘制的，那么有可能会出现偏移现象（往往伴随着拉伸），那么和上面的echarts的解决方式一样，只需要重绘就可以了。解决方式也很简单，autofit.js不需要任何其他辅助工具，如果想体验autofit.js一行搞定，关闭其他插件，且不要使用任何相对单位即可！在你的项目js中使用autofit.init()同上。

原创 echarts地图获取地市省会坐标方法

echarts地图做地图城市添加点、图形标记或柱形时需要获取对应坐标，话不多说，直接上代码。下述在城市添加动态点与图标。

原创 有默认传参的函数额外传自定义参数

原文链接：https://blog.csdn.net/weixin_39423672/article/details/104646860。

原创 el-checkbox-group的全选与反选

思路：在点击全部时按钮组双向绑定赋值全部值，点击按钮组内按钮计算选中按钮数量与按钮组数量对比，判定是否选中全部。

原创 使用element-UI Cascader组件，实现第一级单选选,第二级，第三级，子级可以多选（亲测有效）

2. 在第一层切换的时候，如果第一次分类改变了，把已有的值清空。思路：1.把第一层的复选框去掉。

原创 uniapp文件预览

废话不多说，直接上代码。

原创 判断日期区间或季节等

对象中的月份是从0开始计数的，所以需要对应相应的月份减1。在上面的示例代码中，我们将3月表示为2，九月表示为8。示例中的判断语句可以根据你的实际需求进行修改，比如可以使用。对象来获取当前日期，并通过比较判断是否在指定的日期范围内（如3月16日-9月15日）。同理，季节只需修改日期范围即可。使用JavaScript的。语句来执行不同的操作。

原创 uniapp中使用canvas做审批签名

保存签名时，你可以获取签名图片的临时文件路径，然后进行进一步的处理，例如保存到本地或上传到服务器。在上面的示例中，我们创建了一个Canvas元素，用于绘制签名。我们还添加了两个按钮，一个用于清除签名，另一个用于保存签名。在上面的示例中，我们监听了Canvas的touchstart、touchmove和touchend事件来实现绘制功能。在该页面中创建一个Canvas元素，用于绘制签名。在你的Uni-app项目中创建一个页面或组件，用于签名功能的界面。方法用于清除Canvas内容，在上面的示例中，我们使用。

原创 正则匹配将文本中数字与%变色

【代码】正则匹配将文本中数字与%变色。

原创 手撸列表数据内嵌动态th甘特图

解决思路：这个vue项目中el-table自带样式过多，且不方便动态渲染数据，所以用div模拟了，这里甘特图精度为半天所以用v-if判断了，如果是以时长，计算时长占比做吧。需求如图：日期为后端返回的七天日期，这七天组成由甘特图内嵌展示。

原创 echarts三柱图叠加三柱图解法

解决思路1：实际展示柱体魏三叠加柱的和，那么把每个和计算出来作为一个柱的数组（此柱实际展示），为了tootip方便自定义取数据且不用每个都查询原始数据，做叠加柱为一般、严重、危急（此柱实际透明）。内网开发就不敲代码了😁，下附代码图片。解决思路2：重点还是在tooltip数据展示，原始数据做好总和三主图，其中的一般、严重、危急数据在formatter中通过name去匹配，这种方法也是写完才猛然惊醒，就不做示例了（主要是懒）

原创 el-upload文件上传改造

【代码】el-upload文件上传改造。

转载 el-table可编辑表格

http://t.csdn.cn/FWth2

原创 vuex开启命名空间

在Vue.js应用中，Vuex是一种用于状态管理的库，它允许您在应用中有效地管理和共享状态。Vuex中的"命名空间"是一种将模块内部的状态、操作、getter等封装到特定的命名空间下，以避免不同模块之间的命名冲突。下面我将向您展示如何在Vuex中开启命名空间以及如何使用它。

原创 uniapp动态底部tab栏

在根目录创建store文件夹,在store文件夹下创建module文件夹和创建index.js文件,在module文件夹下面创建tabBarModule.js文件。在tabBarModule.js文件中编写vuex代码,然后在store文件夹下面的index.js文件中引入tabBarModule.js文件作为一个模块。创建一个js文件用来存放所有的tabbar,不同的数组表示不同的tabbar组合。新建一个tabbar.js文件，将不同的tabbar组合用不同的数组表示出来。

原创 vue组件刷新

http://t.csdn.cn/Z2o78

原创 颜色渐变：容器背景从中间向右逐渐透明的效果

以上代码将容器的宽度设置为500像素，高度设置为200像素，并且创建了一个水平渐变背景。要实现容器背景从中间向右逐渐透明的效果，您可以使用CSS来设置容器的背景。渐变从50%处开始，即中间位置，逐渐向右边透明。表示白色完全不透明，

原创 echarts动态换图环绕效果

原创 子组件继承父组件样式（穿透scoped）

属性会将父组件的样式限定在父组件的作用域内，在子组件中无法直接访问到父组件的样式。在子组件的样式中，导入父组件的样式文件，并使用。属性，子组件将无法直接继承父组件的样式。元素，并继承父组件的样式。如果你希望在有父组件有。在子组件的样式中，使用。来继承父组件的样式。

原创 CSRF（跨站请求伪造）

然后，您可以使用 Vue.js 将返回的 CSRF Token 存储在 Vuex 状态管理库(或简单地保存在 Vue 实例中) 中。(Spring Security JWT) 来生成 CSRF Token 并将其放入 Cookie 中。然后，您可以通过发送 AJAX 请求来获取并存储该值。您现在可以通过存储在 Vuex 状态管理库(或Vue实例中) 中生成的 CSRF Token 来安全地防范CSRF攻击。在使用 Java Spring Boot 后端框架中，您可以使用。

原创 bootstrap table实现合并单元格效果(亲测有效)

在bootstrapTable加载成功执行，如。

原创 使用 element-ui 隐藏组件 el-scrollbar 美化滚动条

刚好项目里面一直在使用的都是element，因为原生的滚动条太丑了，发现elementui中有个隐藏的组件，就是element官网使用的滚动条，可以优化滚动条样式。亲测可用，鼠标经过的时候才会显示，简单美观。

原创 elementUI弹窗动画

弹出从右上角由小变大。

原创 echarts地图容器加载充满父容器

如果以上方法都无法解决问题，可能是因为外部容器或地图容器的父元素设置了固定的宽度或高度，导致无法充满整个容器。此时需要检查父元素的样式设置，并尝试修改父元素的样式。

原创 elementUI的table表格宽度自适应（不换行不隐藏）

elementUI的table表格宽度自适应（不换行不隐藏）注册公共方法utils代码。

原创 全局zomm缩放后echarts鼠标偏移的问题(鼠标触发提示框位置有偏差)

全局zomm缩放后echarts鼠标偏移的问题最近项目里需要做很多图表，但所有的图表都有一个问题，就是鼠标hover触发位置与鼠标实际位置有偏差。

转载 vue绑定事件

3、@click.self：只有在点击所在的当前这一级标签的时候才会触发事件，点击它里面的子元素标签不会触发事件。【只有在e.target = e.currentTarget的时候才执行，也就是触发事件的元素和绑定事件的元素相等的时候才会执行。1、@click.prevent：阻止事件的默认行为（在后面依然看可以写click要触发的函数：@click.prevent="handle"）4、@click.once：绑定的事件只会执行一次，执行后这个事件会解绑，不会再被执行。