feat(input): 在taro、doc增加无边框 (#995)

src/packages/__VUE/input/demo.vue

@@ -1,11 +1,11 @@
 <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.val0" @change="change" @focus="focus" @blur="blur" label="文本(异步)" />
     <nut-input
       placeholder="请输入文本"
       @change="change"
-      v-model="state.val0"
+      v-model="state.val1"
       :require-show="true"
       label="文本"
       @clear="clear"
@@ -19,6 +19,9 @@
     <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="数字" />
+    <h2>无边框</h2>
+    <nut-input v-model="state.val8" @change="change" :hasBorder="false" label="无边框" />
+    <nut-input v-model="state.val9" @change="change" :hasBorder="false" label="无边框" />
   </div>
 </template>
 
@@ -29,18 +32,19 @@ const { createDemo } = createComponent('input');
 export default createDemo({
   setup() {
     const state = reactive({
-      val0: '',
-      val1: '初始数据',
+      val0: '初始数据',
+      val1: '',
       val2: '禁止修改',
       val3: 'readonly 只读',
       val4: '',
       val5: '',
       val6: '',
       val7: '',
-      val8: '文案'
+      val8: '',
+      val9: ''
     });
     setTimeout(function () {
-      state.val1 = '异步数据';
+      state.val0 = '异步数据';
     }, 2000);
     const change = (value: string | number, event: Event) => {
       console.log('change: ', value, event);

src/packages/__VUE/input/doc.md

@@ -29,7 +29,7 @@ app.use(Icon);
 ```html
 <template>
   <nut-input
-        v-model="state.val1"
+        v-model="state.val0"
         @change="change"
         @focus="focus"
         @blur="blur"
@@ -37,7 +37,7 @@ app.use(Icon);
       />
   <nut-input placeholder="请输入文本"
         @change="change"
-        v-model="state.val0"
+        v-model="state.val1"
         :require-show="true"
         label="文本"
         @clear="clear"
@@ -48,11 +48,11 @@ app.use(Icon);
   export default {
     setup() {
       const state = reactive({
-        val0: '',
-        val1: '初始数据'
+        val0: '初始数据',
+        val1: ''
       });
       setTimeout(function() {
-        state.val1 = '异步数据';
+        state.val0 = '异步数据';
       }, 2000);
       const change = (value: string | number,event:Event) => {
         console.log('change: ', value,event);
@@ -148,18 +148,50 @@ app.use(Icon);
 
 ```html
 <template>
-  <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="数字"/>
 </template>
 <script lang="ts">
   import { reactive } from 'vue';
   export default {
     setup() {
       const state = reactive({
-        val0: '',
         val5: '',
-        val6: ''
+        val6: '',
+        val7: ''
+      });
+      const change = (value: string | number,event:Event) => {
+        console.log('change: ', value,event);
+      };
+
+      return {
+        state,
+        change
+      };
+    }
+  }
+</script>
+```
+
+:::
+
+### 无边框
+
+:::demo
+
+```html
+<template>
+  <nut-input v-model="state.val8" @change="change" :hasBorder="false" label="无边框" />
+  <nut-input v-model="state.val9" @change="change" :hasBorder="false" label="无边框" />
+</template>
+<script lang="ts">
+  import { reactive } from 'vue';
+  export default {
+    setup() {
+      const state = reactive({
+        val8: '',
+        val9: ''
       });
       const change = (value: string | number,event:Event) => {
         console.log('change: ', value,event);

src/packages/__VUE/input/index.taro.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"
@@ -106,6 +106,10 @@ export default create({
     clearable: {
       type: Boolean,
       default: true
+    },
+    hasBorder: {
+      type: Boolean,
+      default: true
     }
   },
 
@@ -119,7 +123,8 @@ export default create({
       return {
         [prefixCls]: true,
         [`${prefixCls}-disabled`]: props.disabled,
-        [`${prefixCls}-require`]: props.requireShow
+        [`${prefixCls}-require`]: props.requireShow,
+        [`${prefixCls}-border`]: props.hasBorder
       };
     });
 

src/sites/mobile-taro/vue/src/dentry/pages/input/index.vue

@@ -1,61 +1,27 @@
 <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.val0" @change="change" @focus="focus" @blur="blur" label="文本(异步)" />
     <nut-input
       placeholder="请输入文本"
       @change="change"
-      v-model="state.val0"
+      v-model="state.val1"
       :require-show="true"
       label="文本"
       @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.val7"
-      @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="数字" />
+    <h2>无边框</h2>
+    <nut-input v-model="state.val8" @change="change" :hasBorder="false" label="无边框" />
+    <nut-input v-model="state.val9" @change="change" :hasBorder="false" label="无边框" />
   </div>
 </template>
 
@@ -67,18 +33,19 @@ export default {
 
   setup() {
     const state = reactive({
-      val0: '',
-      val1: '初始数据',
+      val0: '初始数据',
+      val1: '',
       val2: '禁止修改',
       val3: 'readonly 只读',
       val4: '',
       val5: '',
       val6: '',
       val7: '',
-      val8: '文案'
+      val8: '',
+      val9: ''
     });
     setTimeout(function () {
-      state.val1 = '异步数据';
+      state.val0 = '异步数据';
     }, 2000);
     const change = (value: string | number, event: Event) => {
       console.log('change: ', value, event);