Merge branches 'v4' and 'v4' of https://github.com/jdf2e/nutui into v4

jd/copyh5.cjs

@@ -66,7 +66,7 @@ const copy = async () => {
     docsConfig.nav = fromConfig.nav;
     docsConfig.docs = fromConfig.docs;
     // docsConfig.demoUrl = 'https://nutui.jd.com/3x/demo.html#';
-    docsConfig.demoUrl = 'https://nutui-docs-test1.local-pf.jd.com/4x/demo.html#';
+    docsConfig.demoUrl = 'https://nutui.jd.com/4x/demo.html#';
     fse
       .writeJson(nutuiDocsConfigPath, docsConfig, {
         spaces: 2

jd/copytaro.cjs

@@ -60,7 +60,7 @@ const copy = async () => {
     docsConfig.nav = fromConfig.nav;
     docsConfig.docs = fromConfig.docs;
     // docsConfig.demoUrl = 'https://nutui.jd.com/3x/demo.html#';
-    docsConfig.demoUrl = 'https://nutui-docs-test1.local-pf.jd.com/vue_taro/demo/demo.html#/pages/index/index';
+    docsConfig.demoUrl = 'https://nutui.jd.com/vue_taro/demo/demo.html#/pages/index/index';
     fse
       .writeJson(nutuiDocsConfigPath, docsConfig, {
         spaces: 2

src/config.json

@@ -29,7 +29,7 @@
       {
         "name": "migrate-from-v3",
         "cName": "从 v3 升级到 v4",
-        "eName": "migrate-from-v3",
+        "eName": "Migrate-from-v3",
         "show": true
       },
       {

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

@@ -13,7 +13,6 @@ import { Backtop } from '@nutui/nutui';
 
 const app = createApp();
 app.use(Backtop);
-
 ```
 
 ### Basic Usage

src/packages/__VUE/backtop/doc.md

@@ -13,7 +13,6 @@ import { Backtop } from '@nutui/nutui';
 
 const app = createApp();
 app.use(Backtop);
-
 ```
 
 ### 基础用法

src/packages/__VUE/backtop/doc.taro.md

@@ -13,7 +13,6 @@ import { Backtop } from '@nutui/nutui-taro';
 
 const app = createApp();
 app.use(Backtop);
-
 ```
 
 

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

@@ -12,7 +12,6 @@ import { Barrage } from '@nutui/nutui';
 
 const app = createApp();
 app.use(Barrage);
-
 ```
 
 

src/packages/__VUE/barrage/doc.md

@@ -12,7 +12,6 @@ import { Barrage } from '@nutui/nutui';
 
 const app = createApp();
 app.use(Barrage);
-
 ```
 
 

src/packages/__VUE/barrage/doc.taro.md

@@ -12,7 +12,6 @@ import { Barrage } from '@nutui/nutui-taro';
 
 const app = createApp();
 app.use(Barrage);
-
 ```
 
 

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

@@ -12,7 +12,6 @@ import { Calendar } from '@nutui/nutui';
 
 const app = createApp();
 app.use(Calendar);
-
 ```
 
 

src/packages/__VUE/calendar/doc.md

@@ -12,7 +12,6 @@ import { Calendar } from '@nutui/nutui';
 
 const app = createApp();
 app.use(Calendar);
-
 ```
 
 

src/packages/__VUE/calendar/doc.taro.md

@@ -12,7 +12,6 @@ import { Calendar } from '@nutui/nutui-taro';
 
 const app = createApp();
 app.use(Calendar);
-
 ```
 
 

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

@@ -8,12 +8,11 @@ The multiple selection button is used to select.
 
 ``` ts
 import { createApp } from 'vue';
-import { Checkbox,CheckboxGroup } from '@nutui/nutui';
-import { Checklist } from '@nutui/icons-vue';
+import { Checkbox, CheckboxGroup } from '@nutui/nutui';
+
 const app = createApp();
 app.use(Checkbox);
 app.use(CheckboxGroup);
-app.use(Checklist);
 ```
 
 ### Basic Usage
@@ -144,8 +143,9 @@ Customize the icon through the slot, it is recommended to set the `icon` and `ch
 </template>
 <script lang="ts">
   import { reactive, toRefs } from 'vue';
+  import { Checklist } from '@nutui/icons-vue';
   export default {
-    props: {},
+    components: { Checklist },
     setup() {
       const state = reactive({
         checkbox7: true,
@@ -170,7 +170,8 @@ When the value changes, the `change` event will be triggered
 </template>
 <script lang="ts">
   import { reactive, toRefs } from 'vue';
-  import { showToast } from '@/packages/nutui.vue';
+  import { showToast } from '@nutui/nutui';
+  import '@nutui/nutui/dist/packages/toast/style';
   export default {
     props: {},
     setup() {
@@ -371,6 +372,7 @@ When the value changes, the `change` event will be triggered
 <script lang="ts">
   import { reactive, toRefs,ref, Ref } from 'vue';
   import { showToast } from '@nutui/nutui';
+  import '@nutui/nutui/dist/packages/toast/style';
   export default {
     props: {},
     setup() {

src/packages/__VUE/checkbox/doc.md

@@ -8,12 +8,11 @@
 
 ``` ts
 import { createApp } from 'vue';
-import { Checkbox,CheckboxGroup } from '@nutui/nutui';
-import { Checklist } from '@nutui/icons-vue';
+import { Checkbox, CheckboxGroup } from '@nutui/nutui';
+
 const app = createApp();
 app.use(Checkbox);
 app.use(CheckboxGroup);
-app.use(Checklist);
 ```
 
 ### 基础用法
@@ -145,8 +144,9 @@ app.use(Checklist);
 </template>
 <script lang="ts">
   import { reactive, toRefs } from 'vue';
+  import { Checklist } from '@nutui/icons-vue';
   export default {
-    props: {},
+    components: { Checklist },
     setup() {
       const state = reactive({
         checkbox7: true,
@@ -171,7 +171,8 @@ app.use(Checklist);
 </template>
 <script lang="ts">
   import { reactive, toRefs } from 'vue';
-  import { showToast } from '@/packages/nutui.vue';
+  import { showToast } from '@nutui/nutui';
+  import '@nutui/nutui/dist/packages/toast/style';
   export default {
     props: {},
     setup() {
@@ -373,6 +374,7 @@ app.use(Checklist);
 <script lang="ts">
   import { reactive, toRefs,ref, Ref } from 'vue';
   import { showToast } from '@nutui/nutui';
+  import '@nutui/nutui/dist/packages/toast/style';
   export default {
     props: {},
     setup() {

src/packages/__VUE/checkbox/doc.taro.md

@@ -8,12 +8,11 @@
 
 ``` ts
 import { createApp } from 'vue';
-import { Checkbox,CheckboxGroup } from '@nutui/nutui-taro';
-import { Checklist } from '@nutui/icons-vue-taro';
+import { Checkbox, CheckboxGroup } from '@nutui/nutui-taro';
+
 const app = createApp();
 app.use(Checkbox);
 app.use(CheckboxGroup);
-app.use(Checklist);
 ```
 
 ### 基础用法
@@ -145,8 +144,9 @@ app.use(Checklist);
 </template>
 <script lang="ts">
   import { reactive, toRefs } from 'vue';
+  import { Checklist } from '@nutui/icons-vue-taro';
   export default {
-    props: {},
+    components: { Checklist },
     setup() {
       const state = reactive({
         checkbox7: true,

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

@@ -12,7 +12,6 @@ import { CircleProgress } from '@nutui/nutui';
 
 const app = createApp();
 app.use(CircleProgress);
-
 ```
 ### Basic Usage
 :::demo

src/packages/__VUE/circleprogress/doc.md

@@ -12,7 +12,6 @@ import { CircleProgress } from '@nutui/nutui';
 
 const app = createApp();
 app.use(CircleProgress);
-
 ```
 ### 基础用法
 :::demo

src/packages/__VUE/circleprogress/doc.taro.md

@@ -12,7 +12,6 @@ import { CircleProgress } from '@nutui/nutui-taro';
 
 const app = createApp();
 app.use(CircleProgress);
-
 ```
 ### 基础用法
 :::demo

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

@@ -9,7 +9,7 @@ Place the content in multiple folded panels, and click the panel title to expand
 
 ``` javascript
 import { createApp } from 'vue';
-import { Collapse,CollapseItem } from '@nutui/nutui';
+import { Collapse, CollapseItem } from '@nutui/nutui';
 
 const app = createApp();
 app.use(Collapse);

src/packages/__VUE/collapse/doc.md

@@ -9,7 +9,7 @@
 
 ``` javascript
 import { createApp } from 'vue';
-import { Collapse,CollapseItem } from '@nutui/nutui';
+import { Collapse, CollapseItem } from '@nutui/nutui';
 
 const app = createApp();
 app.use(Collapse);

src/packages/__VUE/collapse/doc.taro.md

@@ -9,7 +9,7 @@
 
 ``` javascript
 import { createApp } from 'vue';
-import { Collapse,CollapseItem } from '@nutui/nutui-taro';
+import { Collapse, CollapseItem } from '@nutui/nutui-taro';
 
 const app = createApp();
 app.use(Collapse);

src/packages/__VUE/comment/demo.vue

@@ -47,7 +47,7 @@
       </nut-comment>
     </nut-cell>
 
-    <h2>{{ translate('additionalReview') }}</h2>
+    <h2>{{ translate('additionalReviewd') }}</h2>
     <nut-cell>
       <nut-comment
         imagesRows="multi"
@@ -72,7 +72,7 @@ const initTranslate = () =>
       basic: '基础用法',
       single: '评论图片单行展示',
       multiRow: '评论图片多行展示',
-      additionalReview: '追评展示'
+      additionalReviewd: '追评展示'
     },
     'en-US': {
       basic: 'Basic Usage',

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

@@ -200,7 +200,7 @@ Slots are defined in some areas and can be replaced as required
 | comment-labels  | Comment user label | 
 | comment-shop-reply  | At the bottom of the comment is the display of the merchant's response | 
 
-### images Data
+### images data
 
 ```javascript
 const images = [{
@@ -210,7 +210,7 @@ const images = [{
 }]
 ```
 
-### videos Data
+### videos data
 
 ```javascript
 const videos = [{
@@ -219,10 +219,10 @@ const videos = [{
 }]
 ```
 
-### info Data
+### info data
 
 ```javascript
-const info = [{
+const info = {
   "content": "",  // Comment on the details
   "nickName": "", // The name of the reviewer
   "score": 5, // Number of comment stars
@@ -231,8 +231,19 @@ const info = [{
   "size": "", // Comment good size
   "replay":23, // Number of replies to this comment
   "like":1, // Number of likes for this comment
-}]
+}
 ```
+
+### follow data
+
+用于存放追评相关的信息。
+
+```javascript
+const follow = {
+  "days": 0, // Review how many days after purchase
+  "content": "", // Review content
+  "images": [] // Review images
+}
 ## Theming
 
 ### CSS Variables

src/packages/__VUE/comment/doc.md

@@ -40,7 +40,6 @@ app.use(Comment);
 </template>
 <script lang="ts">
 import { reactive, ref,onMounted } from 'vue';
-import { Dongdong } from '@nutui/icons-vue';
 export default {
   setup() {
     let cmt = ref({});
@@ -226,7 +225,7 @@ const videos = [{
 用于存放评论相关的信息。
 
 ```javascript
-const info = [{
+const info = {
   "content": "",  // 评论详情
   "nickName": "", // 评论人的姓名
   "score": 5, // 评论星星数
@@ -235,8 +234,21 @@ const info = [{
   "size": "", // 评论人购买的商品规格
   "replay":23, // 此评论的回复数
   "like":1, // 此评论的点赞数
-}]
+}
 ```
+
+### follow 对象
+
+用于存放追评相关的信息。
+
+```javascript
+const follow = {
+  "days": 0, // 购买多少天后进行追评
+  "content": "", // 追评内容
+  "images": [] // 追评图片
+}
+```
+
 ## 主题定制
 
 ### 样式变量

src/packages/__VUE/comment/doc.taro.md

@@ -228,7 +228,7 @@ const videos = [{
 用于存放评论相关的信息。
 
 ```javascript
-const info = [{
+const info = {
   "content": "",  // 评论详情
   "nickName": "", // 评论人的姓名
   "score": 5, // 评论星星数
@@ -237,9 +237,20 @@ const info = [{
   "size": "", // 评论人购买的商品规格
   "replay":23, // 此评论的回复数
   "like":1, // 此评论的点赞数
-}]
+}
 ```
 
+### follow 对象
+
+用于存放追评相关的信息。
+
+```javascript
+const follow = {
+  "days": 0, // 购买多少天后进行追评
+  "content": "", // 追评内容
+  "images": [] // 追评图片
+}
+
 ## 主题定制
 
 ### 样式变量

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

@@ -11,7 +11,6 @@ import { ConfigProvider } from '@nutui/nutui';
 
 const app = createApp();
 app.use(ConfigProvider);
-
 ```
 
 ### dark mode

src/packages/__VUE/configprovider/doc.md

@@ -13,7 +13,6 @@ import { ConfigProvider } from '@nutui/nutui';
 
 const app = createApp();
 app.use(ConfigProvider);
-
 ```
 
 ### 深色模式

src/packages/__VUE/configprovider/doc.taro.md

@@ -13,7 +13,6 @@ import { ConfigProvider } from '@nutui/nutui-taro';
 
 const app = createApp();
 app.use(ConfigProvider);
-
 ```
 
 ### 深色模式

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

@@ -238,8 +238,8 @@ app.use(DatePicker);
     setup(props) {
       const currentDate = new Date(2022, 4, 10, 10, 10);
       const confirm = ( { selectedValue, selectedOptions } )=>{
-        date = selectedOptions.slice(1, 3).map((op) => op.text).join('');
-        time = selectedOptions.slice(3).map((op) => op.value).join(':');
+        const date = selectedOptions.slice(1, 3).map((op) => op.text).join('');
+        const time = selectedOptions.slice(3).map((op) => op.value).join(':');
         showToast.text(selectedOptions[0].text + 'Year' + date + ' ' + time);
       }
       const formatter = (type: string, option) => {
@@ -417,6 +417,15 @@ app.use(DatePicker);
 | top  | Custom content top columns |
 
 
+### Data Structure of PickerOption
+
+| Key         | Description                             | Type   | Default           |
+|--------------|----------------------------------|--------|------------------|
+| text        | Text of column              | string \| number | -             |
+| value          | Value of column               | string \| number |   -        |
+| children         | Cascader Option              | Array | -                |
+| className                  | Extra CalssName                   | string  |  -    |
+
 ## Theming
 
 ### CSS Variables

src/packages/__VUE/datepicker/doc.md

@@ -244,8 +244,8 @@ DatetimePicker 通过 `type` 属性来定义需要选择的时间类型。将 `t
     setup(props) {
       const currentDate = new Date(2022, 4, 10, 10, 10);
       const confirm = ( { selectedValue, selectedOptions } )=>{
-        date = selectedOptions.slice(1, 3).map((op) => op.text).join('');
-        time = selectedOptions.slice(3).map((op) => op.value).join(':');
+        const date = selectedOptions.slice(1, 3).map((op) => op.text).join('');
+        const time = selectedOptions.slice(3).map((op) => op.value).join(':');
         showToast.text(selectedOptions[0].text + '年' + date + ' ' + time);
       }
       const formatter = (type: string, option) => {
@@ -424,6 +424,15 @@ DatetimePicker 通过 `type` 属性来定义需要选择的时间类型。将 `t
 | default  | 自定义滑动数据底部区域 |
 | top  | 自定义滑动数据顶部区域 |
 
+### PickerOption 数据结构
+
+| 键名         | 说明                             | 类型   | 默认值           |
+|--------------|----------------------------------|--------|------------------|
+| text        | 选项的文字内容               | string \| number |   -            |
+| value          | 选项对应的值，且唯一               | string \| number |     -       |
+| children         | 用于级联选项               | Array | -                |
+| className                  | 添加额外的类名                   | string  | -    |
+
 ## 主题定制
 
 ### 样式变量

src/packages/__VUE/datepicker/doc.taro.md

@@ -30,13 +30,17 @@ app.use(DatePicker);
 
 <script lang="ts">
   import { ref } from 'vue';
+  import Taro from '@tarojs/taro'
   export default {
     setup(props) {
       const minDate = new Date(2020, 0, 1);
       const maxDate = new Date(2025, 10, 1);
       const currentDate = new Date(2022, 4, 10, 10, 10);
       const confirm = ({ selectedValue, selectedOptions })=>{
-        console.log(selectedOptions.map((val: any) => val.text).join(''));
+        Taro.showToast({
+          title:selectedOptions.map((val: any) => val.text).join(''),
+          icon:'none'
+        });
       }
       return {
         currentDate,
@@ -123,11 +127,15 @@ DatetimePicker 通过 `type` 属性来定义需要选择的时间类型。将 `t
 
 <script lang="ts">
   import { ref } from 'vue';
+  import Taro from '@tarojs/taro'
   export default {
     setup(props) {
       const currentDate = new Date(2022, 4, 10, 10, 10);
       const confirm = ( { selectedValue, selectedOptions } )=>{
-        console.log(selectedOptions.map((val: any) => val.text).join('-'));
+        Taro.showToast({
+          title:selectedOptions.map((val: any) => val.text).join('-'),
+          icon:'none'
+        });
       }
       return {
         currentDate,
@@ -157,13 +165,17 @@ DatetimePicker 通过 `type` 属性来定义需要选择的时间类型。将 `t
 </template>
 <script lang="ts">
   import { ref } from 'vue';
+  import Taro from '@tarojs/taro'
   export default {
     setup() {
       const currentDate = new Date(2022, 4, 10, 10, 10);
       const confirm = ( { selectedValue, selectedOptions } )=>{
         date = selectedValue.slice(0, 3).join('-');
         time = selectedValue.slice(3).join(':');
-        console.log(date + ' ' + time) ;
+        Taro.showToast({
+          title:date + ' ' + time,
+          icon:'none'
+        });
       }
       return {
         currentDate,
@@ -192,11 +204,15 @@ DatetimePicker 通过 `type` 属性来定义需要选择的时间类型。将 `t
 </template>
 <script lang="ts">
   import { ref } from 'vue';
+  import Taro from '@tarojs/taro'
   export default {
     setup(props) {
       const currentDate = new Date(2022, 4, 10, 10, 10);
       const confirm = ( { selectedValue, selectedOptions } )=>{
-        console.log(selectedValue.join(':'));
+         Taro.showToast({
+          title:selectedValue.join(':'),
+          icon:'none'
+        });
       }
       return {
         currentDate,
@@ -229,13 +245,17 @@ DatetimePicker 通过 `type` 属性来定义需要选择的时间类型。将 `t
 </template>
 <script lang="ts">
   import { ref } from 'vue';
+  import Taro from '@tarojs/taro'
   export default {
     setup(props) {
       const currentDate = new Date(2022, 4, 10, 10, 10);
       const confirm = ( { selectedValue, selectedOptions } )=>{
-        date = selectedOptions.slice(1, 3).map((op) => op.text).join('');
-        time = selectedOptions.slice(3).map((op) => op.value).join(':');
-        console.log(selectedOptions[0].text + '年' + date + ' ' + time);
+        const date = selectedOptions.slice(1, 3).map((op) => op.text).join('');
+        const time = selectedOptions.slice(3).map((op) => op.value).join(':');
+        Taro.showToast({
+          title:selectedOptions[0].text + '年' + date + ' ' + time,
+          icon:'none'
+        });
       }
       const formatter = (type: string, option) => {
         switch (type) {
@@ -286,11 +306,15 @@ DatetimePicker 通过 `type` 属性来定义需要选择的时间类型。将 `t
 </template>
 <script lang="ts">
   import { ref } from 'vue';
+  import Taro from '@tarojs/taro'
   export default {
     setup(props) {
       const currentDate = new Date(2022, 4, 10, 10, 10);
       const confirm = ( { selectedValue, selectedOptions } )=>{
-        console.log(selectedValue.join(':')) ;
+        Taro.showToast({
+          title:selectedValue.join(':'),
+          icon:'none'
+        });
       }
       return {
         currentDate,
@@ -324,6 +348,7 @@ DatetimePicker 通过 `type` 属性来定义需要选择的时间类型。将 `t
 </template>
 <script lang="ts">
   import { ref } from 'vue';
+  import Taro from '@tarojs/taro'
   export default {
     setup(props) {
       const currentDate = new Date(2022, 4, 10, 0, 0);
@@ -354,7 +379,10 @@ DatetimePicker 通过 `type` 属性来定义需要选择的时间类型。将 `t
         return options;
       };
       const confirm = ( { selectedValue, selectedOptions } )=>{
-        console.log(selectedOptions.map((option) => option.text).join(''));
+        Taro.showToast({
+          title:selectedOptions.map((option) => option.text).join(''),
+          icon:'none'
+        });
       }
       return {
         currentDate,
@@ -407,6 +435,15 @@ DatetimePicker 通过 `type` 属性来定义需要选择的时间类型。将 `t
 | default  | 自定义滑动数据底部区域 |
 | top  | 自定义滑动数据顶部区域 |
 
+### PickerOption 数据结构
+
+| 键名         | 说明                             | 类型   | 默认值           |
+|--------------|----------------------------------|--------|------------------|
+| text        | 选项的文字内容               | string \| number |   -            |
+| value          | 选项对应的值，且唯一               | string \| number |     -       |
+| children         | 用于级联选项               | Array | -                |
+| className                  | 添加额外的类名                   | string  | -    |
+
 ## 主题定制
 
 ### 样式变量

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

@@ -13,7 +13,6 @@ import { Ellipsis } from '@nutui/nutui';
 
 const app = createApp();
 app.use(Ellipsis);
-
 ```
 
 ### Leading

src/packages/__VUE/ellipsis/doc.md

@@ -13,7 +13,6 @@ import { Ellipsis } from '@nutui/nutui';
 
 const app = createApp();
 app.use(Ellipsis);
-
 ```
 
 ### 头部省略

src/packages/__VUE/ellipsis/doc.taro.md

@@ -13,7 +13,6 @@ import { Ellipsis } from '@nutui/nutui-taro';
 
 const app = createApp();
 app.use(Ellipsis);
-
 ```
 
 ### 头部省略

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

@@ -12,7 +12,6 @@ import { FixedNav } from '@nutui/nutui';
 
 const app = createApp();
 app.use(FixedNav);
-
 ```
 
 

src/packages/__VUE/fixednav/doc.md

@@ -12,7 +12,6 @@ import { FixedNav } from '@nutui/nutui';
 
 const app = createApp();
 app.use(FixedNav);
-
 ```
 
 

src/packages/__VUE/fixednav/doc.taro.md

@@ -12,7 +12,6 @@ import { FixedNav } from '@nutui/nutui-taro';
 
 const app = createApp();
 app.use(FixedNav);
-
 ```
 
 

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

@@ -13,7 +13,6 @@ import { Image } from '@nutui/nutui';
 
 const app = createApp();
 app.use();
-
 ```
 
 ### Basic Usage

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

@@ -85,9 +85,9 @@ The component provides the following CSS variables, which can be used to customi
 
 | Name | Default Value |
 | --------------------------------------- | -------------------------- |
-| --nut-indicator-color|  _var(--nut-primary-color)_ |
+| --nut-indicator-bg-color|  _var(--nut-primary-color)_ |
 | --nut-indicator-dot-color|  _var(--nut-disable-color)_ |
-| --nut-indicator-white|  _var(--nut-white)_ |
+| --nut-indicator-color|  _var(--nut-white)_ |
 | --nut-indicator-size|  _18px_ |
 | --nut-indicator-dot-size|  _calc(var(--nut-indicator-size) / 3)_ |
 | --nut-indicator-border-size|  _calc(var(--nut-indicator-size)+ 2)_ |

src/packages/__VUE/indicator/doc.md

@@ -85,9 +85,9 @@ app.use(Indicator);
 
 | 名称                                    | 默认值                     |
 | --------------------------------------- | -------------------------- |
-| --nut-indicator-color|  _var(--nut-primary-color)_ |
+| --nut-indicator-bg-color|  _var(--nut-primary-color)_ |
 | --nut-indicator-dot-color|  _var(--nut-disable-color)_ |
-| --nut-indicator-white|  _var(--nut-white)_ |
+| --nut-indicator-color|  _var(--nut-white)_ |
 | --nut-indicator-size|  _18px_ |
 | --nut-indicator-dot-size|  _calc(var(--nut-indicator-size) / 3)_ |
 | --nut-indicator-border-size|  _calc(var(--nut-indicator-size)+ 2)_ |

src/packages/__VUE/indicator/doc.taro.md

@@ -85,9 +85,9 @@ app.use(Indicator);
 
 | 名称                                    | 默认值                     |
 | --------------------------------------- | -------------------------- |
-| --nut-indicator-color|  _var(--nut-primary-color)_ |
+| --nut-indicator-bg-color|  _var(--nut-primary-color)_ |
 | --nut-indicator-dot-color|  _var(--nut-disable-color)_ |
-| --nut-indicator-white|  _var(--nut-white)_ |
+| --nut-indicator-color|  _var(--nut-white)_ |
 | --nut-indicator-size|  _18px_ |
 | --nut-indicator-dot-size|  _calc(var(--nut-indicator-size) / 3)_ |
 | --nut-indicator-border-size|  _calc(var(--nut-indicator-size)+ 2)_ |

src/packages/__VUE/indicator/index.scss

@@ -38,11 +38,11 @@
     text-align: center;
     font-size: $indicator-number-font-size;
     line-height: $indicator-size;
-    color: $indicator-white;
+    color: $indicator-color;
     vertical-align: middle;
-    border: 1px solid $indicator-white;
+    border: 1px solid $indicator-color;
     border-radius: 50%;
-    background-color: $indicator-color;
-    box-shadow: 0 0 1px 1px $indicator-color;
+    background-color: $indicator-bg-color;
+    box-shadow: 0 0 1px 1px $indicator-bg-color;
   }
 }

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

@@ -7,11 +7,11 @@ Scrolling to the bottom of the list automatically loads more data.
 ### Install
 
 ```javascript
-  import { createApp } from 'vue';
-  import { InfiniteLoading } from '@nutui/nutui';
+import { createApp } from 'vue';
+import { InfiniteLoading } from '@nutui/nutui';
 
-  const app = createApp();
-  app.use(InfiniteLoading);
+const app = createApp();
+app.use(InfiniteLoading);
 ```
 
 ### Basic Usage

src/packages/__VUE/infiniteloading/doc.md

@@ -7,12 +7,11 @@
 ### 安装
 
 ```javascript
-  import { createApp } from 'vue';
-  import { InfiniteLoading } from '@nutui/nutui';
-
-  const app = createApp();
-  app.use(InfiniteLoading);
+import { createApp } from 'vue';
+import { InfiniteLoading } from '@nutui/nutui';
 
+const app = createApp();
+app.use(InfiniteLoading);
 ```
 
 ### 基础用法

src/packages/__VUE/input/demo.vue

@@ -61,11 +61,7 @@
       v-model="state.event"
       :placeholder="translate('event')"
       clearable
-      @update:model-value="change"
-      @focus="focus"
-      @blur="blur"
       @clear="clear"
-      @click="click"
       @click-input="clickInput"
     />
   </div>
@@ -74,7 +70,7 @@
 <script lang="ts">
 import { reactive } from 'vue';
 import { Close } from '@nutui/icons-vue';
-
+import { showToast } from '@/packages/nutui.vue';
 import { createComponent } from '@/packages/utils/create';
 const { createDemo, translate } = createComponent('input');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
@@ -190,22 +186,12 @@ export default createDemo({
     setTimeout(function () {
       // state.val1 = '异步数据';
     }, 2000);
-    const change = (value: string) => {
-      console.log('change: ', value);
-    };
-    const focus = (event: Event) => {
-      console.log('focus:', event);
-    };
-    const blur = (event: Event) => {
-      console.log('blur:', event);
-    };
     const clear = (event: Event) => {
+      showToast.text('clear');
       console.log('clear:', event);
     };
-    const click = (event: Event) => {
-      console.log('click:', event);
-    };
     const clickInput = (event: Event) => {
+      showToast.text('clickInput');
       console.log('clickInput:', event);
     };
     const clearValue = () => {
@@ -214,11 +200,7 @@ export default createDemo({
     const formatter = (value: string) => value.replace(/\d/g, '');
     return {
       state,
-      change,
-      blur,
       clear,
-      focus,
-      click,
       clickInput,
       formatter,
       translate,

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

@@ -12,7 +12,6 @@ import { Input } from '@nutui/nutui';
 
 const app = createApp();
 app.use(Input);
-
 ```
 
 ### Basic Usage
@@ -144,16 +143,36 @@ Display the clear icon during the input process by setting `clearable`.
     clearable
     clearSize="14" 
   />
+  <nut-input
+    v-model="state.clear2"
+    placeholder="Custom Clear Icon"
+    clearable
+    clearSize="14"
+    show-word-limit
+    max-length="50"
+  >
+    <template #clear>
+      <Close width="12" height="12" @click="clearValue"></Close>
+    </template>
+  </nut-input>
 </template>
 <script lang="ts">
   import { reactive } from 'vue';
+  import { Close } from "@nutui/icons-vue"
   export default {
+    components:{
+      Close
+    },
     setup() {
       const state = reactive({
-        clear:''
+        clear:'',
+        clear2:''
       });
+      const clearValue = () => {
+        state.clear2 = '';
+      };
       return {
-        state
+        state, clearValue
       };
     }
   }
@@ -313,47 +332,30 @@ After setting the `maxlength` and `show-word-limit` attributes, word count will
     v-model="state.event"
     clearable
     placeholder="Event"
-    @update:model-value="change"
-    @focus="focus"
-    @blur="blur"
     @clear="clear"
-    @click="click"
     @click-input="clickInput"
   />
 </template>
 <script lang="ts">
   import { reactive } from 'vue';
+  import { showToast } from '@nutui/nutui';
   export default {
     setup() {
       const state = reactive({
         event: ''
       });
-      const change = (value: string) => {
-        console.log('change: ', value);
-      };
-      const focus = (event: Event) => {
-        console.log('focus:', event);
-      };
-      const blur = (event: Event) => {
-        console.log('blur:', event);
-      };
       const clear = (event: Event) => {
+        showToast.text('clear');
         console.log('clear:', event);
       };
-      const click = (event: Event) => {
-        console.log('click:', event);
-      };
       const clickInput = (event: Event) => {
+        showToast.text('clickInput');
         console.log('clickInput:', event);
       };
 
       return {
         state,
-        change,
-        blur,
         clear,
-        focus,
-        click,
         clickInput,
       };
     }
@@ -382,7 +384,7 @@ After setting the `maxlength` and `show-word-limit` attributes, word count will
 | show-word-limit | Whether to show word limit, need to set the `max-length` prop | boolean | `false`  |
 | error         | Whether to mark the input content in red   | boolean | `false`  |
 | formatter      | Input value formatter    | `(val: string) => string` | - |
-| format-trigger | When to format value, eg `onChange`、`onBlur` | string | - |
+| format-trigger | When to format value, eg `onChange`、`onBlur` | string | `onChange` |
 | confirm-type | The text of the button in the lower right corner of the keyboard, only valid when `type='text'`, eg `send`, `search`, `next`, ` go`, `done` | string |   `done`   |
 
 ### Events

src/packages/__VUE/input/doc.md

@@ -12,7 +12,6 @@ import { Input } from '@nutui/nutui';
 
 const app = createApp();
 app.use(Input);
-
 ```
 
 ### 基础用法
@@ -145,21 +144,21 @@ app.use(Input);
     clearSize="14" 
   />
   <nut-input
-      v-model="state.clear2"
-      :placeholder="translate('clear2')"
-      clearable
-      clearSize="14"
-      show-word-limit
-      max-length="50"
-    >
-      <template #clear>
-        <Close width="12" height="12" @click="clearValue"></Close>
-      </template>
-    </nut-input>
+    v-model="state.clear2"
+    placeholder="自定义清除图标"
+    clearable
+    clearSize="14"
+    show-word-limit
+    max-length="50"
+  >
+    <template #clear>
+      <Close width="12" height="12" @click="clearValue"></Close>
+    </template>
+  </nut-input>
 </template>
 <script lang="ts">
   import { reactive } from 'vue';
-  import { Close } from 
+  import { Close } from "@nutui/icons-vue"
   export default {
     components:{
       Close
@@ -169,8 +168,11 @@ app.use(Input);
         clear:'',
         clear2:''
       });
+      const clearValue = () => {
+        state.clear2 = '';
+      };
       return {
-        state
+        state, clearValue
       };
     }
   }
@@ -333,47 +335,30 @@ app.use(Input);
     v-model="state.event"
     clearable
     placeholder="事件演示"
-    @update:model-value="change"
-    @focus="focus"
-    @blur="blur"
     @clear="clear"
-    @click="click"
     @click-input="clickInput"
   />
 </template>
 <script lang="ts">
   import { reactive } from 'vue';
+  import { showToast } from '@nutui/nutui';
   export default {
     setup() {
       const state = reactive({
         event: ''
       });
-      const change = (value: string) => {
-        console.log('change: ', value);
-      };
-      const focus = (event: Event) => {
-        console.log('focus:', event);
-      };
-      const blur = (event: Event) => {
-        console.log('blur:', event);
-      };
       const clear = (event: Event) => {
+        showToast.text('clear');
         console.log('clear:', event);
       };
-      const click = (event: Event) => {
-        console.log('click:', event);
-      };
       const clickInput = (event: Event) => {
+        showToast.text('clickInput');
         console.log('clickInput:', event);
       };
 
       return {
         state,
-        change,
-        blur,
         clear,
-        focus,
-        click,
         clickInput,
       };
     }
@@ -401,7 +386,7 @@ app.use(Input);
 | show-word-limit | 是否显示限制最长输入字符，需要设置 `max-length` 属性 | boolean | `false`  |
 | error         | 是否标红                                | boolean | `false`  |
 | formatter      | 输入内容格式化函数    | `(val: string) => string` | - |
-| format-trigger | 格式化函数触发的时机，可选值为 `onChange`、`onBlur` | string | - |
+| format-trigger | 格式化函数触发的时机，可选值为 `onChange`、`onBlur` | string | `onChange` |
 | confirm-type | 键盘右下角按钮的文字，仅在`type='text'`时生效,可选值 `send`：发送、`search`：搜索、`next`：下一个、`go`：前往、`done`：完成 | string |   `done`   |
 
 ### Events

src/packages/__VUE/input/doc.taro.md

@@ -12,7 +12,6 @@ import { Input } from '@nutui/nutui-taro';
 
 const app = createApp();
 app.use(Input);
-
 ```
 
 ### 基础用法
@@ -144,16 +143,37 @@ app.use(Input);
     clearable
     clearSize="14" 
   />
+  <nut-input
+    v-model="state.clear2"
+    placeholder="自定义清除图标"
+    clearable
+    clearSize="14"
+    show-word-limit
+    max-length="50"
+  >
+    <template #clear>
+      <Close width="12" height="12" size="12" @click="clearValue"></Close>
+    </template>
+  </nut-input>
 </template>
 <script lang="ts">
   import { reactive } from 'vue';
+  import { Close } from '@nutui/icons-vue-taro';
+
   export default {
+    components: {
+      Close,
+    },
     setup() {
       const state = reactive({
-        clear:''
+        clear:'',
+        clear2:''
       });
+      const clearValue = () => {
+        state.clear2 = '';
+      };
       return {
-        state
+        state, clearValue
       };
     }
   }
@@ -318,46 +338,40 @@ app.use(Input);
     v-model="state.event"
     clearable
     placeholder="事件演示"
-    @update:model-value="change"
-    @focus="focus"
-    @blur="blur"
     @clear="clear"
-    @click="click"
     @click-input="clickInput"
   />
+  <nut-toast :msg="state.msg" v-model:visible="state.show" type="text" />
 </template>
 <script lang="ts">
   import { reactive } from 'vue';
+  import { Toast } from '@nutui/nutui-taro';
   export default {
+    components: {
+      Toast
+    },
     setup() {
       const state = reactive({
-        event: ''
+        event: '',
+        show:false,
+        msg:''
       });
-      const change = (value: string) => {
-        console.log('change: ', value);
-      };
-      const focus = (event: Event) => {
-        console.log('focus:', event);
+      const clear = (value: string | number, event: Event) => {
+        console.log('clear:', value, event);
+        showToast('clear')
       };
-      const blur = (event: Event) => {
-        console.log('blur:', event);
+      const showToast = (msg: string) => {
+        state.show = true;
+        state.msg = msg;
       };
-      const clear = (event: Event) => {
-        console.log('clear:', event);
-      };
-      const click = (event: Event) => {
-        console.log('click:', event);
-      };
-      const clickInput = (event: Event) => {
-        console.log('clickInput:', event);
+      const clickInput = (value: string | number) => {
+        console.log('clickInput:', value);
+        showToast('clickInput')
+
       };
       return {
         state,
-        change,
-        blur,
         clear,
-        focus,
-        click,
         clickInput,
       };
     }
@@ -385,7 +399,7 @@ app.use(Input);
 | show-word-limit | 是否显示限制最长输入字符，需要设置 `max-length` 属性 | boolean | `false`  |
 | error         | 是否标红                                | boolean | `false`  |
 | formatter      | 输入内容格式化函数    | `(val: string) => string` | - |
-| format-trigger | 格式化函数触发的时机，可选值为 `onChange`、`onBlur` | string | - |
+| format-trigger | 格式化函数触发的时机，可选值为 `onChange`、`onBlur` | string | `onChange` |
 | confirm-type | 键盘右下角按钮的文字，仅在`type='text'`时生效,可选值 `send`：发送、`search`：搜索、`next`：下一个、`go`：前往、`done`：完成 | string |   `done`   |
 | adjust-position | 键盘弹起时，是否自动上推页面     | boolean | `true` |
 | always-system | 是否强制使用系统键盘和 `Web-view` 创建的 `input` 元素。为 `true` 时，`confirm-type`、`confirm-hold` 可能失效    | boolean | `false` |

src/packages/__VUE/input/index.scss

@@ -28,7 +28,7 @@ textarea {
   width: 100%;
   padding: 10px 25px;
   display: flex;
-  line-height: 24px;
+  line-height: 20px;
   background: $white;
   font-size: $input-font-size;
   box-sizing: border-box;
@@ -53,7 +53,11 @@ textarea {
     resize: none;
     flex: 1;
   }
-
+  .input-text {
+    font-size: $input-font-size;
+    height: auto;
+    min-height: auto;
+  }
   &__label {
     width: 80px;
     overflow: hidden;

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

@@ -8,7 +8,7 @@
             class="input-text"
             ref="inputRef"
             :style="styles"
-            :maxlength="maxLength"
+            :maxlength="maxLength ? maxLength : -1"
             :placeholder="placeholder"
             :disabled="disabled"
             :readonly="readonly"
@@ -20,6 +20,9 @@
             @focus="onFocus"
             @blur="onBlur"
             @click="onClickInput"
+            @change="endComposing"
+            @compositionend="endComposing"
+            @compositionstart="startComposing"
             :adjust-position="adjustPosition"
             :always-system="alwaysSystem"
           ></component>
@@ -31,19 +34,28 @@
         </view>
         <view class="nut-input-clear-box" v-if="clearable && !readonly" v-show="active && modelValue.length > 0">
           <slot name="clear">
-            <MaskClose class="nut-input-clear" v-bind="$attrs" :size="clearSize" @click="clear"> </MaskClose>
+            <MaskClose
+              class="nut-input-clear"
+              v-bind="$attrs"
+              :size="clearSize"
+              :width="clearSize"
+              :height="clearSize"
+              @click="clear"
+            >
+            </MaskClose>
           </slot>
         </view>
       </view>
     </view>
   </view>
 </template>
+<!-- eslint-disable @typescript-eslint/no-non-null-assertion -->
 <script lang="ts">
 import { PropType, ref, reactive, computed, onMounted, watch, ComputedRef, InputHTMLAttributes, h } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 import { formatNumber } from './util';
 import { MaskClose } from '@nutui/icons-vue-taro';
-
+import Taro from '@tarojs/taro';
 const { componentName, create } = createComponent('input');
 
 export type InputType = InputHTMLAttributes['type'];
@@ -55,13 +67,12 @@ export type InputRule = {
   required?: boolean;
 };
 export type ConfirmTextType = 'send' | 'search' | 'next' | 'go' | 'done';
+export interface InputTarget extends HTMLInputElement {
+  composing?: boolean;
+}
 
 export default create({
   props: {
-    ref: {
-      type: String,
-      default: ''
-    },
     type: {
       type: String as PropType<InputType>,
       default: 'text'
@@ -78,10 +89,6 @@ export default create({
       type: String,
       default: 'left'
     },
-    center: {
-      type: Boolean,
-      default: false
-    },
     required: {
       type: Boolean,
       default: false
@@ -100,7 +107,7 @@ export default create({
     },
     maxLength: {
       type: [String, Number],
-      default: '9999'
+      default: ''
     },
     clearable: {
       type: Boolean,
@@ -122,14 +129,6 @@ export default create({
       type: Function as PropType<(value: string) => string>,
       default: null
     },
-    rules: {
-      type: Array as PropType<InputRule>,
-      default: []
-    },
-    rows: {
-      type: [String, Number],
-      default: null
-    },
     showWordLimit: {
       type: Boolean,
       default: false
@@ -152,7 +151,7 @@ export default create({
     }
   },
   components: { MaskClose },
-  emits: ['update:modelValue', 'change', 'blur', 'focus', 'clear', 'keypress', 'click-input'],
+  emits: ['update:modelValue', 'blur', 'focus', 'clear', 'keypress', 'click-input'],
 
   setup(props, { emit, slots }) {
     const active = ref(false);
@@ -177,7 +176,6 @@ export default create({
       const prefixCls = componentName;
       return {
         [prefixCls]: true,
-        center: props.center,
         [`${prefixCls}--disabled`]: props.disabled,
         [`${prefixCls}--required`]: props.required,
         [`${prefixCls}--error`]: props.error,
@@ -202,6 +200,15 @@ export default create({
     };
 
     const onInput = (event: Event) => {
+      if (Taro.getEnv() === Taro.ENV_TYPE.WEB) {
+        if (!(event.target as InputTarget)!.composing) {
+          _onInput(event);
+        }
+      } else {
+        _onInput(event);
+      }
+    };
+    const _onInput = (event: Event) => {
       const input = event.target as HTMLInputElement;
       let value = input.value;
       if (props.maxLength && value.length > Number(props.maxLength)) {
@@ -228,7 +235,7 @@ export default create({
 
       if (value !== props.modelValue) {
         emit('update:modelValue', value);
-        emit('change', value);
+        // emit('change', value);
       }
     };
 
@@ -265,7 +272,7 @@ export default create({
       event.stopPropagation();
       if (props.disabled) return;
       emit('update:modelValue', '', event);
-      emit('change', '', event);
+      // emit('change', '', event);
       emit('clear', '', event);
     };
 
@@ -282,7 +289,20 @@ export default create({
       }
       emit('click-input', event);
     };
+    const startComposing = ({ target }: Event) => {
+      if (Taro.getEnv() === Taro.ENV_TYPE.WEB) {
+        (target as InputTarget)!.composing = true;
+      }
+    };
 
+    const endComposing = ({ target }: Event) => {
+      if (Taro.getEnv() === Taro.ENV_TYPE.WEB) {
+        if ((target as InputTarget)!.composing) {
+          (target as InputTarget)!.composing = false;
+          (target as InputTarget)!.dispatchEvent(new Event('input'));
+        }
+      }
+    };
     watch(
       () => props.modelValue,
       () => {
@@ -309,6 +329,8 @@ export default create({
       onFocus,
       onBlur,
       clear,
+      startComposing,
+      endComposing,
       onClickInput
     };
   }

src/packages/__VUE/input/index.vue

@@ -20,6 +20,9 @@
             @focus="onFocus"
             @blur="onBlur"
             @click="onClickInput"
+            @change="endComposing"
+            @compositionend="endComposing"
+            @compositionstart="startComposing"
           ></component>
           <view v-if="showWordLimit && maxLength" class="nut-input-word-limit">
             <span class="nut-input-word-num">{{ modelValue ? modelValue.length : 0 }}</span
@@ -28,13 +31,22 @@
         </view>
         <view class="nut-input-clear-box" v-if="clearable && !readonly" v-show="active && modelValue.length > 0">
           <slot name="clear">
-            <MaskClose class="nut-input-clear" v-bind="$attrs" :size="clearSize" @click="clear"> </MaskClose>
+            <MaskClose
+              class="nut-input-clear"
+              v-bind="$attrs"
+              :size="clearSize"
+              :width="clearSize"
+              :height="clearSize"
+              @click="clear"
+            >
+            </MaskClose>
           </slot>
         </view>
       </view>
     </view>
   </view>
 </template>
+<!-- eslint-disable @typescript-eslint/no-non-null-assertion -->
 <script lang="ts">
 import { PropType, ref, reactive, computed, onMounted, watch, ComputedRef, InputHTMLAttributes, h } from 'vue';
 import { createComponent } from '@/packages/utils/create';
@@ -52,13 +64,11 @@ export type InputRule = {
   required?: boolean;
 };
 export type ConfirmTextType = 'send' | 'search' | 'next' | 'go' | 'done';
-
+export interface InputTarget extends HTMLInputElement {
+  composing: boolean;
+}
 export default create({
   props: {
-    ref: {
-      type: String,
-      default: ''
-    },
     type: {
       type: String as PropType<InputType>,
       default: 'text'
@@ -75,10 +85,6 @@ export default create({
       type: String,
       default: 'left'
     },
-    center: {
-      type: Boolean,
-      default: false
-    },
     required: {
       type: Boolean,
       default: false
@@ -93,7 +99,7 @@ export default create({
     },
     maxLength: {
       type: [String, Number],
-      default: '9999'
+      default: ''
     },
     clearable: {
       type: Boolean,
@@ -115,14 +121,6 @@ export default create({
       type: Function as PropType<(value: string) => string>,
       default: null
     },
-    rules: {
-      type: Array as PropType<InputRule>,
-      default: []
-    },
-    rows: {
-      type: [String, Number],
-      default: null
-    },
     showWordLimit: {
       type: Boolean,
       default: false
@@ -142,7 +140,7 @@ export default create({
   },
   components: { MaskClose },
 
-  emits: ['update:modelValue', 'change', 'blur', 'focus', 'clear', 'keypress', 'click-input'],
+  emits: ['update:modelValue', 'blur', 'focus', 'clear', 'keypress', 'click-input'],
 
   setup(props, { emit, slots }) {
     const active = ref(false);
@@ -166,7 +164,6 @@ export default create({
       const prefixCls = componentName;
       return {
         [prefixCls]: true,
-        center: props.center,
         [`${prefixCls}--disabled`]: props.disabled,
         [`${prefixCls}--required`]: props.required,
         [`${prefixCls}--error`]: props.error,
@@ -191,12 +188,14 @@ export default create({
     };
 
     const onInput = (event: Event) => {
-      const input = event.target as HTMLInputElement;
-      let value = input.value;
-      if (props.maxLength && value.length > Number(props.maxLength)) {
-        value = value.slice(0, Number(props.maxLength));
+      if (!(event.target as InputTarget)!.composing) {
+        const input = event.target as HTMLInputElement;
+        let value = input.value;
+        if (props.maxLength && value.length > Number(props.maxLength)) {
+          value = value.slice(0, Number(props.maxLength));
+        }
+        updateValue(value);
       }
-      updateValue(value);
     };
 
     const updateValue = (value: string, trigger: InputFormatTrigger = 'onChange') => {
@@ -217,7 +216,7 @@ export default create({
 
       if (value !== props.modelValue) {
         emit('update:modelValue', value);
-        emit('change', value);
+        // emit('change', value);
       }
     };
 
@@ -254,7 +253,7 @@ export default create({
       event.stopPropagation();
       if (props.disabled) return;
       emit('update:modelValue', '', event);
-      emit('change', '', event);
+      // emit('change', '', event);
       emit('clear', '', event);
     };
 
@@ -271,7 +270,16 @@ export default create({
       }
       emit('click-input', event);
     };
+    const startComposing = ({ target }: Event) => {
+      (target as InputTarget)!.composing = true;
+    };
 
+    const endComposing = ({ target }: Event) => {
+      if ((target as InputTarget)!.composing) {
+        (target as InputTarget)!.composing = false;
+        (target as InputTarget)!.dispatchEvent(new Event('input'));
+      }
+    };
     watch(
       () => props.modelValue,
       () => {
@@ -295,6 +303,8 @@ export default create({
       onFocus,
       onBlur,
       clear,
+      startComposing,
+      endComposing,
       onClickInput
     };
   }

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

@@ -9,7 +9,7 @@ For quick layout
 
 ```javascript
 import { createApp } from 'vue';
-import { Layout,Row,Col } from '@nutui/nutui';
+import { Layout, Row, Col } from '@nutui/nutui';
 
 const app = createApp();
 app.use(Layout);

src/packages/__VUE/layout/doc.md

@@ -8,7 +8,7 @@
 
 ```javascript
 import { createApp } from 'vue';
-import { Layout,Row,Col } from '@nutui/nutui';
+import { Layout, Row, Col } from '@nutui/nutui';
 
 const app = createApp();
 app.use(Layout);

src/packages/__VUE/layout/doc.taro.md

@@ -8,7 +8,7 @@
 
 ```javascript
 import { createApp } from 'vue';
-import { Layout,Row,Col } from '@nutui/nutui-taro';
+import { Layout, Row, Col } from '@nutui/nutui-taro';
 
 const app = createApp();
 app.use(Layout);

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

@@ -9,6 +9,7 @@ The menu list that pops down downwards.
 ``` javascript
 import { createApp } from 'vue';
 import { Menu, MenuItem } from '@nutui/nutui';
+
 const app = createApp();
 app.use(Menu);
 app.use(MenuItem);

src/packages/__VUE/menu/doc.md

@@ -9,6 +9,7 @@
 ``` javascript
 import { createApp } from 'vue';
 import { Menu, MenuItem } from '@nutui/nutui';
+
 const app = createApp();
 app.use(Menu);
 app.use(MenuItem);

src/packages/__VUE/menu/doc.taro.md

@@ -9,6 +9,7 @@
 ``` javascript
 import { createApp } from 'vue';
 import { Menu, MenuItem } from '@nutui/nutui-taro';
+
 const app = createApp();
 app.use(Menu);
 app.use(MenuItem);

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

@@ -1,4 +1,4 @@
-# NavBar
+# Navbar
 
 ### Intro
 

src/packages/__VUE/navbar/doc.md

@@ -1,4 +1,4 @@
-# NavBar 头部导航
+# Navbar 头部导航
 
 ### 介绍 
 

src/packages/__VUE/navbar/doc.taro.md

@@ -1,4 +1,4 @@
-# NavBar 头部导航
+# Navbar 头部导航
 
 ### 介绍 
 

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

@@ -13,7 +13,6 @@ import { Noticebar } from '@nutui/nutui';
 
 const app = createApp();
 app.use(Noticebar);
-
 ```
 
 ### Basic Usage

src/packages/__VUE/noticebar/doc.md

@@ -15,7 +15,6 @@ import { Noticebar } from '@nutui/nutui';
 
 const app = createApp();
 app.use(Noticebar);
-
 ```
 
 

src/packages/__VUE/noticebar/doc.taro.md

@@ -15,7 +15,6 @@ import { Noticebar } from '@nutui/nutui-taro';
 
 const app = createApp();
 app.use(Noticebar);
-
 ```
 
 

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

@@ -12,7 +12,6 @@ import { NumberKeyboard } from '@nutui/nutui';
 
 const app = createApp();
 app.use(NumberKeyboard);
-
 ```
 
 

src/packages/__VUE/numberkeyboard/doc.md

@@ -12,7 +12,6 @@ import { NumberKeyboard } from '@nutui/nutui';
 
 const app = createApp();
 app.use(NumberKeyboard);
-
 ```
 
 

src/packages/__VUE/numberkeyboard/doc.taro.md

@@ -12,7 +12,6 @@ import { NumberKeyboard } from '@nutui/nutui-taro';
 
 const app = createApp();
 app.use(NumberKeyboard);
-
 ```
 
 

src/packages/__VUE/picker/Column.vue

@@ -89,7 +89,7 @@ export default create({
     const roller = ref(null);
 
     const moving = ref(false);
-    const touchDeg = ref(0);
+    const touchDeg = ref<string | number>(0);
     const touchTime = ref(0);
 
     const DEFAULT_DURATION = 200;
@@ -134,16 +134,19 @@ export default create({
         let dom = roller.value as any;
         const { transform } = window.getComputedStyle(dom);
         if (props.threeDimensional) {
-          const circle = Math.floor(touchDeg.value / 360);
+          const circle = Math.floor(parseInt(touchDeg.value as string) / 360);
           const cos = +transform.split(', ')[5];
           const sin = +transform.split(', ')[6] < 0 ? 180 : 0;
           const endDeg = circle * 360 + (Math.acos(cos) / Math.PI) * 180 + sin;
+
           state.scrollDistance = -Math.abs((endDeg / state.rotation - 1) * +props.optionHeight);
         } else {
           state.scrollDistance = +transform.slice(7, transform.length - 1).split(', ')[5];
         }
       }
 
+      preventDefault(event, true);
+
       state.touchParams.startY = touch.deltaY.value;
       state.touchParams.startTime = Date.now();
       state.transformY = state.scrollDistance;

src/packages/__VUE/picker/common.ts

@@ -106,10 +106,12 @@ export const componentWeapp = {
           }
         });
       } else {
-        columnsList.value.forEach((item) => {
-          defaultIndexs.push(0);
-          defaultValues.value.push(item[0].value);
-        });
+        if (columnsList && columnsList.value.length > 0) {
+          columnsList.value.forEach((item) => {
+            defaultIndexs.push(0);
+            item.length > 0 && defaultValues.value.push(item[0].value);
+          });
+        }
       }
 
       return defaultIndexs;
@@ -124,9 +126,10 @@ export const componentWeapp = {
         if (prevDefaultValue[index] != col) changeIndex = index;
       });
 
-      defaultIndexes.value = data.detail.value;
       // 选择的是哪个 option
       changeHandler(changeIndex, columnsList.value[changeIndex][data.detail.value[changeIndex]]);
+
+      defaultIndexes.value = defaultValuesConvert();
     };
 
     // 确定

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

@@ -382,8 +382,7 @@ Use the children field of the Columns attribute to cascade options
 | Attribute         | Description                             | Type   | Default           |
 |--------------|----------------------------------|--------|------------------|
 | v-model:value         | Default Index               | Array | `[]`              |
-| v-model:visible          | Is Show               | boolean | -                |
-| columns         | Columns data              | Array | -                |
+| columns         | Columns data              | PickerOption[] \| PickerOption[][] | -                |
 | title                  | Toolbar title                   | string  | -      |
 | cancel-text            | Text of cancel button               | string  | `cancel`   |
 | ok-text                | Text of confirm button               | string  | `confirm`   |
@@ -393,14 +392,6 @@ Use the children field of the Columns attribute to cascade options
 | option-height         | Option height             | number \| string | `36`     |
 | show-toolbar         | Whether to show toolbar             | boolean | `true`    |
 
-### Data Structure of Columns
-
-| Key         | Description                             | Type   | Default           |
-|--------------|----------------------------------|--------|------------------|
-| text        | Text of column              | string \| number | -             |
-| value          | Value of column               | string \| number |   -        |
-| children         | Cascader Option              | Array | -                |
-| className                  | Extra CalssName                   | string  |  -    |
 
 ### Events
 
@@ -417,6 +408,15 @@ Use the children field of the Columns attribute to cascade options
 | default  | Custom content bottom columns |
 | top  | Custom content top columns |
 
+### Data Structure of PickerOption
+
+| Key         | Description                             | Type   | Default           |
+|--------------|----------------------------------|--------|------------------|
+| text        | Text of column              | string \| number | -             |
+| value          | Value of column               | string \| number |   -        |
+| children         | Cascader Option              | Array | -                |
+| className                  | Extra CalssName                   | string  |  -    |
+
 ## Theming
 
 ### CSS Variables

src/packages/__VUE/picker/doc.md

@@ -377,7 +377,7 @@ Picker 通常作为用于辅助表单填写，可以搭配 Popup 实现效果。
 | 参数         | 说明                             | 类型   | 默认值           |
 |--------------|----------------------------------|--------|------------------|
 | v-model:value         | 默认选中项               | Array | `[]`              |
-| columns         | 对象数组，配置每一列显示的数据               | Array | -                |
+| columns         | 对象数组，配置每一列显示的数据               | PickerOption[] \| PickerOption[][] | -                |
 | title                  | 设置标题                   | string  | -      |
 | cancel-text            | 取消按钮文案               | string  | `取消`   |
 | ok-text                | 确定按钮文案               | string  | `确定`   |
@@ -387,14 +387,6 @@ Picker 通常作为用于辅助表单填写，可以搭配 Popup 实现效果。
 | option-height         | 选项高度             | number \| string | `36`     |
 | show-toolbar         | 是否显示顶部导航             | boolean | `true`    |
 
-### Columns 数据结构
-
-| 键名         | 说明                             | 类型   | 默认值           |
-|--------------|----------------------------------|--------|------------------|
-| text        | 选项的文字内容               | string \| number |   -            |
-| value          | 选项对应的值，且唯一               | string \| number |     -       |
-| children         | 用于级联选项               | Array | -                |
-| className                  | 添加额外的类名                   | string  | -    |
 
 ### Events
 
@@ -411,6 +403,15 @@ Picker 通常作为用于辅助表单填写，可以搭配 Popup 实现效果。
 | default  | 自定义滑动数据底部区域 |
 | top  | 自定义滑动数据顶部区域 |
 
+### PickerOption 数据结构
+
+| 键名         | 说明                             | 类型   | 默认值           |
+|--------------|----------------------------------|--------|------------------|
+| text        | 选项的文字内容               | string \| number |   -            |
+| value          | 选项对应的值，且唯一               | string \| number |     -       |
+| children         | 用于级联选项               | Array | -                |
+| className                  | 添加额外的类名                   | string  | -    |
+
 ## 主题定制
 
 ### 样式变量

src/packages/__VUE/picker/doc.taro.md

@@ -23,6 +23,7 @@ app.use(Picker);
 </template>
 <script lang="ts">
   import { ref } from 'vue';
+  import Taro from '@tarojs/taro'
   export default {
     setup(props) {
       const columns = ref([
@@ -36,7 +37,10 @@ app.use(Picker);
       ]);
     
       const confirm = ( { selectedValue,selectedOptions })=>{
-        console.log(selectedOptions.map((val: any) => val.text).join(','))
+        Taro.showToast({
+          title:selectedOptions.map((val: any) => val.text).join(','),
+          icon:'none'
+        });
       }
 
       return {columns, confirm};
@@ -113,6 +117,7 @@ Picker 通常作为用于辅助表单填写，可以搭配 Popup 实现效果。
 </template>
 <script lang="ts">
   import { ref } from 'vue';
+  import Taro from '@tarojs/taro'
   export default {
     setup(props) {
       const selectedValue = ref(['ZheJiang']);
@@ -127,7 +132,10 @@ Picker 通常作为用于辅助表单填写，可以搭配 Popup 实现效果。
       ]);
     
       const confirm = ( { selectedValue,selectedOptions })=>{
-        console.log(selectedOptions.map((val: any) => val.text).join(','))
+        Taro.showToast({
+          title:selectedOptions.map((val: any) => val.text).join(','),
+          icon:'none'
+        });
       }
 
       return {columns,selectedValue, confirm};
@@ -155,6 +163,7 @@ Picker 通常作为用于辅助表单填写，可以搭配 Popup 实现效果。
 </template>
 <script lang="ts">
   import { ref } from 'vue';
+  import Taro from '@tarojs/taro'
   export default {
     setup(props) {
       const selectedValue = ref(['ZheJiang']);
@@ -169,7 +178,10 @@ Picker 通常作为用于辅助表单填写，可以搭配 Popup 实现效果。
       ]);
     
       const confirm = ( { selectedValue,selectedOptions })=>{
-        console.log(selectedOptions.map((val: any) => val.text).join(','))
+        Taro.showToast({
+          title:selectedOptions.map((val: any) => val.text).join(','),
+          icon:'none'
+        });
       }
 
       return { columns,selectedValue, confirm};
@@ -197,6 +209,7 @@ Picker 通常作为用于辅助表单填写，可以搭配 Popup 实现效果。
 </template>
 <script lang="ts">
   import { ref } from 'vue';
+  import Taro from '@tarojs/taro'
   export default {
     setup(props) {
       const selectedTime = ref(['Wednesday','Afternoon']);
@@ -218,10 +231,14 @@ Picker 通常作为用于辅助表单填写，可以搭配 Popup 实现效果。
       ]);
     
       const confirm = ( { selectedValue,selectedOptions })=>{
-        console.log(selectedOptions.map((val: any) => val.text).join(','))
+        Taro.showToast({
+          title:selectedOptions.map((val: any) => val.text).join(','),
+          icon:'none'
+        });
       }
       const change = ({ selectedValue,selectedOptions }) => {
         console.log(selectedValue);
+
       };
 
       return {multipleColumns,change, confirm, selectedTime};
@@ -247,6 +264,7 @@ Picker 通常作为用于辅助表单填写，可以搭配 Popup 实现效果。
 </template>
 <script lang="ts">
   import { ref } from 'vue';
+  import Taro from '@tarojs/taro'
   export default {
     setup(props) {
       const selectedCascader = ref(['FuJian', 'FuZhou','TaiJiang']);
@@ -298,7 +316,10 @@ Picker 通常作为用于辅助表单填写，可以搭配 Popup 实现效果。
       ]);
     
       const confirm = ( { selectedValue,selectedOptions })=>{
-         console.log(selectedOptions.map((val: any) => val.text).join(','))
+         Taro.showToast({
+          title:selectedOptions.map((val: any) => val.text).join(','),
+          icon:'none'
+        });
       }
      
 
@@ -325,6 +346,7 @@ Picker 通常作为用于辅助表单填写，可以搭配 Popup 实现效果。
 </template>
 <script lang="ts">
   import { ref, onMounted } from 'vue';
+  import Taro from '@tarojs/taro'
   export default {
     setup(props) {
       const asyncColumns = ref([]);
@@ -347,7 +369,10 @@ Picker 通常作为用于辅助表单填写，可以搭配 Popup 实现效果。
       });
       
       const confirm = ( { selectedValue,selectedOptions })=>{
-         console.log(selectedOptions.map((val: any) => val.text).join(','))
+         Taro.showToast({
+          title:selectedOptions.map((val: any) => val.text).join(','),
+          icon:'none'
+        });
       }
 
       return {asyncColumns,asyncValue, confirm};
@@ -365,7 +390,7 @@ Picker 通常作为用于辅助表单填写，可以搭配 Popup 实现效果。
 | 参数         | 说明                             | 类型   | 默认值           |
 |--------------|----------------------------------|--------|------------------|
 | v-model:value         | 默认选中项               | Array | `[]`              |
-| columns         | 对象数组，配置每一列显示的数据               | Array | -                |
+| columns         | 对象数组，配置每一列显示的数据               | PickerOption[] \| PickerOption[][] | -                |
 | title                  | 设置标题                   | string  | -      |
 | cancel-text            | 取消按钮文案               | string  | `取消`  |
 | ok-text                | 确定按钮文案               | string  | `确定`   |
@@ -375,14 +400,7 @@ Picker 通常作为用于辅助表单填写，可以搭配 Popup 实现效果。
 | option-height         | 选项高度             | number \| string | `36`     |
 | show-toolbar         | 是否显示顶部导航             | boolean | `true`   |
 
-### Columns 数据结构
 
-| 键名         | 说明                             | 类型   | 默认值           |
-|--------------|----------------------------------|--------|------------------|
-| text        | 选项的文字内容               | string \| number |    -           |
-| value          | 选项对应的值，且唯一               | string \| number |     -       |
-| children         | 用于级联选项               | Array | -                |
-| className                  | 添加额外的类名                   | string  |  -    |
 
 ### Events
 
@@ -399,6 +417,15 @@ Picker 通常作为用于辅助表单填写，可以搭配 Popup 实现效果。
 | default  | 自定义滑动数据底部区域 |
 | top  | 自定义滑动数据顶部区域 |
 
+### PickerOption 数据结构
+
+| 键名         | 说明                             | 类型   | 默认值           |
+|--------------|----------------------------------|--------|------------------|
+| text        | 选项的文字内容               | string \| number |    -           |
+| value          | 选项对应的值，且唯一               | string \| number |     -       |
+| children         | 用于级联选项               | Array | -                |
+| className                  | 添加额外的类名                   | string  |  -    |
+
 ## 主题定制
 
 ### 样式变量

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

@@ -12,7 +12,6 @@ import { Price } from '@nutui/nutui';
 
 const app = createApp();
 app.use(Price);
-
 ```
 
 

src/packages/__VUE/price/doc.md

@@ -12,7 +12,6 @@ import { Price } from '@nutui/nutui';
 
 const app = createApp();
 app.use(Price);
-
 ```
 
 

src/packages/__VUE/price/doc.taro.md

@@ -12,7 +12,6 @@ import { Price } from '@nutui/nutui-taro';
 
 const app = createApp();
 app.use(Price);
-
 ```
 
 ### 价格大小

src/packages/__VUE/progress/doc.md

@@ -12,7 +12,6 @@ import { Progress } from '@nutui/nutui';
 
 const app = createApp();
 app.use(Progress);
-
 ```
 
 

src/packages/__VUE/progress/doc.taro.md

@@ -12,7 +12,6 @@ import { Progress } from '@nutui/nutui-taro';
 
 const app = createApp();
 app.use(Progress);
-
 ```
 
 

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

@@ -12,7 +12,6 @@ import { PullRefresh } from '@nutui/nutui';
 
 const app = createApp();
 app.use(PullRefresh);
-
 ```
 
 ### Basic Usage

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

@@ -8,12 +8,11 @@ Used to make a single selection in a set of alternatives
 
 ``` ts
 import { createApp } from 'vue';
-import { Radio,RadioGroup,Icon } from '@nutui/nutui';
-import { Checklist } from '@nutui/icons-vue'
+import { Radio, RadioGroup } from '@nutui/nutui';
+
 const app = createApp();
 app.use(Radio);
 app.use(RadioGroup);
-app.use(Checklist);
 ```
 ### Basic Usage
 
@@ -162,7 +161,6 @@ Customize the icon through the slot, it is recommended to set the `icon` and `ch
   import { ref } from 'vue';
   import { Checklist } from '@nutui/icons-vue';
   export default {
-    props: {},
     components: {
       Checklist
     },

src/packages/__VUE/radio/doc.md

@@ -8,12 +8,11 @@
 
 ``` ts
 import { createApp } from 'vue';
-import { Radio,RadioGroup } from '@nutui/nutui';
-import { Checklist } from '@nutui/icons-vue';
+import { Radio, RadioGroup } from '@nutui/nutui';
+
 const app = createApp();
 app.use(Radio);
 app.use(RadioGroup);
-app.use(Checklist);
 ```
 ### 基础用法
 
@@ -162,7 +161,6 @@ app.use(Checklist);
   import { ref } from 'vue';
   import { Checklist } from '@nutui/icons-vue';
   export default {
-    props: {},
     components: {
       Checklist
     },

src/packages/__VUE/radio/doc.taro.md

@@ -8,12 +8,11 @@
 
 ``` ts
 import { createApp } from 'vue';
-import { Radio,RadioGroup } from '@nutui/nutui-taro';
-import { Checklist } from '@nutui/icons-vue-taro';
+import { Radio, RadioGroup } from '@nutui/nutui-taro';
+
 const app = createApp();
 app.use(Radio);
 app.use(RadioGroup);
-app.use(Checklist);
 ```
 ### 基础用法
 
@@ -162,7 +161,6 @@ app.use(Checklist);
   import { ref } from 'vue';
   import { Checklist } from '@nutui/icons-vue-taro';
   export default {
-    props: {},
     components: {
       Checklist
     },

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

@@ -9,6 +9,7 @@ Use for quick rating actions, or to showcase reviews.
 ``` javascript
 import { createApp } from 'vue';
 import { Rate } from '@nutui/nutui';
+
 const app = createApp();
 app.use(Rate);
 ```

src/packages/__VUE/rate/doc.md

@@ -9,6 +9,7 @@
 ``` javascript
 import { createApp } from 'vue';
 import { Rate } from '@nutui/nutui';
+
 const app = createApp();
 app.use(Rate);
 ```

src/packages/__VUE/searchbar/demo.vue

@@ -30,7 +30,7 @@
     <h2>{{ translate('basic7') }}</h2>
     <nut-searchbar v-model="searchValue6">
       <template v-slot:clearIcon>
-        <img :src="icon" style="width: 10px; height: 10px" />
+        <img :src="icon" style="width: 20px; height: 20px" />
       </template>
     </nut-searchbar>
 

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

@@ -9,6 +9,7 @@ Search bar
 ```javascript
 import { createApp } from 'vue';
 import { Searchbar } from '@nutui/nutui';
+
 const app = createApp();
 app.use(Searchbar);
 ```    

src/packages/__VUE/searchbar/doc.md

@@ -9,9 +9,9 @@
 ```javascript
 import { createApp } from 'vue';
 import { Searchbar } from '@nutui/nutui';
+
 const app = createApp();
 app.use(Searchbar);
-
 ```    
     
 ### 基础用法
@@ -219,7 +219,7 @@ export default {
     
 | 参数         | 说明                             | 类型   | 默认值           |
 |--------------|----------------------------------|--------|------------------|
-| v-model	         | 当前输入的值   | number /| string | `''`     |
+| v-model	         | 当前输入的值   | number \| string | `''`     |
 | label| 搜索框左侧文本 | string | `''` |
 | shape | 搜索框形状，可选值为 `square` `round` | string | `square` |
 | max-length         | 最大输入长度   | number \| string | `9999`      |

src/packages/__VUE/searchbar/doc.taro.md

@@ -148,7 +148,11 @@ app.use(Searchbar);
 :::demo
 ```html
 <template>
-  <nut-searchbar v-model="searchValue" :clear-icon="icon"> </nut-searchbar>
+  <nut-searchbar v-model="searchValue">
+    <template v-slot:clearIcon>
+      <img :src="icon" style="width: 10px; height: 10px" />
+    </template>
+  </nut-searchbar>
 </template>
 <script lang="ts">
   import { toRefs, reactive } from 'vue';
@@ -159,7 +163,6 @@ app.use(Searchbar);
       const state = reactive({
         searchValue: ""
       });
-
       return {
         ...toRefs(state),
         icon

src/packages/__VUE/searchbar/index.scss

@@ -70,14 +70,7 @@
         display: flex;
         justify-content: center;
         align-items: center;
-        position: absolute;
-        z-index: 2;
-        top: 50%;
-        right: 0;
-        width: 16px;
-        height: 16px;
-        margin-top: -8px;
-        margin-right: 10px;
+        margin-right: 13px;
         & .nut-searchbar__nut-icon-mask-close {
           color: rgb(204, 204, 204);
           &:hover {
@@ -86,6 +79,9 @@
           }
         }
       }
+      .nut-searchbar__input-bar_clear {
+        padding-right: 10px;
+      }
     }
 
     .nut-searchbar__iptleft-search-icon {

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

@@ -11,7 +11,7 @@
         <form action="#" onsubmit="return false" @submit.prevent="handleSubmit">
           <input
             ref="inputsearch"
-            class="nut-searchbar__input-bar"
+            :class="['nut-searchbar__input-bar', clearable && 'nut-searchbar__input-bar_clear']"
             :type="inputType"
             :maxlength="maxLength"
             :placeholder="placeholder || translate('placeholder')"

src/packages/__VUE/searchbar/index.vue

@@ -16,7 +16,7 @@
         <form action="#" @submit.prevent="handleSubmit">
           <input
             ref="inputsearch"
-            class="nut-searchbar__input-bar"
+            :class="['nut-searchbar__input-bar', clearable && 'nut-searchbar__input-bar_clear']"
             :type="inputType"
             :maxlength="maxLength"
             :placeholder="placeholder || translate('placeholder')"

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

@@ -12,7 +12,6 @@ import { Signature } from '@nutui/nutui';
 
 const app = createApp();
 app.use(Signature);
-
 ```
     
 

src/packages/__VUE/signature/doc.md

@@ -12,7 +12,6 @@ import { Signature } from '@nutui/nutui';
 
 const app = createApp();
 app.use(Signature);
-
 ```
     
 ### 基础用法

src/packages/__VUE/signature/doc.taro.md

@@ -12,7 +12,6 @@ import { Signature} from '@nutui/nutui-taro';
 
 const app = createApp();
 app.use(Signature);
-
 ```
 
 ### 基础用法

src/packages/__VUE/skeleton/common.ts

@@ -13,7 +13,7 @@ export const component = (components: any) => {
       //每行高度
       height: {
         type: String,
-        default: '100px'
+        default: '15px'
       },
       //是否显示动画
       animated: {

src/packages/__VUE/skeleton/demo.vue

@@ -9,7 +9,7 @@
     <nut-skeleton width="250px" height="15px" title animated row="3"> </nut-skeleton>
 
     <h2>{{ translate('title1') }}</h2>
-    <nut-skeleton width="250px" height="15px" title animated avatar avatarSize="100px" row="3"> </nut-skeleton>
+    <nut-skeleton width="250px" height="15px" title animated avatar avatarSize="60px" row="3"> </nut-skeleton>
 
     <h2>{{ translate('title2') }}</h2>
     <nut-skeleton width="250px" height="15px" animated round></nut-skeleton>

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

@@ -13,7 +13,6 @@ import { Skeleton } from '@nutui/nutui';
 
 const app = createApp();
 app.use(Skeleton);
-
 ```
 
 
@@ -45,7 +44,7 @@ app.use(Skeleton);
 :::demo
 ```html
 <template>
-  <nut-skeleton width="250px" height="15px" title animated avatar avatarSize="100px" row="3"> </nut-skeleton>
+  <nut-skeleton width="250px" height="15px" title animated avatar avatarSize="60px" row="3"> </nut-skeleton>
 </template>
 ```
 :::

src/packages/__VUE/skeleton/doc.md

@@ -13,7 +13,6 @@ import { Skeleton } from '@nutui/nutui';
 
 const app = createApp();
 app.use(Skeleton);
-
 ```
 
 
@@ -45,7 +44,7 @@ app.use(Skeleton);
 :::demo
 ```html
 <template>
-  <nut-skeleton width="250px" height="15px" title animated avatar avatarSize="100px" row="3"> </nut-skeleton>
+  <nut-skeleton width="250px" height="15px" title animated avatar avatarSize="60px" row="3"> </nut-skeleton>
 </template>
 ```
 :::

src/packages/__VUE/skeleton/doc.taro.md

@@ -13,7 +13,6 @@ import { Skeleton } from '@nutui/nutui-taro';
 
 const app = createApp();
 app.use(Skeleton);
-
 ```
 
 
@@ -45,7 +44,7 @@ app.use(Skeleton);
 :::demo
 ```html
 <template>
-  <nut-skeleton width="250px" height="15px" title animated avatar avatarSize="100px" row="3"> </nut-skeleton>
+  <nut-skeleton width="250px" height="15px" title animated avatar avatarSize="60px" row="3"> </nut-skeleton>
 </template>
 ```
 :::

src/packages/__VUE/steps/doc.taro.md

@@ -8,7 +8,7 @@
 
 ```javascript
 import { createApp } from 'vue';
-import { Steps, Step  } from '@nutui/nutui-taro';
+import { Steps, Step } from '@nutui/nutui-taro';
 
 const app = createApp();
 app.use(Steps);

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

@@ -13,7 +13,6 @@ import { Sticky } from '@nutui/nutui';
 
 const app = createApp();
 app.use(Sticky);
-
 ```
 
 ### Basic Usage