ant design vue 踩坑记录
我是真的狗
这个作者很懒,什么都没留下…
展开
-
关于vue中使用事件车(Bus)方式实现兄弟组件通信时$on无法获取数据的问题
关于vue中使用事件车Bus方式实现兄弟组件通信时$on无法获取数据的问题问题描述原因解决问题描述使用使用一个事件车(总线)的方式实现兄弟组件之间的通信,在接收数据时,当前组件获取到的数据一直未null首先考虑是不是没有执行这一步代码,随便打印一段信息,控制台正常输出确认监听事件 $on 的周期确实在 mounted尝试使用 this.$nextClick ,无效原因百度的时候发现:感悟:$on 注册事件 $emit 触发事件,事件应该是先注册而后才能去触发联想到自己需要通信的两原创 2020-09-30 12:21:11 · 6665 阅读 · 7 评论 -
ant design vue中upload组件如何修改新上传文件的状态
ant design vue中upload组件如何修改新上传文件的状态问题解决方法问题项目中前后台约定的后台数据的基本格式为:{ code: number, // 状态码,整型:0-无异常 1-有异常 data: any, // 真实的数据,类型任意,如:数字,字符串,列表,对象 message: string // 异常描述信息}上传文件时,后台的响应数据存储在 file 的 response 字段中,如下图:现在的问题是,当后台发生错误的时候,即:response 中的原创 2020-09-21 11:41:38 · 4251 阅读 · 0 评论 -
关于vue项目打包后刷新页面404的问题
关于vue项目打包后刷新页面404的问题问题解决其他参考问题打包项目后,和后台童鞋合并过代码,发现刷新页面会出现路由未定义的情况解决我们起初是修改后端项目里关于路由的配置,主要是修改了一下路由的正则表达式,如下:url('^(.*)$', TemplateView.as_view(template_name="index.html"), name="index")想法是,除了单独配置过的路由,所有的其他路由都交由前端路由去响应也确实解决了问题,但是,这样的修改却导致了后端童鞋配置的某一原创 2020-09-14 14:16:06 · 1031 阅读 · 0 评论 -
Vue项目中,对于index.html中BASE_URL的配置
Vue项目中,对于index.html中BASE_URL的配置问题解决问题有时候后端配置资源的默认访问路径的时候,可能会与前端打包时配置的默认根路径有所差异比如:后端要访问静态资源的根路径为/static,而一般情况下,我们项目的vue.config.js中对BAES_URL的配置是/,或者不做配置,因为它默认的值也是/这个路径决定了我们的前端项目打包后获取静态资源的默认的根路径(不显示在代码中),同时,这个路径也在public/index.html中有明显的引用,大多时候都会看到如下的代码:原创 2020-09-11 16:16:24 · 21098 阅读 · 1 评论 -
PageHeaderWrapper 组件去除面包屑功能
PageHeaderWrapper 组件去除面包屑功能需求历程实现需求需求就是去除PageHeaderWrapper 组件去除面包屑功能啦虽然感觉拣了芝麻丢了西瓜,毕竟这个组件最大的特色就是面包屑功能了嘞历程PageHeaderWrapper 组件算是 ProLayout 布局组件的一个子分支ProLayout 组件非常方便,通过简单地配置就可以实现精美的页面布局官方文档地址点我哦不幸的是,这里并没有提供展示或隐藏面包屑的 API 呢只有去看看源码了在源码中观察到,该组件的 pr原创 2020-08-20 17:28:16 · 5033 阅读 · 3 评论 -
Vue Ant Design Pro 中定制主题
Vue Ant Design Pro 中定制主题需求定制主题去除“正在切换主题”过渡效果需求项目要求使用草绿色的主题色并且去除如下的loading效果定制主题这里可以参照 Ant Design Pro of Vue 官方文档哦定制方式是使用 less 的 modifyVars 的方式进行覆盖变量官方文档已经给出了 webpack 、vue cli 2 以及 vue cli 3 三种不同场景下主题的定制方式。这里不再过多赘述vue cli 3 下定制主题方式如下:项目根目录下修原创 2020-08-20 17:08:34 · 2399 阅读 · 6 评论 -
ant design vue 中Upload组件如何自定义文件列表的样式
ant design vue 中Upload组件如何自定义文件列表的样式问题历程UploadList 组件源码h() 方法实现注问题技术:vue、ant design vue在开发项目的时候呢,遇到这样一个需求:就是在展示文件列表的时候,需要使用小图标标明该文件的类型实现类似下图的效果:历程首先当前还是仔细去研究官方文档啦不幸的是,官方文档并未给出相应的案例有点麻爪,然后向领导反映:“能不能用文字代替呀”,领导人给我一张图:经过对官方文档仔细的阅读,依旧咩有发现领导给的案例,想想原创 2020-08-18 12:56:00 · 9293 阅读 · 11 评论 -
Ant Design Vue 中 Upload 组件 下载download和删除remove 的使用
Ant Design Vue 中 Upload 组件 下载 download和删除 remove 的使用Upload组件的基本使用remove (文件删除)的实现download(文件下载)的实现完整代码Upload组件的基本使用先来看看官方给出的案例<template> <div> <a-upload action="https://www.mocky.io/v2/5cc8019d300000980a055e76" list-ty原创 2020-08-05 14:08:31 · 14240 阅读 · 21 评论 -
Ant Design Vue 中关于 List 组件分页的配置(pagenation)
关于 List 组件这里可以先看看官方文档为我们提供的API清楚地看到,List组件提供了 pagenation 属性,说明我们可以通过该属性针对List的数据进行分页再看看对于 pagenation,官方文档主要提供了哪些配置选项不幸的是,在 List 组件这一章对 pagenation 属性的描述极其有限,它提示我们点击“配置”这段蓝色字体关于 Pagenation 组件点击之后,就来到了Pagenation 分页器组件这一章,很明显,Pagenation(分页器)组件的API和原创 2020-08-04 14:47:12 · 6641 阅读 · 2 评论 -
ant design vue 中v-if无效
ant design vue 中v-if无效问题:在组件内部使用 v-if 动态渲染一张图片,但渲染出来的一直是 v-else 的内容结论:Grid布局组件上(即:a-row, a-col)中使用 v-for、v-if 需谨慎问题:在组件内部使用 v-if 动态渲染一张图片,但渲染出来的一直是 v-else 的内容验证 v-if 后的变量是否为 true,{{ item.img_url ? 1 : 2 }} 语法完全正常<div>{{ item.img_url ? 1 : 2 }} &原创 2020-08-03 11:28:02 · 3009 阅读 · 0 评论