qq_41373791的博客

开发项目可视化大屏的需求，有一块需要循环轮播展示echarts图表，于是选用了比较流行的swiper插件，但是实际开发时确发现，轮播到最后一个图的时候，图表并没有显示。于是，开始排查问题原因。注意vue项目中，图表不要使用ref绑定dom，因为编译后ref会消失，swiper复制的时候slide上面是没有ref的。给图表绑定相同的类名，初始化图表的时候，通过for循环初始化。

无意中发现，项目中一个require导入的图片图标，在file协议下居然可以正常显示，然后就比对了一下不同之处，发现这个图标图片打包的时候被编译成了base64了。于是就查了base64图片的特殊之处，查找得知base64格式的图片是不需要发请求获取的（一般是减少页面请求优化的手段之一，但是存在会使图片体积增加的问题）。其中有一块需要展示一个拓扑图，绘制拓扑图时用了定义了一个图片节点，然后图片的导入方式是 require的方式，然后本地npm run dev启动的时候可以正常显示，没有任何问题。

对iview分页组件进行二次封装，添加跳转按钮最近的一个项目要求使用iview进行页面的搭建。项目完成在测试的时候，测试人员说页面的分页组件缺少跳转到某一页的按钮。我告诉他直接输完页码点回车就好了，但是测试说用户不知道回车怎么办。好吧，我还能说些什么呢，改吧，发现iview分页组件没有类似的效果。只能自己上手对iview组件进行改造了。。尝试方案一：有问题自然想到是度娘，网上的方案几乎都是，使用原生js的模拟事件，通过点击跳转按钮去模拟iview页码输入框的Enter事件。下图是网上的通用做法：

需求描述：最近项目有一个小需求是这样的，表单中的某些表单项是动态渲染的，当表单中的某一字段符合条件的时候，调用后台接口获取数据，根据后台返回的数据再为表单增加对应的 FormItem。问题描述：需求确实不难，但当我实际写的时候遇到一点问题，动态渲染的表单项校验规则失效了。。。下面我们来理一下需求的实现思路，找一找问题的原因。需求思路：下面我们结合代码来理一下：iview Form表单控件 model属性绑定的值，name，num是动态渲染的表单项v-model的值，为了方便后续扩展并没有直接

项目使用的还是vue-cli搭建的，底层还是webpack，没有使用新的vite搭建。