From 163a5cd1133d770c6547216ab75e9a781041b6f4 Mon Sep 17 00:00:00 2001
From: 刘汉宸 <liuhanchen@zeyihuoyun.com>
Date: Tue, 21 Apr 2020 16:52:19 +0800
Subject: [PATCH] [新增] 输入组件

---
 components/button/index.scss | 27 +++++++++++++++++++++++++++
 components/cell/index.scss   |  8 ++++++--
 components/input/index.vue   | 70 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 103 insertions(+), 2 deletions(-)
 create mode 100644 components/input/index.vue

diff --git a/components/button/index.scss b/components/button/index.scss
index a0ff660..ae36f43 100644
--- a/components/button/index.scss
+++ b/components/button/index.scss
@@ -68,6 +68,30 @@
 			border-color: lighten($color-primary, 40%);
 		}
 	}
+  &.plain {
+    &.primary {
+      color: $color-primary;
+      background-color: transparent;
+      &.active {
+      	background-color: rgba($color-primary, 0.1);
+      }
+    }
+    &.disabled {
+      background-color: rgba($bg-disabled, 0.1);
+    	color: $color-disabled;
+    	cursor: not-allowed;
+    	&.active {
+    		color: $color-disabled;
+        background-color: rgba($bg-disabled, 0.1);
+    		&, &::after {
+    			border-color: $bg-disabled;
+    		}
+    	}
+    	&, &::after {
+    		border-color: $bg-disabled;
+    	}
+    }
+  }
 	&.link {
 		padding: $h-gap-sm $v-gap-sm;
 		background: inherit;
@@ -76,6 +100,9 @@
 		&.active {
 			color: darken($color-primary, 5%);
 		}
+    &::after {
+      display: none;
+    }
 	}
 	&.disabled {
 		background-color: $bg-disabled;
diff --git a/components/cell/index.scss b/components/cell/index.scss
index 548aa9f..57ec5e9 100644
--- a/components/cell/index.scss
+++ b/components/cell/index.scss
@@ -39,19 +39,23 @@
 		color: $color-disabled;
 	}
 	&__title, &__value {
-		flex: 1;
 		display: flex;
 	}
 	&__title {
+    flex: auto;
 	  flex-direction: column;
 	  justify-content: center;
+    min-width: 150upx;
+    padding-right: 10upx;
+    box-sizing: border-box;
 	}
 	&__value {
+    flex: auto;
 	  align-items: center;
 	  justify-content: flex-end;
 		position: relative;
 		overflow: hidden;
-		color: $color-minor;
+		color: $color-text-minor;
 		text-align: right;
 		vertical-align: middle;
 		word-wrap: break-word;
diff --git a/components/input/index.vue b/components/input/index.vue
new file mode 100644
index 0000000..9bd3048
--- /dev/null
+++ b/components/input/index.vue
@@ -0,0 +1,70 @@
+<template>
+  <view class="zui-input">
+    <input v-model="model" :type="type" :disabled="disabled" :placeholder="placeholder" placeholder-class="zui-input__placeholder" @input="onInput" />
+    <view v-if="clearable && model" class="zui-input__close" @click="onClear">
+      <zui-icon name="close"></zui-icon>
+    </view>
+  </view>
+</template>
+
+<script>
+import ZuiIcon from '../icon/index.vue';
+
+export default {
+  components: {
+    ZuiIcon,
+  },
+  props: {
+    value: String,
+    type: {
+      type: String,
+      default: 'text'
+    },
+    placeholder: {
+      type: String,
+      default: '请输入'
+    },
+    clearable: Boolean,
+    disabled: Boolean,
+  },
+  data: function() {
+    return {
+      model: this.value,
+    }
+  },
+  watch: {
+    value: function(val) {
+      this.model = val;
+    }
+  },
+  methods: {
+    onInput: function(e) {
+      const value = e.detail.value;
+      this.$emit('input', value);
+    },
+    onClear: function() {
+      this.model = undefined;
+      this.$emit('input', undefined);
+      this.$emit('clear');
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.zui-input {
+  display: flex;
+  width: 100%;
+  input {
+    flex: auto;
+    width: 100%;
+  }
+  &__placeholder {
+    color: $color-border;
+  }
+  &__close {
+    padding-left: $v-gap-sm;
+    color: $color-text-minor;
+  }
+}
+</style>
--
libgit2 0.21.0