diff --git a/packages/col/index.js b/packages/col/index.js index b87fd356..7bd39761 100644 --- a/packages/col/index.js +++ b/packages/col/index.js @@ -12,6 +12,16 @@ create({ offset: Number }, + computed: { + classes() { + const { span, offset } = this.data; + return this.classNames('custom-class', 'van-col', { + [`van-col--${span}`]: span, + [`van-col--${offset}`]: offset + }); + } + }, + methods: { setGutter(gutter) { const padding = `${gutter / 2}px`; diff --git a/packages/col/index.wxml b/packages/col/index.wxml index 30baf92a..f4cbabf7 100644 --- a/packages/col/index.wxml +++ b/packages/col/index.wxml @@ -1,5 +1,5 @@ diff --git a/packages/field/README.md b/packages/field/README.md index 9a5da222..7d8de564 100644 --- a/packages/field/README.md +++ b/packages/field/README.md @@ -152,7 +152,6 @@ Page({ | is-link | 是否展示右侧箭头并开启点击反馈 | `Boolean` | `false` | | error | 是否将输入内容标红 | `Boolean` | `false` | | error-message | 底部错误提示文案,为空时不展示 | `String` | `''` | -| label-align | 文本对齐方式,可选值为 `center` `right` | `String` | `left` | | input-align | 输入框内容对齐方式,可选值为 `center` `right` | `String` | `left` | | autosize | 自适应内容高度,只对 textarea 有效 | `Boolean` | `false` | | icon | 输入框尾部图标 (可选值见 Icon 组件) | `String` | - | @@ -185,7 +184,6 @@ Page({ | 类名 | 说明 | |-----------|-----------| -| custom-class | 根节点样式类 | | input-class | 输入框样式类 | | icon-class | 右侧图标样式类 | | placeholder-class | 占位内容样式类 | diff --git a/packages/field/index.js b/packages/field/index.js index 5932e75e..4fb39fa2 100644 --- a/packages/field/index.js +++ b/packages/field/index.js @@ -19,7 +19,6 @@ create({ required: Boolean, iconClass: String, clearable: Boolean, - labelAlign: String, inputAlign: String, customClass: String, confirmType: String, @@ -60,6 +59,18 @@ create({ showClear: false }, + computed: { + inputClass() { + const { data } = this; + return this.classNames('input-class', 'van-field__input', { + 'van-field--error': data.error, + 'van-field__textarea': data.type === 'textarea', + 'van-field__input--disabled': data.disabled, + [`van-field--${data.inputAlign}`]: data.inputAlign + }); + } + }, + methods: { onInput(event) { const { value = '' } = event.detail || {}; diff --git a/packages/field/index.pcss b/packages/field/index.pcss index 6dde8a07..4638021f 100644 --- a/packages/field/index.pcss +++ b/packages/field/index.pcss @@ -10,16 +10,18 @@ } } - &__control { + &__input { border: 0; margin: 0; padding: 0; width: 100%; + height: 24px; resize: none; display: block; text-align: left; - box-sizing: border-box; + min-height: 24px; line-height: inherit; + box-sizing: border-box; background-color: transparent; &--disabled { @@ -37,6 +39,10 @@ } } + &__clear-root { + height: 24px; + } + &__clear, &__icon-container, &__button { @@ -78,18 +84,4 @@ &--error { color: $red; } - - &--label { - &-center { - .van-cell__title { - text-align: center; - } - } - - &-right { - .van-cell__title { - text-align: right; - } - } - } } diff --git a/packages/field/index.wxml b/packages/field/index.wxml index 16689cf1..75f98e55 100644 --- a/packages/field/index.wxml +++ b/packages/field/index.wxml @@ -7,13 +7,13 @@ required="{{ required }}" custom-style="{{ customStyle }}" title-width="{{ titleWidth }}" - custom-class="{{ customClass }} van-field {{ labelAlign ? 'van-field--label-' + labelAlign : '' }}" + custom-class="van-field" >