ant-design-vue 快速避坑指南(推荐)


Posted in Javascript onJanuary 21, 2020

ant-design-vue是蚂蚁金服 Ant Design 官方唯一推荐的Vue版UI组件库,它其实是Ant Design的Vue实现,组件的风格与Ant Design保持同步,组件的html结构和css样式也保持一致。 用下来发现它的确称得上为数不多的完整的VUE组件库与开发方案集成项目。

本文主要目的是总结一些开发过程中比较耗时间去查找,文档中没有具体说明的常见问题,同时希望能给新上手此框架的同学提供一些参考作用。 

1.Table对接后台返回数据

针对Table数据格式与后他接口返回数据格式不一致问题,修改 `@/components/table/index.js` 132行起

主要修改pageNo,pageSize,totalCount,data这字段与后台返回字段一致就OK了

result.then(r => {
 this.localPagination = Object.assign({}, this.localPagination, {
  current: r.pageNo, // 这里修改当前分页字段
  total: r.totalCount, // 这里修改总记录数字段
  showSizeChanger: this.showSizeChanger,
  pageSize: (pagination && pagination.pageSize) ||
   this.localPagination.pageSize // 这里修改总记录数当前页数字段
 })
  //r.data中的data修改为返回列表字段
 if (r.data.length == 0 && this.localPagination.current != 1) {
  this.localPagination.current--
  this.loadData()
  return
 }
 !r.totalCount && ['auto', false].includes(this.showPagination) && (this.localPagination = false)
 this.localDataSource = r.data // 返回结果中的数组数据
 this.localLoading = false
});

2.table操作栏参数问题

在table的dataSource中指定的每一个数据中,都必须包含有name为key的对象,而显示出的数据就是相应key对应的数据,dataIndex就用来声明列数据在数据项中对应的key

然而在操作列中,我们一般需要传入不知一项数据,试了一下如下图配置dataIndex,数据并不能正确传入slot-scope中

columns: [
  ...
  {
      title: '操作',
      dataIndex: 'id,text',
      key: 'id',
      scopedSlots: { customRender: 'operation' }
  }

多尝试后发现,其实只要不配置dataIndex就好了。。。slot-scope自定义一个字段,自然就拿到了整行数据

3.table分页组件展示条数

:pagination="{showTotal: total => `共${total}条`}"

4.神奇的最后一个标签隐藏问题

使用可编辑tags过程中值得注意的问题,一般删除某个tag不止是从DOM中删除这个tag,而是需要调接口修改数据,那么这时候如果选择用修改完的数据动态渲染tag列表,并且理所当然地认为动态绑定数据就不需要关心数据手动处理,问题就出现了:

假如一共有5个tag,现在删除第一个tag,并调用接口返回新数据,注意tags默认的删除操作也不是从DOM中删除这个tag,而是将这个tag设置为```display:none```!这就导致了一个很神奇的问题,此时新返回的tags数组长度已经 -1,而它仍然认为当前列表的第一个Tag是隐藏的,最后呈现的效果就是只剩3个Tag,此时再接着删除第一个tag(其实是第二个),那么就只剩1个tag了。。

<a-tag
 v-for="(tag, index) in Tags"
  :key="tag.id"
  :closable="tagCloseable"
  :afterClose="() => handleTagStatus(0,tag)"
  >{{ tag.name }}
</a-tag>

这个问题貌似没什么好的办法,只能放弃绑定动态数据,判断接口调用成功后,再用文档中的手动操作增减数据的办法:

this.Tags = this.Tags.filter(tag => tag.id !== removeTag.id)

5.表单的各种常规操作

单独触发某个字段的校验:

this.form.validateFields(['name'], { force: true })

清除某个字段的值:

this.form.resetFields(`name`,'')

设置表单初始值:

this.form.resetFields(`name`,'')

注意:不初始化的值用undefined而非‘',否则下拉框会不显示placeholder!

自定义文件上传的action函数:

<a-upload :customRequest="upLoad"></a-upload>

upLoad (info) {
  let file = info.file;
  let param = new FormData(); //创建form对象
  param.append('file',file);//通过append向form对象添加数据
  console.log(param.get('file')); //FormData私有类对象访问不到,可以通过get判断值是否传进去
  let config = {
    headers:{'Content-Type':'multipart/form-data'}
  }; 
  this.$http.post(url, param, config).then(res => {
    ...
  })
},

6.接口跨域携带cookie问题

做单点登录时需要在请求头中携带cookie,遇到了很坑人的问题,实际原因是对mock.js的实现不够了解。

还是在`@/src/utils/request.js`,这里创建了axios实例供全局调用,根据axios文档,**在创建** axios 实例时添加:`withCredentials: true`

const service = axios.create({
  baseURL: `${process.env.VUE_APP_BASEURL}/backend`,
  withCredentials: true,
 timeout: 6000 
})

结果发现接口请求仍然不带cookie,无奈试了一下用fetch请求`fetch(url, { credentials: 'include', mode: 'cors' })`,发现可以携带cookie,百思不得其解,两者都是基于promise实现的,但是fetch在写法和拦截请求响应等方面都比较麻烦,全部替换成fetch也不太现实。最后才发现,是mock.js没有注释(`main.js`中注释掉就好了),原来mock.js是通过拦截XHR请求来实现的接口模拟,Axios本质上也是对原生XHR的封装,只不过它是Promise的实现版本,所以它当然被拦截了,而fetch脱离了XHR,这也是fetch请求能正常携带cookie的原因,这里还没有全部梳理清楚,打算在后一篇中详细介绍一下

7.单点登录的实现

全局的路由钩子在`permission.js`中,一般单点登录、权限验证都是在这里处理,这里也不例外。没什么特别的,需要注意的一点就是,不要忘记对页面其他接口的统一无权限处理,和403请求的响应处理。同时画个流程图会更快一些,这里就记录一下吧:

流程图:

ant-design-vue 快速避坑指南(推荐)路由钩子

路由钩子的处理:

router.beforeEach((to, from, next) => {
 // 对403无权限的处理
 if (to.path === '/403') {
  next()
 } else {
  if (roles) {//已登陆
   next()
  } else {
      //获取用户信息,GetUserInfo逻辑如下:
      //status=403 && reject(res),返回包含status;
      //status=1005 && reject(res.data)返回重定向的URL;
      //status=1000 && resolve()
   store
    .dispatch('GetUserInfo') 
    .then(res => {
     next()
    })
    .catch((e) => {
     if (e.status) {
      next({ path: '/403' })
     } else {
            //拼接URL跳去登陆页,登陆成功会重定向回当前页(login_redirect)
      const url = e.substring(0, e.lastIndexOf('redirect')) + 'redirect=' + login_redirect
      window.location.href = url
     }
    })
  }
 }
})

`@/ src/utils/request.js`中接口返回的统一处理:

service.interceptors.response.use((response) => {
  if (response.data.status === 1005){
      //... 同上跳去登陆页
  }else{
    //为返回数据做统一处理
    return response.data
  }
}, err)

7.引入eCharts

1)npm install

2) components下新建barChart.vue ,import echarts from 'echarts',正常操作...

3) resize触发图表自适应

echart有resizeAPI,一般是在图表组件如barChart.vue里面手动监听窗口resize

mounted() {
  window.addEventListener("resize", () => {
    this.chart.resize(); 
  });
},

后面借鉴element-admin, 利用mixins实现了更完善的统一处理方法:

1)定义一个mixin:resize.js

import { debounce } from '@/utils'//防抖函数
export default {
 data() {
  return {
   $_sidebarElm: null
  }
 },
 mounted() {
  this.__resizeHandler = debounce(() => {
   if (this.chart) {
    this.chart.resize()
   }
  }, 100)
  window.addEventListener('resize', this.__resizeHandler)

  this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0]
  this.$_sidebarElm && this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler)
 },
 beforeDestroy() {
  window.removeEventListener('resize', this.__resizeHandler)

  this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler)
 },
 methods: {
  $_sidebarResizeHandler(e) {
   if (e.propertyName === 'width') {
    this.__resizeHandler()
   }
  }
 }
}

2)@/components/_utils/util.js中添加防抖函数

export const debounce = (func, wait, immediate) => {
 let timeout, args, context, timestamp, result
 const later = function() {
  // 据上一次触发时间间隔
  const last = +new Date() - timestamp
  // 上次被包装函数被调用时间间隔 last 小于设定时间间隔 wait
  if (last < wait && last > 0) {
   timeout = setTimeout(later, wait - last)
  } else {
   timeout = null
   // 如果设定为immediate===true,因为开始边界已经调用过了此处无需调用
   if (!immediate) {
    result = func.apply(context, args)
    if (!timeout) context = args = null
   }
  }
 }
 return function(...args) {
  context = this
  timestamp = +new Date()
  const callNow = immediate && !timeout
  // 如果延时不存在,重新设定延时
  if (!timeout) timeout = setTimeout(later, wait)
  if (callNow) {
   result = func.apply(context, args)
   context = args = null
  }
  return result
 }
}

3)resize监听方法混入图表组件即可

mixins: [resize]

总结

以上所述是小编给大家介绍的ant-design-vue 快速避坑指南,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
为jQuery增加join方法的实现代码
Nov 28 Javascript
原生js实现半透明遮罩层效果具体代码
Jun 06 Javascript
js的参数有长度限制吗?发现不能超过2083个字符
Apr 20 Javascript
Egret引擎开发指南之视觉编程
Sep 03 Javascript
理解javascript对象继承
Apr 17 Javascript
jQuery实现最简单实用的分秒倒计时
Feb 05 Javascript
Node.js 实现简单的接口服务器的实例代码
May 23 Javascript
angular6 利用 ngContentOutlet 实现组件位置交换(重排)
Nov 02 Javascript
vue动态路由:路由参数改变,视图不更新问题的解决
Nov 05 Javascript
微信小程序表单验证WxValidate的使用
Nov 27 Javascript
angular异步验证防抖踩坑实录
Dec 01 Javascript
在react项目中使用antd的form组件,动态设置input框的值
Oct 24 Javascript
Ant Design Vue 添加区分中英文的长度校验功能
Jan 21 #Javascript
python虚拟环境 virtualenv的简单使用
Jan 21 #Javascript
详解vue中v-bind:style效果的自定义指令
Jan 21 #Javascript
vue.js iview打包上线后字体图标不显示解决办法
Jan 20 #Javascript
Angular单元测试之事件触发的实现
Jan 20 #Javascript
vue elementui 实现搜索栏公共组件封装的实例代码
Jan 20 #Javascript
D3.js 实现带伸缩时间轴拓扑图的示例代码
Jan 20 #Javascript
You might like
PHP读取zip文件的方法示例
2016/11/17 PHP
浅谈php中变量的数据类型判断函数
2017/03/04 PHP
php获取字符串前几位的实例(substr返回字符串的子串用法)
2017/03/08 PHP
PHP数据库操作二:memcache用法分析
2017/08/16 PHP
PHP抽象类与接口的区别详解
2019/03/21 PHP
分享别人写的一个小型js框架
2007/08/13 Javascript
通用JS事件写法实现代码
2009/01/07 Javascript
FF IE兼容性的修改小结
2009/09/02 Javascript
一些主流JS框架中DOMReady事件的实现小结
2011/02/12 Javascript
JavaScript操作Oracle数据库示例
2015/03/06 Javascript
jquery简单实现幻灯片的方法
2015/08/03 Javascript
js添加事件的通用方法推荐
2016/05/15 Javascript
bootstrap和jQuery.Gantt的css冲突 如何解决
2016/05/29 Javascript
使用three.js 画渐变的直线
2016/06/05 Javascript
JS实现对中文字符串进行utf-8的Base64编码的方法(使其与Java编码相同)
2016/06/21 Javascript
jQuery EasyUI Tab 选项卡问题小结
2016/08/16 Javascript
js控制文本框只能输入中文、英文、数字与指定特殊符号的实现代码
2016/09/09 Javascript
jQuery实现获取隐藏div高度的方法示例
2017/02/09 Javascript
ui-router中使用ocLazyLoad和resolve的具体方法
2017/10/18 Javascript
vue滚动固定顶部及修改样式的实例代码
2019/05/30 Javascript
王纯业的Python学习笔记 下载
2007/02/10 Python
python基础教程之五种数据类型详解
2017/01/12 Python
Python安装官方whl包和tar.gz包的方法(推荐)
2017/06/04 Python
python基础教程项目四之新闻聚合
2018/04/02 Python
python获取交互式ssh shell的方法
2019/02/14 Python
Python中类的创建和实例化操作示例
2019/02/27 Python
Python 2/3下处理cjk编码的zip文件的方法
2019/04/26 Python
python 将视频 通过视频帧转换成时间实例
2020/04/23 Python
python主要用于哪些方向
2020/07/05 Python
基于html5 canvas实现漫天飞雪效果实例
2014/09/10 HTML / CSS
俄罗斯天然和有机产品、健康生活网上商店:Fitomarket.ru
2020/10/09 全球购物
.NET程序员的几道面试题
2012/06/01 面试题
幼儿园教学管理制度
2014/02/04 职场文书
《美丽的黄昏》教学反思
2014/02/28 职场文书
网络优化专员求职信
2014/05/04 职场文书
优秀纪检干部材料
2014/08/27 职场文书