工作中对 Vue 和 iView 的一些技术备忘总结

Vue

1. 不方便取数据时,可以使用 refs

2. 有时直接把 v-for(item, key) 的 item 绑定为 v-model 会报错,这时可以把数据格式化一下,让 item 为对象,再绑定 v-model 到对象的属性上

3. iView 框架的 DatePicker 组件直接使用 v-model 有问题(国际时间和本地时间的问题),可以使用 value 和 @on-change ,手动赋值,这样显示就完全正常; 如果页面上有多个 Datepicker 组件,可以使用 @on-open-change ,在其中设置好唯一标志本次打开的 Datepicker 的属性,然后再在 @on-change 中处理

4. iView 中有些组件可以绑定的一些事件,其本身不需要传入参数,只需要在定义事件方法时写入形参就能取到,但如果在传入时附加参数,就取不到默认参数了,此时可以使用 @on-change="setOption($event, ...params)" , 此时 $event 就是默认参数,

5. 因为 scoped 只作用于本页面,甚至不作用于页面引入的组件,所以想让页面既不影响其他页面,又能改变组件的样式,可以使用 >>> 深度作用选择器, iView框架里的组件的样式无法在 scoped 里改,但是用这个就可以,当然,自己写的其他组件也一样,可是要注意,不能与 lang="less" 一起用.预处理器要用可以用 /deep/ 代替

6. iView 的组件中,就 Poptip 组件而言(其他的没观察),它的 transfer 属性,是把气泡放到全局 body 中,这种情况下,在本页面的样式中操作无用,只有在全局中调整才可以,但是要使用 popper-class 绑定类名到 Poptip 组件才行,但是也要注意,在这种情况下,触发气泡的元素还在组件中,使用深度选择器在 scoped 中选择 ivu-poptip-rel 即可

7. 场景: iView , 三个 Select 组件,第一个的 @on-change 会动态改变第二个的 option 数组,以及第三个的类型( input 或 DatePicker ), 它的使用场景是填写筛选条件, 比如第一项选 最近更新时间,那第二项就会是 ['早于', '晚于', '时间段'] , 第三项变为 Datepicker, 第一项选 客户星级,那第二项就是 ['大于', '小于', '等于'], 第三项变为 InputNumber

   问题: 改变首项筛选条件时, change 前后若根据首项获取的二项的 option 数组前后 length 相等(如,都有三个选项), 那么选择二项时,虽然实际上可以正确筛选,但文字总是显示成 change 前的选项.

   解决:直接用 ref 取数据,当 Select 组件的 data 上的 selectedSingle 不等于 model 时, @on-change 的方法直接把 model 赋给前者

   需要注意: v-for 中写的 ref 取到的值是个数组,具体到我当时的实例中,是个只有一项的数组,用 [0] 取组件数据

8. 场景: 做邮件系统,选择收件人,需要既可以显示候选账号进行下拉选择,又可以直接手动输入账号,但是 iView 本身没有符合需求的组件

   思路:

   1. 首先想到的是一个伪装成输入框的 div ,在其中加入 Tag 系列,后面追加一个 input , 再用隐藏的 span 实现 input 的动态变长(在这过程中我还找到了 contentEditable 这个可以让 div 可编辑的属性),这一步我是直接用的 filterable + multiple 的 Select 组件生成的 HTML 代码
   2. 随后同事提醒我, 何不在 input 前再加一个 div , 再把 input 长度限制到只能显示一个光标, 动态填入输入内容到前面的 div ,这样就不用变长,也不用担心溢出和让 input 换行
   3. 最后同事又说,原来的 filterable + multiple 的 Select 组件已经可以了,稍作调整就行.

   实现:

   1. 观察 filterable + multiple 的 Select 组件生成的代码结构, mounted 时,为输入框绑定 blur 事件,根据 e.target.value 判断输入值是否已在下拉列表(v-for Option 数组),是否已被选中,如果没有,则 push 进去
   2. 在 Select 的 @on-change 中,询盘判断当前数组各项是否正则校验邮箱(推荐 Regulex —-正则可视化工具+邮箱正则表达式)通过,如果通过,则通过 DOM 绑定对应位置的 .ivu-tag-text 字体标黑(通过的情况也要显式操作,不然也可能变红),不通过标红

9. watch 要监控对象属性的变化,需要使用 deep: true , 详见 官方教程