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

CHANGELOG.md

@@ -1,3 +1,43 @@
+## v3.2.2
+
+`2022-09-08` 
+
+小程序版本依赖 Taro3.4
+
+NutUI 非常感谢您对开源事业做出的贡献！🌷🌷🌷
+本次社区贡献者 @hydraZty @YoungsunLi @tolking @LarryHangFan
+
+* :sparkles: feat: 发票组件+taro (#1590) @ailululu
+* :zap: feat(icon): demo 页面增加点击图标复制 name 功能 (#1563) @eiinu
+* :zap: feat(inputnumber): 增加自定义左右操作符图标功能 #1562 @eiinu
+* :zap: feat(searchbar): 新增自定义设置清除图标功能， 新增聚焦时自定义样式 (#1618) @Ymm0008
+* :bug: fix(picker): 解决惯性滚动问题 (#1546)  @yangxiaolu1993
+* :bug: fix(imagePreview): replace the type for images (#1543) @hydraZty
+* :bug: fix(calendar): 兼容支付宝小程序。修改滚动判断逻辑。修复h5 demo问题。修复滚动动画props失效问题 (#1547) @lkjh3214
+* :bug: fix(tabbar): resolve href error #1533 (#1556) @Drjingfubo
+* :bug: test(menu): resolve error (#1557) @Drjingfubo
+* :bug: fix(cell): Cell Slots中使用Layout，会导致Cell和Row的@click事件全部失效(#1408) @eiinu
+* :bug: fix(radio): radio对齐问题(#1419) @eiinu
+* :bug: fix(picker): taro-picker 问题修改 (#1582) @yangxiaolu1993
+* :bug: fix(picker): Picker新增点击确定停止滚动逻辑 (#1586)  @yangxiaolu1993
+* :bug: fix(picker): 解决Picker 在Taro 上的高度问题 (#1604) @yangxiaolu1993
+* :bug: fix(form&radio): 修复 radio 表单校验相关问题 (#1587) @eiinu
+* :bug: fix(tabs): whitespace children bug (#1599) @YoungsunLi
+* :bug: fix(dialog): 标题判断时未考虑插槽 (#1601) @tolking
+* :bug: fix: loadingrotate is false, which is invalid (#1613) @LarryHangFan
+* :bug: fix(menu): menu list cannot be scrolled #1615 (#1633) @Drjingfubo
+* :bug: fix(drag): resolve console error (#1634) @Drjingfubo
+* :bug: fix(picker): 在Taro适配中的优化以及Issue 问题修改（#1620、#1572） @yangxiaolu1993
+* :bug: fix(tabs): resolve tabpane show errors #1544 (#1636) @Drjingfubo
+* :bug: fix(form): resolve slot invalid issue #1637 (#1638) @Drjingfubo
+* :bug: fix(picker): 文本超长省略号处理 (#1639) @yangxiaolu1993
+* :bug: fix(price): price 在小程序中样式展示不对 #1628 @szg2008
+* :bug: fix(calendar): demo错误问题修复 (#1644) @lkjh3214
+* 📖 docs(list): 文档 demo 增加 css 样式 (#1565) @eiinu
+* 📖 docs(actionsheet,toast): edit (#1635) @Drjingfubo
+* 📖 docs(backtop,badge,button,popover,tag,watermark): 文档调整，demo修改 (#1624) @lkjh3214
+
+
 ## v3.2.1
 
 `2022-08-09`

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nutui/nutui",
-  "version": "3.2.1",
+  "version": "3.2.2",
   "description": "京东风格的轻量级移动端 Vue2、Vue3 组件库（支持小程序开发）",
   "main": "dist/nutui.umd.js",
   "module": "dist/nutui.es.js",
@@ -116,10 +116,10 @@
     "transliteration": "^2.2.0",
     "ts-jest": "^26.5.5",
     "typescript": "4.6.4",
-    "vite": "^2.9.12",
+    "vite": "2.9.0",
     "vite-plugin-dts": "^1.0.5",
     "vite-plugin-md": "^0.11.8",
-    "vue": "3.2.24",
+    "vue": "^3.2.24",
     "vue-jest": "^5.0.0-alpha.7"
   },
   "eslintConfig": {

src/packages/__VUE/address/index.scss

@@ -72,6 +72,7 @@
       color: #1d1e1e;
 
       .tab-item {
+        position: relative;
         min-width: 2px;
         margin-right: 30px;
         display: block;
@@ -94,6 +95,22 @@
           overflow: hidden;
           text-overflow: ellipsis;
         }
+
+        .region-tab-line-mini {
+          position: absolute;
+          bottom: -10px;
+          left: 0px;
+          display: inline-block;
+          margin-top: 5px;
+          width: 0;
+          height: 3px;
+          background: $address-region-tab-line;
+          transition: 0.2s all linear;
+
+          &.active {
+            width: 26px;
+          }
+        }
       }
 
       .region-tab-line {

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

@@ -41,9 +41,9 @@
             @click="changeRegionTab(item, key, index)"
           >
             <view>{{ getTabName(item, index) }} </view>
-          </view>
 
-          <view class="region-tab-line" ref="regionLine" :style="{ left: lineDistance + 'px' }"></view>
+            <view :class="{ 'region-tab-line-mini': true, active: index == tabIndex }" ref="regionLine"></view>
+          </view>
         </view>
 
         <view class="region-con">
@@ -78,8 +78,8 @@
             @click="changeRegionTab(item, key, index)"
           >
             <view>{{ getTabName(item, index) }}</view>
+            <view :class="{ 'region-tab-line-mini': true, active: index == tabIndex }"></view>
           </view>
-          <view class="region-tab-line" ref="regionLine" :style="{ left: lineDistance + 'px' }"></view>
         </view>
         <view class="elevator-group">
           <nut-elevator
@@ -349,7 +349,6 @@ export default create({
             }
           }
         }
-        lineAnimation();
       }
     };
 
@@ -393,20 +392,7 @@ export default create({
     const clickOverlay = () => {
       closeWay.value = 'mask';
     };
-    // 移动下面的红线
-    const lineAnimation = () => {
-      setTimeout(() => {
-        Taro.createSelectorQuery()
-          .selectAll(`.${tabName.value[tabIndex.value]}`)
-          .boundingClientRect((rects) => {
-            // console.log(rects);
-            (rects as any).forEach((rect) => {
-              if (rect.width > 0) lineDistance.value = rect.left;
-            });
-          })
-          .exec();
-      }, 100);
-    };
+
     // 切换下一级列表
     const nextAreaList = (item: RegionData | string) => {
       // onchange 接收的参数
@@ -428,8 +414,6 @@ export default create({
       if (tabIndex.value < 3) {
         tabIndex.value = tabIndex.value + 1;
 
-        lineAnimation();
-
         // 切换下一个
         calBack.next = tabName.value[tabIndex.value];
         calBack.value = item as string;
@@ -443,7 +427,6 @@ export default create({
     const changeRegionTab = (item: RegionData, key: number, index: number) => {
       if (getTabName(item, index)) {
         tabIndex.value = index;
-        lineAnimation();
       }
     };
 
@@ -473,7 +456,6 @@ export default create({
         (selectedRegion as any)[tabName.value[i]] = {};
       }
       tabIndex.value = 0;
-      lineAnimation();
     };
 
     // 关闭

src/packages/__VUE/calendar/demo.vue

@@ -39,11 +39,6 @@
         @choose="setChooseValue1"
         @select="select"
       >
-        <template v-slot:btn>
-          <div class="wrapper">
-            <div class="d_div"> <span class="d_btn" @click="goDate">去某个时间</span></div>
-          </div>
-        </template>
       </nut-calendar>
     </div>
     <div>
@@ -301,7 +296,6 @@ export default createDemo({
       let dateArr = chooseData.map((item: any) => {
         return item[3];
       });
-      console.log('changevalue 1 ', chooseData, dateArr);
       state.date1 = [...dateArr];
     };
     const setChooseValue2 = (param: string) => {

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

@@ -551,8 +551,8 @@ export default {
 | is-auto-back-fill | Automatic backfill                                          | Boolean         | false           |
 | title             | whether to show title                                          | String          | ‘Calendar’      |
 | default-value     | Default value, select single date : `String`，other: `Array` | String 、 Array | null            |
-| start-date        | The start date, or null if the start date is not limited             | String          | Today            |
-| end-date          | The end date, or null if the end date is not limited              | String          | 365 days from today |
+| start-date        | The start date            | String          | Today            |
+| end-date          | The end date            | String          | 365 days from today |
 | show-today          | Whether to show today's mark               | Boolean          | true |
 | start-text         | Range selection, start part of the text              | String          | Start |
 | end-text         | Range selection, end part of the text            | String          | End |

src/packages/__VUE/calendar/doc.md

@@ -544,8 +544,8 @@ export default {
 | is-auto-back-fill | 自动回填                                          | Boolean         | false           |
 | title             | 显示标题                                          | String          | ‘日期选择’      |
 | default-value     | 默认值，单个日期选择 String，其他为 Array  | String 、 Array | null            |
-| start-date        | 开始日期， 如果不限制开始日期传 null              | String          | 今天            |
-| end-date          | 结束日期，如果不限制结束日期传 null               | String          | 距离今天 365 天 |
+| start-date        | 开始日期         | String          | 今天            |
+| end-date          | 结束日期              | String          | 距离今天 365 天 |
 | show-today          | 是否展示今天标记               | Boolean          | true |
 | start-text         | 范围选择，开始信息文案               | String          | ’开始‘ |
 | end-text         | 范围选择，结束信息文案               | String          | ‘结束’ |

src/packages/__VUE/calendaritem/index.vue

@@ -348,7 +348,6 @@ export default create({
         }
         if (!isFirst) {
           // 点击日期 触发
-          console.log(state.chooseData);
           emit('select', state.chooseData);
           if (props.isAutoBackFill || !props.poppable) {
             confirm();

src/packages/__VUE/imagepreview/index.ts

@@ -1,6 +1,6 @@
 import ImagePreview from './index.vue';
 import { render, createVNode, h } from 'vue';
-import { ImageInterface } from './types'
+import { ImageInterface } from './types';
 export class ImagePreviewOptions {
   show: Boolean = false;
   images: ImageInterface[] = [];

src/packages/__VUE/imagepreview/index.vue

@@ -55,7 +55,7 @@
 </template>
 <script lang="ts">
 import { toRefs, reactive, watch, onMounted, ref, computed } from 'vue';
-import type { PropType } from 'vue'
+import type { PropType } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 import Popup from '../popup/index.vue';
 import Video from '../video/index.vue';
@@ -64,7 +64,7 @@ import SwiperItem from '../swiperitem/index.vue';
 import Icon from '../icon/index.vue';
 import { isPromise } from '@/packages/utils/util.ts';
 import ImagePreviewItem from './imagePreviewItem.vue';
-import { ImageInterface } from './types'
+import { ImageInterface } from './types';
 const { componentName, create } = createComponent('imagepreview');
 
 export default create({

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                                  |
+| radio-label   | Radio label           | string                                  |
+| form-item-prop | 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    |
+|--------|----------------|-------------|
+| on-submit| 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,23 +138,26 @@ export default {
 :::
 
 
-## Prop
+## Props
 
 | 字段 | 说明 | 类型 | 默认值
 |----- | ----- | ----- | -----
 | data | 发票数据 | array | -
-| formValue | 表单数据对象(使用表单校验时，_必填_) | object | -
+| form-value | 表单数据对象(使用表单校验时，_必填_) | object | -
 | submit | 是否显示提交按钮 | boolean | true
 
-### data 数据结构
+### Data Props
+
 
 可选属性如下:
 
 | 键名      | 说明                   | 类型                                    |
 |-----------|------------------------|-----------------------------------------|
+| type  | 类型，可选值有 `input`、`radio` | string                                 |
 | label  | 表单项 label         | string                                 |
 | placeholder   | 输入框 placeholder           | string                                  |
-| formItemProp | 表单域 v-model 字段， 在使用表单校验功能的情况下，该属性是必填的 | string | -
+| radio-label   | 单选 label           | string                                  |
+| form-item-prop | 表单域 v-model 字段， 在使用表单校验功能的情况下，该属性是必填的 | string | -
 | rules | 校验规则，[可参考 FormItem Rule 数据结构](#/form) | array | []
 | required | 是否显示必填字段的标签旁边的红色星号 | Boolean | `false`
 
@@ -147,4 +165,4 @@ export default {
 
 | 方法名            | 说明                                                               | 参数                | 返回值  |
 |-------------------|--------------------------------------------------------------------|---------------------|---------|
-| onSubmit            | 提交表单的方法                                             | -                   | Promise |
+| on-submit            | 提交表单的方法                                             | -                   | Promise |

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/layout/doc.md

@@ -88,7 +88,7 @@ app.use(Col);
 </style>
 ```
 :::
-### 设置元素间距
+### 分栏间隔
 :::demo
 ```html
 <template>

src/packages/__VUE/navbar/__test__/__snapshots__/navbar.spec.ts.snap

@@ -1,7 +1,8 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`should render left slot correctly 1`] = `
-"<view class=\\"nut-navbar__left\\"><i class=\\"nutui-iconfont nut-icon nut-icon-left\\" style=\\"color: rgb(151, 151, 151);\\" src=\\"\\"></i>
+"<view class=\\"nut-navbar__left\\">
+  <!--v-if-->
   <!--v-if-->Custom Left
 </view>"
 `;
@@ -9,7 +10,8 @@ exports[`should render left slot correctly 1`] = `
 exports[`should render placeholder element when using placeholder prop 1`] = `
 "<view class=\\"nut-navbar--placeholder\\">
   <view class=\\"nut-navbar nut-navbar--fixed\\" style=\\"z-index: 10;\\">
-    <view class=\\"nut-navbar__left\\"><i class=\\"nutui-iconfont nut-icon nut-icon-left\\" style=\\"color: rgb(151, 151, 151);\\" src=\\"\\"></i>
+    <view class=\\"nut-navbar__left\\">
+      <!--v-if-->
       <!--v-if-->
     </view>
     <view class=\\"nut-navbar__title\\">

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/__VUE/notify/demo.vue

@@ -11,8 +11,6 @@
     </nut-cell-group>
     <nut-cell-group :title="translate('t2')">
       <nut-cell is-Link @click="cusBgNotify(translate('cusBgNotify'))"> {{ translate('cusBgNotify') }} </nut-cell>
-    </nut-cell-group>
-    <nut-cell-group :title="translate('t3')">
       <nut-cell is-Link @click="timeNotify(translate('t3'))"> {{ translate('t3') }} </nut-cell>
       <nut-cell is-Link @click="positionNotify(translate('cusPostion'))"> {{ translate('cusPostion') }} </nut-cell>
     </nut-cell-group>
@@ -36,7 +34,7 @@ const initTranslate = () =>
     'zh-CN': {
       basic: '基本用法',
       t1: '通知类型',
-      t2: '自定义样式',
+      t2: '自定义',
       t3: '自定义时长',
       cusPostion: '自定义位置',
       useTemplate: '组件调用',
@@ -49,7 +47,7 @@ const initTranslate = () =>
     'en-US': {
       basic: 'Basic Usage',
       t1: 'Notify Type',
-      t2: 'Custom Style',
+      t2: 'Custom',
       t3: 'Custom Duration',
       cusPostion: 'Custom Postion',
       useTemplate: 'Template use',

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

@@ -95,6 +95,9 @@ export default {
     <nut-cell-group title="Custom Duration">
       <nut-cell is-Link @click="timeNotify('Custom Duration')">Custom Duration</nut-cell>
   </nut-cell-group>
+  <nut-cell-group title="Custom Postion">
+    <nut-cell is-Link @click="positionNotify('Custom Postion')">Custom Postion</nut-cell>
+  </nut-cell-group>
 </template>
 <script lang="ts">
 import { ref } from 'vue';
@@ -107,15 +110,55 @@ export default {
     const timeNotify = (msg: string) => {
       Notify.text(msg, { duration: 10000 });
     };
+    const positionNotify = (msg: string) => {
+      Notify.text(msg, { position: 'bottom' });
+    };
     return {
       cusBgNotify,
-      timeNotify
+      timeNotify,
+      positionNotify
+    };
+  }
+}
+</script>
+```
+:::
+
+
+
+## Template use
+:::demo
+```html
+<template>
+  <nut-cell-group title="Template use">
+    <nut-cell is-Link @click="showNotify">Template use</nut-cell>
+    <nut-notify v-model:visible="show">
+      <span>Content</span>
+    </nut-notify>
+  </nut-cell-group>
+</template>
+<script lang="ts">
+import { ref } from 'vue';
+import { Notify } from '@nutui/nutui';
+export default {
+  setup() {
+    const show = ref(false);
+    const showNotify = () => {
+      show.value = true;
+      setTimeout(() => {
+        show.value = false;
+      }, 2000);
+    };
+    return {
+      show,
+      showNotify
     };
   }
 }
 </script>
 ```
 :::
+   
     
 ## API
     

src/packages/__VUE/notify/doc.md

@@ -84,11 +84,14 @@ export default {
 :::demo
 ```html
 <template>
-  <nut-cell-group title="自定义样式">
+  <nut-cell-group title="自定义背景色和字体颜色">
     <nut-cell is-Link @click="cusBgNotify('自定义背景色和字体颜色')">自定义背景色和字体颜色</nut-cell>
   </nut-cell-group>
-    <nut-cell-group title="自定义时长">
-      <nut-cell is-Link @click="timeNotify('自定义时长')">自定义时长</nut-cell>
+  <nut-cell-group title="自定义时长">
+    <nut-cell is-Link @click="timeNotify('自定义时长')">自定义时长</nut-cell>
+  </nut-cell-group>
+  <nut-cell-group title="自定义位置">
+    <nut-cell is-Link @click="positionNotify('自定义位置')">自定义位置</nut-cell>
   </nut-cell-group>
 </template>
 <script lang="ts">
@@ -102,9 +105,46 @@ export default {
     const timeNotify = (msg: string) => {
       Notify.text(msg, { duration: 10000 });
     };
+    const positionNotify = (msg: string) => {
+      Notify.text(msg, { position: 'bottom' });
+    };
     return {
       cusBgNotify,
-      timeNotify
+      timeNotify,
+      positionNotify
+    };
+  }
+}
+</script>
+```
+:::
+
+## 组件调用
+:::demo
+```html
+<template>
+  <nut-cell-group title="组件调用">
+    <nut-cell is-Link @click="showNotify">组件调用</nut-cell>
+    <nut-notify v-model:visible="show">
+      <span>Content</span>
+    </nut-notify>
+  </nut-cell-group>
+</template>
+<script lang="ts">
+import { ref } from 'vue';
+import { Notify } from '@nutui/nutui';
+export default {
+  setup() {
+    const show = ref(false);
+    const showNotify = () => {
+      show.value = true;
+      setTimeout(() => {
+        show.value = false;
+      }, 2000);
+    };
+    return {
+      show,
+      showNotify
     };
   }
 }

src/packages/__VUE/notify/index.ts

@@ -1,4 +1,5 @@
-import { createVNode, render, h, onMounted } from 'vue';
+import { createVNode, render, h, onMounted, VNode, ComponentInternalInstance, Component } from 'vue';
+import { App } from 'vue';
 import Notify from './index.vue';
 const defaultOptions = {
   type: 'base',
@@ -8,16 +9,19 @@ const defaultOptions = {
   color: undefined,
   background: undefined,
   duration: 3000,
-  className: ''
+  className: '',
   // onClosed: null,
   // onClick: null,
   // onOpened: null,
   // textTimer: null,
-  // unmount: null
+  teleport: '',
+  unmount: new Function()
 };
+type Id = { id: string };
+type TDOptions = Partial<typeof defaultOptions & Id>;
 
 let idsMap: string[] = [];
-let optsMap: any[] = [];
+let optsMap: TDOptions[] = [];
 const clearNotify = (id?: string) => {
   if (id) {
     const container = document.getElementById(id);
@@ -38,8 +42,8 @@ const clearNotify = (id?: string) => {
   }
 };
 
-const updateNotify = (opts: any) => {
-  const container = document.getElementById(opts.id);
+const updateNotify = (opts: TDOptions) => {
+  const container = document.getElementById(opts.id as string);
   if (container) {
     const currentOpt = optsMap.find((item) => item.id === opts.id);
     if (currentOpt) {
@@ -47,13 +51,13 @@ const updateNotify = (opts: any) => {
     } else {
       opts = { ...defaultOptions, ...opts };
     }
-    const instance: any = createVNode(Notify, opts);
+    const instance: VNode = createVNode(Notify, opts);
     render(instance, container);
-    return instance.component.ctx;
+    return (instance.component as ComponentInternalInstance).data;
   }
 };
 
-const mountNotify = (opts: any) => {
+const mountNotify = (opts: TDOptions) => {
   opts.unmount = clearNotify;
   let _id;
   if (opts.id) {
@@ -89,7 +93,7 @@ const mountNotify = (opts: any) => {
       };
     }
   };
-  const instance: any = createVNode(Wrapper);
+  const instance: VNode = createVNode(Wrapper);
   document.body.appendChild(root);
   render(instance, root);
   // const container = document.createElement('view');
@@ -132,7 +136,7 @@ export const NotifyFunction = {
     errorMsg(msg);
     return mountNotify({ ...obj, msg, type: 'warning' });
   },
-  hide() {
+  hide(): void {
     clearNotify();
   },
   install(app: any): void {

src/packages/__VUE/notify/index.vue

@@ -13,10 +13,10 @@
   </nut-popup>
 </template>
 <script lang="ts">
-import { toRefs, reactive, onMounted, watch, ref } from 'vue';
+import { reactive, onMounted, watch, ref } from 'vue';
 import { createComponent } from '../../utils/create';
 import Popup from '../popup/index.vue';
-const { componentName, create } = createComponent('notify');
+const { create } = createComponent('notify');
 
 export default create({
   components: {
@@ -57,7 +57,7 @@ export default create({
     unmount: Function
   },
 
-  setup(props, { slots }) {
+  setup(props) {
     let timer: null | number = null;
     const state = reactive({
       mounted: false

src/packages/__VUE/picker/index.scss

@@ -127,6 +127,9 @@
       line-height: $picker-item-height;
       color: $picker-item-text-color;
       font-size: $picker-item-text-font-size;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
 
       &-hidden {
         visibility: hidden;
@@ -141,6 +144,10 @@
       line-height: $picker-item-height;
       color: $picker-item-text-color;
       font-size: $picker-item-text-font-size;
+
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
     }
   }
 

src/packages/__VUE/price/index.scss

@@ -1,5 +1,5 @@
 .nut-price {
-  font-size: $font-size-3;
+  font-size: 0;
   display: inline;
   color: $primary-color;
   &--symbol {

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

@@ -7,13 +7,9 @@
       decode="true"
       v-html="showSymbol"
     ></view>
-    <view :class="`nut-price--${size}`">
-      {{ formatThousands(price) }}
-    </view>
+    <view :class="`nut-price--${size}`">{{ formatThousands(price) }}</view>
     <view :class="`nut-price--decimal-${size}`" v-if="decimalDigits != 0">.</view>
-    <view :class="`nut-price--decimal-${size}`">
-      {{ formatDecimal(price) }}
-    </view>
+    <view :class="`nut-price--decimal-${size}`">{{ formatDecimal(price) }}</view>
     <view
       v-if="needSymbol && position == 'after'"
       class="nut-price--symbol"

src/packages/__VUE/searchbar/__tests__/searchbar.spec.ts

@@ -141,17 +141,6 @@ test('clear event test', async () => {
   expect(clear.exists()).toBe(true);
 });
 
-test('custom clear icon', async () => {
-  const wrapper = mount(SearchBar, {
-    props: {
-      clearIcon: 'close',
-      modelValue: 'test'
-    }
-  });
-  const input = wrapper.find('.nut-searchbar__input-clear i');
-  expect(input.classes()).toContain('nut-icon-close');
-});
-
 test('slot test', () => {
   const wrapper = mount(SearchBar, {
     props: { modelValue: '' },
@@ -177,3 +166,14 @@ test('slot test', () => {
 
   expect(wrapper.html()).toMatchSnapshot();
 });
+
+test('custom clear icon', async () => {
+  const wrapper = mount(SearchBar, {
+    props: {
+      clearIcon: 'close',
+      modelValue: 'test'
+    }
+  });
+  const input = wrapper.find('.nut-searchbar__input-clear i');
+  expect(input.classes()).toContain('nut-icon-close');
+});

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

@@ -24,15 +24,10 @@
             @focus="valueFocus"
             @blur="valueBlur"
             @confirm="handleSubmit"
-            :style="(styleSearchbar as CSSProperties)"
+            :style="styleSearchbar"
           />
         </form>
-        <view
-          @click="handleClear"
-          class="nut-searchbar__input-clear"
-          v-if="clearable"
-          v-show="(modelValue as string).length > 0"
-        >
+        <view @click="handleClear" class="nut-searchbar__input-clear" v-if="clearable" v-show="modelValue.length > 0">
           <nut-icon :name="clearIcon" size="12" color="#555"></nut-icon>
         </view>
       </view>
@@ -50,10 +45,6 @@
 import { toRefs, reactive, computed, ref, onMounted, PropType, Ref, CSSProperties } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 const { create, translate } = createComponent('searchbar');
-// interface Events {
-//   eventName: 'change' | 'focus' | 'blur' | 'clear' | 'update:modelValue';
-//   params: (string | number | Event)[];
-// }
 export type confirmTextType = 'send' | 'search' | 'next' | 'go' | 'done';
 
 export default create({
@@ -202,12 +193,12 @@ export default create({
     };
 
     const styleSearchbar = computed(() => {
-      return {
-        style: {
-          textAlign: props.inputAlign
-        }
+      const style: CSSProperties = {
+        textAlign: props.inputAlign as import('./type').TextAlign
       };
+      return style;
     });
+
     const inputsearch: Ref<HTMLElement | null> = ref(null);
     onMounted(() => {
       if (props.autofocus) {

src/packages/__VUE/searchbar/index.vue

@@ -27,14 +27,14 @@
             @input="valueChange"
             @focus="valueFocus"
             @blur="valueBlur"
-            :style="(styleSearchbar as CSSProperties)"
+            :style="styleSearchbar"
           />
         </form>
         <view
           @click="handleClear"
           class="nut-searchbar__input-clear"
           v-if="clearable"
-          v-show="(modelValue as string).length > 0"
+          v-show="String(modelValue).length > 0"
         >
           <nut-icon :name="clearIcon" size="12" color="#555"></nut-icon>
         </view>
@@ -207,9 +207,10 @@ export default create({
     };
 
     const styleSearchbar = computed(() => {
-      return {
-        textAlign: props.inputAlign
+      const style: CSSProperties = {
+        textAlign: props.inputAlign as import('./type').TextAlign
       };
+      return style;
     });
     const inputsearch: Ref<HTMLElement | null> = ref(null);
     onMounted(() => {

src/packages/__VUE/searchbar/type.ts

@@ -0,0 +1 @@
+export type TextAlign = 'start' | 'end' | 'left' | 'right' | 'center' | 'justify' | 'match-parent';

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>

tsconfig.json

@@ -21,5 +21,5 @@
     }
   },
   "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
-  "exclude": ["./node_modules","src/sites/mobile-taro","src/packages/vscode-extension"]
+  "exclude": ["./node_modules", "src/sites/mobile-taro", "src/packages/vscode-extension"]
 }