From 3525e0f1dffab276a3d9deeb38ec5338fe1658e8 Mon Sep 17 00:00:00 2001
From: 07akioni <07akioni2@gmail.com>
Date: Mon, 17 Jun 2019 19:58:09 +0800
Subject: [PATCH] feat: input disable prop

---
 demo/components/inputDemo.vue      | 13 +++++++++++++
 packages/common/Input/src/main.vue | 13 +++++++++++--
 styles/Input.scss                  | 13 ++++++++++---
 3 files changed, 34 insertions(+), 5 deletions(-)

diff --git a/demo/components/inputDemo.vue b/demo/components/inputDemo.vue
index 4fcaa4028..4e2178092 100644
--- a/demo/components/inputDemo.vue
+++ b/demo/components/inputDemo.vue
@@ -36,6 +36,19 @@
       placeholder="abcdd"
     /></textarea>
     <hr>
+    <h2>disabled</h2>
+    <n-input
+      v-model="value"
+      disabled
+      placeholder="abcdd"
+    />
+    <br>
+    <textarea rows="5"><n-input
+      v-model="value"
+      disabled
+      placeholder="abcdd"
+    /></textarea>
+    <hr>
   </div>
 </template>
 
diff --git a/packages/common/Input/src/main.vue b/packages/common/Input/src/main.vue
index 6dad3ed77..8eda7664f 100644
--- a/packages/common/Input/src/main.vue
+++ b/packages/common/Input/src/main.vue
@@ -2,12 +2,16 @@
   <div
     v-if="type==='textarea'"
     class="n-input"
+    :class="{
+      'is-disabled': disabled
+    }"
   >
     <textarea
-      class="inner-textarea"
+      class="n-input__textarea"
       rows="3"
       :placeholder="placeholder"
       :value="value"
+      :disabled="disabled"
       @input="handleInput"
     />
   </div>
@@ -17,9 +21,10 @@
   >
     <input
       type="text"
-      class="inner-input"
+      class="n-input__input"
       :placeholder="placeholder"
       :value="value"
+      :disabled="disabled"
       @input="handleInput"
     >
   </div>
@@ -44,6 +49,10 @@ export default {
     value: {
       type: String,
       default: ''
+    },
+    disabled: {
+      type: Boolean,
+      default: false
     }
   },
   methods: {
diff --git a/styles/Input.scss b/styles/Input.scss
index dfc786bbe..1f2e50207 100644
--- a/styles/Input.scss
+++ b/styles/Input.scss
@@ -2,11 +2,18 @@
 @import './theme/default.scss';
 
 @include b(input) {
-  .inner-input {
+  &.is-disabled {
+    .n-input__input, .n-input__textarea {
+      background-color: #6F778D;
+    }
+  }
+  .n-input__input {
     box-sizing: border-box;
     border: none;
     border-radius: 8px;
-    padding: 10px 20px;
+    padding: 0 20px;
+    height: 36px;
+    line-height: 36px;
     outline: none;
     background-color: #6F768B;
     font-size: 14px;
@@ -20,7 +27,7 @@
       opacity: 1;
     }
   }
-  .inner-textarea {
+  .n-input__textarea {
     box-sizing: border-box;
     border: none;
     border-radius: 8px;