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"
/>
+ disabled
+
+
+
+
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 @@
@@ -17,9 +21,10 @@
>
@@ -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;