Commit c9d98e7e125c4542b86ee0bd16724016c59abed9
1 parent
b5184d55
Exists in
master
调整输入区样式
Showing
2 changed files
with
20 additions
and
6 deletions
Show diff stats
components/cell/index.scss
| @@ -32,10 +32,10 @@ | @@ -32,10 +32,10 @@ | ||
| 32 | font-size: 42upx; | 32 | font-size: 42upx; |
| 33 | } | 33 | } |
| 34 | &__left-icon { | 34 | &__left-icon { |
| 35 | - margin-left: $v-gap-sm; | 35 | + padding-right: 10upx; |
| 36 | } | 36 | } |
| 37 | &__right-icon { | 37 | &__right-icon { |
| 38 | - margin-left: $v-gap-sm; | 38 | + padding-left: $v-gap-sm; |
| 39 | color: $color-disabled; | 39 | color: $color-disabled; |
| 40 | } | 40 | } |
| 41 | &__title, &__value { | 41 | &__title, &__value { |
| @@ -45,7 +45,9 @@ | @@ -45,7 +45,9 @@ | ||
| 45 | flex: auto; | 45 | flex: auto; |
| 46 | flex-direction: column; | 46 | flex-direction: column; |
| 47 | justify-content: center; | 47 | justify-content: center; |
| 48 | - min-width: 150upx; | 48 | + text-wrap: none; |
| 49 | + white-space: nowrap; | ||
| 50 | + word-break: break-all; | ||
| 49 | padding-right: 10upx; | 51 | padding-right: 10upx; |
| 50 | box-sizing: border-box; | 52 | box-sizing: border-box; |
| 51 | } | 53 | } |
components/input-field/index.vue
| @@ -8,6 +8,9 @@ | @@ -8,6 +8,9 @@ | ||
| 8 | <text v-if="showError" class="zui-input-field__label-error">{{ errorMessage }}</text> | 8 | <text v-if="showError" class="zui-input-field__label-error">{{ errorMessage }}</text> |
| 9 | </view> | 9 | </view> |
| 10 | <view class="zui-input-field__input"> | 10 | <view class="zui-input-field__input"> |
| 11 | + <view v-if="$slots['input-left']" class="zui-input-field__input-left"> | ||
| 12 | + <slot name="input-left"></slot> | ||
| 13 | + </view> | ||
| 11 | <zui-input class="zui-input-field__input-input" v-model="model" @input="onInput" :placeholder="placeholder" clearable></zui-input> | 14 | <zui-input class="zui-input-field__input-input" v-model="model" @input="onInput" :placeholder="placeholder" clearable></zui-input> |
| 12 | <view v-if="$slots['input-right']" class="zui-input-field__input-right"> | 15 | <view v-if="$slots['input-right']" class="zui-input-field__input-right"> |
| 13 | <slot name="input-right"></slot> | 16 | <slot name="input-right"></slot> |
| @@ -32,15 +35,18 @@ export default { | @@ -32,15 +35,18 @@ export default { | ||
| 32 | required: Boolean, | 35 | required: Boolean, |
| 33 | placeholder: String, | 36 | placeholder: String, |
| 34 | errorMessage: String, | 37 | errorMessage: String, |
| 38 | + valueKey: String, | ||
| 35 | }, | 39 | }, |
| 36 | data: function() { | 40 | data: function() { |
| 37 | return { | 41 | return { |
| 38 | model: this.value, | 42 | model: this.value, |
| 39 | }; | 43 | }; |
| 40 | }, | 44 | }, |
| 45 | + mounted: function() { | ||
| 46 | + this.$emit('validate', !this.showError, this.valueKey); | ||
| 47 | + }, | ||
| 41 | watch: { | 48 | watch: { |
| 42 | value: function(val) { | 49 | value: function(val) { |
| 43 | - console.log(val) | ||
| 44 | this.model = val; | 50 | this.model = val; |
| 45 | } | 51 | } |
| 46 | }, | 52 | }, |
| @@ -58,6 +64,7 @@ export default { | @@ -58,6 +64,7 @@ export default { | ||
| 58 | onInput: function(value) { | 64 | onInput: function(value) { |
| 59 | this.model = value; | 65 | this.model = value; |
| 60 | this.$emit('input', value); | 66 | this.$emit('input', value); |
| 67 | + this.$emit('validate', !this.showError, this.valueKey); | ||
| 61 | } | 68 | } |
| 62 | } | 69 | } |
| 63 | } | 70 | } |
| @@ -123,13 +130,18 @@ export default { | @@ -123,13 +130,18 @@ export default { | ||
| 123 | &-placeholder { | 130 | &-placeholder { |
| 124 | color: $color-border; | 131 | color: $color-border; |
| 125 | } | 132 | } |
| 126 | - &-right { | ||
| 127 | - padding-left: $v-gap-sm; | 133 | + &-left, &-right { |
| 128 | text-wrap: none; | 134 | text-wrap: none; |
| 129 | white-space: nowrap; | 135 | white-space: nowrap; |
| 130 | word-break: break-all; | 136 | word-break: break-all; |
| 131 | box-sizing: border-box; | 137 | box-sizing: border-box; |
| 132 | } | 138 | } |
| 139 | + &-left { | ||
| 140 | + padding-right: $v-gap-sm; | ||
| 141 | + } | ||
| 142 | + &-right { | ||
| 143 | + padding-left: $v-gap-sm; | ||
| 144 | + } | ||
| 133 | } | 145 | } |
| 134 | } | 146 | } |
| 135 | </style> | 147 | </style> |