fix(Field): incorrect placeholder color when error and disabled (youzan#4666)

chenjiahan · web-flow · commit 4fadffa50a41 · 2019-10-09T16:32:35.000+08:00
diff --git a/src/field/index.js b/src/field/index.js
@@ -288,7 +288,6 @@ export default createComponent({
         arrowDirection={this.arrowDirection}
         class={bem({
           error: this.error,
-          disabled: this.$attrs.disabled,
           [`label-${labelAlign}`]: labelAlign,
           'min-height': this.type === 'textarea' && !this.autosize
         })}
diff --git a/src/field/index.less b/src/field/index.less
@@ -38,7 +38,7 @@
 
     &:disabled {
       color: @field-input-disabled-text-color;
-      -webkit-text-fill-color: @field-input-disabled-text-color;
+      -webkit-text-fill-color: @field-input-disabled-text-color; // fix disabled color in iOS
       background-color: transparent;
       opacity: 1;
     }
@@ -117,17 +117,12 @@
     }
   }
 
-  &--disabled {
-    .van-field__control {
-      color: @field-input-disabled-text-color;
-    }
-  }
-
   &--error {
     .van-field__control {
       &,
       &::placeholder {
         color: @field-input-error-text-color;
+        -webkit-text-fill-color: @field-input-error-text-color;
       }
     }
   }

Original file line number	Diff line number	Diff line change
`@@ -38,7 +38,7 @@`
`38`	`38`
`39`	`39`	`&:disabled {`
`40`	`40`	`color: @field-input-disabled-text-color;`
`41`		`- -webkit-text-fill-color: @field-input-disabled-text-color;`
	`41`	`+ -webkit-text-fill-color: @field-input-disabled-text-color; // fix disabled color in iOS`
`42`	`42`	`background-color: transparent;`
`43`	`43`	`opacity: 1;`
`44`	`44`	`}`
`@@ -117,17 +117,12 @@`
`117`	`117`	`}`
`118`	`118`	`}`
`119`	`119`
`120`		`- &--disabled {`
`121`		`- .van-field__control {`
`122`		`- color: @field-input-disabled-text-color;`
`123`		`- }`
`124`		`- }`
`125`		`-`
`126`	`120`	`&--error {`
`127`	`121`	`.van-field__control {`
`128`	`122`	`&,`
`129`	`123`	`&::placeholder {`
`130`	`124`	`color: @field-input-error-text-color;`
	`125`	`+ -webkit-text-fill-color: @field-input-error-text-color;`
`131`	`126`	`}`
`132`	`127`	`}`
`133`	`128`	`}`