Browse Source

fix: demo添加

guoxiaoxiao8 5 years ago
parent
commit
b950e2bc61

+ 20 - 0
src/packages/field/demo.vue

@@ -68,6 +68,12 @@
         </span>
       </nut-cell>
     </div>
+      <h4>右侧自定义DOM</h4>
+       <div class="filed-wrap"> 
+          <nut-field label="验证码:" textAlign="left"  placeholder="请输入内容" v-model="val" @inputFunc="a" > 
+              <div class="get-code"> 获取验证码</div>
+          </nut-field>
+      </div>
   </div>
 </template>
 
@@ -135,4 +141,18 @@ export default {
 background: rgba(255,255,255,1);
 
 }
+.wrapper-cell .nut-cell{
+  margin:0 0 0 20px;
+}
+.filed-wrap{
+  background: #ffffff;
+
+  .get-code{
+    min-width: 80px;
+    background-color: #07c160;
+    border: 1px solid #07c160;
+    color: #ffffff;
+    margin: 10px;
+  } 
+}
 </style>

+ 8 - 0
src/packages/field/doc.md

@@ -86,7 +86,15 @@
     <nut-field  label="自我介绍" placeholder="自我介绍" v-model="val3"  type="textarea" maxLength="20" rows="4"  />
 </div> 
 ```
+右侧自定义demo
 
+```html
+<div class="filed-wrap"> 
+          <nut-field label="验证码:" textAlign="left"  placeholder="请输入内容" v-model="val" @inputFunc="a" > 
+              <div class="get-code"> 获取验证码</div>
+          </nut-field>
+      </div>
+```
 
 
 

+ 4 - 3
src/packages/field/field.scss

@@ -20,6 +20,7 @@
         text-overflow: ellipsis;
     }
     input {
+        min-width: 100px;
         flex: 1;
         height: 40px;
         appearance: none;
@@ -69,9 +70,9 @@
     }
     .nut-textinput-clear {
         opacity: 0.5;
-        position: absolute;
-        right: 0px;
-        top: 50%;
+        position: relative;
+        right: 20px;
+        top: 10px;
         transform: translateY(-50%);
         height: 20px;
         width: 20px;

+ 2 - 3
src/packages/field/field.vue

@@ -97,8 +97,7 @@ export default {
        type: Boolean,
         default:false
     },
-    value: String,
-    attr: Object
+    value: String
   },
   mounted(){
     this.txtNum=this.value.length;
@@ -123,7 +122,7 @@ export default {
       this.currentValue = '';
     },
     txtIptLength(event) {
-      const data = event.target;
+      const data = event.target.value;
       const txtLength = data.length;
       this.txtNum = txtLength;
       if (txtLength > this.maxLength) {