浏览代码

docs(input): 增加在线调试文档、修复清除bug (#976)

* Merge branch 'next' of https://github.com/ailululu/nutui into next

* fix: 解决input问题

* feat: 解决input问题

Co-authored-by: ailululu <951846273@qq.com>
ailululu 4 年之前
父节点
当前提交
66ede43945

+ 7 - 44
src/packages/__VUE/input/demo.vue

@@ -1,13 +1,7 @@
 <template>
   <div class="demo full">
     <h2>基础用法</h2>
-    <nut-input
-      v-model="state.val1"
-      @change="change"
-      @focus="focus"
-      @blur="blur"
-      label="文本(异步)"
-    />
+    <nut-input v-model="state.val1" @change="change" @focus="focus" @blur="blur" label="文本(异步)" />
     <nut-input
       placeholder="请输入文本"
       @change="change"
@@ -17,45 +11,14 @@
       @clear="clear"
     />
     <h2>禁用输入框</h2>
-    <nut-input
-      v-model="state.val2"
-      @change="change"
-      :disabled="true"
-      label="文本"
-    />
-    <nut-input
-      v-model="state.val3"
-      @change="change"
-      :readonly="true"
-      label="文本"
-    />
+    <nut-input v-model="state.val2" @change="change" :disabled="true" label="文本" />
+    <nut-input v-model="state.val3" @change="change" :readonly="true" label="文本" />
     <h2>限制输入长度</h2>
-    <nut-input
-      v-model="state.val4"
-      @change="change"
-      max-length="7"
-      label="限制7"
-    />
+    <nut-input v-model="state.val4" @change="change" max-length="7" label="限制7" />
     <h2>自定义类型</h2>
-    <nut-input
-      v-model="state.val0"
-      @change="change"
-      type="password"
-      label="密码"
-    />
-    <nut-input
-      v-model="state.val5"
-      @change="change"
-      type="number"
-      label="整数"
-    />
-    <nut-input
-      v-model="state.val6"
-      @change="change"
-      type="digit"
-      placeholder="支持小数点的输入"
-      label="数字"
-    />
+    <nut-input v-model="state.val5" @change="change" type="password" label="密码" />
+    <nut-input v-model="state.val6" @change="change" type="number" label="整数" />
+    <nut-input v-model="state.val7" @change="change" type="digit" placeholder="支持小数点的输入" label="数字" />
   </div>
 </template>
 

+ 1 - 0
src/packages/__VUE/input/doc.md

@@ -185,6 +185,7 @@ app.use(Icon);
 | placeholder  | 为空时占位符                           | String         | -       |
 | label        | 左侧文案                               | String         | -       |
 | require-show | 左侧*号是否展示                        | Boolean        | `false` |
+| has-border   | 下边框是否展示                         | Boolean        | `true` |
 | disabled     | 是否禁用                               | Boolean        | `false` |
 | readonly     | 是否只读                               | Boolean        | `false` |
 | max-length   | 限制最长输入字符                       | String、Number | -       |

+ 4 - 1
src/packages/__VUE/input/index.scss

@@ -4,10 +4,13 @@
   padding: 10px 0px 10px 25px;
   display: flex;
   background: $white;
-  border-bottom: 1px solid $input-border-bottom;
   font-size: $input-font-size;
   box-sizing: border-box;
 
+  &.nut-input-border {
+    border-bottom: 1px solid $input-border-bottom;
+  }
+
   &.nut-input-require {
     &::before {
       position: absolute;

+ 9 - 4
src/packages/__VUE/input/index.vue

@@ -1,7 +1,7 @@
 <template>
   <view :class="classes">
-    <view class="nut-input-label">
-      <view v-if="label" class="label-string">{{ label }}</view>
+    <view v-if="label" class="nut-input-label">
+      <view class="label-string">{{ label }}</view>
     </view>
     <input
       class="input-text"
@@ -77,6 +77,10 @@ export default create({
     clearable: {
       type: Boolean,
       default: true
+    },
+    hasBorder: {
+      type: Boolean,
+      default: true
     }
   },
 
@@ -90,7 +94,8 @@ export default create({
       return {
         [prefixCls]: true,
         [`${prefixCls}-disabled`]: props.disabled,
-        [`${prefixCls}-require`]: props.requireShow
+        [`${prefixCls}-require`]: props.requireShow,
+        [`${prefixCls}-border`]: props.hasBorder
       };
     });
 
@@ -127,7 +132,7 @@ export default create({
     const valueBlur = (event: Event) => {
       setTimeout(() => {
         active.value = false;
-      }, 0);
+      }, 200);
 
       const input = event.target as HTMLInputElement;
       let value = input.value;