feat: input disable prop

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>
 

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: {

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;