vue
文章平均质量分 64
lydxwj
慢慢踩坑
展开
-
搭建规范化的vue2项目
Vue2+Vuex+Router+Eslint+Prettier原创 2024-07-27 10:06:49 · 660 阅读 · 0 评论 -
运行vue3项目相关报错
VSCode打开TS+Vue3项目很多地方报错Reached heap limit Allocation failed - avascript heap out of memoryvue动态生成路由的项目,webpack怎么知道需要打包那些文件原创 2024-06-16 14:45:14 · 1215 阅读 · 0 评论 -
网页生成PDF表格诡异多出空白
puppeteer生成pdf遇到表格出现留白,可能出现在表格体头和底出现空白,空白高度不固定,表格中的数据也存在丢失原创 2023-07-20 21:49:25 · 864 阅读 · 0 评论 -
vue3项目开发中系列问题
vue3的jsx语法,vue3动态路由,dataOptions.call is not a function,pnpm本地调试组件库,outside of Vite serving allow list原创 2023-07-20 21:47:28 · 904 阅读 · 0 评论 -
element的form校验问题
1. 表单项必填校验,内容为空时没问题,填写内容后不实时移除必填提示信息2. 新增的动态表单项,不能实时校验,执行form.validate会进行校验原创 2023-03-12 18:35:30 · 565 阅读 · 0 评论 -
微前端-多页应用
简介多页应用初级实现方案,技术栈包括elementUI、vue、vuex、axios。。。解决问题项目布局共用问题使用iframe嵌套子页面的方式,只会更新页面部分区域跳转子页面只更新部分区域使用iframe嵌套子页面的方式子页面提示不置顶受到iframe限制,封装方法采用调用主页面vue实例提示子页面控制跳转到主页面路由采用调用主页面vue实例跳转(主页面实例挂载在window上)直接进入子页面自动跳转主页面中对应路由封装方法判断是否被嵌入iframe,转载 2021-05-22 00:00:41 · 321 阅读 · 0 评论 -
element表格多选和单选、选中高亮处理、保存多页选中记录和翻页回显选中
环境:element-ui@2.13.2vue@2.6.6示例:1. 表格单选方案1<template><div class="radio_page"> <div class="selected_num">已选 {{selectedRow.name}}</div> <el-table :data="list" ref="table" :border="true" v-loading="转载 2021-01-27 22:09:47 · 451 阅读 · 1 评论 -
自定义指令函数传参
环境:vue@2.6.6问题:绑定函数传参传参多个多样参数动态变化方案:1. 采用传对象方式(binding.value)<el-button v-mydirective="{ fn: myFn, args: x }" type="text" size="small">测试</el-button>const mydirective = { inserted: function (el, binding) { const args = bindin原创 2021-01-27 22:00:19 · 2201 阅读 · 0 评论 -
ant-design-vue的兼容问题2
问题:ant-design-vue不兼容ie浏览器要求:ie兼容 >= 9环境:@vue/cli@4.5.4,ant-design-vue@1.6.4之前写了一篇博文解决ant-design-vue的兼容,由于@vue/cli搭建项目升级导致不能生效,为了解决这个遗憾,本片博文诞生第一步:安装依赖npm install --save-dev @babel/plugin-transform-runtimenpm install --save @babel/runtimenpm inst原创 2020-08-25 23:22:22 · 3602 阅读 · 2 评论 -
element树形表格更新问题
环境:element-ui:2.13.2vue:2.6.6问题:新增,删除操作,表格不同步更新。表格数据懒加载,表格带有新增、新增子节点、编辑、删除、批量删除操作解析:表格每一行数据都有id和pid,pid用来标记当前行的父节点,hasChildren标识是否有子节点,children存放子节点的数组。更新节点的关键代码是this.$set(this.$refs.table.store.states.lazyTreeNodeMap, pid, nodes);,这一段代码很多文章可以搜索到,但是没原创 2020-07-03 10:33:16 · 2179 阅读 · 0 评论 -
router跳转两次
环境:vue cli3项目问题:路由的参数没有,导致页面报错,实际是路由跳转两次,第一次有参数,第二次没有分析:既然跳转了两次首先应该想发起路由跳转的事件里面是否出现重复的this.$router.push,查看一番并没有,于是想到全局的路由守卫中或许出现重复跳转,结果发现还是没有,结果只能打断点调试查看,发现路由跳转的事件没有执行两次,但是路由守卫执行了两次,这说明肯定有地方多调用...原创 2020-03-10 22:52:43 · 4366 阅读 · 2 评论 -
样式变量共用于js或者template
环境vue cli4项目stylus (如果使用sass、less,可以类比)步骤创建stylus的变量文件variable.styl$mainBg = rgba(0, 21, 42, 1);$mainWidth = 210px;// 导出变量用于js:export { mainBg: $mainBg; mainWidth: $mainWidth;}j...原创 2020-03-10 20:45:18 · 305 阅读 · 0 评论 -
vue cli3项目多环境打包配置
此处主要讨论的是大于等于3种环境的打包配置,如果只有两种的话NODE_ENV 会是development、production ,这样的一般比较简单,下面将多种环境的配置,两种的可以参考类比。首先配置package.json{ ... "scripts": { // 开发 "dev": "vue-cli-service serve", // ...转载 2020-02-27 15:13:59 · 961 阅读 · 0 评论 -
elementUI表单form内双向绑定失败
环境:element-ui2.13.0,vue 2.6.10,vueCli3.0初始化问题:form表单内部的表单控件双向绑定失效,表单控件不会显示选中项。如果单选,data内部会同步更新,但是表单控件不会显示已选项;多选时,data内部同步值很慢,只有最后选择的一项。此时当其他不关联表单控件变化时,有问题的表单控件可能会显示选中项,多选甚至会显示选中的多个,很诡异。<templat...转载 2019-12-17 16:54:15 · 3199 阅读 · 0 评论 -
隐藏elementUI的表格扩展列
问题:使用elementUI的Table组件,表格嵌套扩展行,不采用elementUI默认的箭头操作显示扩展行,使用自定义操作按钮,表格带有边框解决:由于不想显示出来扩展列,所以给扩展列组件el-table-column设置了样式display:none,但是实际上并没有解决问题。使用v-show和设置display:none并没有区别,使用v-if真的解决了,但是扩展行木有了,文档中也没有...转载 2019-12-16 16:12:57 · 547 阅读 · 0 评论 -
Disallow self-closing on HTML void elements
环境:vue cli 3.0初始化带有eslint项目触发位置:<img class="avatar" :src="photoUrl" alt="avatar" />解决:报错内容是:不允许对HTML void元素进行自动关闭方法一:<img class="avatar" :src="photoUrl" alt="avatar">方法二:修改文件.es...转载 2019-12-16 16:09:17 · 20296 阅读 · 8 评论 -
TypeError: Converting circular structure to JSON
报错:[Vue warn]: Error in nextTick: "TypeError: Converting circular structure to JSON --> starting at object with constructor 'Vue' | property '$options' -> object with constructor 'O...转载 2019-12-11 11:41:48 · 49714 阅读 · 4 评论 -
Type of the default value for 'propsTree' prop must be a function
Type of the default value for ‘propsTree’ prop must be a function今天在运行项目时候发现有报错信息,心里很难受,怎么可以有红。环境:vue cli 3.0初始化带有eslint项目触发位置:组件的props内部思考:之前没怎么用eslint,也很少用到设置默认值,因此没有发现这样的问题。...props: { tr...原创 2019-12-09 16:34:52 · 556 阅读 · 0 评论 -
tree-select
由于elementUI没有树形选择组件,但是项目又需要,因此粗实现单选择的树形选择组件。组件组成elementUI的InputelementUI的SelectelementUI的TreeAttributesv-model 双向绑定的 绑定值treeData 树形数据,参考结构[{ isLeaf: false, label: '粗树干1',...原创 2019-12-08 17:24:47 · 262 阅读 · 0 评论 -
vue-router设置404失败
做一个多页面项目,一般会加一个404页面。问题router中设置匹配404规则,但是没有生效new Router({ mode: 'history', routes: [{ path: '/', name: 'layout', component: Layout, redirect: '/home', children: [{ path: '/home', ...转载 2019-12-06 11:49:23 · 1090 阅读 · 0 评论 -
element按需导入报错
问题elementui改为按需引入后出现报错,报错信息Uncaught ReferenceError: _MessageBox is not defined操作npm i -D babel-plugin-componentbabel.config.jsmodule.exports = { presets: [ '@vue/app' ], plugins: [...原创 2019-12-04 18:52:25 · 4388 阅读 · 0 评论 -
element分页组件控制翻页
问题:点击分页组件切换页码,切换之前显示消息提示框,根据消息提示框的操作来确定是否切换页码。但是Pagination组件没有页码切换前的回调,只有切换后的回调。分析:分页组件的current-page可以通过.sync修饰符实现双向绑定当前页码,分页组件的current-change可以配置页码变化后回调,此时分页组件的页码current-page已经改变了,并且呈现在UI上。根据提示框的操...原创 2019-11-14 18:32:01 · 2716 阅读 · 2 评论 -
路由重复注册Duplicate named routes
问题:控制台报错Duplicate named routes,一开始登录,切换用户时都会出现环境:vue: 2.6.6 element-ui: 2.10.1 动态权限控制路由分析:报错的意思是路由重复定义。查看静态路由并没有出现重复,打断点发现,动态添加路由执行了多次,增加变量控制只添加一次动态路由。解决登录报错,没有解决切换用户报错。切换用户时router对象并没有清空上次动态添加的...原创 2019-10-30 16:40:59 · 4090 阅读 · 0 评论 -
elementUI表格动态渲染错乱
问题:表格设置固定高度,表格内容超过高度,表格出现滚动,但是表格滚动部分高度偏小(比表格高度减去表格头小)。表格左侧第一列固定左侧,横向出现滚动,表格横向出现错位。不固定出现,频率有时高、有时低。环境:vue: 2.6.6 element-ui: 2.10.1 请求接口动态渲染表格头和表格内容分析:一开始会想是项目中样式冲突导致错乱,页面切换加审查一番元素之后会发现并不是。标签带有c...原创 2019-10-30 16:21:57 · 8149 阅读 · 5 评论 -
utils
最近写了一个前端工具方法项目,主要为了备用和分享交流学习。下面是项目中包含的封装方法。前端工具方法数字相关–number保留指定小数位数–toFixed数字千分位加逗号–thousandCents生成指定范围随机数–random验证相关–verification判断是否为手机号–isPhoneNum判断是否为邮箱地址–isEmail判断是否为身份证号–isCardID...原创 2019-09-04 10:50:50 · 405 阅读 · 0 评论 -
vue-router设置404失败
做一个多页面项目,一般会加一个404页面。问题router中设置匹配404规则,但是没有生效new Router({ mode: 'history', routes: [{ path: '/', name: 'layout', component: Layout, redirect: '/home', children: [{ path: '/home', ...转载 2019-08-18 23:57:35 · 6426 阅读 · 0 评论 -
mpvue开发小程序踩坑
1.项目运行npm run dev // 可以实现热更新npm run build:wx // 不会热更新,更改需要再次执行新增加页面,需要重新运行npm run dev坑点:重新运行npm run dev,仍然无法看到新页面,此时需要先运行npm run build:wx,然后再试项目文件大时需要分包,分包配置和原生开发小程序一样,npm run dev运行项目,第一次真机测...原创 2019-07-10 23:05:08 · 318 阅读 · 0 评论 -
Ant Design of Vue表格点击行展开与操作单元格冲突
Ant Design of Vue表格点击行展开与操作单元格冲突问题:使用Ant Design of Vue的Table组件,实现表格嵌套表格,并且点击父表格行展开子表格,由于父表格中有操作单元格,点击编辑或者删除时候,子表格也会切换显示。原因:事件冒泡,点击编辑或者删除时候,点击事件冒泡到父表格行,触发了父表格行的点击事件,才会出现上面的问题。<template> &l...原创 2019-06-02 17:48:41 · 9072 阅读 · 0 评论 -
ant-design-vue的兼容问题
ant-design-vue的兼容问题问题:ant-design-vue不兼容ie浏览器要求:ie兼容 >= 9环境:vue cli3搭建项目,ant-design-vue@1.3.8babel.config.js文件module.exports = { presets: [ '@vue/app', // 兼容配置 [ '@babel/pre...原创 2019-05-07 00:44:59 · 19492 阅读 · 24 评论 -
element UI 自定义传参的解决方法
element UI 自定义传参的解决方法<el-autocomplete v-model="state4" :fetch-suggestions="querySearchAsync" placeholder="请输入内容" @select="handleSelect"</el-autocomplete>这里的hanleSelect默认绑定的参数是选中的那...转载 2019-04-08 00:20:06 · 3361 阅读 · 0 评论