小白小白从不日别的博客

将 ECharts 的配置通过 Vue 的 provide/provide API 全局挂载，使得在整个 Vue 应用中都能够方便地使用相同的 ECharts 实例。将 ECharts 的配置封装到插件中，使得项目中的 ECharts 相关配置和代码能够按功能模块进行组织和管理。通过将 ECharts 配置封装到插件中，并通过 provide/provide API 进行全局挂载，可以在 Vue 应用的任意组件中直接使用。将 ECharts 相关配置封装到插件中，可以在不同的组件中复用相同的配置。

当我们点击关闭标签导航的时候会自动切换到下一个；关闭下一个标签导航会自动切换到上一个。整个的方案就是这么两大部，但是其中我们还需要处理一些细节相关的，对于上面写的逻辑我们这里对其进行一个抽离封装成hooks。到这里的话我们的tagsView布局和功能就开发完成了。那么明确好了方案之后，接下来我们根据方案进行处理即可。这里我们会基于element-plus的。那么明确好了原理之后，我们就来看。那么接下来我们需要做的就是把。仅看这一个要求，很简单吧。也是一个很简单的功能。

唯一的区别就是在vue3中没有this了，响应式数据需要用ref或者reactive去替代，在一个就是computed的使用方式不同。以下vue3版的代码是基于上面 vue2版的 div实现方式进行调整的。这里就直接给出代码了。

在这一章我们主要学习：瀑布流、长列表、懒加载等功能瀑布流是一个比较复杂的通用组件，因为我们要尽量做到 普适，所以就需要考虑到各种场景下的处理方案，尽量可以满足日常开发的场景，所以这就在原本就复杂的前提下，让这个功能变得更加复杂了。

【代码】vue3--自定义 dialog。

在日常开发中，我们可能会用到 echarts ，但是如果每次使用都像下面这样去引入的话会导致最终项目打包体积变大echarts在vue或者react中使用存在的问题每个图表需要从头到尾写一遍完整的option配置，十分冗余在同一个项目中，各类图表设计十分相似，甚至是相同，没必要一直做重复工作窗口缩放时的适应问题在项目中如何按需引入echarts图表 减少打包体积的大小所以我们可以对echarts实现按需引入，也就是用到了哪些模块，哪些图表我们手动按需导入优化点就在于。

当我们的鼠标移动到，触发弹层的视图和展示弹出层视图中展示的内容之间的空白区域时，会发现此时气泡会消失，这个很容易理解，因为当移到这个间隙的时候就会触发mouseleave事件，那么此时isVisable就会变回false。等等，我们不难发现这些前台项目(官网)等，它们的风格是不同的，那么这个时候可能一些组件库就无法满足我们的设计要求和一些炫酷的效果了，就需要我们自己去自定义一些通用的组件。这些对于一些后台管理系统来说是最好的选择，因为后台管理系统其实都是大同小异的，包括功能、布局结构等。

那么我们一般的做法就是使用 import xxx from "@/lib/Button/index.vue" ，但是如果要是每个都去这样引入使用，属实有些麻烦了，那么有没有一种方法可以简化呢？等等，我们不难发现这些前台项目(官网)等，它们的风格是不同的，那么这个时候可能一些组件库就无法满足我们的设计要求和一些炫酷的效果了，就需要我们自己去自定义一些通用的组件。这里我们的通用组件都放在了src下的lib目录下，作为一个通用的物料库。一般对于这种通用型的组件，就说明在一个系统中会很频繁的用到。

这里首先需要在 assets 目录下新建，style子目录，并在该子目录下新建 tailwind.css 文件。：用于将 CSS 转换为 JavaScript 插件的工具，允许使用插件来处理 CSS 文件。：初始化生成 tailwind.config.js 文件。来解析和处理 Tailwind 的 CSS 指令。最后需要在 main.js 里引入该文件。：安装 tailwindcss 插件。

在实际开发中，我们可能会遇见在一个项目中会很平凡的使用一个或者多个通用组件，那么我们一般采取的做法就是写一个公共的index.js页面，然后将所有的通用组件引入进去，再利用app.component一个一个去注册，最后在main.js中注册插件。defineAsyncComponent：创建一个按需加载的异步组件。Glob：帮助我们在文件系统重导入多个模块。通过以上就可以实现通用组件的自动化注册了。这里我们就举一个简单的示例来演示一下。通过以上方式就可以帮助我们完成了。

对于这里的处理一共分为两个部分，点击滑块后变色，动画效果。

在业务场景中，假设这里我们要实现点击 汉堡 后，会有一个自下而上的popup弹出层。因此这里我们需要先实现这样的一个公共的popup弹出层。到这里这个组件也就轻松的实现啦~

这里通过分析不难发现我们需要的数据是在skus里获取到的，但是我这里需要展示的数据又是在SkuCardItem中，那么这里我们就可以利用hooks去实现对应逻辑的抽离，专门用来处理多规格相关的逻辑。这里我们要在父组件 SkuCard 中进行相应的操作，那么在父组件中如何获取到对应的要传递给后端的数据呢？这里可以利用传入回调函数的方式进行。当在规格组件弹窗里选择好对应的值后，点击确定后，会进行相应的替换操作。同时与下面的规格设置进行联动，即规格设置跟随实时变化。其余模块和功能的开发略~这个的原理其实就是对。

属性描述类型默认值startVal开始值Number0endVal结束值Number0duration持续时间Number0autoplay自动播放Booleantruedecimals要显示的小数位数Number0decimal十进制分割Stringseparator分隔符Stringprefix前缀String''suffix后缀String''useEasing使用缓和功能BooleantrueeasingFn。

【代码】vue3 实现图片预览组件。

这里我们可以利用父子组件之间的通讯，利用 v-model 来实现，父组件传值，子组件负责展示，同时在子组件里可以更改该值，那么这个时候就需要在更改后通知父组件进行对应的改变，就需要用到 defineProps 和 defineEmits，主要利用update:modelValue实现。其实是很简单的，我们可以利用 element-plus 组件库里的。这里我们可以将其抽离成一个公共的组件，那么现在有一个问题就是通讯问题。要实现类似于下面这种效果。

VueUse是一个基于的实用函数集合，支持Vue2和Vue3，使用它可以帮助我们快速实现日常开发中一些常见的需求。本文将分享列举几个常见的需求来通过VueUse实现，让大家感受其魅力！

在中后台系统的日常开发中，表单必不可少，当表单内容比较多，例如有上百个字段时，代码往往也变得复杂且难以维护，加上各种动态联动的表单校验，无疑让我们的页面开发过程雪上加霜，本文将结合自己平时的开发习惯，分享一下在大表单开发中如何处理复杂的表单校验，以及如何对表单进行拆分，减少单个文件堆积过多的代码内容。

于是2009年Angular.js横空出世，带来了全新的MVVM设计模式，让开发者眼前一亮，除了M和V层以外，就是这个VM层啦，即：viewModel层。使用Vue框架开发前端项目，最大的优势就是再也不用进行复杂的DOM操作了，我们只要关心数据的变化即可，Vue框架会帮我们把复杂的DOM进行渲染，这背后都要归功于他的设计思想，即MVVM设计模式。随着Ajax技术的流行，前后端分离开发越来越流行，前端需要处理复杂的视图与数据，迫使前端也急需一种设计模式来进行分层处理，所以MVC设计模式开始进入前端领域。

这里也可以用模拟的数据，下面用的是后端请求的真实数据。这里样式设置主要用到了 windcss。

开始使用 | VueUse 中文网VueUse元素的无限滚动。详细解析地址。

在做后台管理系统中，我们经常会用到很多图标，比如左侧菜单栏的图标当然这里element-ui或者组件库都会提供图标但是在有些情况下 element-ui 或者 element-plus 组件库提供的图标满足不了我们的需求时，这个时候我们就需要自己去网上找一些素材或者UI给我们一些.svg的图标文件那么这个时候我们如何像使用组件一样很方便地去使用？只需要在需要的地方引入组件、传入图标名字就可以了。

例如，当页面做了过渡动效，我们希望过渡结束后再执行滚动。切换路由时页面回到之前的滚动位置。提示：如果返回一个 falsy 的值，或者是一个空对象，则不会发生滚动。目前，它仍然是被支持的，这意味着你可以向任何导航守卫传递第三个参数。因为这种情况发生的时候，组件已经挂载好了，导航守卫可以访问组件实例。上面的用法会对所有的路由使用相同的过渡。如果你想让每个路由的组件有不同的过渡，可以将。如果想要在路由组件上使用转场，对导航进行动画处理，我可以使用。注意：跟之前版本不同的是，路由只能一个一个添加，不能批量添加。

如果数组里的每个值都与最后一次的渲染相同，那么整个子树的更新将被跳过。理想情况下，触发模态框的按钮和模态框是在同一个组件中，他们一起被渲染在 DOM 结构里很深的地方。要记得把其他类型的文件后缀也加上，因为其他类型如js等文件默认是可以忽略后缀导入的，不写上的话其他类型文件的导入就变成需要加后缀了。传入一个函数参数，该函数会立即执行，同时会响应式的最终函数内的依赖变量，并在依赖发生改变时重新运行改函数。是一个内置组件，它可以将一个组件内部的一部分模板“传送”到该组件的 DOM 结构外层的位置去。

在开发 Vue 项目中我们一般使用第三方 UI 组件库进行开发，如 Element-Plus、Element-ui、Ant-design等, 但是这些组件库提供的组件并不一定都能满足我们的日常开发需求，有时候我们需要实现的效果是直接使用组件库无法实现的，那么这时我们就可以通过对组件库的组件进行二次封装，以此来满足我们不同场景下的需求。对于封装组件有一个大原则就是我们应该尽量保持原有组件的接口，除了我们需要封装的功能外，我们不应该改变原有组件的接口，即保持原有组件提供的接口（属性、方法、事件、插槽）不变。

【代码】vue3 实现表格hover时序号和复选框相互转换。

在封装请求拦截器时，使用ElMessage进行弹窗提示成功或失败，但是如果页面用到多个接口，这时就会导致页面出现很多弹窗，导致用户体验不好，有可能出现卡顿现象。这时就需要进行一些判断，如果前面的ElMessage还没关闭并且类型是一致的就return，不再弹窗提示，类型不一致时就要弹窗提示

这里我们使用的是windi css样式库，其中中文文档windicss 安装。

需求来源于实时搜索客户名称，使用el-select相比用弹窗嵌套表格轻便不少。但是当远程搜索获得的数据量大时，可以滚动加载 也可以加上分页。

表格组件的使用在后台管理系统中是非常常见的，但是如果每次使用表格我们都去一次一次地从 element-plus 官网去 复制、粘贴和修改成自己想要的表格。这样一来也说得过去，但是如果我们静下来细想不难发现，表格的使用都是大同小异的，每次都去复制粘贴，对于有很多表格的后台系统来说，代码量会增加，会显得很臃肿那么有没有一种相对来说比较方便的方法去实现这个重复的过程？就比如我们只需传入配置文件，就可以帮我们生成我们想要的表格？答案当然是可行的。下面就介绍一种我个人比较喜欢的一种方案去实现表格的封装在 src 新建

在日常开发中，我们会经常使用 element-ui 或者是 antdesign 或者是 element-plus 等组件库实现搜索功能。下面就以 element-plus 为例，我们实现一个搜索功能的组件，并且随着屏幕尺寸的变化，其布局也会跟随变化。这里就没有对布局进行过多的美化，旨在实现其功能。这里就需要用到相关表单组件。对vue相关知识熟悉。

若有一天我们遇到了一个新的业务需求，需要使用 图片 来实现类似于 el-radio 的功能，并且要求实现第一次点击时处于选中状态，当我们再次点击时处于非选中状态。对于这种效果该如何实现？我们在工作中常用的一般都是使用类似于 element-plus 中的 el-radio 或者是 el-checkbox 来实现单选或者多选。

这里我们可以新建一个 useScalePage hooks，目的在于随着浏览器视口的变化是，大屏能够随之跟着变化，但是为了限制用户在一定时间内去频繁的改变浏览器视口，因此这里我们可以利用lodash的throttle节流阀进行限制。在大屏中，如果每个图表都去单独写 init 以及进行resize监听机会显得很麻烦，这里我们可以将这些重复的步骤封装成一个hooks，这样在使用的时候就可以统一的进行初始化和进行resize监听。Gasp：是一个 JavaScript动画库,1920*1080px 设计稿尺寸。

这里用到了ts，若不需要ts，把相关ts的类型注释删掉即可。

利用element-ui组件库中的 el-select 组件 和 el-tree 组件 进行嵌套，从而实现 element-plus组件库 中的 el-tree-select组件 的效果

【代码】Vue2 之 el-table 表格第一列序号与复选框hover切换。

在根目录下新建 vite 目录，在vite目录下新建plugins子目录，在plugins目录下新建以下四个文件。这里首先需要在 assets 目录下新建，style子目录，并在该子目录下新建 tailwind.css 文件。: 虽然 Tailwind 提供了许多实用的 CSS 类，但为了确保这些类在所有浏览器中都能正确渲染，`：用于将 CSS 转换为 JavaScript 插件的工具，允许使用插件来处理 CSS 文件。在项目根目录下新建 tailwind.config.js 文件。

npm run eject：项目中的一些配置被隐藏起来了，通过这个命令可以将配置文件反编译到项目中，从而获得配置的权利，这个操作是不可逆的，一旦编译出来就无法编译回去，一般来说不会执行这个命令，我们会通过其他方式去修改配置。：React18 引入了并发模式，Zustand 设计为响应式的状态管理库，可以很好地兼容 React18 的并发特性，确保应用的状态管理在并发模式下仍然稳定和高效。：Zustand 采用了最小的 re-render 策略，只会在状态实际变化时触发组件重新渲染，避免了不必要的性能开销。

在style下创建scss相关的文件如下图主要看index.less里面的内容// 存放项目统一规范的变量// 自定义的 css 样式// 自定义主题样式// 修改 element-ui 样式修改入门的文件main.ts到这里一个基本的 基于 Vite+Vue3+TypeScript + ESlint + CommitLint + Prettier + StyleLin + Element-plus 的项目框架就搭建完成了。