优化属性监听;修复移除属性导致内存溢出的bug
parent
d80b077197
commit
22e12d7f77
10
build.dev.js
10
build.dev.js
|
@ -29,6 +29,14 @@ $cd: #62778d #526273 #425064;
|
|||
transition:$c $t $m;
|
||||
}
|
||||
|
||||
@mixin focus1(){
|
||||
box-shadow: 0 0 2px #88f7df;
|
||||
}
|
||||
|
||||
@mixin focus2(){
|
||||
box-shadow: 0 0 2px #f3be4d;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;padding: 0;
|
||||
|
@ -114,7 +122,7 @@ function mkWCFile({ style, html, js }) {
|
|||
.replace('unmount()', 'disconnectedCallback()')
|
||||
.replace(
|
||||
'watch() {',
|
||||
'attributeChangedCallback(name, old, val) {\nif (old === val) {return}'
|
||||
'attributeChangedCallback(name, old, val) {\nif (val === null || old === val) {return}'
|
||||
)
|
||||
.replace('adopted()', 'adoptedCallback()')
|
||||
|
||||
|
|
|
@ -29,6 +29,14 @@ $cd: #62778d #526273 #425064;
|
|||
transition:$c $t $m;
|
||||
}
|
||||
|
||||
@mixin focus1(){
|
||||
box-shadow: 0 0 2px #88f7df;
|
||||
}
|
||||
|
||||
@mixin focus2(){
|
||||
box-shadow: 0 0 2px #f3be4d;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;padding: 0;
|
||||
|
@ -121,7 +129,7 @@ function mkWCFile({ style, html, js }) {
|
|||
.replace('unmount()', 'disconnectedCallback()')
|
||||
.replace(
|
||||
'watch() {',
|
||||
'attributeChangedCallback(name, old, val) {\nif (old === val) {return}'
|
||||
'attributeChangedCallback(name, old, val) {\nif (val === null || old === val) {return}'
|
||||
)
|
||||
.replace('adopted()', 'adoptedCallback()')
|
||||
|
||||
|
|
|
@ -108,6 +108,9 @@
|
|||
}
|
||||
button {
|
||||
background: #fff;
|
||||
// &:active {
|
||||
border-color: nth($cp, 3);
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -234,10 +237,11 @@
|
|||
}
|
||||
|
||||
:host(:focus-within) {
|
||||
box-shadow: 0 0 3px nth($ct, 1);
|
||||
@include focus1;
|
||||
}
|
||||
:host(:focus-within[disabled]) {
|
||||
box-shadow: 0 0 3px nth($co, 1);
|
||||
:host(:focus-within[disabled]),
|
||||
:host(:focus-within[loading]) {
|
||||
box-shadow: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
|
@ -152,10 +152,10 @@ li {
|
|||
opacity: 0.6;
|
||||
}
|
||||
:host(:focus-within) {
|
||||
box-shadow: 0 0 3px nth($ct, 1);
|
||||
@include focus1;
|
||||
}
|
||||
:host(:focus-within[readonly]) {
|
||||
box-shadow: 0 0 3px nth($co, 1);
|
||||
@include focus2;
|
||||
}
|
||||
|
||||
:host([type='textarea']) {
|
||||
|
|
|
@ -166,10 +166,10 @@
|
|||
opacity: 0.6;
|
||||
}
|
||||
:host(:focus-within) {
|
||||
box-shadow: 0 0 3px nth($ct, 1);
|
||||
@include focus1;
|
||||
}
|
||||
:host(:focus-within[readonly]) {
|
||||
box-shadow: 0 0 3px nth($co, 1);
|
||||
@include focus2;
|
||||
}
|
||||
|
||||
/* 额外样式 */
|
||||
|
|
|
@ -124,8 +124,8 @@ export default class Icon {
|
|||
watch() {
|
||||
switch (name) {
|
||||
case 'is':
|
||||
if (val) {
|
||||
this.props.is = val
|
||||
if (val) {
|
||||
this.drawPath()
|
||||
} else {
|
||||
this.removeAttribute('is')
|
||||
|
|
|
@ -163,7 +163,7 @@
|
|||
}
|
||||
|
||||
&:focus {
|
||||
box-shadow: 0 0 3px nth($ct, 1);
|
||||
@include focus1;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
|
|
|
@ -208,10 +208,10 @@
|
|||
}
|
||||
|
||||
:host(:focus-within) {
|
||||
box-shadow: 0 0 3px nth($ct, 1);
|
||||
@include focus1;
|
||||
}
|
||||
:host(:focus-within[readonly]) {
|
||||
box-shadow: 0 0 3px nth($co, 1);
|
||||
@include focus2;
|
||||
}
|
||||
:host([disabled]) {
|
||||
opacity: 0.6;
|
||||
|
|
Reference in New Issue