随笔分类 -  vue

封装Vue 的 SVG 组件
摘要：svg静态资源 在assets下新建一个 svg 文件夹，用于存放svg图片 svgIcon组件 在components 下新建一个文件夹，包含两个文件index.ts和SvgIcon.vue vue.config.js main.ts 需要引入组件svgIcon 使用 **.vue <svg-ic 阅读全文
posted @ 2024-07-31 10:02 shellon 阅读(78) 评论(0) 推荐(0)
React / Vue 实现 Excel 数据导入
摘要：React 1. Excel数据格式化 主要是三个步骤：使用input/antd-upload组件上传需要导入的文件——将excel数据处理为json数据——将json数据处理成antd-table组件所需的数据（主要是增加唯一的key）。 （1）使用antd-upload组件上传需要导入的文件。 阅读全文
posted @ 2022-11-10 19:46 shellon 阅读(1495) 评论(0) 推荐(0)
使用xlsx实现Excel导入
摘要：需求 实现在系统里批量导入数据，通过上传一个excel文件，前端将文件处理为json数据发送给后端。（最好与后端定义好上传的文件模板，方便处理数据） 实现 使用xlsx； xlsx的github地址：https://github.com/SheetJS/sheetjs； 适用于js、react、vu 阅读全文
posted @ 2021-11-19 10:24 shellon 阅读(709) 评论(0) 推荐(0)
vue 判断页面是否滚动到底部
摘要：需求 要求用户阅读完本页所有内容后，下一步按钮才可以点击。 实现思路 通过判断当前页面是否到达底部来设置按钮的点击事件。 要判断当前页面是否到达底部需要用到三个距离——距离顶部的距离scrollTop、可视区域的高度clientHeight、滚动条的高度scrollHeight。 代码（在vue项目 阅读全文
posted @ 2021-07-26 16:43 shellon 阅读(4442) 评论(0) 推荐(1)
element UI遇到的问题
摘要：1. 在el-dialog中获取el-table的ref为undefined 问题：虽然设置了el-dialog的visible为true，但此时Dom并没有更新，因此在Dom更新前取不到el-table。 解决：通过vue.nextTick()方法，在Dom更新后再获取el-table。 阅读全文
posted @ 2021-06-10 10:53 shellon 阅读(125) 评论(0) 推荐(0)
vue项目中Webpack-dev-server的proxy用法
摘要：问题：在VUE项目中，需要请求后台接口获取数据，这时往往会出现跨域问题 解决方法：在vue.config.js中devServer配置proxy 常用的场景 1. 请求/api/XXX现在都会代理到请求http://www.baidu.com/api/XXX，例如/api/login代理到请求htt 阅读全文
posted @ 2021-06-08 10:44 shellon 阅读(984) 评论(0) 推荐(0)
更换vue项目中标签页icon
摘要：问题：在vue项目中， 需要将标签上的icon换成自己所需的，发现在更换了public/favicon.ico后，没有生效，依旧是原来Vue的icon。 解决办法：在vue.config.js中，修改pwa配置 代码 module.exports = { pwa: { iconPaths: { fa 阅读全文
posted @ 2021-06-07 17:06 shellon 阅读(1244) 评论(0) 推荐(0)