在路上`的博客

Vue3的 element-plus 相对于 Vue2 的 element-ui，popover组件的实现方式有较大变化：不使用vue-popper，而是直接用el-tooltip来实现。element-plus的 popover 组件内部如果使用了el-select组件，需要确保 el-select 的 teleported 值为false，否则会出现展开select下拉框时，popover组件自动收起。

inject 和provide

将 searchResult 改为响应式数据为 draggable 组件添加 @end 事件处理器可写入对应逻辑实现 onDragEnd 方法来更新数据。

采用 vuedraggable 插件进行功能实现保留左侧数据 主要是中 ‘clone’保持左侧数据不能互相拖拽改变顺序 主要是配置左侧拖拽到右侧数据去重主要采用实现拖动到右侧区域之前可以改变的样式采用添加 'dragging-item’设置样式。

抽屉组件封装

可以使用Promise.all来确保两个if语句中的异步操作都执行完毕。这样，Promise.all会等待所有的Promise都完成后再继续执行。期望if判断条件里的两个promise 都同时执行完成。

vue数组套对象，在动态加入属性：属性值， 导致数据不更新

for循环 绘制Echarts图表之后，点击 添加图表向前插入图表遇到实例未更新

【代码】js之零碎工具（五）

【代码】Form 表单选择多个时间段 完成必填校验。

vue3项目使用preitter 搭配prettier-plugin-java 实现codemirror 格式化 java

上期回顾：历程[一]描述了基本的树状图的绘制，默认节点类型defaultNode中的type是circle,下面这篇描述的是节点抽离自定义节点并做数据静态渲染。

G6 是一个图可视化引擎。它提供了图的绘制、布局、分析、交互、动画等基础的图可视化能力。旨在让关系变得透明，简单。让用户获得关系数据的 Insight。

属性类型默认值描述query- 必填搜索内容，可以使用字符串或正则表达式。Booleanfalse是否区分大小写。Booleanfalse是否区分变音符号，如 u 和 ü。Booleanfalse是否用空格分割字符串以使其成为搜索字符串，如果设置为false，则默认把搜索内容当成一个整体进行搜索；当 query 为正则时，splitBySpace 默认为 false。String< mark />标记搜索到的内容所包裹的标签。

prettier.format 是 Prettier 库的一个主要方法，用于格式化代码。它接收两个参数：要格式化的代码字符串和一个选项对象。parser（解析器）：这是必须的选项，用于指定解析代码的解析器。Prettier 支持多种语言，每种语言都有对应的解析器，例如 babel（用于 JavaScript）、html、css、json 等。printWidth（打印宽度）：指定每行代码的最大长度。如果超过这个长度，Prettier 会尽可能地进行折行。默认值是 80。

以上代码中，RecycleScroller会渲染dataList中的数据，每个列表项的高度是50px，使用页面模式和垂直滚动，渲染缓冲区大小是200px，预渲染10个列表项，并在列表项更新时触发update事件。在页面模式下，滚动容器是document.documentElement，否则是RecycleScroller自身。虚拟滚动的原理是只渲染可视区域内的数据，当用户滚动时，动态计算并渲染新的可视数据，从而实现大数据量的流畅滚动。item-size：数字，每个列表项的大小（高度或宽度）。

对于每个对象，我们先获取它的所有属性名，然后对属性名进行排序，然后使用 Array.prototype.reduce 创建一个新的对象，这个新的对象的属性是按照排序后的顺序添加的。（ps: 如果你的数组中包含对象，那么这种方法可能无法正确地去重，因为 Set 使用的是严格相等性检查 (===)，所以 {} 和 {} 是不相等的。在这种情况下，你可能需要使用其他方法来去重。如果数组中包含的对象，属性的顺序不同，但是属性值一样，我们仍然认为它们是相同的，那么我们可以先对对象的属性进行排序，然后再进行去重。

pinia 是 Vue 的存储库，它允许您跨组件/页面共享状态。就是和vuex一样的实现数据共享。依据Pinia官方文档，Pinia是2019年由vue.js官方成员重新设计的新一代状态管理器，更替Vuex4成为Vuex5。Pinia 目前也已经是 vue 官方正式的状态库。适用于 vue2 和 vue3。可以简单的理解成 Pinia 就是 Vuex5。也就是说， Vue3 项目，建议使用Pinia。pinia官方文档pinia的优点pinia 符合直觉，易于学习。

iframe跨域时，iframe组件之间常用的通信，主要是H5的possmessage方法。一个项目为vue2，一个项目为vue3，两个不同的项目实现iframe嵌入，并实现通信。子页面-vue3， (端口号为127.0.0.1:8081)父页面-vue2（端口号为127.0.0.1:8080）

所以，才会出现【二、案例场景】类似的场景，可以用来多选 ，并可以实现单选父级而不关联子级，选择了将树状数据进行平铺，并且可以分类，为了实现这个，可是绞尽脑汁呀。在每次遍历中，首先通过判断 parentName 是否存在，来决定新的名称 newName 是仅为当前元素的名称，还是父级名称与当前元素名称的组合。创建一个新的对象 newItem，它是当前元素的深拷贝，并添加了两个新的属性：parentId 和 parentName。函数的主要功能是将一个嵌套的分类列表平铺开来，同时保留每个分类项的父级名称。

不能将类型“{ isBackBtn: false;}”分配给类型“(props: PropsType) => RouteMsgType”。对象字面量只能指定已知属性，并且“isBackBtn”不在类型“(props: PropsType) => RouteMsgType”中。ts(2322)headerTopPart.ts(14, 3): 所需类型来自属性 “routeMsg”，在此处的 “InferDefaults” 类型上声明该属性UNUSED: '草稿', //（草稿，未使用）},

Vue 的 $nextTick 方法用于在下一个 DOM 更新周期之后执行延迟回调。在修改数据之后，可以使用 $nextTick 来等待 DOM 更新。这在需要在数据变化之后立即操作 DOM 时非常有用。在 Vue 2 中, $ nextTick 是 Vue 实例的一个方法，可以在组件内部使用 this.$nextTick 调用。methods: {// 在这里执行 DOM 操作，因为此时 DOM 已经更新});},},

const $router = useRouter() // 这是路由跳转的const $route = useRoute() // 用于接收路由参数的useRouter 和 useRoute 是 Vue.js 3.2 中新增的两个用于路由管理的 Composition API。useRouter 用于获取路由实例。而 useRoute 用于获取当前路由对象。使用这两个 API，我们可以更加方便地管理前端路由，提高开发效率。

前端实现水印功能

vue-router 在新窗口打开页面

【代码】Vue项目中支持可选链（链判断运算符）操作。

vue3 的基本认识

try catch 处理异常捕捉

实现二级导航

promise 分批请求

axios 实现重试

一、获取文件名及后缀用到的知识点lastIndexOf() 方法可返回一个指定的字符串值最后出现的位置，在一个字符串中的指定位置从后向前搜索。substring(beginindex,endindex)截取从开始索引beginindex到索引是endindex结束jsvar path="文件名.ppt"var index=path.lastIndexOf(".");var extension=path.substring(index+1,path.length);//index

一 、作用h函数是创建节点, 可实现展示template如何渲染到html中的过程，因为vue渲染到页面上是通过loader打包成模板字符串拼接渲染的，所以 h 函数同样也是通过字符串渲染到html中二、将app.vue中的template用h函数表示app.vuemain.jsimport { createApp, defineComponent, h } from 'vue'import HelloWorld from './components/HelloWorld.vue'// de

一、 安装npm install axios --save二、请求之前的处理import axios from 'axios';import { Toast} from 'mint-ui';// 我用的mint的框架来弹出我的错误返回 大家可以用别的提示import router from '../router'// 默认超时设置axios.defaults.timeout = 50000;// 相对路径设置axios.defaults.baseURL ='';//http re

一、案例效果认购和签约状态下禁用按钮，只要有认购或签约状态就禁用此按钮二、示例代码html<el-table :data="tableData" :style="{borderColor: this.theme, width: '100%'}" height="447" stripe @selection-change="tableSelectChange"></el-table> <el-button typ

使用element-table的时候，工作中遇到后台给的表格数据里时间是一个13位的时间戳，需要转换成时间显示在表格里，可以用element-ui表格自带的:formatter函数,来格式化表格内容：新建一个js文件用来转换时间戳jsexport function timeFormat(data) { // 返回年月日时分秒if (data) { const date = new Date(data) const year = date.getFullYear.

一、对于input输入框只能做数字输入的情况下限制 <div> <el-form-item label="开户行:" prop="bankName" > <el-input v-model="formData.bankName" maxlength="100" @keyup.native="proving"/> </el-form-item> </div> proving() {

一个页面上多个表单需要在一个操作情况下同时验证必填项是否填写完整html<template> <el-form :model="formData" status-icon :rules="rules" label-width='200px' label-position="right" ref="formData1" > <el-form-item label="订单号:" v-if="editorShow" class="el-fo

一、介绍定义组件

一、独立vue3 搭建项目二、vue3 与 vue2 的异同及vue3 新特性注意： setup函数是访问不到this的三、实现二级导航目录及axios 数据交互案例效果由于 刚进页面就需要调用接口 所以 需要在生命周期里 onMounted里 调用...