feat: input

demo/components/inputDemo.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="doc">
+    <h1>输入 / n-input</h1>
+    <hr>
+    <h2>基本用法</h2>
+    <n-input type="input" />
+    <br>
+    <textarea rows="5">scaffold</textarea>
+    <hr>
+    <h2>textarea</h2>
+    <n-input type="textarea" />
+    <br>
+    <textarea rows="5">scaffold</textarea>
+    <hr>
+    <h2>placeholder</h2>
+    <n-input placeholder="abcdd" />
+    <br>
+    <textarea rows="5">scaffold</textarea>
+    <hr>
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style scoped lang="scss">
+.doc {
+  width: 900px;
+  margin: auto;
+  textarea {
+    width: 100%;
+    min-height: 3em;
+  }
+}
+
+</style>

demo/demo.vue

@@ -34,6 +34,9 @@
       </router-link><br>
       <router-link to="/n-table">
         表格 / n-table
+      </router-link><br>
+      <router-link to="/n-input">
+        输入 / n-input
       </router-link>
     </div>
   </div>

demo/index.js

@@ -14,6 +14,7 @@ import Table from 'packages/common/Table'
 import Checkbox from 'packages/common/Checkbox'
 import RoundButton from 'packages/common/RoundButton'
 import Switch from '../packages/common/Switch'
+import Input from '../packages/common/Input'
 
 import ServiceCard from 'packages/nimbus/ServiceCard'
 import HomeLayout from 'packages/nimbus/HomeLayout'
@@ -28,6 +29,7 @@ import checkboxDemo from './components/checkboxDemo'
 import roundButtonDemo from './components/roundButtonDemo'
 import switchDemo from './components/switchDemo'
 import tableDemo from './components/tableDemo'
+import inputDemo from './components/inputDemo'
 import demo from './demo'
 
 Vue.use(VueRouter)
@@ -48,6 +50,7 @@ WithMargin.install(Vue)
 Checkbox.install(Vue)
 RoundButton.install(Vue)
 Switch.install(Vue)
+Input.install(Vue)
 
 const routes = [
   { path: '/', component: demo },
@@ -58,7 +61,8 @@ const routes = [
   { path: '/n-checkbox', component: checkboxDemo },
   { path: '/n-round-button', component: roundButtonDemo },
   { path: '/n-switch', component: switchDemo },
-  { path: '/n-table', component: tableDemo }
+  { path: '/n-table', component: tableDemo },
+  { path: '/n-input', component: inputDemo }
 ]
 
 const router = new VueRouter({

packages/common/Input/index.js

@@ -0,0 +1,7 @@
+import Input from './src/main.vue'
+
+Input.install = function (Vue) {
+  Vue.component(Input.name, Input)
+}
+
+export default Input

packages/common/Input/src/main.vue

@@ -0,0 +1,38 @@
+<template>
+  <div
+    v-if="type==='textarea'"
+    class="n-input"
+  >
+    <textarea
+      class="inner-textarea"
+      rows="3"
+      :placeholder="placeholder"
+    />
+  </div>
+  <div
+    v-else
+    class="n-input"
+  >
+    <input
+      type="text"
+      class="inner-input"
+      placeholder="placeholder"
+    >
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'NInput',
+  props: {
+    type: {
+      type: String,
+      default: 'text'
+    },
+    placeholder: {
+      type: String,
+      default: ''
+    }
+  }
+}
+</script>

styles/Input.scss

@@ -0,0 +1,36 @@
+@import './mixins/mixins.scss';
+@import './theme/default.scss';
+
+@include b(input) {
+  .inner-input {
+    box-sizing: border-box;
+    border: none;
+    border-radius: 8px;
+    padding: 12px 20px;
+    outline: none;
+    background-color: #6F768B;
+    font-size: 14px;
+    line-height: 17px;
+    color: #fff;
+    font-family: 'Open Sans';
+    width: 100%;
+    &::placeholder {
+      color: rgba(255, 255, 255, .4);
+      opacity: 1;
+    }
+  }
+  .inner-textarea {
+    box-sizing: border-box;
+    border: none;
+    border-radius: 8px;
+    padding: 12px 20px;
+    outline: none;
+    background-color: #6F768B;
+    font-size: 14px;
+    line-height: 17px;
+    color: #fff;
+    font-family: 'Open Sans';
+    width: 100%;
+    resize: vertical
+  }
+}

styles/Scaffold.scss

@@ -1,4 +1,5 @@
 @import './mixins/mixins.scss';
+@import './theme/default.scss';
 
 @include b(scaffold) {
   

styles/index.scss

@@ -11,5 +11,6 @@
 @import './Checkbox.scss';
 @import './RoundButton.scss';
 @import './Switch.scss';
+@import './Input.scss';
 
 @import './NimbusServiceLayout.scss';