- 博客(33)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 基于webComponents的纯原生前端框架
采用artComponent模板引擎,在数据更新后实现UI更新，当然这里做了优化处理,尽量减小页面渲染受影响的范围，实现最小化更新。基于框架，开发了一套常用UI组件，提升开发速度。组件库采用开放原则，也就是说别人都可以使用我的开发接口去开发组件库。我本人的个人开发web前端前框架xui，正在开发中，业已完成50%的核心开发工作，并且在开发过程中逐渐完善.目前框架未采用任何和市面上框架模式，没有打包过程，实现真实的开箱即用。框架完成了事件触发和事件监听的封装，在页面和组件事件处理上更加方便。
2024-09-28 17:14:50
218
原创 Web Components之继承
我们在使用Web Components自定义组件的时候，我们需要继承HTMLElement这个浏览器内置对象，但是如果我要一些高级封装，给组件内置一些方法的话。我们就需要使用继承的方式，在父类中实现基本功能的封装。
2024-09-22 21:08:40
200
原创 4 html5 web components原生组件详细教程
首先就是要给shadow Dom中要插入style标签和你自定义内容的html代码，这样来实现样式和html代码封装，主要的还是要实现代码的隔离。当然你接下来的交互，自然也要约束在你组件内部。detail,bubbles: true, // 允许事件冒泡composed: true, // 允许事件穿透shadow DOM});这里就是定义一个自定义事件，然后使用this.dispatchEvent(closeEvent(this.dialog.returnValue))派发出去。
2024-09-18 09:46:50
657
原创 3 html5之css新选择器和属性
要说css的变化那是发展比较快的，新增的选择器也很多，而且还有很多都是比较实用的。这里举出一些案例，看看你平时都是否用过。1 新增的一些写法：1.1 导入css这个是非常好的一个变化。这样可以让我们将css拆分成公共部分或者多个模块化的css,然后在需要的地方按需导入实用。1.2 变量和函数变量这个自然不用多说，大家用的可能比较多，但是大家也要注意变量的作用域问题。函数这里重点谈一下。attr函数：函数用于获取被选中元素的某个 HTML 属性值，并在样式文件中使用该值。
2024-09-04 14:29:34
243
原创 2 html5 浏览器已经支持的新API
等等，还有一些其他的，比如formData,fileRender等等这些大家平时用的比较多的，我这里就不再举例。navigator.mediaDevices.getDisplayMedia() 这个就是将当前指定的屏幕分享出去。img, video, div元素等加上这个方法就可以实现全屏，使用document.exitFullscreen();这个api可用来替代使用interval回调时动画都问题。当然vue底层也用了这个新的api.通过writeText写入内容，通过 readText读取复制内容。
2024-09-02 17:20:28
328
原创 1 html5-新标签
事件：支持一个close事件，并且在close中可以拿到returnvalue,可用用来判断关闭事件传递的参数。也支持插槽，也有生命周期的概念。showModel: 展示弹窗，并带有遮罩，采用了一个特殊的#top-layer的标记层，会位于整个页面的最顶层，且水平，垂直居中。年龄稍大一点的码农可能见证了html的发展，亲历了头声明的变化，但是现在起步就是html5,那么html有哪些不为大家常用的新东西呢，这一章我先来谈谈这个问题。甚至现在我们在用各种UI库的时候这个弹窗也是必须的一个功能。
2024-08-31 21:29:17
255
原创 Echarts关系图特效实现
初始化，只需要将中心点确认出来，设置位置为画布中心，其他节点数据按照接口数据依次组织为节点，然后便利节点，通过设置中心点的id和其他节点的id关联节点连线。以上就是获取节点位置的方法，不过你的echarts和dom当前位置你要确定，如果你把echarts定位了，可能位置关系对不上，需要自己先确定关系。4 涟漪特效：涟漪特效其实是利用了css和多个dom组合，再节点点击时获取当前节点位置，改变dom节点位置到点击位置实现的。所以需要自己计算位置关系。2 固定中间节点位置：其他位置根据公式计算，按照圆形分布。
2024-08-28 16:35:04
350
原创 Echarts栅格进度条装饰实现
如下图，如果你的业务需要这么一个饼图，你单纯借助echarts是实现不了如图效果的，你需要借助dom操作，合svg的配合才能实现。这个我们要结束svg做一个vue3组件，也是按照当前echarts的高度适配。中间的文字百分比计算需要自己计算，然后通过echarts的mouseover事件经过不同色块，切换计算即可。这里要注意下，echarts的配置，要讲饼图放置正中间。这样你利用布局可以讲中间的dom圆圈也适配着放在正中间，dom圆圈宽高以echarts的高度适配。我这里已经封装了组件。
2024-08-28 13:58:31
599
原创 vue3 传多层级传递插槽
这个需求是很常见的。由于封装和解耦的关系，我们在封装组件时，都按照功能模块拆分了，或者颗粒度精细化的原因，都进行了拆分，最后又整体组装，然后整体使用的时候又要给某些组件拆分的组件内部传递插槽。当前组件，内部使用其他组件，此时你使用当前组件，并使用了插槽，想把这个插槽传递给内部组件使用，这就设计到多层级组件之间插槽传递。我的业务场景是：组件A,在页面中使用，并实现了一个插槽，想把这个插槽传递给组件A的子组件使用。想把插槽传递进A组件内部，再有A组件传递到，A内部的子组件B上，看着简单，写法上还是要注意。
2024-07-12 10:37:40
445
原创 Vue3 sortablejs 表格拖拽后，表格无法更新的问题处理
你可能会发现，表格排序是可以实现，但是我们基于数据驱动的vue中关联的数据并没有发生变化， 如果你的表格带有列固定(固定列实际上在dom中有两个表格，其中固定的列在一个表格中，其他表格再另一个表格中)，如果你再固定列加的拖拽，只变固定列，其他非固定列并不变，或者你在非固定列增加了拖拽，但是固定列却也不变化。你会发现，固定列拖拽，位置变了，但是非固定部分，却不会跟着变化。这样就完成了，退拽后，无论是拖拽固定列或者非固定列，基于vue的数据驱动实现重新渲染排完序的表格。如上图，这就是带有固定列。
2024-06-27 11:10:34
727
原创 vue3项目中最简单的拖拽实现节点位置变化
大家实现拖拽可能都会用到这个组件vuedraggable 其他版本，但是使用起来比较麻烦，例如我想在antd-vue中实现菜单位置的随意切换，并且其中菜单有些使用了自定义插槽的话，使用起来就很麻烦，而且很难实现，尤其有些使用v-draggable指令更是很难实现。以上效果，既要实现对系欸但选中的显隐控制，还要实现拖拽排序。这里面利用antd-menu-组件，菜单项包裹了Checkbox-group组件这个时候，如果想实现拖拽排序的话，draggable低版本组件本身就很难帮我们实现了。
2024-05-30 15:10:34
1065
原创 小程序下载文件保持原有的文件名并打开保存的源文件
我们使用uniapp开发小程序时，经常会有文件下载和保存操作，关于文件的保存操作，可参考我的，这里我主要介绍下下载的时候如何保存原来的名称，并且打开也打开原来的文件。
2024-05-30 11:10:47
1582
原创 echarts 饼状图指示线末尾添加圆点
ui在设计稿上给echarts的饼状图的指示线末尾加上了圆点，产品要求要100%还原，在这种情况下，我们就需要去利用echarts提供的api去实现这个效果。
2024-05-15 10:06:57
1072
1
原创 uniapp飞书小程序下载文件并重命名
飞书小程序下载文件并对文件重命名的思路，先下载文件，得到缓存文件的位置，然后打开文件。但是这里面并没有对文件进行命名，文件名称实际上上是缓存的文件名称。在我们的业务场景中，需要把文件重新命名为指定的名称。这块的大概思路就是，将文件从缓存位置重新保存到指定位置，在保存过程中对文件进行命名，如果出现重名文件系统提示，需要重新给出名字。点击下载编辑按钮，可以对文件进行命名，然后点击下载可以直接下载该文件。这里最核心得到问题时，如何知道手机系统中，保存文件的位置。
2024-04-29 18:28:40
671
原创 pc端分享微信卡片链接
目前讲如果想通过分享链接到微信上，方式只有通过微信扫码后，从微信打开文章之后，通过微信内部的分享，实现分享给个人和朋友圈。这里，我们介入的方式主要有两地方，一个就是在文章被分享时通过调用微信的sdk，来实现分享后的卡片效果。另一个就是生成一个url的二维码。
2024-04-29 17:13:02
411
原创 jquery+vue3简单富文本编辑器实现
我们是通过jquery的在textarea的change事件中或者blur事件中通过触发给hooks中传递的change方法向表单emits事件来实现的更新数据。这里必须要讲一下，因为textarea的blur或者change事件的触发，是我们组件内部无法阻止和控制的，所以这里面就存在一个触发前后的问题。这个一定要注意，textarea 是触发表单校验的所在，这里有处理技巧。initVal: 这个方法很重要，主要是实现编辑器的初始化，也就是做数据回显的时候，需要对编辑器内部初始化的方法。
2024-04-29 16:27:50
1078
1
原创 vue3+antd vue 低代码自定义配置邮件模板并实现邮件群发兼容(二)
使用邮件模板群发有奖有两种使用方式：1 在线编辑生成html邮件内容2 导入内容生成html邮件内容那么这两种方式，最终都要生成发给用户的html邮件。那么导入的内容如何生成html邮件，这个就需要按照我上期所得配置，即导入内容要严格按照我的配置中对应配置实现，也就是说导入的内容最终也是生成了配置文件。那么这些配置文件在在线编辑的模式下可以利用前端技术实现渲染到页面上，最终生成html， 那么这个导入就需要后端去生成。
2024-02-20 16:27:51
1263
原创 echarts 3d地图响应单击区域
通过该方法实现切换地图，但是无法让地图的外层series实现变化，这时候，我们就需要通过注销地图，重新渲染地图来实现。所以接下来我们通过series再给地图上方这只一个3d地图，这个时候，通过geo3d实现3d效果，通过series设置顶部可以响应鼠标点击。如果是geo设置为二维地图，则可以影响echarts的单击事件。采用echarts echarts-gl版本实现3D地图并且响应鼠标单击区域返回当前区域信息，实现地图切换。实现3D地图比较容易。我这里是在利用点击事件切换地图，实现地图下钻。
2023-08-11 19:05:44
1156
原创 vue-cli4 下项目打包如何部署到相对目录
你想让项目部署后，位于www/data目录下，而根目录是www,这个时候，那就可以将publicPath配置成为“/data”,这个时候主站访问域名假如为： http://www.test.dev则你的站点访问目录则为： http://www.test.dev/data， 这个时候实际你的静态资源目录就是相对于跟目录下的data目录。这个模板中的<%=BASE_URL %>并不会被解析成为当前的目录即 “./”，如果有这种需求部署的同学可能就很恼火，经过我的实践，实际上是我们对相对目录的理解偏差了。
2023-08-02 09:32:14
340
原创 微信小程序开发，软键盘唤起导致页面上推穿透导航（关于ios和android全面屏方面兼容需要调整的地方比较多）
uniapp 小程序页面上推 定位问题
2023-08-02 09:25:55
2918
原创 富文本编辑器 word整体粘贴实现图片自动展示(一)
实现富文本编辑器复制粘贴自动提取图片，支持word和网络内容粘贴，支持目前主流的编辑器，纯js实现
2022-07-02 17:51:54
4241
1
原创 vue 3.0实现仿elementUI表格组件封装
vue如何封装一个elementUI的表格组件灵活使用插槽slot实现表格封装插槽能够实现对内容的分发，但是像elementUI中多个插槽并没有使用具名插槽是如何实现对多个默认插槽处理的，这里就来分享一下经验。slot插槽默认插槽首先多个默认插槽，this.$slots中是一个以defaul为key的数组。这样我们就能利用数组来处理多个默认插槽了。这是我们默认elementUI实现的一个表格父组件和列子组件。我们看到 一个 el-table中含有三个 el-table-column 子组件，这
2022-04-24 21:21:05
1539
2
简单js+jquery+iframe富文本编辑器
2024-03-29
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人