form field component

docs/examples/field.md

@@ -32,7 +32,7 @@ export default {
 
 ### 无label的输入框
 
-:::demo 根据`type`属性显示不同的输入框。
+:::demo 不传入`label`属性即可。
 ```html
 <o2-cell-group>
   <o2-field type="text" placeholder="请输入用户名"></o2-field>
@@ -42,7 +42,7 @@ export default {
 
 ### 监听change事件
 
-:::demo 根据`type`属性显示不同的输入框。
+:::demo 监听组件的`change`事件。
 ```html
 <o2-cell-group>
   <o2-field type="text" label="用户名：" placeholder="请输入用户名" @change="handleChange"></o2-field>

packages/zanui/src/cell.pcss

@@ -35,6 +35,7 @@
 
     @descendent title {
       float: left;
+      overflow: hidden;
     }
 
     @descendent label {
@@ -46,6 +47,7 @@
 
     @descendent value {
       float: right;
+      overflow: hidden;
 
       @when link {
         margin-right: 20px;

packages/zanui/src/field.pcss

@@ -4,7 +4,6 @@
 @component-namespace o2 {
   @component field {
     width: 100%;
-    display: table;
     overflow: hidden;
 
     @when textarea {
@@ -27,18 +26,19 @@
     .o2-cell-title,
     .o2-cell-value {
       float: none;
-      display: table-cell;
       box-sizing: border-box;
     }
 
     .o2-cell-title {
       width: 90px;
-      text-align: right;
+      position: absolute;
+      top: 10px;
+      left: 0;
     }
 
     .o2-cell-value {
-      width: 90%;
-      padding-left: 10px;
+      width: 100%;
+      padding-left: 90px;
     }
 
     @descendent control {