feat: input v-model

demo/components/homeDemo.vue

@@ -6,9 +6,9 @@
           :padding-top="16"
           :padding-bottom="23"
         >
-          <n-gradient-header :font-size="18">
+          <n-gradient-text :font-size="18">
             All Services
-          </n-gradient-header>
+          </n-gradient-text>
         </n-with-padding>
         <n-masonry-group>
           <n-service-card

demo/components/inputDemo.vue

@@ -3,17 +3,27 @@
     <h1>输入 / n-input</h1>
     <hr>
     <h2>基本用法</h2>
-    <n-input type="input" />
+    <n-input
+      v-model="value"
+      type="input"
+    />
+    {{ value }}
     <br>
     <textarea rows="5">scaffold</textarea>
     <hr>
     <h2>textarea</h2>
-    <n-input type="textarea" />
+    <n-input
+      v-model="value"
+      type="textarea"
+    />
     <br>
     <textarea rows="5">scaffold</textarea>
     <hr>
     <h2>placeholder</h2>
-    <n-input placeholder="abcdd" />
+    <n-input
+      v-model="value"
+      placeholder="abcdd"
+    />
     <br>
     <textarea rows="5">scaffold</textarea>
     <hr>
@@ -22,7 +32,11 @@
 
 <script>
 export default {
-
+  data () {
+    return {
+      value: '123'
+    }
+  }
 }
 </script>
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "naive-ui",
-  "version": "0.1.16",
+  "version": "0.1.17",
   "description": "",
   "main": "index.js",
   "scripts": {

packages/common/Input/src/main.vue

@@ -7,6 +7,8 @@
       class="inner-textarea"
       rows="3"
       :placeholder="placeholder"
+      :value="value"
+      @input="handleInput"
     />
   </div>
   <div
@@ -17,6 +19,8 @@
       type="text"
       class="inner-input"
       placeholder="placeholder"
+      :value="value"
+      @input="handleInput"
     >
   </div>
 </template>
@@ -24,6 +28,10 @@
 <script>
 export default {
   name: 'NInput',
+  model: {
+    prop: 'value',
+    event: 'change'
+  },
   props: {
     type: {
       type: String,
@@ -32,6 +40,16 @@ export default {
     placeholder: {
       type: String,
       default: ''
+    },
+    value: {
+      type: String,
+      default: ''
+    }
+  },
+  methods: {
+    handleInput (e) {
+      console.log(e.target.value)
+      this.$emit('change', e.target.value)
     }
   }
 }

styles/Input.scss

@@ -6,11 +6,11 @@
     box-sizing: border-box;
     border: none;
     border-radius: 8px;
-    padding: 12px 20px;
+    padding: 10px 20px;
     outline: none;
     background-color: #6F768B;
     font-size: 14px;
-    line-height: 17px;
+    line-height: 20px;
     color: #fff;
     font-family: 'Open Sans';
     width: 100%;
@@ -24,11 +24,11 @@
     box-sizing: border-box;
     border: none;
     border-radius: 8px;
-    padding: 12px 20px;
+    padding: 10px 20px;
     outline: none;
     background-color: #6F768B;
     font-size: 14px;
-    line-height: 17px;
+    line-height: 20px;
     color: #fff;
     font-family: 'Open Sans';
     width: 100%;