React+Vue相关插件使用的缺陷小合集

React：

由于记忆差劲，将项目中遇到好用的插件及方法小技巧，浅浅的整理记录📝

Lodash ：通过降低 array、number、objects、string 等的使用难度从而让 JavaScript 变更简单

Ant Design ： React UI 组件库，主要用于研发企业级中后台产品

Moment.js ：JavaScript 日期处理类库

---

Moment.js相关坑：

1. 注意⚠️：转化时间时，注意HH:mm:ss中HH的大小写，一旦写错，时间就会转化错误;

moment(timestamp).format('YYYY/MM/DD HH:mm:ss') 
1

2. 注意⚠️：对于后端传递的unix时间戳，moment是可以直接转化的，但是对于utc时间是分时区的，要确认后端给的时间是东八区，否则就需添加8h才能得到正确的时间（一般都有后端转化为东八区时间给前端）

前端所需要的时间戳： 东八区（即北京时间）
UTC时间 + 时区差 = 本地时间
1
2

---

🌹🌹🌹🌹🌹🌹🌹🌹🌹🌹🌹🌹🌹🌹🌹🌹🌹🌹🌹🌹🌹🌹🌹🌹🌹🌹🌹🌹🌹🌹🌹🌹🌹🌹🌹🌹🌹🌹🌹🌹🌹

---

Vue：

Element ：一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库

---

Element.js相关坑

🐬1. dialog上添加一个tab，点击关闭的时候页面会卡死

Dialog对话框和Tabs标签页组件的bug这两组件都是项目布局中常使用到的元素，
最近使用中发现个问题： dialog上添加一个tab，点击关闭的时候页面会卡死，

查找了一些资料后得知原因可能：
1
2
3
4

 1.el-tab组件本身的问题
 2.vue与element ui版本问题
1
2

所以解决方法：
1

    1.el-tab-pane元素中内容去掉 （el-tab-pane元素内不能有内容，这个很憨批）
    2.el-tabs 外面加上 el-row 以及 el-col
    3. 给组件固定高度
    4. vue版本过低elment ui版本过高 降低elment ui版本
    5. 在el-dialog上去掉:destroy-on-close="true"
    6.  tabs全部以组件的形式去写
1
2
3
4
5
6

发现并没有什么用。最后我的解决办法是添加v-if。
1

🐈 添加v-if的代码块

<el-dialog :visible.sync="showFlag">
   <div>
       <el-tabs v-model="tabName" @tab-click="changeTab()" v-if="showFlag">
          
          <el-tab-pane label="优雅的大白鹅" name="first">el-tab-pane>
             
          <el-tab-pane label="1866" name="second">el-tab-pane>
             
       el-tabs>
   div>
el-dialog>
1
2
3
4
5
6
7
8
9
10
11

---

🐬2. input无法输入。输入没有值，改变另外字段的时候才会显示。

<el-form-item
  label="姓名'"
  prop="name"
>
  <el-input
    v-model="From.name"
    show-word-limit
    placeholder="请填写姓名"
  />
el-form-item>
1
2
3
4
5
6
7
8
9
10

解决方案一

添加 @input="change($event)" this.$forceUpdate()

<el-form-item
  label="姓名'"
  prop="name"
>
  <el-input
    v-model="From.name"
    show-word-limit
    placeholder="请填写姓名"
    @input="change($event)"
  />
el-form-item>
1
2
3
4
5
6
7
8
9
10
11

change (e) {
    this.$forceUpdate()
}
1
2
3

解决方案二

1. 先看一下字段是否设置了初始值
   比如 imput 绑定了 Name 属性
   但 form 的值却是 空 或者没有 Name 字段
2. 排除1 后，不使用直接将undefine 赋值为空的方式
   采用新加字段的方式 this.$set(“对象”,“新字段”,“初始值”)

this.$set(form,'name','') //设置name初始值
1