From b5184d556fba67ade9e8632d03b8d930f730ccb0 Mon Sep 17 00:00:00 2001
From: 刘汉宸 <liuhanchen@zeyihuoyun.com>
Date: Thu, 23 Apr 2020 15:30:59 +0800
Subject: [PATCH] 新增输入区组件

---
 components/button/index.vue      |  11 ++++++++++-
 components/input-field/index.vue | 135 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 components/input/index.vue       |   6 +++---
 3 files changed, 148 insertions(+), 4 deletions(-)
 create mode 100644 components/input-field/index.vue

diff --git a/components/button/index.vue b/components/button/index.vue
index 99755b6..7703c99 100644
--- a/components/button/index.vue
+++ b/components/button/index.vue
@@ -23,13 +23,22 @@ export default {
     round: Boolean,
     square: Boolean,
     disabled: Boolean,
+    plain: Boolean,
   },
   computed: {
     style: function() {
       return `display: ${this.block ? '' : 'inline-block'};` ;
     },
     classRender: function() {
-      return [this.size, this.disabled ? 'disabled' : '', this.block ? 'block' : '', this.type, this.round ? 'round' : '', this.square ? 'square' : ''];
+      return [
+        this.size,
+        this.type,
+        this.disabled ? 'disabled' : '',
+        this.block ? 'block' : '',
+        this.round ? 'round' : '',
+        this.square ? 'square' : '',
+        this.plain ? 'plain' : '',
+      ];
     }
   },
   methods: {
diff --git a/components/input-field/index.vue b/components/input-field/index.vue
new file mode 100644
index 0000000..2f20f1a
--- /dev/null
+++ b/components/input-field/index.vue
@@ -0,0 +1,135 @@
+<template>
+  <view class="zui-input-field">
+    <view class="zui-input-field__label">
+      <view class="zui-input-field__label-title">
+        <text class="zui-input-field__label-text">{{ label }}</text>
+        <zui-icon v-if="required" class="zui-input-field__label-asterisk" name="asterisk"></zui-icon>
+      </view>
+      <text v-if="showError" class="zui-input-field__label-error">{{ errorMessage }}</text>
+    </view>
+    <view class="zui-input-field__input">
+      <zui-input class="zui-input-field__input-input" v-model="model" @input="onInput" :placeholder="placeholder" clearable></zui-input>
+      <view v-if="$slots['input-right']" class="zui-input-field__input-right">
+        <slot name="input-right"></slot>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import ZuiIcon from '../icon';
+import ZuiInput from '../input';
+
+export default {
+  components: {
+    ZuiIcon,
+    ZuiInput
+  },
+  props: {
+    value: [String, Number],
+    regExp: String,
+    label: String,
+    required: Boolean,
+    placeholder: String,
+    errorMessage: String,
+  },
+  data: function() {
+    return {
+      model: this.value,
+    };
+  },
+  watch: {
+    value: function(val) {
+      console.log(val)
+      this.model = val;
+    }
+  },
+  computed: {
+    showError: function() {
+      if (this.regExp) {
+        const regExp = new RegExp(this.regExp.replace(/^(\s|\/)+|(\s|\/)+$/g, ''));
+        return !regExp.test(this.model);
+      } else {
+        return !!this.errorMessage;
+      }
+    }
+  },
+  methods: {
+    onInput: function(value) {
+      this.model = value;
+      this.$emit('input', value);
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.zui-input-field {
+  width: 100%;
+  position: relative;
+  background-color: $color-white;
+  &__label {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: $font-md * 0.9;
+    color: $color-text-minor;
+    padding: $h-gap-sm $v-gap-md 0;
+    &-title {
+      display: flex;
+      align-items: center;
+      text-wrap: none;
+      white-space: nowrap;
+      word-break: break-all;
+      box-sizing: border-box;
+    }
+    &-text {
+      color: $color-black;
+    }
+    &-asterisk {
+      color: #FF0000;
+      font-size: $font-sm * 0.9;
+      padding-left: 10upx;
+      padding-bottom: 3upx;
+    }
+    &-error {
+      flex: auto;
+      display: flex;
+      justify-content: flex-end;
+      color: #FF5257;
+      padding-left: $v-gap-sm;
+    }
+  }
+  &::after {
+  	position: absolute; 
+  	content: '';
+  	width: 100%;
+  	left: 0;
+  	bottom: 0;
+  	height: 1px;
+  	background-color: $color-border;
+  	transform: scale(1, 0.5);
+  	transform-origin: center bottom;
+  }
+  &__input {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: $h-gap-sm $v-gap-md;
+    box-sizing: border-box;
+    &-input {
+      flex: auto;
+    }
+    &-placeholder {
+      color: $color-border;
+    }
+    &-right {
+      padding-left: $v-gap-sm;
+      text-wrap: none;
+      white-space: nowrap;
+      word-break: break-all;
+      box-sizing: border-box;
+    }
+  }
+}
+</style>
diff --git a/components/input/index.vue b/components/input/index.vue
index 9bd3048..ab96c1a 100644
--- a/components/input/index.vue
+++ b/components/input/index.vue
@@ -15,7 +15,7 @@ export default {
     ZuiIcon,
   },
   props: {
-    value: String,
+    value: [String, Number],
     type: {
       type: String,
       default: 'text'
@@ -43,8 +43,8 @@ export default {
       this.$emit('input', value);
     },
     onClear: function() {
-      this.model = undefined;
-      this.$emit('input', undefined);
+      this.model = '';
+      this.$emit('input', '');
       this.$emit('clear');
     }
   }
--
libgit2 0.21.0