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')
2. 注意⚠️:对于后端传递的unix时间戳,moment是可以直接转化的,但是对于utc时间是分时区的,要确认后端给的时间是东八区,否则就需添加8h才能得到正确的时间(一般都有后端转化为东八区时间给前端)
前端所需要的时间戳: 东八区(即北京时间)
UTC时间 + 时区差 = 本地时间
🌹🌹🌹🌹🌹🌹🌹🌹🌹🌹🌹🌹🌹🌹🌹🌹🌹🌹🌹🌹🌹🌹🌹🌹🌹🌹🌹🌹🌹🌹🌹🌹🌹🌹🌹🌹🌹🌹🌹🌹🌹
Vue:
Element :一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库
Element.js相关坑
🐬1. dialog上添加一个tab,点击关闭的时候页面会卡死
Dialog对话框和Tabs标签页组件的bug这两组件都是项目布局中常使用到的元素,
最近使用中发现个问题: dialog上添加一个tab,点击关闭的时候页面会卡死,
查找了一些资料后得知原因可能:
1.el-tab组件本身的问题
2.vue与element ui版本问题
所以解决方法:
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全部以组件的形式去写
发现并没有什么用。最后我的解决办法是添加v-if。
🐈 添加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>
🐬2. input无法输入。输入没有值,改变另外字段的时候才会显示。
<el-form-item
label="姓名'"
prop="name"
>
<el-input
v-model="From.name"
show-word-limit
placeholder="请填写姓名"
/>
</el-form-item>
解决方案一
添加
@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>
change (e) {
this.$forceUpdate()
}
解决方案二
- 先看一下字段是否设置了初始值
比如 imput 绑定了 Name 属性
但 form 的值却是 空 或者没有 Name 字段- 排除1 后,不使用直接将undefine 赋值为空的方式
采用新加字段的方式 this.$set(“对象”,“新字段”,“初始值”)
this.$set(form,'name','') //设置name初始值