![](https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue工作
谭CV
希望未来一年,活在UI里
展开
-
vxe-table使用碰到的问题
vxe-table踩坑原创 2022-06-09 17:54:17 · 4404 阅读 · 0 评论 -
【vue】配置cdn加速
//vue.config.jslet cdn = { css: [], js: [] };// 通过环境变量 来区分是否使用cdnconst isDev = process.env.NODE_ENV === 'development'; // 判断是否是开发环境let externals = {};if (!isDev) { // 如果是非开发环境 就排除打包 否则不排除 externals = { // key(包名) / value(这个值 是 需要在CDN中获取js, 相.原创 2021-11-10 11:02:46 · 3660 阅读 · 2 评论 -
【vue】event bus简单使用(在js文件与vue文件之间通信)
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原创 2021-09-17 15:41:08 · 1267 阅读 · 0 评论 -
【vue】elementui Form和rules注意事项及规则
该博客基于此篇博客:Element UI各种使用问题汇总(Input、Form篇)一直以来,elementui用起来form和rules问题一大堆(小问题),但是积小成大,每次写明明很简单,但总有头疼之时。故将form各种注意事项和rules规则进行整理记录。...原创 2021-09-14 15:24:16 · 671 阅读 · 0 评论 -
【vue】使用provide,inject来刷新页面
问题:使用其他方式刷新当前页面有时会出现一段时间的空白,用户体验不好(利用这些方式来重新加载数据也不好)provide代码://被控制页面<template> <div id="app"> <router-view v-if="isRouterAlive" /> </div></template><script>export default { name: 'App', provide()原创 2021-09-10 15:22:30 · 202 阅读 · 0 评论 -
vue 萤石云视频监控对接
萤石云文档(web开发)参考博客:https://www.jianshu.com/p/5b104ce25724参考博客:https://www.jianshu.com/p/00b6331f3aff原创 2021-09-09 17:18:15 · 8436 阅读 · 11 评论 -
js 常用正则表达式
//正整数/^([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}$///电子邮箱/^(([^<>()\[\]\\.,;:\.原创 2021-08-27 12:01:36 · 388 阅读 · 0 评论 -
【工具】vue 文件上传(单个/多个),拖拽上传
本文单传组件取自若依微服务为版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...原创 2021-08-18 12:11:21 · 4825 阅读 · 8 评论 -
【工具】vue 图片上传(单张/多张)
本文单传组件取自若依微服务为版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" ..原创 2021-08-18 11:55:05 · 2332 阅读 · 1 评论 -
【工具】vue excel导入通用组件-模板导出组件
环境: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.原创 2021-08-18 11:37:08 · 2867 阅读 · 0 评论 -
【工具】vue excel导出
本文中的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 '.转载 2021-08-18 11:15:31 · 253 阅读 · 0 评论 -
【vue】表单数据缓存
方案:localStorage +beforeunload事件因为我目前只缓存了表单的进度,以此为例。1.组件的created或mounted钩子中加入beforeunload事件window.addEventListener('beforeunload', e => this.beforeunloadHandler(e));2.beforeunload事件的销毁//beforeDestroy和destroy钩子中都可做此种操作beforeDestroy(){ ..原创 2021-04-30 15:52:31 · 1838 阅读 · 1 评论 -
【vue】在vue项目直接使用html文件
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进行跳转.原创 2021-04-30 15:37:38 · 8771 阅读 · 7 评论 -
【vue && js】省市区js数据转为tree结构
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转载 2021-04-16 10:06:31 · 2033 阅读 · 1 评论 -
【vue】change事件在保留默认形参的情况下传递自定义形参
input事件只有一个默认参数:e,但是我想多传递一个别的参数<a-input :value="record.transferAmount" @change="toChangeInput"/>解决:写法一://多传递单个参数@change="e => toChangeInput(e, record)"//假设默认参数有两个:oldval, newval@change="(oldval, newval) => toChangeInput(oldval, ne..原创 2021-04-08 12:00:28 · 1687 阅读 · 0 评论 -
【vue && 上传组件】清除上传组件缓存,使之每次显示新的文件列表
有时上传后,因缓存问题,不会显示上传后的文件列表解决:html代码:我当前所用的UI框架是ant design vue给上传组件添加一个fileKey的变量//封装的上传组件<a-row :key="fileKey"> <a-upload list-type="picture-card" accept="image/*,.pdf" :multiple="true" .原创 2021-03-25 18:09:05 · 1069 阅读 · 2 评论 -
【工具类】数值金额转中文大写金额
/** * 数值金额转中文大写金额 * @param {数值金额} money */Vue.filter('amountToChinese',(money) => { let cnNums = new Array('零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖'); let cnIntRadice = new Array('', '拾', '佰', '仟'); let cnIntUnits = new Array(''.转载 2021-03-18 12:04:29 · 208 阅读 · 0 评论 -
【工具类】格式化金额:逗号分隔三位且保留两位小数
/** * 格式化金额:逗号分隔三位且保留两位小数 */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 .转载 2021-03-18 12:02:18 · 533 阅读 · 0 评论 -
【vue && 弹窗】vue项目弹窗中的组件编辑ref值却获取不到
vue项目中点击打开弹窗,弹窗上面有子组件,在点击打开弹窗的方法中使用this.$refs却获取不到子组件的ref值:简易代码如下:<a-modal centered v-model="visible" :title="title"> <upload ref="upload" /></a-modal>js: handleOpenUpload(){ this.visibleUpload = tr..原创 2021-03-10 15:56:12 · 3877 阅读 · 0 评论 -
【vue && vue-pdf】解决pdf预览时的跨域问题
问题:pdf预览引起跨域当时出问题时没截图,现在的图从网络上截取的和vue 接口请求解决跨域问题一样,在本地开发时同样通过 webpack的devServer去代理pdf预览的url(请求),其他环境(生成及测试)则让后端去解决。解决开发环境pdf预览跨域问题就是在devServer中添加一个代理即可://vue.config.jsproxy: { //数据接口代理 '/api': { target:原创 2021-02-22 10:43:20 · 14790 阅读 · 10 评论 -
【vue && ant design vue】利用vue-draggable-resizable插件实现表格拖拽
就很坑,为什么ant design vue没有表格拖拽?这应该是一个常用并且基本的组件功能,elementui的表格拖拽却如此丝滑。。。官网上说使用vue-draggable-resizable插件来实现,拖拽了一下官网上实现的,真的很丝滑,但是自己做完后,卡卡卡卡卡卡顿。。。1.下载为什么我这里指定了版本???因为别的版本我试了,同样的代码,这个版本行,别的版本不行 ,,,就能用就行npm i vue-draggable-resizable@2.1.02.实现/** ..原创 2021-02-19 15:39:24 · 1773 阅读 · 3 评论 -
【vue】mixin混入的使用
1.全局mixin对mixin的使用我其实很浑浊,不太清楚,但我一般喜欢将mixin作为vue option API的公共method来使用,即将mixin全局引入,使没有组件中的methods选项都拥有该方法,比如使用ant design vue框架时没有表格拖拽功能,那么可以通过mixin混入,使每个页面都有这个方法//mixin/common.js/** * 全局mixins */export default { methods:{ filterColum原创 2021-02-19 15:13:44 · 200 阅读 · 0 评论 -
【vue && vue-pdf】pdf展示及解决签章不显示的问题
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" ...原创 2021-02-18 17:39:41 · 1853 阅读 · 0 评论 -
【vue pc端】 下载文件
利用原生fetch下载文件,该方法完美解决了浏览器下载文件会打开文件(本身是下载,结果却打开文件变成了预览文件)的问题。tips: 1.在a标签上加download属性有时会不管用 2.直接使用blob API将url转换为blob地址,API会直接将url认为是字符串,所以下载文件后打开文件显示文件已损坏 3.推荐将该方法放入mixin中,需要使用的组件可引入//url:文件地址//fileName 文件名download(url,fileName){ ...原创 2021-02-18 15:31:54 · 422 阅读 · 0 评论 -
【vue】 将扁平化数组结构数据处理为tree对象数组并对tree对象进行排序
/** * 将扁平化数据结构处理为tree结构 * @param { 扁平化数据结构 } obj */export function formatTree(obj){ let copyedObj = JSON.parse(JSON.stringify(obj)); //深拷贝源数据 return copyedObj.filter(parent =>{ let findChildren = copyedObj.filter(child => { retur.原创 2021-02-05 15:37:59 · 1608 阅读 · 2 评论 -
【vue】 携带对象参数跳转页面
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)) }})">原创 2021-02-05 14:53:49 · 848 阅读 · 0 评论