有时候在表格中需要直接点击一个按钮预览图片，element-plus中的图片组件就不方便使用了，所以做了一个简单的封装。直接上代码 {代码...} 使用方式引入一： {代码...} 引入二： {代码...} ​imgUrl类型可以是数组，英文逗号链接的字符串两种类型

前情：项目中偶尔要加一些简单的样式，也不通用的样式，如宽度为100，间距12，所以想搞一个npm包，通过class可以直接生成。需求就是根据特定的类名生成特定的css文件，如： {代码...} 诸如此类的一些尺寸间距设置。监听目录下的vue文件因为我现在用的是vue项目，所以目前只做了vue文件的。。。 {代码...} 获取文件内容 {...

counter-reset 计数器重置 设置初始值：counter-reset: num 1 默认的初始值为 0 可以设置多个：counter-reset: num1 1 num2 2;

vscode启用服务碰到这种情况该怎么解决？打开vscode终端或者命令行，输入netstat -nao | findstr 3003查找端口占用情况如下：找到图片中，第一行的pid，即7092, 终端再输入： taskkill /F /pid 7092 执行结果如下，就代表进程被杀死了，端口也不会继续占用了。

项目中通过pinia做状态管理，在dialog组件中使用，发现了一些问题，在此总结一下。store {代码...} dialog {代码...} dialog中的子组件 {代码...} 一些情况下，在使用弹窗的时候，需要在弹窗上加一个key，保证弹窗关闭的时候，数据重置更新。代码如下： {代码...} 最后运行发现，每次关闭弹窗，然后打开弹窗，child组件...

{代码...}

在使用react-router-dom的时候，用到了useMatches的方法，ts一直提示报错，如下：根据提示，找到了这个类型： {代码...} 这才对泛型有了一丢丢理解。使用时的场景： {代码...} breadcrumb一直提示报错发现matches的数据类型为UIMatch<unknown, unknown>所以报错根据UIMatch的类型提示，我们发现Data和Handle的类型...

以前文章文章介绍了如何导出单列的excel本篇文章介绍下多sheet的excel的导出首先给大家看下效果从上图可知，基础信息的数据格式和其他两个sheet不一样，所以要单独处理根据现有的数据组装xlsx插件所需数据结构页面数据这里以我常用数据为例 {代码...} 组装数据 {代码...} 导出函数封装 {代码...} 至此一个简单导出多列sh...

总结了本人工作中常用的三种导出文件的方式后端返回的单个链接下载 {代码...} 后端返回多个链接，批量下载 {代码...} 后端返回一个流文件 {代码...}

一个css边框动画，感兴趣的可以看看 {代码...}

完整效果代码地址 {代码...} 效果如下：参考文章

如果没有uni.scss可在App.vue中修改。首先这种方式只能全局修改，目前没有发现局部修改的方法，有小伙伴有其他的方法的话，可以帮我补充一下，谢谢~~~

首先is我们常在<component></component>标签中看到 <component :is="demo"></component>这种情况就不在多赘述了！

我们平常都会将element-table封装一次，方便复用，减少不必要的代码。参考ant-design的table组件用法，试着封装了一下。

偶然发现vue的文档中的有这样一个api：defineCustomElement尝试了很久，才明白用法，在这里分享一下：1.修改配置vite.config.js {代码...} 这里是vite的配置，其他方式参考官网2.创建自定义元素方式一 新建list/index.js {代码...} 方式二 新建list/ui.ce.vue,文件内容如下： {代码...} {代码...} {代码...} 注册组件mai...

以下功能基于puppeteer实现中文文档英文文档引入插件，并且打开启动 {代码...} 获取元素（方案一：） {代码...} 通过鼠标事件（方案二） {代码...} tips: 这种方法的前提是要知道，元素的位置，可通过以下方法获取元素位置： {代码...} 4.完整代码片段： {代码...}

each遍历 {代码...} 生成的结果如下： {代码...} for循环 {代码...} 生成结果与上方一样，要注意的是to循环不到4另外to换成through，但是后者可以走到4

此时obj[str]会有错误提示，因为类型为 "string" 的表达式不能用于索引类型 "{}"我知道的解决方案有如下两种：一、obj[str]改为obj[str as keyof typeof obj]二、再tsconfig.json中添加如下配置："suppressImplicitAnyIndexErrors": true，但是vue项目打包的时候可能会报错如下：可以在ts...

实现一个小功能，远程url转为file对象方案一： {代码...} 方案二： {代码...} 使用： {代码...} 参考文章

vue中实现页面导出pdf的功能所需插件 html2canvas和pdfmake原理就是将页面截图，然后生成pdf文件，具体代码如下 {代码...}

pinia本身提供了一个reset方法，可以重置store {代码...} 但是store如果采用setup写法的时候，使用reset方法，因为不支持所以会报错，如下图：解决方法：在mian.ts中为pinia注册reset方法，如下： {代码...} 但是发现了一个问题，不太明白：store中有如下两个变量： {代码...} 页面中obj1可以被重置，obj2并没有被重置，...

方案一：全局引入在main.ts中引入组件库样式 {代码...} 方案二：按需引入通过less 的modifyVars属性vite.config.js {代码...} 这种方法要注意的是，组件是通过unplugin-vue-components插件来加载的，所以还要配置如下 {代码...} 参考文章：官网 具体参考此文章

这里以vue+element为例：项目遇到这样一个需求，将下列表格导出为excel：1.安装xlxs依赖 {代码...} 主要的导出excel的方法有aoa_to_sheet和json_to_sheet两种，这里我主要介绍下后者，主要导出流程如下： {代码...} 2.json_to_sheet的使用，简单来说就是json数据导出excel数据根据官网所说，最后所需要的数据就是这个格...

实现一个简单的弹窗组件：vue2 函数式组件写法，通过extend方法：创建ui.vue文件，存放我们的组件，如下： {代码...} 同级目录下创建一个index.js，内容如下; {代码...} 在其他页面直接引入调用openDialog即可vue3中实现，ui.vue不变，index.js修改如下： {代码...}

1. 变量声明及使用 {代码...} 2. mixin和include2.1 简单使用 {代码...} 编译结果： {代码...} 2.2 进阶使用 {代码...} 编译结果： {代码...} 3. 列表和循环3.1 for循环 {代码...} 注：nth可以获取数组的某个元素；through和to的编译结果一致，要注意是的to走不到最后一个数： {代码...} 3.2 each循环 {代码...} 编译结...

innerHTML与两者区别很大，获取HTML文本解构内容。innerText获取指定节点及其后代节点的文本内容，但是隐藏的元素、style、script标签的内容获取不到！textContext获取的是指定节点的所有子节点的内容，即便是隐藏元素、style、script标签的内容也能获取。设置方面：textContext不会引起重排reflow，而innerText则会。（...

需求，uniapp微信小程序将页面某一部分保存为图片可以分享，下载。实现这一功能需要使用canvas绘图，背景图为网络图片，中间有个原型的二维码，图片格式为base64，还有一些其他的文字。最重要的是：无论是网络图片还是base64格式的，拿到一个临时地址！！！base64方法参考此文章注：base64可以直接canvas绘制，但是真机...

项目中需要表格数据自动滚动，项目基于element-plus，方法如下： {代码...} setup中调用如下： {代码...} props.autoScroll是外部控制是否自动滚动

{代码...} 参考文章

1.新建两个文件夹分别为vue2和vue3 {代码...} 2.安装 {代码...} 3.检查 {代码...} 4.重命名 {代码...} 5.设置系统环境变量，如下图6.随便打开命令行，使用 vue2 -V vue3 -V，如出现版本号则成功， {代码...} 7.若vue3需要拉去vue2的模板，需在vue3的安装目录下执行一下命令： {代码...} 参考文章vue-cli