field component

docs/examples/field.md

@@ -1,7 +1,55 @@
+<script>
+export default {
+  data() {
+    return {
+      name: ''
+    };
+  },
+
+  methods: {
+    handleChange() {
+      console.log(this.name);
+    }
+  }
+};
+</script>
+
 ## Field组件
 
 表单中`input`或`textarea`的输入框。
 
+### 基础用法
+
+:::demo 根据`type`属性显示不同的输入框。
+```html
+<o2-cell-group>
+  <o2-field type="text" label="用户名：" placeholder="请输入用户名"></o2-field>
+  <o2-field type="password" label="密码：" placeholder="请输入密码"></o2-field>
+  <o2-field type="textarea" label="个人介绍：" placeholder="请输入个人介绍"></o2-field>
+</o2-cell-group>
+```
+:::
+
+### 无label的输入框
+
+:::demo 根据`type`属性显示不同的输入框。
+```html
+<o2-cell-group>
+  <o2-field type="text" placeholder="请输入用户名"></o2-field>
+</o2-cell-group>
+```
+:::
+
+### 监听change事件
+
+:::demo 根据`type`属性显示不同的输入框。
+```html
+<o2-cell-group>
+  <o2-field type="text" label="用户名：" placeholder="请输入用户名" @change="handleChange"></o2-field>
+</o2-cell-group>
+```
+:::
+
 ### API
 
 | 参数       | 说明      | 类型       | 默认值       | 可选值       |
@@ -12,4 +60,5 @@
 | label | 输入框标签 | string  | '' |   |
 | disabled | 是否禁用输入框 | boolean  | false |   |
 | readonly | 输入框是否只读 | boolean  | false |   |
+| maxlength | 输入框maxlength | [String, Number]  | '' |   |
 

packages/cell/src/cell.vue

@@ -6,7 +6,7 @@
       </slot>
       <slot name="title">
         <span class="o2-cell-text" v-text="title"></span>
-        <span class="o2-cell-label" v-text="label"></span>
+        <span class="o2-cell-label" v-if="label" v-text="label"></span>
       </slot>
     </div>
     <div class="o2-cell-value" :class="{ 'is-link' : isLink }">

packages/field/src/field.vue

@@ -1,17 +1,78 @@
 <template>
-  <div>
-    
-  </div>
+  <o2-cell
+    class="o2-field"
+    :title="label"
+    :class="{
+      'is-nolabel': !label
+    }">
+    <textarea
+      v-if="type === 'textarea'"
+      class="o2-field-control"
+      v-model="currentValue"
+      @change="$emit('change', currentValue)"
+      :placeholder="placeholder"
+      :maxlength="maxlength"
+      :disabled="disabled"
+      :readonly="readonly">
+    </textarea>
+    <input
+      v-else
+      class="o2-field-control"
+      :value="currentValue"
+      @change="$emit('change', currentValue)"
+      @input="handleInput"
+      :type="type"
+      :placeholder="placeholder"
+      :maxlength="maxlength"
+      :disabled="disabled"
+      :readonly="readonly">
+  </o2-cell>
 </template>
 
 <script>
 import O2Cell from 'packages/cell';
 
 export default {
-  name: 'o2-filed',
+  name: 'o2-field',
 
   components: {
     O2Cell
+  },
+
+  props: {
+    type: {
+      type: String,
+      default: 'text'
+    },
+    placeholder: String,
+    value: String,
+    label: String,
+    disabled: Boolean,
+    readonly: Boolean,
+    maxlength: [String, Number]
+  },
+
+  data() {
+    return {
+      currentValue: this.value
+    };
+  },
+
+  watch: {
+    value(val) {
+      this.currentValue = val;
+    },
+
+    currentValue(val) {
+      this.$emit('input', val);
+      console.log(val);
+    }
+  },
+
+  methods: {
+    handleInput(event) {
+      this.currentValue = event.target.value;
+    }
   }
 };
 </script>

packages/zanui/src/cell.pcss

@@ -16,6 +16,7 @@
     overflow: hidden;
     position: relative;
     padding: 10px 10px 10px 0;
+    box-sizing: border-box;
     line-height: 22px;
     background-color: $c-white;
     color: #333;

packages/zanui/src/field.pcss

@@ -0,0 +1,47 @@
+@import "./common/var.pcss";
+@import "./mixins/border_retina.pcss";
+
+@component-namespace o2 {
+  @component field {
+    width: 100%;
+    display: table;
+    overflow: hidden;
+
+    @when nolabel {
+      .o2-cell-title {
+        display: none;
+      }
+
+      .o2-cell-value {
+        width: 100%;
+      }
+    }
+
+    .o2-cell-title,
+    .o2-cell-value {
+      float: none;
+      display: table-cell;
+      box-sizing: border-box;
+    }
+
+    .o2-cell-title {
+      width: 90px;
+      text-align: right;
+    }
+
+    .o2-cell-value {
+      width: 90%;
+      padding-left: 10px;
+    }
+
+    @descendent control {
+      border: 0;
+      font-size: 14px;
+      line-height: 22px;
+      display: block;
+      width: 100%;
+      resize: none;
+      outline: 0;
+    }
+  }
+}

packages/zanui/src/index.pcss

@@ -3,5 +3,6 @@
  */
 @import './button.pcss';
 @import './cell.pcss';
+@import './field.pcss';
 @import './icon.pcss';
 @import './switch.pcss';