2018.12

发表于 | 分类于 |
字数统计: 805 字 | 阅读时长 ≈ 3 分钟

2018.12.04

ant组件 Bug

1
2
3
表格数据更改后，前端不会实时更新

A.B = [] 不生效 -> B=[] A.B=[]

2018.12.05

localstorage 没有数组结构

1
localstroage.getItem('visited').split(',')

2018.12.06

当播放组件不适应：

1
2
3
4
1.组件inline-block
2.中间波宽度 width:calc( 90%-3.6rem ) 
3.文字两端对齐
calc:动态计算宽度，左右两边需要加空格

2018.12.07

1.linux命令

1
2
3
4
5
:q 退出
:q! 强制退出，不保存修改的内容

:wq 保存编辑操作退出
:wq! 保存编辑强制退出

2.

1
2
Duplicate keys detected:'京东',This may cause an update error.
=> :key=index

2018.12.10

1.设置下拉框的变量，用数字代替

1
winner=['1','2'] 取代 winner=['角色1','角色2']

2.变量尽量完整

3.功能调整实现后，建议先检查一遍这几个功能方法，然后有可能简单整理重构第一次

4.方法可传多个参数，就是一个方法用作多个地方，比如上传和修改

5.想分开哪行传入哪个upload

1
2
3
4
5
6
7
8
9
10
11
12
<el-upload :http-request:'test'>
    <div>上传</div>
    <div>上传</div>
</el-upload>

1.：action='scope.$index'

2.:data='scope.$index'

test(file){
    console.log(file.action/data)
}

2018.12.11

1.添加文本，输入字总是莫名其妙消失

1
2
因为@change=test(row,false)
test()方法有两个提交事件，异步慢 -> 用@blur

2.解决两个页面共同调试

1
一个页面开匿名模式（无痕）

3.改host名

1
2
3
1.win+R -> drivers
2.etc -> hosts
3.加 ip 名字（127.0.0.1 zw.ais.bt）

2018.12.12

1.按多个字符切割

1
data.split(/[\t\n]/)

2.eval() 括号内是可执行代码，风险比较大

eval(‘fd.’ + key + ‘=”‘ +char + ‘“‘)

还差 react dns 批量处理 分页

2018.12.13

eval()

1
2
3
a="[{ questionId: 1,index: 1,type: 0,option:'第一个：艺术家，',url: null,optionFlag: '艺术家',correct: true},{questionId: 1,index: 2,type: 0,option: '第二个：水晶饺',url: null,optionFlag: '水晶饺',correct: false}]"

eval('b=('+a+')')

2018.12.17

纯前端分页

  1. 创建一个计算变量 为 curry_corpus.
  2. 创建总页码(total)，当前页(page)，每页页数(limit) 这三个变量
  3. 创建一个 map,关联curpus ID和原本全量curpus的Index

然后 curry_corpus 的逻辑是 ，截取 (page-1)*limit 到 page * limit

切换页面直接修改 page。

后台有接口的话，直接传limit offset，没有的话，用slice()

2018.12.28

1.css

1
:class="{red:corpusIdsText==='缺音频'}"

2.ant

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<a-table :dataSource='corpusArr'...>
  <span slot='time' slot-scope='record'>
    <audio ref="'audioTime_'+record.id" :durationchange="getFileTime($event.target.duration,corpusMap.get(record.id))" :src="record.url"></audio>
  </span>
</a-table>


computed: {
    corpusArr() {
      if (this.corpusMap.size !== this.voiceOptions.length) {
        this.voiceOptions.forEach((item, index) => {
          this.corpusMap.set(item.id, index);
        });
      }
      return [].concat(...this.voiceOptions);
    },
},

methods:{
    getFileTime(time, index) {
      this.voiceOptions[index].time = this.formatTime(time);
      this.$set(this.voiceOptions, index, this.voiceOptions[index]);
    },
}

3.写样式

  1. 尽量以视觉划分
  2. 尽量用通用class，加一个