峰会路转的博客

这是一个实战项目的webapp，主要是使用原生来实现我们的业务。预览下面的实战效果，我们将会从0到1实现这个系列的项目。包括大量的原生js知识，css3动画的开发，以及页面的交互实现。

vue3里面$refs已经不支持了，现在需要在tab下面实现这种ref获取组件实例的需求，官网给出的方案，需要vue的版本在3.2.25，默默的看看下自己的版本在3.2.20欲哭无泪，尝试了好久，找到了解决方案。最后再提交数据的时候,获取到所有tab里面的组件的数据。就实现了我想要的的效果。...

vue3项目pinia取代vuex已经是大势所趋，所以我们要改变使用vuex的使用习惯了，全新拥抱pinia。

核心是使用vue的render，createVNode方法去创建新的组件实例。

最近公司在做的项目是利用的vben-admin,在使用里面的PageWrapper组件的时候有用到动态插槽的地方，使用后始终达不到我想要的定制效果！我就是想实现如下的效果但是按照源码那样去写的话是无法实现的，getHeaderSlots可以取到值，但是始终无法渲染我加的两个定制插槽的内容vben-admin源码修改后：然后就实现了我预期的

如何在vite里面写css的时候vite自动给我们加上这种hash,来进行样式的隔离，防止污染呢。

登录页面给加个密码控件 显示框，提升用户体验是一种非常不错的方法。实现效果如下。

点击源右边的上传按钮的方法没有变动：调用后给给的接口，把图片链接cb方法就可以了。tinymce6.0的写法。这个组件的核心源码如下。

antdvue里面用到upload组件，本以为很简单的，还有不少的坑要注意解决方案直接删掉了失败的文件，也没有显示文件上传中的占位试了很久，上传报错，但是文件依然有回显，这就很纳闷了~~~明明试失败，就不应该有回显解决方案这样就实现了上传超出大小限制，既不调用后端接口，也不回显该图片的效果

有些时候业务需要所有页面的table高度一直，底部的分页也全部固定在同一个位置，视觉效果上一致，具体的实现方法。

项目里面经常会用到可视化组件，索性就封装一个组件，首先展示下效果。

静下心来想想，不对啊，接口数据没问题，不是后台的事，那尼玛甩不了锅了，我还能安心吃饭睡觉吗啊，于是一番百度，没有这个问题，我就问就没人遇到过这个问题吗，一条相关资料都没有啊，惨惨惨~~~但是，然而，构建上线后就让人摸不着头脑了，进入编辑页面的时候，地图出现了，如下效果，css错位了，他就错位了，防不胜防的那么一下啊~~~排查了大半天，终于没白忙活了~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~对，没看错，上线后就是这样了，中间空白了一大片，地图往下面跑了，不知道就这么抽风了。

tinymce6.0的之前用到过，现在是jeecg的框架用的技术没那么新，是5.0的，算是重新研究了一遍tinymce的上传，两个版本的大同小异。

这张swtch切换效果，看着挺好用的，那我们怎么模拟实现这种切换动画呢,其实很简单。

icon组件使用方式很多，当没有设计师给我们提供图标的时候，我们可以借助第三方的插件，比较有名的有iconfont,今天推荐另外一种图标库及使用方法。

svgicon在项目开发中是必不可少的一个组件，使用起来非常方便且易于维护，那我们现在就封装这样一个组件配置文件build\vite\svgSprite.jsvite.config.js基础代码src\components\Icon\index.jssrc\components\registerGlobComp.jssrc\components\Icon\src\Icon.vuesrc\components\Icon\src\SvgIcon.vue组件使用这样就实现了svgicon组件

vite已经帮我们内置好了less,scss等工具css,但是我们要使用还是需要安装下。build\generate\generateModifyVars.js文件。这样配置就生效了，简单方便快捷，代码量也少了很多哟…这个文件写的比较简单，后期还会不断增加各种变量。//这里就不用单独引入变量了。

有时候，第三方的组件库不能满足我们的业务需求，就有必要对别人的组件进行再次的封装，下面我们以antdvue里面的button组件二次封装为例，研究下封装的过程

前端系统开发，组件库必不可少，我们一次性引入所有的组件库很简单暴力，但是会增加项目的体积，所以我们探讨按需引入的方式，进行项目的优化。