cai_niao5623的博客

vue3实现前端导出Excel

vue3实现导出png

vue3实现导出pdf

vue3中使用jszip压缩文件

vue3中使用html2canvas实现截图功能

【代码】vue3使用qrcodejs2-fix插件生成二维码。

因此，1,2,3等同于1,2,3,1,2,3。想要完成svg描边的动画效果，首先我们要熟悉两个两个属性，stroke-dasharray和stroke-dashoffset。线长度 缺口长度 线长度 缺口长度 线长度 ...线长度 缺口长度 线长度 缺口长度 ...线长度 缺口长度 线长度 缺口长度 ...2、获取path长度。

经过svg-sprite-loader插件的解析，你在html里面可以看到有个id为circle（和svg名称一样）的一个symbol标签挂载在svg标签下面。在src/assets/icons这个文件夹下面去创建heart.svg(一定是这个文件夹，因为这个文件夹下的svg文件会被你的svg插件解析)在src/assets/icons文件夹下面创建circle.svg（一定是这个文件夹，因为这个文件夹下的svg文件会被你的svg插件解析）这个时候直接使用就可以了。3、使用iconfont的svg代码。

https://blog.csdn.net/cai_niao5623/article/details/120993974 https://blog.csdn.net/cai_niao5623/article/details/121120372 https://blog.csdn.net/cai_niao5623/article/details/120902001 https://blog.csdn.net/qq_43340606/article/details/12

在el-form-item加上v-if的后，发现prop失效，解决方案：加上一个key就行了，原理是dom复用

今天遇到一个问题，在ipad上面点击el-select的选项，要点击两次才能选中，安卓上面没有遇到类似的问题，还是第一次遇到这么奇怪的问题，然后就找到几种解决方案，记录在此记住这个样式一定要放到全局作用域(例如App.vue)中，不是放在当前作用域中。如果还不生效可以加个/deep/再试试。安装插件fastclick在main.js里引入并使用即可......

这两天换了一台电脑，然后安装了node的最新版本(v16.14.2)。然后把以前项目clone下来后，想着赶紧npm install安装环境干活，但是不知道为啥，安装总是报node-sass错误。然后开启解决错误的模式。这是我的环境： 在网上找到node和node-sass的版本匹配关系这就是为什么失败的原因，我的node是16版本，本应该对应6.0+的node-sass版本，可是代码里面是4.x版本以上的，这就导致node-sass一直失败，知道问题原因那么就很好解决了。问了一些前辈，我们可以升级node

这几天收到了一个新的需求，就是老大说我们y轴的数据差距太大，导致页面很丑，让我优化一下，下面上图：有没有感觉巨丑，第一个百分比太大了，导致后面正常的百分比几乎都在下面了。于是我就翻看官网找到了第一个解决方案将yAxis的type设置为log，这个方式可以很好的解决这个问题，但是有一个前提就是你的数据不能为负数，如果为负数，则数据渲染会出错。那我们的y轴数据中假设就有负数咋办？那我们就用第二种方式解决。1、设置y轴间隔(这个间隔是初始间隔，你可以根据业务需求修改)2、根据原始数据修改上面的y轴间隔

在我们的项目中，我们并不会使用element-plus里所有的ui组件，如果使用完整引入，那么会导致项目打包后的文件臃肿，所以我们一般会采取按需导入的方式。首先你需要安装unplugin-vue-components 和 unplugin-auto-import这两款插件npm install -D unplugin-vue-components unplugin-auto-import然后如果你是用webpack创建的项目，那么你需要在webpack.config.js文件中加入下面代码

editorconfig官网是这么介绍EditorConfig的，“EditorConfig帮助开发人员在不同的编辑器和IDE之间定义和维护一致的编码样式.通俗一点说就是保证每个开发者的编码风格一致首先安装EditorConfig在代码根目录创建.editorconfig文件# http://editorconfig.orgroot = true[*] # 表示所有文件适用charset = utf-8 # 设置文件字符集为 utf-8indent_style = spac

在系统登录后，后端返回一个token，和refreshToken。每次接口请求的时候都会携带这个token，但是这个token一般是有过期时间的，假设过期时间为半小时，你半小时内没有调接口。半小时后你再调接口，会报401错误，代表token过期，这个时候前端有两种解决方案，第一种也就是退出登录，让用户重新登录，这种比较简单。但是我们的经理不希望用户再次登录，而是希望这个token能自动更新，我就稍微的研究了一下，发现可行，所以记录到此，方便日后查看自动刷新token的原理就是：在axios响应拦截器

1、安装npm install @tweenjs/tween.jsoryarn add@tweenjs/tween.js2、变幻的数字案列<template> <div class="compA"> <input v-model.number="num" type="number" step="20"> <p>{{ animatedNumber }}</p> </div></tem.

1、去github官网下载vue3源码https://github.com/vuejs/core2、安装依赖提示：不同版本的源码使用的安装依赖的方式不同，我选择的版本使用的是pnpm3、启动项目此时项目编译的代码会生成vue.js，这个是压缩后的代码，我们能够直接使用4、测试此时已经进入vue源码调试了，但是进入的却是压缩后的源码。所以我们还要做一步操作5、使用sourcemapsourcemap可以映射打包后的代码与源码的位置关系...

1、下载npm下载npm install dplayer - snpm i hls.js -syarn下载yarn add dplayeryarn add hls.js2、使用<template> <div class="box"> <el-card> <div id="dplayer" style="height: 400px"></div> ..

无意中发现了一个vue插件整合内容，超级强大，赶紧记录下来！原文链接：GitHub - opendigg/awesome-github-vue: Vue相关开源项目库汇总https://github.com/opendigg/awesome-github-vue

this.$router：表示全局路由器对象，项目中通过route参数注入路由之后。全局任意一个页面都可以获取这个全局路由器对象，并且调用其中的push、go等方法this.$route：表示当前路由下的路由器对象。可以调用path、query、name、params等属性...

watch:监听器,监听某个数据的变化从而来执行一些操作仅仅是数据发生改变的时候会侦听到 只是会检测到你写在watch里的那些属性,没写的就不会触发updated:是vue生命周期里面的一个钩子函数—data数据更新后触发视图更新。这里是视图更新之后的操作可以在这里执行。不能监听到路由数据(例如网址中的参数) 所有的数据发生变化都会调用(消耗性能) 执行到它的时候时候是数据发生变化且界面更新完毕 每次触发的代码都是同一个...

工作中有很多业务需求都是需要路由直接传递参数的，我们可以用缓存，也可以用vuex。但其实没有必要，vue路由有三种路由传参的基本方式,下面一起探索一下吧。第一种方式methods: { toB(id) { this.$router.push({ path: `/demo2/${id}` }) }}需要对应路由配置如下{ path: '/demo2/:id', component: () =>

其实用antd自带的上传逻辑也行，用自定义的上传逻辑也行。因为我总感觉有些功能用自带的上传逻辑实现不了，或者实现起来比较麻烦，这里就记录一下自定义上传逻辑吧！<a-upload :action="$rootUrl+'BillAudit/BillFile/UploadFile'" :multiple="true" :file-list="fileList" name="files" :customRequest="customRequest" :data="{type:3}

render函数进行递增的时候是不支持跨页递增的，如果我们想要跨页递增是需要做的配置的，不过也很简单，下面看代码1、columns属性配置{title: '序号',dataIndex: 'num', key: 'num',width:50,scopedSlots: { customRender: 'num' }},2、pagination分页设置pagination: { total: 0, pageSize: 10, showTotal:

最近在项目中遇到一个需求，表格需要实现跨页勾选，然后完成批量删除动作，然后就去饿了么官网瞅了半天，发现饿了么官方虽然没有直接教你怎么进行跨页勾选，但是实际上是提供了这个功能的，下面附上详细的实现过程1、给table加上row-key属性<el-table :data="tableData" style="width: 100%" row-key='id'></el-table>官方api：2、打开reserve-selection<el-tab.

ps：好坑，antd竟然没有表格合计行的功能，只好自己研究一下，总结了一个还不错的方案，下面看代码1、添加pageSizeOptions2、查询分页数据的时候判断pagesize在这里，我们希望table当前页展示11条，其中一条是合计，所以我们只要问后端要10条table数据就行了3、塞入合计行数据合计行数据我们后端是分开给我的，并没有把合计行数据放到table数据里去4、响应结果中处理pagesize如果pagesize是10，那么给它+1，因为我们table..

第一步：安装npm安装npm install animate.css --saveyarn安装yarn add animate.css第二步：使用main.js中import animated from 'animate.css'Vue.use(animated)vue中(animate__animated是基类，必须要写)<template> <div class="box"> <div class..