- 博客(13)
- 收藏
- 关注
RSS订阅原创 Vue实现文字自动打点自动添加title气泡效果
需求是这样的,表格中有一列信息,字符长度有短有长,最大宽度限制在300px,溢出自动打点,但是又不想因此导致用户看不全信息,就想在文字溢出打点的时候出现一个悬浮效果,展示出全部的字段,同时对已经展示完全的字段不进行此操作,原本想通过bubble气泡组件来实现,但是在大量数据面前,这种组件的性能开销过大,最后决定利用html当中现有的title 属性进行悬浮内容的展示.
2023-04-23 23:02:00
628
原创 使用D3绘制地图同时解决地图上色 fitExtent失效的问题
先看一下效果图:[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ENi85nYQ-1678532273754)(null)]首先,D3绘制地图的数据可以从获取:[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jyYrL5p3-1678532273772)(null)]然后,地图常用的投影方式中,我选择使用墨卡托投影,这也是百度,高德地图常用的投影方式,我们需要从数据平台获取一份GeoJson格式的数据,json数据可以直接当成。
2023-03-11 19:02:40
538
原创 基于Promise实现在滚动结束后执行代码的方法
如果超过20帧 没有发生滚动,就认为滚动已经停止(设置成20是因为有时候会因为掉帧原因导致滚动并非连续的) 同时监听事件的上限时500帧,超过也会退出监听使用requestAnimationFrame执行监听函数,进行累加,滚动也是动画的一种,滚动行为与帧数一般是同步的
2023-03-01 21:56:10
253
原创 hover修改子元素样式不生效
遇到需求: 想要实现父元素hover时,两个子元素字体颜色都变化,但是一开始怎么设置都不生效.方案,字体颜色怎么都不会变,使用第二种方案就可以了./* 方法1 这样是无效的 *//* 方法2 这样使有效的 */此前已经有样式覆盖,
2023-02-22 23:36:59
1235
原创 Axios取消请求(AbortController)
从 `v0.22.0` 开始，Axios 支持以 fetch API 方式—— [`AbortController`](https://developer.mozilla.org/en-US/docs/Web/API/AbortController) 取消请求：```javascriptconst controller = new AbortController();axios.get('/foo/bar', { signal: controller.signal}).then(funct
2023-02-16 21:39:45
2618
1
原创 解决Safari浏览器使用SVG foreignObject 不生效,错位的问题
foreignObject 在safari下渲染,有可能会遇到以下问题: 节点内的元素被渲染到父 SVG 的坐标 0,0（左上角）,这是由于 Safari 中的一个错误，该错误会影响 foreignObject 根据顶部 SVG 而不是外部对象本身来计算渲染位置。某些样式会导致这个问题:
2023-02-16 21:16:19
1114
原创 使用 CSS3 新特性 :is() , @layer 覆写 !important
设计想要在SVG绘图中做折行打点出省略号的功能,先前的代码需要在IE环境下运行,使用JS函数进行分割替换打点,然后还要手动定位,很是麻烦,不过当时的样式不是很复杂,还要适配IE就迁就了,这次除了两行打点功能之外, 还要考虑到整体内容做一个自适应居中效果,而且不考虑IE适配,索性使用。只是一个普通的XML元素,不具备HTML的含义,传统的开发中,我们写的HTML语法本身具有默认格式,在SVG这种XML语言中,div没有特殊含义,所以需要为他指明HTMl的命名空间.具有四个属性,分别为。如果不指定命名空间,
2023-02-13 21:51:52
267
原创 SVG中插入HTML标签
设计想要在SVG绘图中做折行打点出省略号的功能,先前的代码需要在IE环境下运行,使用JS函数进行分割替换打点,然后还要手动定位,很是麻烦,不过当时的样式不是很复杂,还要适配IE就迁就了,这次除了两行打点功能之外, 还要考虑到整体内容做一个自适应居中效果,而且不考虑IE适配,索性使用。只是一个普通的XML元素,不具备HTML的含义,传统的开发中,我们写的HTML语法本身具有默认格式,在SVG这种XML语言中,div没有特殊含义,所以需要为他指明HTMl的命名空间.具有四个属性,分别为。如果不指定命名空间,
2023-02-12 12:22:04
1677
原创 批量转译压缩JS代码
工作中遇到一个需求,需要将大量 JS 文件中的代码进行 ES6+ => ES5 的转译,同时对代码进行压缩处理,最后在单独输出.一开始陷入一个思维误区,不管干什么操作都想着在webpack中执行,完全忽视了 node 这一环境的存在,碰壁之后,发现了babel-cli 这一工具,开始走上正确的解决方法. 使用 `babel` 来完成转义的工作
2023-02-09 23:25:31
243
原创 vue动态加载图片资源
首先,webpack打包后,我们的相对路径就有可能不符合打包后的目录结构,因为路径会变成相对于index.html的而非开发时的相应文件的,此时file-loader可以解析项目中的url引入（不仅限于css），根据我们的配置，将图片拷贝到相应的路径，再根据我们的配置，修改打包后文件引用路径，使之指向正确的文件。首先 动态的拼接url相对地址或者字符串变量形式的引入并不会生效,webpack的file-loader不会去处理,只会将它当成简单的文本进行替换。当你的应用被部署在一个域名的根路径上时，比如。
2023-01-24 17:04:17
1381
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人