发表于： 2020-07-26 20:54:05
1 2186
今日完成:
遇到问题2:
<label :class="{box:true,box2:shuru1(),box2:shuru2()}"
<label :class="{box:true,box2:shuru2()||shuru1()}"
<label :class="{box:true,box2:shuru2(),box2:shuru1()}//更改顺序
通过返回true或false达到开起和关闭的效果,这里不知道怎么回事默认开启,再次点击业务发生效
初始显示
原因:待查询..........................................
改成类似if语句的格式
<label :class="{box:one,box2:two}"
one:true,
two:false
(){
this.one = !this.one
this.two = !this.two
或
<label :class="{box:true,box2:one}" for="yonghu">
<label :class="{box:true,box2:two}" for="mima">
one:false,
two:false
getFocus(){
this.one = !this.one
this.two = !this.two
},
遇到问题3:
以上两种都会在任意输入框获取焦点时同时改变样式
原因:两个输入框获得和失去焦点用的是同一个函数,所以应该把函数分开来写,因为两个输框不是互斥关系,
两个输入框获得和失去焦点互不影响,相互独立
解决:
<label :class="{box:true,changeBorder:focus1}" for="yonghu">
@focus="getfocus1()" @blur="loseFocus1()">
<label :class="{box:true,changeBorder:focus2}" for="mima">
@focus="getfocus2()" @blur="loseFocus2()">
focus1:false,//默认状态是都没焦点
focus2:false,
//输入框焦点事件
getfocus1(){
this.focus1 = true
},
loseFocus1(){
this.focus1 = false
},
getfocus2(){
this.focus2 = true
},
loseFocus2(){
this.focus2 = false
}
设置鼠标悬停样式时,
错误1:
.sidebarTitle{
:hover{background-color: rgba(245,245,245,0.5)};//直接设置,作用在子元素及它的后代元素
...
直接在对应类名下设置,是作用其子元素上的
悬停在目标上,其子元素分别改变背景
错误2:
设置在目标的父元素上
其子元素和子元素的后代元素都继承悬停属性,且会因为悬停位置,产生颜色叠加效果(因为设置透明度属性)
正确做法:
在目标类名的同级再次设立目标类的悬停属性
.sidebarTitle:hover{background-color: rgba(245,245,245,0.5)};//悬停要单独设置
.sidebarTitle{
display: flex;
...
当子元素没有后代元素,为了代码的简洁,可以写在父元素中
如实例中点开后列表详情,悬停就可以写在包裹它们的父元素中
返回列表
评论