feat: 发票组件+taro (#1640)

* feat: 发票组件

src/packages/__VUE/input/demo.vue

@@ -1,11 +1,5 @@
 <template>
   <div class="demo full">
-    <!-- <h2>校验</h2>
-    <nut-form>
-    <nut-form-item label="姓名" prop="name" required :rules="[{ required: true, message: '请填写姓名' }]">
-      <nut-input v-model="state.val0" @change="change" @focus="focus" @blur="blur" label="文本(异步)" />
-    </nut-form-item>
-    </nut-form> -->
     <h2>{{ translate('basic') }}</h2>
     <nut-input v-model="state.val1" :label="translate('text')" :placeholder="translate('text')" />
 

src/packages/__VUE/input/index.taro.vue

@@ -48,7 +48,7 @@
               ref="inputRef"
               :style="stylesTextarea"
               :maxlength="maxLength"
-              :placeholder="placeholder || translate('placeholder')"
+              :placeholder="placeholder"
               placeholder-class="nut-placeholder"
               :disabled="disabled"
               :readonly="readonly"
@@ -67,7 +67,7 @@
               :style="styles"
               :type="inputType(type)"
               :maxlength="maxLength"
-              :placeholder="placeholder || translate('placeholder')"
+              :placeholder="placeholder"
               placeholder-class="nut-placeholder"
               :disabled="disabled"
               :readonly="readonly"
@@ -121,7 +121,7 @@ import { PropType, ref, reactive, computed, onMounted, watch, nextTick, inject }
 import { createComponent } from '@/packages/utils/create';
 import { formatNumber } from './util';
 
-const { componentName, create, translate } = createComponent('input');
+const { componentName, create } = createComponent('input');
 
 export default create({
   props: {
@@ -454,8 +454,7 @@ export default create({
       onClickInput,
       onClickLeftIcon,
       onClickRightIcon,
-      onClick,
-      translate
+      onClick
     };
   }
 });

src/packages/__VUE/input/index.vue

@@ -48,7 +48,7 @@
               ref="inputRef"
               :style="stylesTextarea"
               :maxlength="maxLength"
-              :placeholder="placeholder || translate('placeholder')"
+              :placeholder="placeholder"
               :disabled="disabled"
               :readonly="readonly"
               :value="modelValue"
@@ -66,7 +66,7 @@
               :style="styles"
               :type="inputType(type)"
               :maxlength="maxLength"
-              :placeholder="placeholder || translate('placeholder')"
+              :placeholder="placeholder"
               :disabled="disabled"
               :readonly="readonly"
               :value="modelValue"
@@ -117,7 +117,7 @@ import { PropType, ref, reactive, computed, onMounted, watch, nextTick, inject }
 import { createComponent } from '@/packages/utils/create';
 import { formatNumber } from './util';
 
-const { componentName, create, translate } = createComponent('input');
+const { componentName, create } = createComponent('input');
 
 export default create({
   props: {
@@ -448,8 +448,7 @@ export default create({
       onClickInput,
       onClickLeftIcon,
       onClickRightIcon,
-      onClick,
-      translate
+      onClick
     };
   }
 });

src/packages/__VUE/invoice/demo.vue

@@ -26,6 +26,7 @@ export default createDemo({
   setup() {
     initTranslate();
     const formValue = reactive({
+      type: '企业',
       name: '',
       num: '',
       adress: '',
@@ -48,6 +49,20 @@ export default createDemo({
 
     let data: any = ref([
       {
+        type: 'radio',
+        label: '发票类型',
+        radioLabel: [
+          {
+            label: '企业'
+          },
+          {
+            label: '个人或事业单位'
+          }
+        ],
+        formItemProp: 'type',
+        required: true
+      },
+      {
         label: '发票抬头',
         placeholder: '请输入发票抬头',
         formItemProp: 'name',

src/packages/__VUE/invoice/doc.en-US.md

@@ -1,21 +1,24 @@
-# Progress
+# Invoice
 
 ### Intro
 
-Used to show the current progress of the operation.
+
+Display the application invoice page.
 
 ### Install
 
 ``` javascript
 import { createApp } from 'vue';
 //vue
-import { Progress,Icon } from '@nutui/nutui';
+import { Invoice,Form,FormItem,Button } from '@nutui/nutui';
 //taro
-import { Progress,Icon } from '@nutui/nutui-taro';
+import { Invoice,Form,FormItem,Button } from '@nutui/nutui-taro';
 
 const app = createApp();
-app.use(Progress);
-app.use(Icon);
+app.use(Invoice);
+app.use(Form);
+app.use(FormItem);
+app.use(Button);
 
 ```
 
@@ -24,133 +27,143 @@ app.use(Icon);
 :::demo
 ```html
 <template>
-  <nut-cell>
-     <nut-progress percentage="30" />
-  </nut-cell>
+  <nut-invoice 
+    :data="data" 
+    :formValue="formValue" 
+    @onSubmit="submit"
+  >
+  </nut-invoice>
 </template>
-```
-:::
-### Custom Style
+<script lang="ts">
+import { ref,reactive } from 'vue';
+export default {
+  setup(){
+    // Promise 异步校验
+    const asyncValidator = (val: string) => {
+      return new Promise((resolve) => {
+        Toast.loading('模拟异步验证中...');
+        setTimeout(() => {
+          Toast.hide();
+          resolve(/^400(-?)[0-9]{7}$|^1\d{10}$|^0[0-9]{2,3}-[0-9]{7,8}$/.test(val));
+        }, 1000);
+      });
+    };
 
-:::demo
-```html
-<template>
-  <nut-cell>
-    <nut-progress percentage="30" stroke-color=" rgba(250,44,25,0.47)" stroke-width="20" text-color="red" />
-   </nut-cell>
-</template>
-```
-:::
-### Don't  Show Percentage
-:::demo
-```html
-<template>
-  <nut-cell>
-     <nut-progress percentage="50" :show-text="false" stroke-height="24" />
-  </nut-cell>
-</template>
-```
-:::
-### Show Percentage
-
-:::demo
-```html
-<template>
-  <nut-cell>
-     <nut-progress percentage="30" />
-  </nut-cell>
-</template>
-```
-:::
+    let data: any = ref([
+      {
+        type: 'radio',
+        label: '发票类型',
+        
+        radioLabel: [
+          {
+            label: '企业'
+          },
+          {
+            label: '个人或事业单位'
+          }
+        ],
+        formItemProp: 'type',
+        required: true
+      },
+      {
+        label: '发票抬头',
+        placeholder: '请输入发票抬头',
+        formItemProp: 'name',
+        rules: [{ required: true, message: '请输入发票抬头' }],
+        required: true
+      },
+      {
+        label: '纳税人识别号',
+        placeholder: '请输入纳税人识别号',
+        formItemProp: 'num',
+        rules: [{ message: '请输入纳税人识别号' }],
+      },
+      {
+        label: '注册地址',
+        placeholder: '请输入注册地址',
+        formItemProp: 'adress',
+        rules: [{ required: true, message: '请输入地址' }],
+        required: true
+      },
+      {
+        label: '注册电话',
+        placeholder: '请输入注册电话',
+        formItemProp: 'tel',
+        rules: [
+          { required: true, message: '请输入联系电话' },
+          { validator: asyncValidator, message: '电话格式不正确' }
+        ],
+        required: true
+      },
+      {
+        label: '开户行',
+        placeholder: '请输入开户行',
+        formItemProp: 'bank'
+      },
+      {
+        label: '银行账户',
+        placeholder: '请输入银行账户',
+        formItemProp: 'account'
+      }
+    ]);
 
-### Text Inside
-:::demo
-```html
-<template>
-     <nut-cell>
-        <nut-progress percentage="60" :text-inside="true" />
-      </nut-cell>
-</template>
-```
-:::
-### Custom Content
-:::demo
-```html
-<template>
-     <nut-cell>
-        <nut-progress percentage="60" :text-inside="true">
-          <nut-icon
-            style="display: block"
-            size="30"
-            name="https://img11.360buyimg.com/imagetools/jfs/t1/137646/13/7132/1648/5f4c748bE43da8ddd/a3f06d51dcae7b60.png"
-          ></nut-icon>
-        </nut-progress>
-      </nut-cell>
-</template>
-```
-:::
+    const formValue = reactive({
+      type: '企业',
+      name: '',
+      num: '',
+      adress: '',
+      tel: '',
+      address: '',
+      bank: '',
+      account: ''
+    });
 
-## Custom Size
+    const submit = (valid: boolean, errors: []) => {
+      if (valid) {
+        console.log('success', formValue);
+      } else {
+        console.log('error submit!!', errors);
+      }
+    };
 
- **small**，**base**，**large** .
-:::demo
-```html
-<template>
-  <nut-cell>
-        <nut-progress percentage="30" :text-inside="true" size="small"> </nut-progress>
-      </nut-cell>
-      <nut-cell>
-        <nut-progress percentage="50" :text-inside="true" size="base"> </nut-progress>
-      </nut-cell>
-      <nut-cell>
-        <nut-progress percentage="70" :text-inside="true" size="large"> </nut-progress>
-      </nut-cell>
-</template>
-```
-:::
-### Status Display
-:::demo
-```html
-<template>
-   <div>
-      <nut-cell>
-        <nut-progress
-          percentage="30"
-          stroke-color="linear-gradient(270deg, rgba(18,126,255,1) 0%,rgba(32,147,255,1) 32.815625%,rgba(13,242,204,1) 100%)"
-          status="active"
-        />
-      </nut-cell>
-      <nut-cell>
-        <nut-progress percentage="50" :stroke-width="strokeWidth" status="icon" />
-      </nut-cell>
-      <nut-cell>
-        <nut-progress
-          percentage="100"
-          stroke-color="linear-gradient(90deg, rgba(180,236,81,1) 0%,rgba(66,147,33,1) 100%)"
-          stroke-width="15"
-          status="icon"
-          icon-name="issue"
-          icon-color="red"
-        />
-      </nut-cell>
-    </div>
-</template>
+    return {
+      translate,
+      data,
+      formValue,
+      submit,
+      asyncValidator
+    };
+  }
+}
+</script>
 ```
 :::
 
-## Prop
+## Props
 
 | Attribute | Description | Type | Default
 |----- | ----- | ----- | -----
-| percentage | percentage | Number | 0
-| is-show-percentage | Whether to display the percent sign | Boolean | true
-| stroke-color |Stroke color | String | #f30
-| stroke-width |Stroke width | String | ''
-| size | Progress bar and text size, small/base/large | String | -
-| show-text | Whether to show text | Boolean | true
-| text-inside | Progress bar text display position(false:outside，true:Inside) | Boolean | false
-| text-color | Progress bar text color setting | String | #333
-| text-background | Progress bar text background color setting | String | Same progress bar color
-| status | The current state of the progress bar,active(show animation)/icon(show icon) | String | text
-| icon-name | Icon Name | String | checked
-| icon-color | Icon Color | String | #439422
+| data | Invoice data | array | []
+| formValue | Form data object (required when using form verification) | object | -
+| submit | Whether to show the submit button | boolean | true
+
+## Data Props
+
+
+The optional attributes are as follows:
+
+| Attribute | Description | Type 
+|----- | ----- | ----- 
+| type  | Type, eg `input`、`radio` | string                                 |
+| label  | Label         | string                                 |
+| placeholder   | Input placeholder           | string                                  |
+| radioLabel   | Radio label           | string                                  |
+| formItemProp | The v-model field of the form field is required | string | -
+| rules | Check rules，[Refer to FormItem Rule data structure](#/form) | array | []
+| required | Is it a required field | Boolean | `false`
+
+### Events
+
+| Event   | Description      | Arguments    |
+|--------|----------------|-------------|
+| onSubmit| Method of submitting form for verification  | Promise  |

src/packages/__VUE/invoice/doc.md

@@ -1,8 +1,8 @@
-# Invoice f发票
+# Invoice 发票
 
 ### 介绍
 
-展示操作或任务的当前进度。
+展示申请发票页面。
 
 ### 安装
 
@@ -50,6 +50,20 @@ export default {
 
     let data: any = ref([
       {
+        type: 'radio',
+        label: '发票类型',
+        radioLabel: [
+          {
+            label: '企业'
+          },
+          {
+            label: '个人或事业单位'
+          }
+        ],
+        formItemProp: 'type',
+        required: true
+      },
+      {
         label: '发票抬头',
         placeholder: '请输入发票抬头',
         formItemProp: 'name',
@@ -92,6 +106,7 @@ export default {
     ]);
 
     const formValue = reactive({
+      type: '企业',
       name: '',
       num: '',
       adress: '',
@@ -123,7 +138,7 @@ export default {
 :::
 
 
-## Prop
+## Props
 
 | 字段 | 说明 | 类型 | 默认值
 |----- | ----- | ----- | -----
@@ -131,14 +146,17 @@ export default {
 | formValue | 表单数据对象(使用表单校验时，_必填_) | object | -
 | submit | 是否显示提交按钮 | boolean | true
 
-### data 数据结构
+### Data Props
+
 
 可选属性如下:
 
 | 键名      | 说明                   | 类型                                    |
 |-----------|------------------------|-----------------------------------------|
+| type  | 类型，可选值有 `input`、`radio` | string                                 |
 | label  | 表单项 label         | string                                 |
 | placeholder   | 输入框 placeholder           | string                                  |
+| radioLabel   | 单选 label           | string                                  |
 | formItemProp | 表单域 v-model 字段， 在使用表单校验功能的情况下，该属性是必填的 | string | -
 | rules | 校验规则，[可参考 FormItem Rule 数据结构](#/form) | array | []
 | required | 是否显示必填字段的标签旁边的红色星号 | Boolean | `false`

src/packages/__VUE/invoice/index.scss

@@ -9,6 +9,9 @@
 .nut-invoice {
   width: 100%;
   position: relative;
+  .nut-cell {
+    align-items: baseline;
+  }
   &__submit {
     position: fixed;
     bottom: 0;
@@ -22,4 +25,9 @@
     bottom: constant(safe-area-inset-bottom);
     bottom: env(safe-area-inset-bottom);
   }
+  .nut-radio {
+    display: inline-block;
+    margin-right: 6px;
+    margin-bottom: 0;
+  }
 }

src/packages/__VUE/invoice/index.taro.vue

@@ -9,12 +9,26 @@
         :rules="item.rules"
         :prop="item.formItemProp"
       >
-        <input
-          class="nut-input-text"
-          :placeholder="item.placeholder"
-          v-model="formValue[item.formItemProp]"
-          type="text"
-        />
+        <template v-if="item.type === 'radio'">
+          <nut-radiogroup v-model="formValue[item.formItemProp]">
+            <nut-radio
+              v-for="(radioItem, radioIndex) of item.radioLabel"
+              :key="radioIndex"
+              shape="button"
+              :label="radioItem.label"
+            >
+              {{ radioItem.label }}
+            </nut-radio>
+          </nut-radiogroup>
+        </template>
+        <template v-else>
+          <input
+            class="nut-input-text"
+            :placeholder="item.placeholder"
+            v-model="formValue[item.formItemProp]"
+            type="text"
+          />
+        </template>
       </nut-form-item>
     </nut-form>
     <div v-if="submit" class="nut-invoice__submit">
@@ -32,24 +46,10 @@ export default create({
       type: Array,
       default: () => []
     },
-    required: {
-      type: Boolean,
-      default: false
-    },
     formValue: {
       type: Object,
       default: {}
     },
-    rules: {
-      type: Array as PropType<import('./types').FormItemRule[]>,
-      default: () => {
-        return [];
-      }
-    },
-    formItemProp: {
-      type: String,
-      default: ''
-    },
     submit: {
       type: Boolean,
       default: true
@@ -68,7 +68,6 @@ export default create({
 
     const classes = computed(() => {
       const prefixCls = componentName;
-      console.log('prefixCls', prefixCls);
       return {
         [prefixCls]: true
       };
@@ -83,9 +82,7 @@ export default create({
     };
 
     const submit = () => {
-      console.log('11');
       formRef.value.validate().then(({ valid, errors }: any) => {
-        console.log('22', valid, errors);
         emit('onSubmit', valid, errors);
       });
     };

src/packages/__VUE/invoice/index.vue

@@ -9,12 +9,26 @@
         :rules="item.rules"
         :prop="item.formItemProp"
       >
-        <input
-          class="nut-input-text"
-          :placeholder="item.placeholder"
-          v-model="formValue[item.formItemProp]"
-          type="text"
-        />
+        <template v-if="item.type === 'radio'">
+          <nut-radiogroup v-model="formValue[item.formItemProp]">
+            <nut-radio
+              v-for="(radioItem, radioIndex) of item.radioLabel"
+              :key="radioIndex"
+              shape="button"
+              :label="radioItem.label"
+            >
+              {{ radioItem.label }}
+            </nut-radio>
+          </nut-radiogroup>
+        </template>
+        <template v-else>
+          <input
+            class="nut-input-text"
+            :placeholder="item.placeholder"
+            v-model="formValue[item.formItemProp]"
+            type="text"
+          />
+        </template>
       </nut-form-item>
     </nut-form>
     <div v-if="submit" class="nut-invoice__submit">
@@ -32,24 +46,10 @@ export default create({
       type: Array,
       default: () => []
     },
-    required: {
-      type: Boolean,
-      default: false
-    },
     formValue: {
       type: Object,
       default: {}
     },
-    rules: {
-      type: Array as PropType<import('./types').FormItemRule[]>,
-      default: () => {
-        return [];
-      }
-    },
-    formItemProp: {
-      type: String,
-      default: ''
-    },
     submit: {
       type: Boolean,
       default: true
@@ -68,7 +68,6 @@ export default create({
 
     const classes = computed(() => {
       const prefixCls = componentName;
-      console.log('prefixCls', prefixCls);
       return {
         [prefixCls]: true
       };
@@ -83,9 +82,7 @@ export default create({
     };
 
     const submit = () => {
-      console.log('11');
       formRef.value.validate().then(({ valid, errors }: any) => {
-        console.log('22', valid, errors);
         emit('onSubmit', valid, errors);
       });
     };

src/packages/__VUE/navbar/index.scss

@@ -40,6 +40,12 @@
     padding-top: constant(safe-area-inset-top);
     padding-top: env(safe-area-inset-top);
   }
+  &--fixed {
+    &.nut-navbar--safe-area-inset-top {
+      height: calc($navbar-height + constant(safe-area-inset-top));
+      height: calc($navbar-height + env(safe-area-inset-top));
+    }
+  }
   &--clickable {
     &::before {
       position: absolute;
@@ -110,10 +116,6 @@
   &__left {
     font-size: $cell-desc-font;
     color: $cell-desc-color;
-    position: absolute;
-    left: 0;
-    top: 0;
-    bottom: 0;
     display: flex;
     align-items: center;
     cursor: pointer;
@@ -122,10 +124,6 @@
   &__right {
     font-size: $cell-desc-font;
     color: $cell-desc-color;
-    position: absolute;
-    right: 0;
-    top: 0;
-    bottom: 0;
     display: flex;
     align-items: center;
     padding: 0 16px;

src/packages/__VUE/navbar/index.taro.vue

@@ -43,7 +43,7 @@ import Taro from '@tarojs/taro';
 const { componentName, create } = createComponent('navbar');
 export default create({
   props: {
-    leftShow: { type: Boolean, default: true }, //左侧  是否显示返回icon
+    leftShow: { type: Boolean, default: false }, //左侧  是否显示返回icon
     title: { type: String, default: '' }, //中间  文字标题
     titIcon: { type: String, default: '' }, //中间  标题icon
     leftText: { type: String, default: '' }, //左侧文字

src/packages/__VUE/navbar/index.vue

@@ -41,7 +41,7 @@ import { createComponent } from '@/packages/utils/create';
 const { componentName, create } = createComponent('navbar');
 export default create({
   props: {
-    leftShow: { type: Boolean, default: true }, //左侧  是否显示返回icon
+    leftShow: { type: Boolean, default: false }, //左侧  是否显示返回icon
     title: { type: String, default: '' }, //中间  文字标题
     titIcon: { type: String, default: '' }, //中间  标题icon
     leftText: { type: String, default: '' }, //左侧文字

src/packages/styles/variables-jdb.scss

@@ -771,7 +771,7 @@ $table-tr-odd-bg-color: $white !default;
 // navbar
 $navbar-height: 44px !default;
 $navbar-margin-bottom: 20px !default;
-$navbar-padding: 13px 16px !default;
+$navbar-padding: 0 16px !default;
 $navbar-background: $white !default;
 $navbar-box-shadow: 0px 1px 7px 0px rgba(237, 238, 241, 1) !default;
 $navbar-color: $title-color2 !default;

src/packages/styles/variables-jdt.scss

@@ -677,7 +677,7 @@ $table-tr-odd-bg-color: $white !default;
 // navbar
 $navbar-height: 46px !default;
 $navbar-margin-bottom: 20px !default;
-$navbar-padding: 13px 16px !default;
+$navbar-padding: 0 16px !default;
 $navbar-background: $white !default;
 $navbar-box-shadow: 0px 1px 7px 0px rgba(237, 238, 241, 1) !default;
 $navbar-color: $title-color2 !default;

src/packages/styles/variables.scss

@@ -702,7 +702,7 @@ $table-tr-odd-bg-color: $white !default;
 // navbar
 $navbar-height: 44px !default;
 $navbar-margin-bottom: 20px !default;
-$navbar-padding: 13px 16px !default;
+$navbar-padding: 0 16px !default;
 $navbar-background: $white !default;
 $navbar-box-shadow: 0px 1px 7px 0px rgba(237, 238, 241, 1) !default;
 $navbar-color: $title-color2 !default;

src/sites/mobile-taro/vue/src/business/pages/invoice/index.vue

@@ -11,6 +11,7 @@ import { ref, reactive } from 'vue';
 export default {
   setup() {
     const formValue = reactive({
+      type: '企业',
       name: '',
       num: '',
       adress: '',
@@ -32,10 +33,23 @@ export default {
 
     let data: any = ref([
       {
+        type: 'radio',
+        label: '发票类型',
+        radioLabel: [
+          {
+            label: '企业'
+          },
+          {
+            label: '个人或事业单位'
+          }
+        ],
+        formItemProp: 'type',
+        required: true
+      },
+      {
         label: '发票抬头',
         placeholder: '请输入发票抬头',
         formItemProp: 'name',
-        rules: [{ required: true, message: '请输入发票抬头' }],
         required: true
       },
       {

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

@@ -1,22 +1,18 @@
 <template>
   <div class="demo full">
     <h2>基础用法</h2>
-    <nut-input placeholder="请输入文本" v-model="state.val1" label="文本" />
+    <nut-input placeholder="文本" v-model="state.val1" label="文本" />
 
     <h2>自定义类型</h2>
-    <nut-input label="文本" v-model="state.text" />
-    <nut-input label="密码" v-model="state.password" type="password" />
-    <nut-input label="数字" v-model="state.number" type="number" placeholder="支持小数点的输入" />
-    <nut-input label="整数" v-model="state.digit" type="digit" />
-    <nut-input label="手机号" v-model="state.tel" type="tel" />
+    <nut-input label="文本" v-model="state.text" placeholder="文本" />
+    <nut-input label="密码" v-model="state.password" type="password" placeholder="密码" />
+    <nut-input label="数字" v-model="state.number" type="number" placeholder="数字" />
+    <nut-input label="整数" v-model="state.digit" type="digit" placeholder="整数" />
+    <nut-input label="手机号" v-model="state.tel" type="tel" placeholder="手机号" />
 
     <h2>禁用和只读</h2>
-    <nut-form>
-      <nut-form-item>
-        <nut-input v-model="state.readonly" readonly label="文本" placeholder="输入框只读" />
-        <!-- <nut-input v-model="state.disabled" disabled label="文本" placeholder="输入框已禁用" /> -->
-      </nut-form-item>
-    </nut-form>
+    <nut-input v-model="state.readonly" readonly label="文本" placeholder="只读" />
+    <nut-input v-model="state.disabled" disabled label="文本" placeholder="禁用" />
 
     <h2>显示图标</h2>
     <nut-input v-model="state.showIcon" label="文本" left-icon="dongdong" right-icon="ask2" placeholder="显示图标" />
@@ -52,7 +48,7 @@
       show-word-limit
       rows="2"
       maxLength="50"
-      placeholder="请输入留言"
+      placeholder="留言"
       :adjust-position="state.adjustPosition"
     />
 
@@ -61,17 +57,17 @@
     <nut-input v-model="state.align2" label="文本" input-align="right" placeholder="输入框内容对齐" />
 
     <h2>无边框</h2>
-    <nut-input v-model="state.disabled" :border="false" label="无边框" />
-    <nut-input v-model="state.showIcon" :border="false" label="无边框" />
+    <nut-input v-model="state.disabled" :border="false" label="无边框" placeholder="无边框" />
+    <nut-input v-model="state.showIcon" :border="false" label="无边框" placeholder="无边框" />
 
     <h2>点击事件</h2>
     <nut-input
       v-model="state.event"
       label="event"
+      placeholder="点击"
       left-icon="dongdong"
       right-icon="ask2"
       clearable
-      placeholder="显示图标"
       :adjust-position="state.adjustPosition"
       @update:model-value="change"
       @focus="focus"
@@ -157,4 +153,10 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.demo {
+  .nut-placeholder {
+    color: #ccc;
+  }
+}
+</style>

src/sites/mobile-taro/vue/src/nav/pages/navbar/index.vue

@@ -2,7 +2,7 @@
   <div class="demo full">
     <h2>基础用法</h2>
 
-    <nut-navbar fixed placeholder @on-click-back="back" @on-click-title="title" title="订单详情">
+    <nut-navbar @on-click-back="back" @on-click-title="title" title="订单详情">
       <template #left>
         <div>返回</div>
       </template>