frontend / zui-uniapp

Download as
Browse Code »

Commit c9d98e7e125c4542b86ee0bd16724016c59abed9

Authored by 刘汉宸
1 parent b5184d55
Exists in master

调整输入区样式

Showing 2 changed files with 20 additions and 6 deletions   Show diff stats
components/cell/index.scss
  Diff comments   View file @c9d98e7
... ... @@ -32,10 +32,10 @@
32 32 font-size: 42upx;
33 33 }
34 34 &__left-icon {
35   - margin-left: $v-gap-sm;
  35 + padding-right: 10upx;
36 36 }
37 37 &__right-icon {
38   - margin-left: $v-gap-sm;
  38 + padding-left: $v-gap-sm;
39 39 color: $color-disabled;
40 40 }
41 41 &__title, &__value {
... ... @@ -45,7 +45,9 @@
45 45 flex: auto;
46 46 flex-direction: column;
47 47 justify-content: center;
48   - min-width: 150upx;
  48 + text-wrap: none;
  49 + white-space: nowrap;
  50 + word-break: break-all;
49 51 padding-right: 10upx;
50 52 box-sizing: border-box;
51 53 }
... ...
components/input-field/index.vue
  Diff comments   View file @c9d98e7
... ... @@ -8,6 +8,9 @@
8 8 <text v-if="showError" class="zui-input-field__label-error">{{ errorMessage }}</text>
9 9 </view>
10 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 14 <zui-input class="zui-input-field__input-input" v-model="model" @input="onInput" :placeholder="placeholder" clearable></zui-input>
12 15 <view v-if="$slots['input-right']" class="zui-input-field__input-right">
13 16 <slot name="input-right"></slot>
... ... @@ -32,15 +35,18 @@ export default {
32 35 required: Boolean,
33 36 placeholder: String,
34 37 errorMessage: String,
  38 + valueKey: String,
35 39 },
36 40 data: function() {
37 41 return {
38 42 model: this.value,
39 43 };
40 44 },
  45 + mounted: function() {
  46 + this.$emit('validate', !this.showError, this.valueKey);
  47 + },
41 48 watch: {
42 49 value: function(val) {
43   - console.log(val)
44 50 this.model = val;
45 51 }
46 52 },
... ... @@ -58,6 +64,7 @@ export default {
58 64 onInput: function(value) {
59 65 this.model = value;
60 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 130 &-placeholder {
124 131 color: $color-border;
125 132 }
126   - &-right {
127   - padding-left: $v-gap-sm;
  133 + &-left, &-right {
128 134 text-wrap: none;
129 135 white-space: nowrap;
130 136 word-break: break-all;
131 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 147 </style>
... ...