vue
xiaojinglyd
这个作者很懒,什么都没留下…
展开
-
微前端-多页应用
简介多页应用初级实现方案,技术栈包括elementUI、vue、vuex、axios。。。解决问题项目布局共用问题使用iframe嵌套子页面的方式,只会更新页面部分区域跳转子页面只更新部分区域使用iframe嵌套子页面的方式子页面提示不置顶受到iframe限制,封装方法采用调用主页面vue实例提示子页面控制跳转到主页面路由采用调用主页面vue实例跳转(主页面实例挂载在window上)直接进入子页面自动跳转主页面中对应路由封装方法判断是否被嵌入iframe,原创 2021-05-21 23:45:33 · 579 阅读 · 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:06:48 · 364 阅读 · 0 评论 -
自定义指令函数传参
环境: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:03:13 · 1430 阅读 · 0 评论 -
ant-design-vue的兼容问题2
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 @b转载 2020-08-25 23:34:37 · 562 阅读 · 0 评论 -
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 15:27:27 · 1233 阅读 · 4 评论 -
优雅处理头像加载失败
环境:vue2.6.6element-ui2.13.2问题:用户头像图片加载失败,显示异常难看,难看的失败图标。解决:使用element-ui的Avatar组件<template> <el-avatar :src="photoUrl" size="small"> {{ name.substring(0,1) }} </el-avatar></template><script>export default {原创 2020-07-03 15:25:25 · 2096 阅读 · 0 评论 -
antdv国际化报错
报错内容Warning: [antdv: LocaleProvider] LocaleProvider is deprecated. Please use locale with ConfigProvider instead升级ant-design-vue到1.6.0版本,控制台报错(之前版本1.3.10)错误代码<template> <a-locale-provider :locale="locale"> <div class="home">转载 2020-05-25 15:20:49 · 702 阅读 · 0 评论 -
样式变量共用于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 23:20:23 · 192 阅读 · 0 评论 -
router跳转两次
环境:vue cli3项目问题:路由的参数没有,导致页面报错,实际是路由跳转两次,第一次有参数,第二次没有分析:既然跳转了两次首先应该想发起路由跳转的事件里面是否出现重复的this.$router.push,查看一番并没有,于是想到全局的路由守卫中或许出现重复跳转,结果发现还是没有,结果只能打断点调试查看,发现路由跳转的事件没有执行两次,但是路由守卫执行了两次,这说明肯定有地方多调用...转载 2020-03-10 23:19:14 · 4185 阅读 · 0 评论 -
vue cli3项目多环境打包配置
此处主要讨论的是大于等于3种环境的打包配置,如果只有两种的话NODE_ENV 会是development、production ,这样的一般比较简单,下面将多种环境的配置,两种的可以参考类比。首先配置package.json{ ... "scripts": { // 开发 "dev": "vue-cli-service serve", // ...原创 2020-02-27 15:09:31 · 1269 阅读 · 0 评论 -
elementUI表单form内双向绑定失败
环境:element-ui2.13.0,vue 2.6.10,vueCli3.0初始化问题:form表单内部的表单控件双向绑定失效,表单控件不会显示选中项。如果单选,data内部会同步更新,但是表单控件不会显示已选项;多选时,data内部同步值很慢,只有最后选择的一项。此时当其他不关联表单控件变化时,有问题的表单控件可能会显示选中项,多选甚至会显示选中的多个,很诡异。<templat...原创 2019-12-17 16:47:02 · 2344 阅读 · 0 评论 -
隐藏elementUI的表格扩展列
问题:使用elementUI的Table组件,表格嵌套扩展行,不采用elementUI默认的箭头操作显示扩展行,使用自定义操作按钮,表格带有边框解决:由于不想显示出来扩展列,所以给扩展列组件el-table-column设置了样式display:none,但是实际上并没有解决问题。使用v-show和设置display:none并没有区别,使用v-if真的解决了,但是扩展行木有了,文档中也没有...原创 2019-12-16 16:02:08 · 792 阅读 · 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 15:59:33 · 5066 阅读 · 0 评论 -
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:36:29 · 23270 阅读 · 1 评论 -
Type of the default value for 'propsTree' prop must be a function
今天在运行项目时候发现有报错信息,心里很难受,怎么可以有红。环境:vue cli 3.0初始化带有eslint项目触发位置:组件的props内部思考:之前没怎么用eslint,也很少用到设置默认值,因此没有发现这样的问题。...props: { treeData: { type: Array, default: [] }, propsTree: ...转载 2019-12-09 16:39:52 · 382 阅读 · 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:13:31 · 6271 阅读 · 0 评论