nuxt2+vue2+antdesignVue1.7.8(三)

最近都忙着进行项目迁移，因此遇到的问题大多数是UI问题，低版本使用转换的问题特别多。

1、遇到了下拉框select 下拉选择的时候显示的文案不发生改变，失焦点击其他功能的时候却又改变了，绑定change事件发现打印的值也是切换的值，就是显示文案没有正确显示。查了几篇文章发现其中提到若是select在初始化的时候绑定默认值得时候，就会触发这个BUG，需要使用this.$forceUpdate();在change事件中调用，就正常了。

2、table的插槽使用吧，高版本在colums中每一项加一个slots{title:xxx,customRender:xxx}然后在table中想替换表头的是title:xxx，自定义显示表内容的就是customRender。低版本的是这样的

表头插槽和表内容插槽这样表示。

3、 a-modal 自定义页脚内容，也不一样。高版本是:footer="false"在结合template #footer使用，在低版本中，:footer="false"这个如果设置，#footer的内容也会不显示。低版本的直接用插槽就能替换掉。

4、在vue2中使用provide inject   之前有使用是在vue3中控制页面刷新使用过,在迁移的过程中由于嵌套重构的父子组件出现了父子孙组件，需要一个父到孙的值。父组件这样设置。

export default {
  data() {
    return {
      reactiveValue: 0
    }
  },
  provide() {
    return {
      // 这里返回的是一个响应式对象
      reactiveValue: this.reactiveValue
    }
  }
}

孙组件

export default {
  inject: ['reactiveValue'],
  created() {
    console.log(this.reactiveValue) // => 0
  },
  watch: {
    reactiveValue(newVal) {
      console.log(newVal) // 当祖先组件的 reactiveValue 改变时，这里会接收到通知
    }
  }
}

这样的好处是可以进行一些响应式。

5、 :label-col="{ span: 2 }" :wrapperCol="{ span: 22 }"  在a-form 中高低版本的不同，高版本并没有设置这个属性label和content会处于一行在layout布局设置正确的情况下。低版本没有设置的话默认的布局也会换行显示。可以统一设置，针对特殊item可以设置特定的值。

6、 a-button 的图标的添加，高版本的是通过 template #icon 进行的添加，低版本是 直接在按钮属性上 添加 icon="xxx"，antui icon图标的type名称就可以。

7、低版本的form表单有两种 一个是a-form   一个是a-form-modle,高版本的只有a-form.区别在于自定义校验低版本的是prop绑定关键词，高版本的是name,低版本的由于有两种，所以在提交校验的时候也不同，我比较倾向于a-form-modle，这种更接近高版本的用起来习惯一点。自定义校验的回调感觉低版本的更容易接受，（rule,value,callback()）异常直接通过callback返回。高版本的需要通过Promise，异常是reject,成功是resovle.

8、还有就是抽屉drawer的使用，高低版本大差不差，主要是控制展示变量的书写不同，因此有时候大意了，低版本显示不出来。

9、在nuxt 中使用PDF预览的这个问题，vue2版的大多数提到了vue-pdf,看过之后发现都需要对源码的文件进行修改才能正常展示，在重构过程中发现本项目有一个直接打开本地pdf的方法。所以vue-pdf弃用。本地的是

        let top = (window.screen.height - 30 - 800) / 2;
        let left = (window.screen.width - 10 - 1500) / 2;
        window.open(
         url,
          "threed",
          "height=800, width=1500, top=" +
            top +
            ", left=" +
            left +
            ", toolbar=no, menubar=no,scrollbars=no,resizable=no,location=no,status=no"
        );

 就是直接放pdf地址在url这个地方，服务器地址最好让后端返回可以预览的而不是访问后下载的地址。

10、在nuxt2中使用vue-qr展示二维码，主要参考nuxt.js 中使用 vue-qr 二维码 - 淡入我心 - 博客园 (cnblogs.com)

其他版本的例如vue-qrcode等组件使用过程中多多少少有很多不知名的错误，可能是跟plugins的引入有关，没有设置ssr:false。导致有时候报window不存在，不过还好有这篇文章两次之后成功展示出来了。订单下单付款终于是迁移完成了，撒花。。。 

11、在使用低版本的UI组件的时候，组件使用显示的是英文的年月，展位文字也是。还好有日期控件的使用_a-range-picker的ranges-CSDN博客

这个文章帮到了我，正好对应的是其中第二个日期范围因此问题圆满解决。

12、在使用低版本的UI组件重构搜索组件的时候发现一个

在data中声明绑定，这样感觉比声明多个变量绑定搜索取值方便很多。 

12、在使用级联选择地区数据时使用的是"element-china-area-data": "^5.0.2",在旧项目中用的是这个，在重构时没有输入版本号直接下载的最新的6.1.0，没有报错可以直接使用。但同事在测试数据发现由于版本不一样回显数据使用的code有问题，低版本的【11000,11010,11011】这种形式的，新版本的第一个值直接省略了后面的000，导致显示不正确，而且新版的居然不包括港澳台地区数据，一时之间血亏，没办法只能降低版本，降低版本后总是报错window不存在，突然想起好像没有设置ssr:false，没有限制只在客户端触发。还好设置完可以正常运行了。