侯体宗的博客
  • 首页
  • Hyperf版
  • beego仿版
  • 人生(杂谈)
  • 技术
  • 关于我
  • 更多分类
    • 文件下载
    • 文字修仙
    • 中国象棋ai
    • 群聊
    • 九宫格抽奖
    • 拼图
    • 消消乐
    • 相册

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

前端  /  管理员 发布于 5年前   629

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了。。

 handleTagStatus(0,tag)"  >{{ tag.name }}

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

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函数:

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请求的响应处理。同时画个流程图会更快一些,这里就记录一下吧:

流程图:

路由钩子

路由钩子的处理:

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 快速避坑指南,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

您可能感兴趣的文章:

  • Ant Design Vue 添加区分中英文的长度校验功能
  • ant-design-vue 实现表格内部字段验证功能
  • Vue中Table组件行内右键菜单实现方法(基于 vue + AntDesign)


  • 上一条:
    html的基本使用包括链接、样式表、span和div等等
    下一条:
    Ant Design Vue 添加区分中英文的长度校验功能
  • 昵称:

    邮箱:

    0条评论 (评论内容有缓存机制,请悉知!)
    最新最热
    • 分类目录
    • 人生(杂谈)
    • 技术
    • linux
    • Java
    • php
    • 框架(架构)
    • 前端
    • ThinkPHP
    • 数据库
    • 微信(小程序)
    • Laravel
    • Redis
    • Docker
    • Go
    • swoole
    • Windows
    • Python
    • 苹果(mac/ios)
    • 相关文章
    • 使用 Alpine.js 排序插件对元素进行排序(0个评论)
    • 在js中使用jszip + file-saver实现批量下载OSS文件功能示例(0个评论)
    • 在vue中实现父页面按钮显示子组件中的el-dialog效果(0个评论)
    • 使用mock-server实现模拟接口对接流程步骤(0个评论)
    • vue项目打包程序实现把项目打包成一个exe可执行程序(0个评论)
    • 近期文章
    • 在go语言中使用api.geonames.org接口实现根据国际邮政编码获取地址信息功能(1个评论)
    • 在go语言中使用github.com/signintech/gopdf实现生成pdf分页文件功能(0个评论)
    • gmail发邮件报错:534 5.7.9 Application-specific password required...解决方案(0个评论)
    • 欧盟关于强迫劳动的规定的官方举报渠道及官方举报网站(0个评论)
    • 在go语言中使用github.com/signintech/gopdf实现生成pdf文件功能(0个评论)
    • Laravel从Accel获得5700万美元A轮融资(0个评论)
    • 在go + gin中gorm实现指定搜索/区间搜索分页列表功能接口实例(0个评论)
    • 在go语言中实现IP/CIDR的ip和netmask互转及IP段形式互转及ip是否存在IP/CIDR(0个评论)
    • PHP 8.4 Alpha 1现已发布!(0个评论)
    • Laravel 11.15版本发布 - Eloquent Builder中添加的泛型(0个评论)
    • 近期评论
    • 122 在

      学历:一种延缓就业设计,生活需求下的权衡之选中评论 工作几年后,报名考研了,到现在还没认真学习备考,迷茫中。作为一名北漂互联网打工人..
    • 123 在

      Clash for Windows作者删库跑路了,github已404中评论 按理说只要你在国内,所有的流量进出都在监控范围内,不管你怎么隐藏也没用,想搞你分..
    • 原梓番博客 在

      在Laravel框架中使用模型Model分表最简单的方法中评论 好久好久都没看友情链接申请了,今天刚看,已经添加。..
    • 博主 在

      佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 @1111老铁这个不行了,可以看看近期评论的其他文章..
    • 1111 在

      佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 网站不能打开,博主百忙中能否发个APP下载链接,佛跳墙或极光..
    • 2016-10
    • 2016-11
    • 2017-06
    • 2017-07
    • 2017-08
    • 2017-09
    • 2017-10
    • 2017-11
    • 2018-03
    • 2018-04
    • 2018-05
    • 2018-06
    • 2018-09
    • 2018-11
    • 2018-12
    • 2019-02
    • 2020-03
    • 2020-04
    • 2020-05
    • 2020-06
    • 2021-04
    • 2021-05
    • 2021-07
    • 2021-08
    • 2021-09
    • 2021-10
    • 2021-11
    • 2022-08
    • 2022-09
    • 2022-10
    • 2022-11
    • 2022-12
    • 2023-01
    • 2023-02
    • 2023-03
    • 2023-04
    • 2023-05
    • 2023-06
    • 2023-07
    • 2023-09
    • 2023-10
    • 2023-11
    • 2023-12
    • 2024-01
    • 2024-02
    • 2024-03
    • 2024-04
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客