第n次转自:https://blog.csdn.net/u012207345/article/details/81205444
Vue
-
不方便取数据时,可以使用
refs
-
有时直接把
v-for(item, key)
的item
绑定为v-model
会报错,这时可以把数据格式化一下,让item
为对象,再绑定v-model
到对象的属性上 -
iView 框架的
DatePicker
组件直接使用v-model
有问题(国际时间和本地时间的问题),可以使用value
和@on-change
,手动赋值,这样显示就完全正常; 如果页面上有多个Datepicker
组件,可以使用@on-open-change
,在其中设置好唯一标志本次打开的Datepicker
的属性,然后再在@on-change
中处理 -
iView 中有些组件可以绑定的一些事件,其本身不需要传入参数,只需要在定义事件方法时写入形参就能取到,但如果在传入时附加参数,就取不到默认参数了,此时可以使用
@on-change="setOption($event, ...params)"
, 此时$event
就是默认参数, -
因为
scoped
只作用于本页面,甚至不作用于页面引入的组件,所以想让页面既不影响其他页面,又能改变组件的样式,可以使用>>>
深度作用选择器, iView框架里的组件的样式无法在scoped
里改,但是用这个就可以,当然,自己写的其他组件也一样,可是要注意,不能与lang="less"
一起用.预处理器要用可以用/deep/
代替 -
iView 的组件中,就
Poptip
组件而言(其他的没观察),它的transfer
属性,是把气泡放到全局body
中,这种情况下,在本页面的样式中操作无用,只有在全局中调整才可以,但是要使用popper-class
绑定类名到Poptip
组件才行,但是也要注意,在这种情况下,触发气泡的元素还在组件中,使用深度选择器在scoped
中选择ivu-poptip-rel
即可 -
场景: 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]
取组件数据
-
场景: 做邮件系统,选择收件人,需要既可以显示候选账号进行下拉选择,又可以直接手动输入账号,但是 iView 本身没有符合需求的组件
思路:
- 首先想到的是一个伪装成输入框的
div
,在其中加入Tag
系列,后面追加一个input
, 再用隐藏的span
实现input
的动态变长(在这过程中我还找到了contentEditable
这个可以让div
可编辑的属性),这一步我是直接用的filterable
+multiple
的Select
组件生成的HTML
代码 - 随后同事提醒我, 何不在
input
前再加一个div
, 再把input
长度限制到只能显示一个光标, 动态填入输入内容到前面的div
,这样就不用变长,也不用担心溢出和让input
换行 - 最后同事又说,原来的
filterable
+multiple
的Select
组件已经可以了,稍作调整就行.
实现:
- 观察
filterable
+multiple
的Select
组件生成的代码结构,mounted
时,为输入框绑定blur
事件,根据e.target.value
判断输入值是否已在下拉列表(v-for
Option
数组),是否已被选中,如果没有,则push
进去 - 在
Select
的@on-change
中,询盘判断当前数组各项是否正则校验邮箱(推荐 Regulex —-正则可视化工具+邮箱正则表达式)通过,如果通过,则通过DOM
绑定对应位置的.ivu-tag-text
字体标黑(通过的情况也要显式操作,不然也可能变红),不通过标红
-
watch
要监控对象属性的变化,需要使用deep: true
, 详见 官方教程
- 首先想到的是一个伪装成输入框的