代码随想录

vxe-table踩坑

//vue.config.jslet cdn = { css: [], js: [] };// 通过环境变量 来区分是否使用cdnconst isDev = process.env.NODE_ENV === 'development'; // 判断是否是开发环境let externals = {};if (!isDev) { // 如果是非开发环境 就排除打包 否则不排除 externals = { // key(包名) / value(这个值 是 需要在CDN中获取js, 相.

bus是vue自身就携带的，不用引入，方便但不适合广泛使用。前情提要：vue+ant design vueant design vue这个ui框架那是真不好用，我想要做全局的弹窗，需要在http工具js中根据axios的请求情况来控制到App.vue中spin组件。。。//@/utils/bus.jsimport Vue from 'vue'const bus = new Vue()export default bus//这里为什么没选择挂载在this上呢？因为js文件中莫得t

该博客基于此篇博客：Element UI各种使用问题汇总（Input、Form篇）一直以来，elementui用起来form和rules问题一大堆（小问题），但是积小成大，每次写明明很简单，但总有头疼之时。故将form各种注意事项和rules规则进行整理记录。...

问题：使用其他方式刷新当前页面有时会出现一段时间的空白，用户体验不好(利用这些方式来重新加载数据也不好)provide代码：//被控制页面<template> <div id="app"> <router-view v-if="isRouterAlive" /> </div></template><script>export default { name: 'App', provide()

萤石云文档(web开发)参考博客：https://www.jianshu.com/p/5b104ce25724参考博客：https://www.jianshu.com/p/00b6331f3aff

//正整数/^([0]|[1-9][0-9]*)$///金额(两位小数)/(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)///手机号/^1[3|4|5|6|7|8|9][0-9]\d{8}$//^[1][3,4,5,6,7,8,9][0-9]{9}$///座机号码/^([0-9]{3,4}-)?[0-9]{7,8}$///电子邮箱/^(([^<>()\[\]\\.,;:\.

本文单传组件取自若依微服务为版ruoyi-ui：http://doc.ruoyi.vip/ruoyi-cloud/环境：vue@2.6.12 element-ui@2.15.3 1.文件上传(单个)组件代码：//components/FileUpload<template> <div class="upload-file"> <el-upload :accept="accept" :action="upl...

本文单传组件取自若依微服务为版ruoyi-ui：http://doc.ruoyi.vip/ruoyi-cloud/环境：vue@2.6.12 element-ui@2.15.3 1.图片上传(单张)组件：//components/ImageUpload<template> <div class="component-upload-image"> <el-upload accept=".png,.jpg,.jpeg" ..

环境：vue@2.6.12 element-ui@2.15.5 1.excel导入组件代码：//components/ExcelImport<template> <div class="component-upload-image"> <el-upload accept=".xls,.xlsx" :action="uploadImgUrl" :on-success="handleUploadSucc.

本文中的excel导出工具取自花裤衩的https://gitee.com/panjiachen/vue-element-admin环境：vue@2.6.12 element-ui@2.15.5 file-saver@2.0.4 xlsx@0.14.1 工具方法：//vendor/Export2Excel.js/* eslint-disable */import { saveAs } from 'file-saver'import XLSX from '.

方案：localStorage +beforeunload事件因为我目前只缓存了表单的进度，以此为例。1.组件的created或mounted钩子中加入beforeunload事件window.addEventListener('beforeunload', e => this.beforeunloadHandler(e));2.beforeunload事件的销毁//beforeDestroy和destroy钩子中都可做此种操作beforeDestroy(){ ..

1.在public目录中新建html文件夹，放入html文件2.在main.js加入访问路径Vue.prototype.$publicURL = './';3.在vue组件中使用跳转<a href="javascript:void(0)" @click="jumpOutsideLink(`${$publicURL}html/xxxx.html`,'xxxx协议')">《xxxx协议》</a>//mixin中方法使用window.open进行跳转.

area.js 地区数据结构：//area.js/** * areas 对象转tree结构 */export function addressToTree(){ let districtssheng = address.province_list; let districtsShi = address.city_list; let districtsQu = address.county_list; let newArrSheng = []; for(var i in distr

input事件只有一个默认参数：e,但是我想多传递一个别的参数<a-input :value="record.transferAmount" @change="toChangeInput"/>解决：写法一：//多传递单个参数@change="e => toChangeInput(e, record)"//假设默认参数有两个：oldval, newval@change="(oldval, newval) => toChangeInput(oldval, ne..

有时上传后，因缓存问题，不会显示上传后的文件列表解决：html代码：我当前所用的UI框架是ant design vue给上传组件添加一个fileKey的变量//封装的上传组件<a-row :key="fileKey"> <a-upload list-type="picture-card" accept="image/*,.pdf" :multiple="true" .

/** * 数值金额转中文大写金额 * @param {数值金额} money */Vue.filter('amountToChinese',(money) => { let cnNums = new Array('零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖'); let cnIntRadice = new Array('', '拾', '佰', '仟'); let cnIntUnits = new Array(''.

/** * 格式化金额:逗号分隔三位且保留两位小数 */Vue.filter('amountFormat',(amount) => { //强制保留两位小数 let f = parseFloat(amount); if (isNaN(f)) return false; f = Math.round(amount * 100) / 100; let s = f.toString(); let rs = s.indexOf('.'); if .

vue项目中点击打开弹窗，弹窗上面有子组件，在点击打开弹窗的方法中使用this.$refs却获取不到子组件的ref值：简易代码如下：<a-modal centered v-model="visible" :title="title"> <upload ref="upload" /></a-modal>js: handleOpenUpload(){ this.visibleUpload = tr..

问题：pdf预览引起跨域当时出问题时没截图，现在的图从网络上截取的和vue 接口请求解决跨域问题一样，在本地开发时同样通过 webpack的devServer去代理pdf预览的url（请求），其他环境（生成及测试）则让后端去解决。解决开发环境pdf预览跨域问题就是在devServer中添加一个代理即可：//vue.config.jsproxy: { //数据接口代理 '/api': { target:

就很坑，为什么ant design vue没有表格拖拽？这应该是一个常用并且基本的组件功能，elementui的表格拖拽却如此丝滑。。。官网上说使用vue-draggable-resizable插件来实现，拖拽了一下官网上实现的，真的很丝滑，但是自己做完后，卡卡卡卡卡卡顿。。。1.下载为什么我这里指定了版本？？？因为别的版本我试了，同样的代码，这个版本行，别的版本不行 ，，，就能用就行npm i vue-draggable-resizable@2.1.02.实现/** ..

1.全局mixin对mixin的使用我其实很浑浊，不太清楚，但我一般喜欢将mixin作为vue option API的公共method来使用，即将mixin全局引入，使没有组件中的methods选项都拥有该方法，比如使用ant design vue框架时没有表格拖拽功能，那么可以通过mixin混入，使每个页面都有这个方法//mixin/common.js/** * 全局mixins */export default { methods:{ filterColum

1.下载npm i vue-pdf//我使用的是4.2.0版本,版本可能影响问题的解决npm i vue-pdf@4.2.0 2.作为组件引入import pdf from 'vue-pdf';export default { components:{ pdf }}3.使用定义pages变量稍后用来获取pdf的页数<pdf v-for="i in pages" :key="i" :src="pdfUrl" ...

利用原生fetch下载文件，该方法完美解决了浏览器下载文件会打开文件（本身是下载，结果却打开文件变成了预览文件）的问题。tips: 1.在a标签上加download属性有时会不管用 2.直接使用blob API将url转换为blob地址，API会直接将url认为是字符串，所以下载文件后打开文件显示文件已损坏 3.推荐将该方法放入mixin中，需要使用的组件可引入//url:文件地址//fileName 文件名download(url,fileName){ ...

/** * 将扁平化数据结构处理为tree结构 * @param { 扁平化数据结构 } obj */export function formatTree(obj){　　let copyedObj = JSON.parse(JSON.stringify(obj)); //深拷贝源数据　　return copyedObj.filter(parent =>{　　　　let findChildren = copyedObj.filter(child => {　　　　　　retur.

1.携带对象json转字符串后进行编码<span slot="action" slot-scope="record" ref="action"> <a-button type="link" @click="$router.push({name:'editSonAccount',query: { record: encodeURIComponent(JSON.stringify(record)) }})">