- 博客(29)
- 收藏
- 关注
RSS订阅原创 前端主题色切换vue3+scss+element-plus
2. 创建亮色和暗色自定义变量默认主题：暗色主题：3. vite.config.js配置添加css配置
2025-01-08 17:33:44
276
原创 开发遇到的问题
组件数据需要判断是否修改，需要备份一份数据，同时这个备份数据也是不会再被修改的数据，此时，如果数据重置则应该将数据重置到备份数据，请注意使用深拷贝处理数据，同时向外暴露方法，方便动态处理重置数据为初始化数据。这种情况来，数据传递可能会因为异步导致儿组件请求接口拿到的不是最新的数据，但是孙组件的数据肯定是没问题的，所以不应该用父组件数据，而是用孙组件的响应式数据确保在props传递后，拿到最新的数据。来处理这个问题，虽然应用后效果是font-weight: 700，但是可以避免设备判断动态样式的处理。
2025-01-02 09:59:21
352
原创 前端处理文本换行后文本和文本对齐，不和序列号对齐
text-indent设置负数，文本负缩进则会前移，这个时候再调整内容的margin-left就可以实现对齐的效果。需要换行的问呢不和前面的序列号对齐，序列号和文本肯定是在同一个标签内的内容，这个时候要如何去对齐呢？简单来说就是文本负缩进前移，整体容器像右移动等同大小，实现对齐效果。
2024-04-25 10:50:37
410
原创 uniapp学习之代码格式化处理
hbuilderx自带的美化插件会缩进第一个标签部分，导致js和样式也都缩进了，看着不舒服，引入prettier插件进行处理。3. 当进行代码格式化时选择prettier进行格式化。2. 安装后可以在插件列表的配置中进行配置。1. 插件市场中找到Prettier。
2024-04-11 09:03:22
1692
原创 uniapp重学的坑一
3. 页面组件的命名需要遵守大写驼峰的形式，否则该页面或者组件会被忽略，另外一种就是支持单个小写的方式，创建页面的话应邮件页面新建的方式来创建，它会自定生产的配置到pages.json。1. uniapp创建的项目是vue3的情况，模版还是给的vue2，这个需要自己修改一下代码，这个是一个疑惑的点，在main.js里面的代码可以看出是做了兼容性处理。2. 在运行项目到开发者工具时，会启动不了，控制台报错的意思是没有开启安全端口，根据其步骤引导开启端口号即可。
2024-04-10 17:58:51
217
原创 前端新平台接入实战总结
还是有必要封装，最好是对于新的表格UI的封装，但是其实封装了也无法适应多变的应用场景，相比封装，其实不封装的灵活性是更强的，除非一个项目中的表格大致差不多，例如表格列可编辑，会出现时间选择器、下拉选择器、输入框，表格头部添加分割线，且一般都要带个分页器，封装时还需要处理对于列的自定义行为，可以使用插槽处理。组件复用一直是前端需要面对的问题，你写了一个组件，需要确保该组件是否为业务组件，下次界面基本差不多，但是无法直接用，这个时候要做的就是拆分，使其变成更小的通用组件。
2024-04-07 14:31:14
208
原创 使用scrollIntoView这个API来完成元素滚动到可视区域
在vue2使用element-ui封装选择树状下来组件的时候需要在组件有值的时候，再打开下拉弹窗，如果内容过长需要能够定位到那个元素上，这个时候可以使用scrollIntoView来实现。这里表单会比较复杂，不是引入组件的form-item的ref需要跟表单的rules字段名一致，而封装的组件的话只需要一个标识字段和ref就行。表 单页面出现错误时，需要立即定位到错误的位置上，以便用户查看，比如这个表单过长，有滚动条的时候，这样子用户体验会很好。这里是vue3代码,其他的代码就不一一列举。
2024-02-19 17:52:08
559
原创 element-ui封装选择树状下拉组件
el-popover和el-tree组合后，选中元素填入到el-input中，样式修改和el-select一样，但是会少了一个滚动定位元素的效果，所以还需要通过scrollIntoView实现一下。
2024-02-19 17:46:02
452
1
原创 多字段过滤算法
说起过滤是非常常见的业务，一般过滤推荐是服务端处理，发送请求进行模糊查询 这种情况一下，服务端返回的是每条数据中的某一个字段符合条件的数据集合如果是前端要处理这个情况呢，前端处理过滤如果只是对于某个字段符合其中的条件很好处理，就像服务端一样，但是如果是多个字段的条件都要满足来处理的话，那就只能实现一个通用的方法来处理了。
2024-02-19 17:17:38
505
1
原创 vue2添加标签组件可滚动
这里用el的组件来实现，一般标签组件又要带输入效果，所以是需要el-tag和el-input组件进行组合截图中红色为组件封装的区域，蓝色是输入框所在的区域左边是下拉选择框已封装好的组件，右边则是一个按钮，修改了样式，并且是绝对定位，所以是中间容器宽度需要考虑的因素之一。
2024-02-18 18:32:11
608
1
原创 表格第一列添加hover的蓝色边框效果
使用border来实现，实现后hover出现问题，发现行会变大，且里面的内容会移动，内容是flex布局，分析是因为盒模型大小发生变动, border是盒模型大小的影响因素之一。采用box-shadow带inset内嵌阴影的方式来解决这个问题，box-shadow: 0 0 0 1px inset #8ccfff;这样处理完之后，不会影响盒模型。
2024-02-18 17:30:53
233
1
原创 flex布局是三栏的情况，中间的标题在小屏幕展示上居中效果不好问题解决方案
使用flex+justify-content:space-between 进行布局，大屏幕和文本不长的情况下不会出现任何问题，但是如果是小屏幕和文本太长的情况就会出现文本过于靠左的情况，这个时候再参考justify-content的其他几个属性效果就更不行了。使用flex+margin的方式即可实现，只要对需要居中的文本标题添加css属性margin:0 auto;就可以实现了，这个效果就是左右自动撑开，居中效果明显。flex布局是三栏的情况，左边一个返回按钮，中间一个文本标题，右边一个导出按钮。
2024-02-18 14:24:34
271
1
原创 css属性text-wrap在safari版本中基本不兼容的解决方案
使用css属性white-space: pre 进行代替，解释一下为什么这个属性可以，pre的效果是可以合并换行符，相当于将换行符消除掉，就可以实现不换行。文本需要做到不换行，强制一行，一般使用text-wrap:nowrap,但是safari浏览器不兼容。下面是caniuse的浏览器版本兼容情况。
2024-02-18 13:49:55
1443
1
原创 object.hasOwn在低版本的safari不兼容
在使用object.hasOwn的时候遇到了一些问题，这里记录一下，又遇到相同问题的朋友们可以看看。
2024-02-18 13:45:28
704
1
原创 平时会用到的一些工具网站，做个记录
Smooth Shadow (brumm.af)取色器 | 菜鸟工具 (runoob.com)163 Toggle switches made with CSS (uiverse.io)Fancy Border Radius Generator (9elements.github.io)loading.io - Your SVG + GIF + PNG Ajax Loading Icons and Animation GeneratorImg2Go.com - Online photo editor and
2023-06-13 12:35:38
404
转载 pc端微信扫码登录
该过程中code只能使用一次，就是前端发送请求给后端携带的那一次，所以其他请求需后端单独完成。1.seif_redirect参数默认是false,就是扫码成功后，直接全屏跳转到回调地址，如果为true则是容器中显示回调地址的iframe界面，可以回调到子路由，这里自定义所以采用true,扫码后出现子路由，所以推荐设置子路由为扫码成功的界面规避这个问题。前端要做的就是提供二维码，让用户扫码，之后调用后端api，将扫码获取到的code发送到后端。正常写个参数配置项，用于获取微信扫码后的数据方便调用。
2023-06-13 11:03:08
363
1
原创 视图区域过大，通过鼠标滑动来实现区域滑动
下面是重点，鼠标移动时，通过上次mousedown记录的鼠标位置，和移动的位置，进行差值计算，获得偏移量，然后通过与0比较判断是左滑动还是右滑动，再让滚动条滚动相应的偏移量就实现了。el-table的滚动条是bodyWrapper,先判断滚动条是否存在，如果存在则说明区域过大，先检测鼠标按下事件,后调用鼠标移动事件。这里紫色的页面是一个el-table表格，这里是使用的overflow:hidden,右边还有区域没有显示。在vue3中推荐的方式是ref定义数据后暴露出去，名称与绑定的ref名称一致。
2023-05-12 15:21:41
239
原创 前端vue项目之路由监听
首先，一个页面可能会子路由，但是整个页面只有一部分是子路由展示区域，另外一部分则是公共区域，比如团队页面，一个团队有多个成员，对于团队来说，成员页面就算是团队页面的子路由，下面来看页面。假设红色部分为公共部分，绿色就是路由和子路由区域，紫色按钮是进入子路由页面，下面看子路由页面。再通过watch来监视路由，从而实现页面能来回切换的效果，这就是监视路由的作用。通过标识isHdden绑定页面结构来切换页面。
2023-05-12 14:41:04
428
原创 前端之html2canvas进行截屏
直接使用，进行这个全屏的截图,截屏后的结果是一个canvas，可以将它放置事先准备的容器进行展示，另外这里需要拿到文档被卷去的高度，放置页面可以向下滑动的情况，截取不正确的问题。第一个参数：表示被截屏的目标，如果是全屏就是document.body。前端截屏主要通过第三方模块html2canvas进行处理。有这个工具，前端要实现一个可编辑的截图工具也是很容易了。height：表示要截取当前目标的高度。y:表示当前截取开始的y轴坐标。scale:是截取完后的分辨率。下载依赖包，引入模块。
2023-03-18 11:39:33
969
原创 vue中跟随鼠标移动和边界处理
其中mousedown应该绑定被拖拽的元素，而mouseup就所谓了，mousemove一般通过document或者window进行监听，当然也可以是父容器。最后的问题是下边界无需处理，由于元素已经脱离了标准流，会导致父元素高度塌陷，为了能够显示父元素高度以此来添加背景颜色，这里需要用给父容器实时获取最新高度。这里的做法时容器高度如果小于屏幕内在高度就会等于屏幕内在高度就解决问题了。容器就会不断变大，向上拖拽时容器该需要变小，
2023-03-14 22:54:50
2615
原创 quasar2&vue3开发之桌面端应用模式electron
命令执行后会生成这个文件包，同时electron所需的依赖也会一起被下载但是可能会出现下载报错的情况，这里的处理方式是使用electron的淘宝镜像就没问题了，在运行命令前先设置淘宝镜像。electron淘宝镜像 npm config set electron_mirror https://npm.taobao.org/mirrors/electron/
2023-02-28 23:16:09
483
原创 quasar2&vue3之按需引入element-plus
quasar2&vue3之按需引入element-uiyarn add element-plus unplugin-auto-import unplugin-vue-components
2023-02-28 22:48:44
552
原创 quasar2&vue3中开发引入tailwindcss
首先安装tailwindcss，这里选择最新版本，根据tailwindcss对应版本postcss和autoprefixer的依赖包对这两个包进行更新，这两个包在quasar脚手架中自带。
2023-02-27 20:39:24
1015
原创 js设计模式一之策略模式（通俗易懂实战）
if (!//ctrl+b隐藏侧边树状资源这里使用的是vue3，在挂载钩子和卸载钩子中进行处理});});在js中策略模式主要通过一个字典映射来构建对分支策略的处理，再通过一个通用的函数来调用获取反馈，相当于是通过对象的多态性来消除了if-else，只是js中通过函数的方式来处理，这个模式在平时的编码也非常实用。
2023-02-26 09:26:16
383
原创 将数组转化为树状结构
第四个参数：代表回调函数，回调函数一般用来处理数据，所以传递的是map集合存储的一项数据作为参数传入，这个后面会有事例。这是我写的一个通用的处理方式，arrayToTree就是主要处理的函数，而loopTree则是递归函数。第六个参数：代表回调函数处理了新数据的pid的key（依据key是否变化）1.数组顺序是乱的，防止处理时有遗漏，需要将第一层级数据先放到数组的前面。第五个参数：代表回调函数处理了新数据的id的key（依据key是否变化）第三个参数：代表数组中每一项的pid(父类id)的key。
2023-02-25 09:11:52
1558
2
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人