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

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nutui/nutui",
-  "version": "4.0.0-beta.20",
+  "version": "4.0.0-beta.21",
   "description": "京东风格的轻量级移动端 Vue2、Vue3 组件库（支持小程序开发）",
   "main": "dist/nutui.umd.js",
   "module": "dist/nutui.es.js",

publish/nutui-taro/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nutui/nutui-taro",
-  "version": "4.0.0-beta.20",
+  "version": "4.0.0-beta.21",
   "description": "京东风格的轻量级移动端 Vue2、Vue3 组件库（支持小程序开发）",
   "main": "dist/nutui.umd.js",
   "module": "dist/nutui.es.js",

publish/nutui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nutui/nutui",
-  "version": "4.0.0-beta.20",
+  "version": "4.0.0-beta.21",
   "description": "京东风格的轻量级移动端 Vue2、Vue3 组件库（支持小程序开发）",
   "main": "dist/nutui.umd.js",
   "module": "dist/nutui.es.js",

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

@@ -172,6 +172,7 @@ app.use(Address);
       @change="onChange"
       @close="close"
       custom-address-title="请选择所在地区"
+      height="270px"
   ></nut-address>
 </template>
 <script>
@@ -443,7 +444,7 @@ app.use(Address);
       custom-and-exist-title="选择其他地址"
       @switch-module="switchModule"
       @close-mask="closeMask"
-       @change='onChange'
+      @change='onChange'
   ></nut-address>
 </template>
 <script>

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

@@ -242,6 +242,7 @@ The component provides the following CSS variables, which can be used to customi
 | --nut-badge-color| _#fff_ |
 | --nut-badge-font-size| _var(--nut-font-size-1)_ |
 | --nut-badge-border-radius| _14px_ |
+| --nut-badge-icon-padding| _4px_ |
 | --nut-badge-padding| _0 5px_ |
 | --nut-badge-content-transform| _translate(50%, -50%)_ |
 | --nut-badge-z-index| _1_ |

src/packages/__VUE/badge/doc.md

@@ -243,6 +243,7 @@ import { Check, Link, Download } from '@nutui/icons-vue';
 | --nut-badge-color| _#fff_ |
 | --nut-badge-font-size| _var(--nut-font-size-1)_ |
 | --nut-badge-border-radius| _14px_ |
+| --nut-badge-icon-padding| _4px_ |
 | --nut-badge-padding| _0 5px_ |
 | --nut-badge-content-transform| _translate(50%, -50%)_ |
 | --nut-badge-z-index| _1_ |

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

@@ -120,19 +120,19 @@ app.use(Badge);
   <div class="demo">
     <nut-badge>
       <template #icons>
-        <Check color="#ffffff" width="12px" height="12px"></Check>
+        <Check color="#ffffff" size="12px"></Check>
       </template>
       <nut-avatar shape="square"></nut-avatar>
     </nut-badge>
     <nut-badge>
       <template #icons>
-        <Link color="#ffffff" width="12px" height="12px"></Link>
+        <Link color="#ffffff" size="12px"></Link>
       </template>
       <nut-avatar shape="square"></nut-avatar>
     </nut-badge>
     <nut-badge>
       <template #icons>
-       <Download color="#ffffff" width="12px" height="12px"></Download>
+       <Download color="#ffffff" size="12px"></Download>
       </template>
       <nut-avatar shape="square"></nut-avatar>
     </nut-badge>
@@ -242,6 +242,7 @@ import { Check, Link, Download } from '@nutui/icons-vue-taro';
 | --nut-badge-color| _#fff_ |
 | --nut-badge-font-size| _var(--nut-font-size-1)_ |
 | --nut-badge-border-radius| _14px_ |
+| --nut-badge-icon-padding| _4px_ |
 | --nut-badge-padding| _0 5px_ |
 | --nut-badge-content-transform| _translate(50%, -50%)_ |
 | --nut-badge-z-index| _1_ |

src/packages/__VUE/badge/index.scss

@@ -10,16 +10,20 @@
   position: relative;
   display: inline-block;
   .nut-badge__icon {
+    display: flex;
+    align-items: center;
     line-height: normal;
     transform: $badge-content-transform;
     position: absolute;
     background: $badge-background-color;
-    padding: $badge-padding;
+    padding: $badge-icon-padding;
     text-align: center;
     border-radius: $badge-border-radius;
     z-index: $badge-z-index;
   }
   .nut-badge__content {
+    display: flex;
+    align-items: center;
     transform: $badge-content-transform;
     &--sup {
       position: absolute;

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

@@ -33,7 +33,7 @@ export default {
   props: {},
   setup() {
     const inputVal = ref('');
-    const danmu = ref(null);
+    const danmu = ref();
     let list = ref(['aaaa', 'bbbb', 'cccc', 'dddd', 'eeee', 'ffff']);
     function addDanmu() {
       let n = Math.random();

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

@@ -32,7 +32,7 @@ export default {
   props: {},
   setup() {
     const inputVal = ref('');
-    const danmu = ref(null);
+    const danmu = ref();
     let list = ref(['画美不看', '不明觉厉', '喜大普奔', '男默女泪', '累觉不爱', '爷青结-']);
     function addDanmu() {
       let n = Math.random();
@@ -61,8 +61,8 @@ export default {
 |--------------|----------------------------------|--------|------------------|
 | danmu         | 弹幕列表数据               | Array | `[]`              |
 | frequency        | 可视区域内每个弹幕出现的时间间隔                         | number | `500`               |
-| speeds         | 每个弹幕的滚动时间 | number |  `2000`               |
-| rows  | 弹幕行数，分几行展示     | number | `1` |
+| speeds         | 每个弹幕的滚动时间 | number |  `5000`               |
+| rows  | 弹幕行数，分几行展示     | number | `3` |
 | top  | 弹幕垂直距离    | number | `10` |
 | loop  | 是否循环播放     | boolean | `true` |
 

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

@@ -450,7 +450,7 @@ When the value changes, the `change` event will be triggered
 
 | methodName | Description | Arguments 
 |----- | ----- | ----- 
-| toggleAll | Select all / cancel | `f`,`true`,to select all，`false`,cancel the selection
+| toggleAll | Select all / cancel | `true`,to select all，`false`,cancel the selection
 | toggleReverse | Reverse selection | -
 
 ## Theming

src/packages/__VUE/checkbox/doc.md

@@ -455,7 +455,7 @@ app.use(CheckboxGroup);
 
 | 方法名 | 说明 | 参数 
 |----- | ----- | ----- 
-| toggleAll | 全选/取消 | `f`,传 `true`,表示全选，传 `false`,表示取消全选
+| toggleAll | 全选/取消 | 传 `true`,表示全选，传 `false`,表示取消全选
 | toggleReverse | 反选 | -
 
 ## 主题定制

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

@@ -415,7 +415,7 @@ app.use(CheckboxGroup);
 
 | 方法名 | 说明 | 参数 
 |----- | ----- | ----- 
-| toggleAll | 全选/取消 | `f`,传 `true`,表示全选，传 `false`,表示取消全选
+| toggleAll | 全选/取消 | 传 `true`,表示全选，传 `false`,表示取消全选
 | toggleReverse | 反选 | -
 
 ## 主题定制

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

@@ -165,7 +165,7 @@ export default {
 | num-width | Number width, often used to customize seamless scrolling | number | `20`
 | num-height | Number height, often used to customize seamless scrolling (required for lottery function) | number | `20`
 | custom-change-num | The number to change (for custom pictures, initNum and endNum are invalid here) | number | `1`
-| custom-bg-img | Custom image (it is recommended to use Sprite image, and Sprite image must be used to use the lottery function) | string | `-`
+| custom-bg-img | Custom image (it is recommended to use Sprite image, and Sprite image must be used to use the lottery function) | string | -
 | custom-spac-num | There may be space between numbers in the image | number | `0`
 | type | lottery function pass machine, the optional value is `machine` `' '` | string | `''`
 | machine-prize-num | Number of prizes, how many prizes in total, must be passed | number | `0`
@@ -180,5 +180,5 @@ export default {
 
 | Event | description | callback parameter
 |----- | ----- | -----
-| scroll-end | callback function after scrolling ends | `-`
+| scroll-end | callback function after scrolling ends | -
     

src/packages/__VUE/countup/doc.md

@@ -167,7 +167,7 @@ export default {
 | num-height | 数字高度，常用于自定义无缝滚动（抽奖功能必传） | number | `20`
 | scrolling | 数字滚动模式（仅支持 H5） | boolean | `false`
 | custom-change-num | 要变化的数字（用于自定义图片，`initNum`、`endNum` 在此无效） | number | `1`
-| custom-bg-img | 自定义图片（建议使用雪碧图实现，使用抽奖功能必须使用雪碧图） | string | `-`
+| custom-bg-img | 自定义图片（建议使用雪碧图实现，使用抽奖功能必须使用雪碧图） | string | -
 | custom-spac-num | 图片中数字之间可能会存在间距 | number | `0`
 | type | 抽奖功能传 machine，可选值为 `machine` `' '` | string | `''`
 | machine-prize-num | 奖品个数，一共多少个奖品，必传 | number | `0`
@@ -182,5 +182,5 @@ export default {
 
 | 事件名 | 说明 | 回调参数
 |----- | ----- | -----
-| scroll-end | 滚动结束后回调函数 | `-`
+| scroll-end | 滚动结束后回调函数 | -
     

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

@@ -168,7 +168,7 @@ export default {
 | num-width | 数字宽度，常用于自定义无缝滚动 | number | `20`
 | num-height | 数字高度，常用于自定义无缝滚动（抽奖功能必传） | number | `20`
 | custom-change-num | 要变化的数字（用于自定义图片，`initNum`、`endNum` 在此无效） | number | `1`
-| custom-bg-img | 自定义图片（建议使用雪碧图实现，使用抽奖功能必须使用雪碧图） | - | `-`
+| custom-bg-img | 自定义图片（建议使用雪碧图实现，使用抽奖功能必须使用雪碧图） | string | -
 | custom-spac-num | 图片中数字之间可能会存在间距 | number | `0`
 | type | 抽奖功能传 machine，可选值为 `machine` `' '` | string | `''`
 | machine-prize-num | 奖品个数，一共多少个奖品，必传 | number | `0`
@@ -183,5 +183,5 @@ export default {
 
 | 事件名 | 说明 | 回调参数
 |----- | ----- | -----
-| scroll-end | 滚动结束后回调函数 | `-`
+| scroll-end | 滚动结束后回调函数 | -
     

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

@@ -155,7 +155,7 @@ app.use(GridItem);
   <nut-grid :column-num="3">
     <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
     <nut-grid-item text="文字">
-      <Dongdong height="40px" width="40px" color="#478EF2" />
+      <Dongdong size="40px" color="#478EF2" />
     </nut-grid-item>
     <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
   </nut-grid>

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

@@ -6,7 +6,7 @@
       @click="reduce"
     >
       <slot name="leftIcon">
-        <Minus :width="pxCheck(buttonSize)" :height="pxCheck(buttonSize)" />
+        <Minus :size="pxCheck(buttonSize)" />
       </slot>
     </view>
     <view v-if="readonly" class="nut-input-number__text--readonly">
@@ -18,7 +18,7 @@
       type="number"
       :min="min"
       :max="max"
-      :style="{ width: pxCheck(inputWidth) }"
+      :style="{ width: pxCheck(inputWidth), height: pxCheck(buttonSize) }"
       :disabled="disabled"
       :readonly="readonly"
       :value="modelValue"
@@ -32,7 +32,7 @@
       @click="add"
     >
       <slot name="rightIcon">
-        <Plus :width="pxCheck(buttonSize)" :height="pxCheck(buttonSize)" />
+        <Plus :size="pxCheck(buttonSize)" />
       </slot>
     </view>
   </view>

src/packages/__VUE/inputnumber/index.vue

@@ -13,7 +13,7 @@
       type="number"
       :min="min"
       :max="max"
-      :style="{ width: pxCheck(inputWidth) }"
+      :style="{ width: pxCheck(inputWidth), height: pxCheck(buttonSize) }"
       :disabled="disabled"
       :readonly="readonly"
       :value="modelValue"

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

@@ -233,6 +233,10 @@ import { reactive, ref } from 'vue';
 import { TriangleDown, Checked } from '@nutui/icons-vue';
 
 export default {
+  components: {
+    TriangleDown,
+    Checked
+  },
   setup() {
     const state = reactive({
       options1: [

src/packages/__VUE/menu/doc.md

@@ -234,6 +234,10 @@ import { reactive, ref } from 'vue';
 import { TriangleDown, Checked } from '@nutui/icons-vue';
 
 export default {
+  components: {
+    TriangleDown,
+    Checked
+  },
   setup() {
     const state = reactive({
       options1: [

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

@@ -234,6 +234,10 @@ import { reactive, ref } from 'vue';
 import { TriangleDown, Checked } from '@nutui/icons-vue-taro';
 
 export default {
+  components: {
+    TriangleDown,
+    Checked
+  },
   setup() {
     const state = reactive({
       options1: [

src/packages/__VUE/numberkeyboard/demo.vue

@@ -1,14 +1,9 @@
 <template>
   <div class="demo">
-    <nut-cell :isLink="true" @touchstart.stop="showKeyBoard(1)" :showIcon="true" :title="translate('basic')"></nut-cell>
+    <nut-cell :isLink="true" @touchstart.stop="showKeyBoard(1)" :title="translate('basic')"></nut-cell>
     <nut-number-keyboard v-model:visible="visible1" @blur="onBlur(1)" @input="input" @delete="onDelete">
     </nut-number-keyboard>
-    <nut-cell
-      :isLink="true"
-      @touchstart.stop="showKeyBoard(2)"
-      :showIcon="true"
-      :title="translate('sidebar')"
-    ></nut-cell>
+    <nut-cell :isLink="true" @touchstart.stop="showKeyBoard(2)" :title="translate('sidebar')"></nut-cell>
     <nut-number-keyboard
       type="rightColumn"
       v-model:visible="visible2"
@@ -19,12 +14,7 @@
       @blur="onBlur(2)"
     >
     </nut-number-keyboard>
-    <nut-cell
-      :isLink="true"
-      @touchstart.stop="showKeyBoard(3)"
-      :showIcon="true"
-      :title="translate('randomKeyOrder')"
-    ></nut-cell>
+    <nut-cell :isLink="true" @touchstart.stop="showKeyBoard(3)" :title="translate('randomKeyOrder')"></nut-cell>
     <nut-number-keyboard
       type="rightColumn"
       v-model:visible="visible3"
@@ -36,12 +26,7 @@
     >
     </nut-number-keyboard>
 
-    <nut-cell
-      :isLink="true"
-      @touchstart.stop="showKeyBoard(4)"
-      :showIcon="true"
-      :title="translate('withTitle')"
-    ></nut-cell>
+    <nut-cell :isLink="true" @touchstart.stop="showKeyBoard(4)" :title="translate('withTitle')"></nut-cell>
     <nut-number-keyboard
       :title="translate('title')"
       v-model:visible="visible4"
@@ -52,12 +37,7 @@
     >
     </nut-number-keyboard>
 
-    <nut-cell
-      :isLink="true"
-      @touchstart.stop="showKeyBoard(6)"
-      :showIcon="true"
-      :title="translate('idNumberKeyboard')"
-    ></nut-cell>
+    <nut-cell :isLink="true" @touchstart.stop="showKeyBoard(6)" :title="translate('idNumberKeyboard')"></nut-cell>
     <nut-number-keyboard
       v-model:visible="visible6"
       :custom-key="customKey3"
@@ -71,7 +51,6 @@
       desc-text-align="left"
       @touchstart.stop="showKeyBoard(5)"
       :desc="value"
-      :showIcon="true"
       :title="translate('bindValue')"
     ></nut-cell>
     <nut-number-keyboard v-model:visible="visible5" v-model="value" maxlength="6" @blur="onBlur(5)" @close="close(5)">

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

@@ -20,7 +20,7 @@ For online debugging, please change the browser to mobile mode
 :::demo
 ```html
 <template>
-    <nut-cell :isLink="true" @click="showKeyBoard" :showIcon="true" title="Default Keyboard"></nut-cell>
+    <nut-cell :isLink="true" @click="showKeyBoard"  title="Default Keyboard"></nut-cell>
     <nut-number-keyboard v-model:visible="visible" @input="input" @delete="onDelete" @close="close"> </nut-number-keyboard>
 </template>
 <script>
@@ -60,7 +60,7 @@ export default{
 :::demo
 ```html
 <template>
-    <nut-cell :isLink="true" @click="showKeyBoard" :showIcon="true" title="Keyboard With Sidebar"></nut-cell>
+    <nut-cell :isLink="true" @click="showKeyBoard"  title="Keyboard With Sidebar"></nut-cell>
      <nut-number-keyboard
       type="rightColumn"
       v-model:visible="visible"
@@ -107,7 +107,7 @@ export default{
 :::demo
 ```html
 <template>
-    <nut-cell :isLink="true" @click="showKeyBoard" :showIcon="true" title="Random Key Order"></nut-cell>
+    <nut-cell :isLink="true" @click="showKeyBoard"  title="Random Key Order"></nut-cell>
     <nut-number-keyboard
       type="rightColumn"
       v-model:visible="visible"
@@ -152,7 +152,7 @@ export default{
 :::demo
 ```html
 <template>
-     <nut-cell :isLink="true" @click="showKeyBoard(4)" :showIcon="true" title="Show Keyboard With Title"></nut-cell>
+     <nut-cell :isLink="true" @click="showKeyBoard(4)"  title="Show Keyboard With Title"></nut-cell>
     <nut-number-keyboard
       title="title"
       v-model:visible="visible"
@@ -196,7 +196,7 @@ export default{
 :::demo
 ```html
 <template>
-     <nut-cell :isLink="true" @click="showKeyBoard(4)" :showIcon="true" title="IdNumber Keyboard"></nut-cell>
+     <nut-cell :isLink="true" @click="showKeyBoard(4)"  title="IdNumber Keyboard"></nut-cell>
     <nut-number-keyboard
       v-model:visible="visible"
       :custom-key="customKey"
@@ -245,7 +245,6 @@ export default{
       desc-text-align="left"
       @click="showKeyBoard"
       :desc="value"
-      :showIcon="true"
       title="Bind Value"
     ></nut-cell>
      <nut-number-keyboard 

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

@@ -116,10 +116,10 @@ export default {
 <template>
   <nut-pagination v-model="currentPage3" :total-items="500"  @change="pageChange"  :show-page-size="5">
       <template #prev-text>
-        <Left width="10px" height="10px" />
+        <Left size="10px" />
       </template>
       <template #next-text>
-        <Right width="10px" height="10px" />
+        <Right size="10px" />
       </template>
       <template #page="{ item }">
           {{ item.number == 3 ? 'hot' : item.text }}

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

@@ -59,6 +59,7 @@ The Picker is usually filled in as an auxiliary form, which can be paired with a
   <nut-cell title="Choose city" :desc="popupDesc" @click="show = true"></nut-cell>
     <nut-popup position="bottom"  v-model:visible="show">
       <nut-picker
+        v-model="popupValue"
         :columns="columns"
         title="Choose city"
         @confirm="popupConfirm"
@@ -76,6 +77,7 @@ The Picker is usually filled in as an auxiliary form, which can be paired with a
     setup(props) {
       const show = ref(false)
       const popupDesc = ref()
+      const popupValue = ref();
       const columns = ref([
         { text: 'NanJing', value: 'NanJing' },
         { text: 'WuXi', value: 'WuXi' },
@@ -91,7 +93,7 @@ The Picker is usually filled in as an auxiliary form, which can be paired with a
         show.value = false
       }
 
-      return {show,popupDesc,columns, confirm,popupConfirm};
+      return {popupValue,show,popupDesc,columns, confirm,popupConfirm};
     }
   };
 </script>

src/packages/__VUE/picker/doc.md

@@ -58,6 +58,7 @@ Picker 通常作为用于辅助表单填写，可以搭配 Popup 实现效果。
   <nut-cell title="请选择城市" :desc="popupDesc" @click="show = true"></nut-cell>
   <nut-popup position="bottom"  v-model:visible="show">
     <nut-picker
+      v-model="popupValue"
       :columns="columns"
       title="请选择城市"
       @confirm="popupConfirm"
@@ -75,6 +76,7 @@ Picker 通常作为用于辅助表单填写，可以搭配 Popup 实现效果。
     setup(props) {
       const show = ref(false)
       const popupDesc = ref()
+      const popupValue = ref();
       const columns = ref([
         { text: '南京市', value: 'NanJing' },
         { text: '无锡市', value: 'WuXi' },
@@ -90,7 +92,7 @@ Picker 通常作为用于辅助表单填写，可以搭配 Popup 实现效果。
         show.value = false
       }
 
-      return {show,popupDesc,columns, confirm,popupConfirm};
+      return {popupValue,show,popupDesc,columns, confirm,popupConfirm};
     }
   };
 </script>

src/packages/__VUE/popover/demo.vue

@@ -123,7 +123,7 @@ const initTranslate = () =>
       disableAction: '禁用选项',
       content: '自定义内容',
       contentColor: '自定义颜色',
-      contentTarget: '自定义对象'
+      contentTarget: '自定义目标元素'
     },
     'en-US': {
       title: 'Basic Usage',

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

@@ -166,7 +166,7 @@ Customize the content in the slot named content.
 <template>
   <nut-popover v-model:visible="visible.customized" location="top-start" custom-class="customClass">
      <template #reference>
-       <nut-button type="primary" shape="square">custom content</nut-button>
+       <nut-button type="primary" shape="square">自定义内容</nut-button>
      </template>
 
      <template #content>
@@ -191,27 +191,21 @@ export default {
    });
    const selfContent = reactive([
      {
-       name: Service,
        desc: 'option1'
      },
      {
-       name: Notice,
        desc: 'option2'
      },
      {
-       name: Location,
        desc: 'option3'
      },
      {
-       name: Category,
        desc: 'option4'
      },
      {
-       name: Scan2,
        desc: 'option5'
      },
      {
-       name: Message,
        desc: 'option6'
      }
    ]);
@@ -274,34 +268,113 @@ bottom-end    # Bottom right
 :::demo
 ```html
 <template>
-  <nut-popover v-model:visible="visible" location="top" theme="dark" :list="iconItemList">
-    <template #reference>
-      <div class="brick"></div>
-    </template>
-  </nut-popover>
+  <nut-cell title="点击查看更多方向" @click="handlePicker"></nut-cell>
+  <nut-popup position="bottom" v-model:visible="showPicker">
+      <nut-picker
+        :columns="columns"
+        title=""
+        @change="change"
+        :swipe-duration="500"
+        @confirm="closePicker"
+        @close="closePicker"
+      >
+        <template #top>
+          <div class="brickBox">
+            <div class="brick" id="pickerTarget"></div>
+          </div>
+        </template>
+      </nut-picker>
+    </nut-popup>
+
+    <nut-popover
+      v-model:visible="customPositon"
+      targetId="pickerTarget"
+      :location="curPostion"
+      theme="dark"
+      :list="positionList"
+    >
+    </nut-popover>
 </template>
 
 <script lang="ts">
 import { reactive, ref } from 'vue';
 export default {
   setup() {
-    const visible = ref(false);
+    const showPicker = ref(false);
+    const customPositon = ref(false);
+    const curPostion = ref('top');
+    const positionList = reactive([
+      {
+        name: 'option1'
+      },
+      {
+        name: 'option2'
+      }
+    ]);
+    const closePicker = () => {
+      customPositon.value = false;
+      showPicker.value = false;
+    };
 
-    const iconItemList = reactive([
-        {
-          name: 'option1'
-        },
-        {
-          name: 'option2'
-        }]);
+    const change = ({ selectedValue }) => {
+      curPostion.value = selectedValue[0];
+      if (showPicker.value) customPositon.value = true;
+    };
+
+    const handlePicker = () => {
+      showPicker.value= true;
+      setTimeout(() => {
+        customPositon.value = true;
+      }, 0);
+    };
+
+     const columns = ref([
+      { text: 'top', value: 'top' },
+      { text: 'top-start', value: 'top-start' },
+      { text: 'top-end', value: 'top-end' },
+      { text: 'right', value: 'right' },
+      { text: 'right-start', value: 'right-start' },
+      { text: 'right-end', value: 'right-end' },
+      { text: 'bottom', value: 'bottom' },
+      { text: 'bottom-start', value: 'bottom-start' },
+      { text: 'bottom-end', value: 'bottom-end' },
+      { text: 'left', value: 'left' },
+      { text: 'left-start', value: 'left-start' },
+      { text: 'left-end', value: 'left-end' }
+    ]);
 
       return {
-        iconItemList,
-        visible,
+        positionList,
+        showPicker,
+        customPositon,
+        curPostion,
+        closePicker,
+        change,
+        handlePicker,
+        columns
       };
     }
 };
 </script>
+
+<style lang="scss">
+
+.nut-popover-content {
+    width: 120px;
+}
+
+.brickBox {
+  margin: 80px 0;
+  display: flex;
+  justify-content: center;
+  .brick {
+    width: 60px;
+    height: 60px;
+    background: linear-gradient(135deg, #fa2c19 0%, #fa6419 100%);
+    border-radius: 10px;
+  }
+}
+</style>
 ```
 :::
 
@@ -408,10 +481,10 @@ export default {
 | visible      | whether to show                 | boolean  | `false`     |
 | theme          | Theme style, can be set to `dark` `light`          | string   | `light`   |
 | location       | pop-up location  | string   | `bottom`  |
-| offset        | the offset of the occurrence position  | [number, number]   | `[0, 12]`  |
+| offset        | the offset of the occurrence position  | number \| string   | `[0, 12]`  |
 | show-arrow        | whether to show small arrows  | boolean  | `true`  |
 | custom-class        | custom class   | string  | `''`  |
-| duration        | Transition duration，Unit second  |  [number, string]  | `0.3`  |
+| duration        | Transition duration，Unit second  |  number \| string  | `0.3`  |
 | overlay        | Whether to show overlay  | boolean  | `false`  |
 | overlay-class        | Custom overlay class | string  | `''`  |
 | overlay-style        | Custom overlay style  | string  | `''`  |
@@ -429,7 +502,7 @@ The List property is an array of objects, each object in the array is configured
 | Key            | Description                 | Type      | Default  |
 |----------------|----------------------|----------|--------|
 | name           | option text               | string   | `-`      |
-| icon           | @nutui/icons-vue name      | string   | `-`      |
+| icon           | @nutui/icons-vue name      | VNode   | `-`      |
 | disabled       | whether to disable          | boolean  | `false`  | 
 | className       | Add extra class names for corresponding options          | string \| Array \| object  | `-`  | 
 

src/packages/__VUE/popover/doc.md

@@ -191,27 +191,21 @@ export default {
    });
    const selfContent = reactive([
      {
-       name: Service,
        desc: 'option1'
      },
      {
-       name: Notice,
        desc: 'option2'
      },
      {
-       name: Location,
        desc: 'option3'
      },
      {
-       name: Category,
        desc: 'option4'
      },
      {
-       name: Scan2,
        desc: 'option5'
      },
      {
-       name: Message,
        desc: 'option6'
      }
    ]);
@@ -273,34 +267,113 @@ bottom-end    # 底部右侧位置
 :::demo
 ```html
 <template>
-  <nut-popover v-model:visible="visible" location="top" theme="dark" :list="iconItemList">
-    <template #reference>
-      <div class="brick"></div>
-    </template>
-  </nut-popover>
+  <nut-cell title="点击查看更多方向" @click="handlePicker"></nut-cell>
+  <nut-popup position="bottom" v-model:visible="showPicker">
+      <nut-picker
+        :columns="columns"
+        title=""
+        @change="change"
+        :swipe-duration="500"
+        @confirm="closePicker"
+        @close="closePicker"
+      >
+        <template #top>
+          <div class="brickBox">
+            <div class="brick" id="pickerTarget"></div>
+          </div>
+        </template>
+      </nut-picker>
+    </nut-popup>
+
+    <nut-popover
+      v-model:visible="customPositon"
+      targetId="pickerTarget"
+      :location="curPostion"
+      theme="dark"
+      :list="positionList"
+    >
+    </nut-popover>
 </template>
 
 <script lang="ts">
 import { reactive, ref } from 'vue';
 export default {
   setup() {
-    const visible = ref(false);
+    const showPicker = ref(false);
+    const customPositon = ref(false);
+    const curPostion = ref('top');
+    const positionList = reactive([
+      {
+        name: 'option1'
+      },
+      {
+        name: 'option2'
+      }
+    ]);
+    const closePicker = () => {
+      customPositon.value = false;
+      showPicker.value = false;
+    };
 
-    const iconItemList = reactive([
-        {
-          name: '选项一'
-        },
-        {
-          name: '选项二'
-        }]);
+    const change = ({ selectedValue }) => {
+      curPostion.value = selectedValue[0];
+      if (showPicker.value) customPositon.value = true;
+    };
+
+    const handlePicker = () => {
+      showPicker.value= true;
+      setTimeout(() => {
+        customPositon.value = true;
+      }, 0);
+    };
+
+     const columns = ref([
+      { text: 'top', value: 'top' },
+      { text: 'top-start', value: 'top-start' },
+      { text: 'top-end', value: 'top-end' },
+      { text: 'right', value: 'right' },
+      { text: 'right-start', value: 'right-start' },
+      { text: 'right-end', value: 'right-end' },
+      { text: 'bottom', value: 'bottom' },
+      { text: 'bottom-start', value: 'bottom-start' },
+      { text: 'bottom-end', value: 'bottom-end' },
+      { text: 'left', value: 'left' },
+      { text: 'left-start', value: 'left-start' },
+      { text: 'left-end', value: 'left-end' }
+    ]);
 
       return {
-        iconItemList,
-        visible,
+        positionList,
+        showPicker,
+        customPositon,
+        curPostion,
+        closePicker,
+        change,
+        handlePicker,
+        columns
       };
     }
 };
 </script>
+
+<style lang="scss">
+
+.nut-popover-content {
+    width: 120px;
+}
+
+.brickBox {
+  margin: 80px 0;
+  display: flex;
+  justify-content: center;
+  .brick {
+    width: 60px;
+    height: 60px;
+    background: linear-gradient(135deg, #fa2c19 0%, #fa6419 100%);
+    border-radius: 10px;
+  }
+}
+</style>
 ```
 :::
 
@@ -408,10 +481,10 @@ export default {
 | visible      | 是否展示气泡弹出层                 | boolean  | `false`     |
 | theme          | 主题风格，可选值为 `dark`            | string   | `light`   |
 | location       | 弹出位置  | string   | `bottom`  |
-| offset        | 出现位置的偏移量  | [number, number]   | `[0, 12]`  |
+| offset        | 出现位置的偏移量  | number \| string   | `[0, 12]`  |
 | show-arrow        | 是否显示小箭头  | boolean  | `true`  |
 | custom-class        | 自定义 class 值  | string  | `''`  |
-| duration        | 动画时长，单位秒  |  [number, string]  | `0.3`  |
+| duration        | 动画时长，单位秒  |  number \| string  | `0.3`  |
 | overlay        | 是否显示遮罩层  | boolean  | `false`  |
 | overlay-class        | 自定义遮罩层类名 | string  | `''`  |
 | overlay-style        | 自定义遮罩层样式  | string  | `''`  |

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

@@ -95,7 +95,7 @@ export default {
 </template>
 
 <script>
-import { reactive, ref,h, h } from 'vue';
+import { reactive, ref,h } from 'vue';
 import { Location,Cart2, My2 } from '@nutui/icons-vue-taro';
 export default {
   setup() {
@@ -191,27 +191,21 @@ export default {
    });
    const selfContent = reactive([
      {
-       name: Service,
        desc: 'option1'
      },
      {
-       name: Notice,
        desc: 'option2'
      },
      {
-       name: Location,
        desc: 'option3'
      },
      {
-       name: Category,
        desc: 'option4'
      },
      {
-       name: Scan2,
        desc: 'option5'
      },
      {
-       name: Message,
        desc: 'option6'
      }
    ]);
@@ -225,7 +219,7 @@ export default {
 </script>
 
 <style lang="scss">
-#app{
+page{
   padding-top: 200px;
 }
 .self-content {
@@ -273,34 +267,113 @@ bottom-end    # 底部右侧位置
 :::demo
 ```html
 <template>
-  <nut-popover v-model:visible="visible" location="top" theme="dark" :list="iconItemList">
-    <template #reference>
-      <div class="brick"></div>
-    </template>
-  </nut-popover>
+  <nut-cell title="点击查看更多方向" @click="handlePicker"></nut-cell>
+  <nut-popup position="bottom" v-model:visible="showPicker">
+      <nut-picker
+        :columns="columns"
+        title=""
+        @change="change"
+        :swipe-duration="500"
+        @confirm="closePicker"
+        @close="closePicker"
+      >
+        <template #top>
+          <div class="brickBox">
+            <div class="brick" id="pickerTarget"></div>
+          </div>
+        </template>
+      </nut-picker>
+    </nut-popup>
+
+    <nut-popover
+      v-model:visible="customPositon"
+      targetId="pickerTarget"
+      :location="curPostion"
+      theme="dark"
+      :list="positionList"
+    >
+    </nut-popover>
 </template>
 
 <script lang="ts">
 import { reactive, ref } from 'vue';
 export default {
   setup() {
-    const visible = ref(false);
+    const showPicker = ref(false);
+    const customPositon = ref(false);
+    const curPostion = ref('top');
+    const positionList = reactive([
+      {
+        name: 'option1'
+      },
+      {
+        name: 'option2'
+      }
+    ]);
+    const closePicker = () => {
+      customPositon.value = false;
+      showPicker.value = false;
+    };
 
-    const iconItemList = reactive([
-        {
-          name: '选项一'
-        },
-        {
-          name: '选项二'
-        }]);
+    const change = ({ selectedValue }) => {
+      curPostion.value = selectedValue[0];
+      if (showPicker.value) customPositon.value = true;
+    };
+
+    const handlePicker = () => {
+      showPicker.value= true;
+      setTimeout(() => {
+        customPositon.value = true;
+      }, 1000);
+    };
+
+     const columns = ref([
+      { text: 'top', value: 'top' },
+      { text: 'top-start', value: 'top-start' },
+      { text: 'top-end', value: 'top-end' },
+      { text: 'right', value: 'right' },
+      { text: 'right-start', value: 'right-start' },
+      { text: 'right-end', value: 'right-end' },
+      { text: 'bottom', value: 'bottom' },
+      { text: 'bottom-start', value: 'bottom-start' },
+      { text: 'bottom-end', value: 'bottom-end' },
+      { text: 'left', value: 'left' },
+      { text: 'left-start', value: 'left-start' },
+      { text: 'left-end', value: 'left-end' }
+    ]);
 
       return {
-        iconItemList,
-        visible,
+        positionList,
+        showPicker,
+        customPositon,
+        curPostion,
+        closePicker,
+        change,
+        handlePicker,
+        columns
       };
     }
 };
 </script>
+
+<style lang="scss">
+
+.nut-popover-content {
+    width: 120px;
+}
+
+.brickBox {
+  margin: 80px 0;
+  display: flex;
+  justify-content: center;
+  .brick {
+    width: 60px;
+    height: 60px;
+    background: linear-gradient(135deg, #fa2c19 0%, #fa6419 100%);
+    border-radius: 10px;
+  }
+}
+</style>
 ```
 :::
 
@@ -342,7 +415,7 @@ export default {
 }
 </script>
 <style>
-#app{
+page{
   margin-top:300px
 }
 .nut-popover-content {
@@ -389,7 +462,7 @@ export default {
 
 </script>
 <style>
-#app{
+page{
   margin-top:300px
 }
 .nut-popover-content {
@@ -408,10 +481,10 @@ export default {
 | visible      | 是否展示气泡弹出层                 | boolean  | `false`     |
 | theme          | 主题风格，可选值为 dark            | string   | `light`   |
 | location       | 弹出位置  | string   | `bottom`  |
-| offset        | 出现位置的偏移量  | [number, number]   | `[0, 12]`  |
+| offset        | 出现位置的偏移量  | number \| string   | `[0, 12]`  |
 | show-arrow        | 是否显示小箭头  | boolean  | `true`  |
 | custom-class        | 自定义 class 值  | string  | `''`  |
-| duration        | 动画时长，单位秒  |  [number, string]  | `0.3`  |
+| duration        | 动画时长，单位秒  |  number \| string  | `0.3`  |
 | overlay        | 是否显示遮罩层  | boolean  | `false`  |
 | overlay-class        | 自定义遮罩层类名 | string  | `''`  |
 | overlay-style        | 自定义遮罩层样式  | string  | `''`  |
@@ -429,7 +502,7 @@ List 属性是一个由对象构成的数组，数组中的每个对象配置一
 | 键名            | 说明                 | 类型      | 默认值  |
 |----------------|----------------------|----------|--------|
 | name           | 选项文字               | string   | `-`      |
-| icon           | `@nutui/icons-vue-taro` 图标       | string   | `-`      |
+| icon           | `@nutui/icons-vue-taro` 图标       | VNode   | `-`      |
 | disabled       | 是否为禁用状态          | boolean  | `false`  | 
 | className       | 为对应选项添加额外的类名          | string \| Array \| object  | `-`  | 
 

src/packages/__VUE/popup/demo.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="demo">
+    <div id="test"></div>
     <h2>{{ translate('basic') }}</h2>
     <nut-cell :title="translate('cell1')" is-link @click="showBasic = true"></nut-cell>
     <nut-popup pop-class="popclass" :style="{ padding: '30px 50px' }" v-model:visible="showBasic" :z-index="100">{{
@@ -42,7 +43,9 @@
     <nut-popup position="bottom" closeable round :style="{ height: '30%' }" v-model:visible="showRound"></nut-popup>
     <h2>{{ translate('teleport') }}</h2>
     <nut-cell :title="translate('teleport')" is-link @click="showTeleport = true"></nut-cell>
-    <nut-popup :style="{ padding: '30px 50px' }" v-model:visible="showTeleport">app</nut-popup>
+    <nut-popup :style="{ padding: '30px 50px' }" teleport="#app" teleport-disable v-model:visible="showTeleport"
+      >app</nut-popup
+    >
     <h2>{{ translate('muti') }}</h2>
     <nut-cell :title="translate('muti')" is-link @click="showPop1 = true"></nut-cell>
     <nut-popup :style="{ padding: '30px 50px' }" v-model:visible="showPop1">

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

@@ -152,7 +152,7 @@ Specify the mount node through `teleport`
 ```html
 <template>
   <nut-cell title="Specify mount node" is-link @click="showTeleport = true"></nut-cell>
-  <nut-popup :style="{ padding: '30px 50px' }" teleport="#app" v-model:visible="showTeleport" >app</nut-popup>
+  <nut-popup :style="{ padding: '30px 50px' }" teleport="#app" teleport-disable v-model:visible="showTeleport" >app</nut-popup>
 </template>
 <script lang="ts">
   import { reactive, toRefs } from 'vue';

src/packages/__VUE/popup/doc.md

@@ -153,7 +153,7 @@ app.use(Popup)
 ```html
 <template>
   <nut-cell title="指定挂载节点" is-link @click="showTeleport = true"></nut-cell>
-  <nut-popup :style="{ padding: '30px 50px' }" teleport="#app" v-model:visible="showTeleport" >app</nut-popup>
+  <nut-popup :style="{ padding: '30px 50px' }" teleport="#app" teleport-disable v-model:visible="showTeleport" >app</nut-popup>
 </template>
 <script lang="ts">
   import { reactive, toRefs } from 'vue';

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

@@ -135,6 +135,49 @@ app.use(Progress);
 </template>
 ```
 :::
+
+### Dynamic Change
+:::demo
+```html
+<template>
+   <div>
+    <nut-cell>
+      <nut-progress :percentage="val" />
+    </nut-cell>
+    <nut-cell>
+      <nut-button type="default" @click="setReduceVal">reduce</nut-button>
+      <nut-button type="primary" @click="setAddVal">add</nut-button>
+    </nut-cell>
+    </div>
+</template>
+<script lang="ts">
+  import { ref } from 'vue';
+  export default{
+    setup() {
+    const val = ref(0);
+    const setAddVal = () => {
+      if (val.value >= 100) {
+        return false;
+      }
+      val.value += 10;
+    };
+    const setReduceVal = () => {
+      if (val.value <= 0) {
+        return false;
+      }
+      val.value -= 10;
+    };
+    return {
+      val,
+      setAddVal,
+      setReduceVal,
+    };
+  }
+
+  }
+</script>
+```
+:::
 ## API
 ### Props
 

src/packages/__VUE/progress/doc.md

@@ -130,6 +130,48 @@ app.use(Progress);
 </script>
 ```
 :::
+### 动态改变
+:::demo
+```html
+<template>
+   <div>
+    <nut-cell>
+      <nut-progress :percentage="val" />
+    </nut-cell>
+    <nut-cell>
+      <nut-button type="default" @click="setReduceVal">减少</nut-button>
+      <nut-button type="primary" @click="setAddVal">增加</nut-button>
+    </nut-cell>
+    </div>
+</template>
+<script lang="ts">
+  import { ref } from 'vue';
+  export default{
+    setup() {
+    const val = ref(0);
+    const setAddVal = () => {
+      if (val.value >= 100) {
+        return false;
+      }
+      val.value += 10;
+    };
+    const setReduceVal = () => {
+      if (val.value <= 0) {
+        return false;
+      }
+      val.value -= 10;
+    };
+    return {
+      val,
+      setAddVal,
+      setReduceVal,
+    };
+  }
+
+  }
+</script>
+```
+:::
 ## API
 ### Props
 

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

@@ -121,6 +121,55 @@ app.use(Progress);
       </nut-cell>
     </div>
 </template>
+<script lang="ts">
+  import {Issue } from '@nutui/icons-vue-taro';
+  export default{
+    components: {Issue},
+  }
+</script>
+```
+:::
+
+### 动态改变
+:::demo
+```html
+<template>
+   <div>
+    <nut-cell>
+      <nut-progress :percentage="val" />
+    </nut-cell>
+    <nut-cell>
+      <nut-button type="default" @click="setReduceVal">减少</nut-button>
+      <nut-button type="primary" @click="setAddVal">增加</nut-button>
+    </nut-cell>
+    </div>
+</template>
+<script lang="ts">
+  import { ref } from 'vue';
+  export default{
+    setup() {
+    const val = ref(0);
+    const setAddVal = () => {
+      if (val.value >= 100) {
+        return false;
+      }
+      val.value += 10;
+    };
+    const setReduceVal = () => {
+      if (val.value <= 0) {
+        return false;
+      }
+      val.value -= 10;
+    };
+    return {
+      val,
+      setAddVal,
+      setReduceVal,
+    };
+  }
+
+  }
+</script>
 ```
 :::
 ## API

src/packages/__VUE/progress/index.scss

@@ -15,12 +15,12 @@
       -webkit-transition: all 0.4s;
       transition: all 0.4s;
       // position: relative;
-      .nut-progress-text {
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        color: #fff;
-      }
+    }
+    .nut-progress-text {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      color: #fff;
     }
     .nut-active {
       &:before {

src/packages/__VUE/progress/index.vue

@@ -6,32 +6,31 @@
       :class="[showText && !textInside ? 'nut-progress-outer-part' : '', size ? 'nut-progress-' + size : '']"
       :style="{ height: height }"
     >
-      <div :class="['nut-progress-inner', status == 'active' ? 'nut-active' : '']" :style="bgStyle">
-        <div
-          class="nut-progress-text nut-progress-insidetext"
-          ref="insideText"
-          :style="{
-            lineHeight: height,
-            left: `${percentage}%`,
-            transform: `translate(-${+percentage}%,-50%)`,
-            background: textBackground || strokeColor
-          }"
-          v-if="showText && textInside && !slotDefault"
-        >
-          <span :style="textStyle">{{ percentage }}{{ isShowPercentage ? '%' : '' }} </span>
-        </div>
-        <div
-          ref="insideText"
-          :style="{
-            position: `absolute`,
-            top: `50%`,
-            left: `${percentage}%`,
-            transform: `translate(-${+percentage}%,-50%)`
-          }"
-          v-if="showText && textInside && slotDefault"
-        >
-          <slot></slot>
-        </div>
+      <div :class="['nut-progress-inner', status == 'active' ? 'nut-active' : '']" :style="bgStyle"></div>
+      <div
+        class="nut-progress-text nut-progress-insidetext"
+        ref="insideText"
+        :style="{
+          lineHeight: height,
+          left: `${percentage}%`,
+          transform: `translate(-${+percentage}%,-50%)`,
+          background: textBackground || strokeColor
+        }"
+        v-if="showText && textInside && !slotDefault"
+      >
+        <span :style="textStyle">{{ percentage }}{{ isShowPercentage ? '%' : '' }} </span>
+      </div>
+      <div
+        ref="insideText"
+        :style="{
+          position: `absolute`,
+          top: `50%`,
+          left: `${percentage}%`,
+          transform: `translate(-${+percentage}%,-50%)`
+        }"
+        v-if="showText && textInside && slotDefault"
+      >
+        <slot></slot>
       </div>
     </div>
     <div class="nut-progress-text" v-if="showText && !textInside">

src/packages/__VUE/sku/components/SkuHeader.taro.vue

@@ -1,6 +1,7 @@
 <template>
   <view class="nut-sku-header">
-    <image class="nut-sku-header-img" :src="goods.imagePath" />
+    <image class="nut-sku-header-img" :src="goods.imagePath" v-if="ENV != ENV_TYPE.WEB" />
+    <img class="nut-sku-header-img" :src="goods.imagePath" v-else />
     <view class="nut-sku-header-right">
       <template v-if="getSlots('sku-header-price')">
         <slot name="sku-header-price"></slot>
@@ -17,10 +18,11 @@
   </view>
 </template>
 <script lang="ts">
-import { ref, watch, onMounted } from 'vue';
+import { reactive, toRefs } from 'vue';
 import Price from '../../price/index.taro.vue';
 import { createComponent } from '@/packages/utils/create';
-const { componentName, create, translate } = createComponent('sku-header');
+import Taro from '@tarojs/taro';
+const { create, translate } = createComponent('sku-header');
 
 export default create({
   props: {
@@ -36,9 +38,15 @@ export default create({
   setup(props: any, { emit, slots }) {
     const getSlots = (name: string) => slots[name];
 
+    const state = reactive({
+      ENV: Taro.getEnv(),
+      ENV_TYPE: Taro.ENV_TYPE
+    });
+
     return {
       getSlots,
-      translate
+      translate,
+      ...toRefs(state)
     };
   }
 });

src/packages/__VUE/sku/components/SkuOperate.vue

@@ -1,6 +1,6 @@
 <template>
   <view class="nut-sku-operate" v-if="btnOptions.length > 0">
-    <view class="nut-sku-operate-desc" v-if="btnExtraText" v-html="btnExtraText"></view>
+    <view class="nut-sku-operate-desc" v-if="btnExtraText">{{ btnExtraText }}</view>
 
     <slot name="operate-btn"></slot>
 

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

@@ -34,12 +34,7 @@
           :stepperTitle="stepperTitle || translate('buyNumber')"
           :stepperMax="stepperMax"
           :stepperMin="stepperMin"
-          :purchased="purchased"
-          :showSaleLimit="showSaleLimit"
-          :showSaleLowest="showSaleLowest"
-          :saleLowestText="saleLowestText"
-          :saleLimitText="saleLimitText"
-          :purchasedText="purchasedText"
+          :stepperExtraText="stepperExtraText"
           @add="add"
           @reduce="reduce"
           @changeStepper="changeStepper"
@@ -49,15 +44,18 @@
         <slot name="sku-stepper-bottom"></slot>
       </view>
 
-      <slot name="sku-operate"></slot>
       <sku-operate
-        v-if="!getSlots('sku-operate')"
+        :btnExtraText="btnExtraText"
         :btnOptions="btnOptions"
         :buyText="buyText || translate('buyNow')"
         :addCartText="addCartText || translate('addToCart')"
         :confirmText="confirmText || translate('confirm')"
         @clickBtnOperate="clickBtnOperate"
-      ></sku-operate>
+      >
+        <template #operate-btn v-if="getSlots('sku-operate')">
+          <slot name="sku-operate"></slot>
+        </template>
+      </sku-operate>
     </view>
   </nut-popup>
 </template>
@@ -88,12 +86,6 @@ export default create({
       default: {}
     },
 
-    // 是否显示限购文案
-    showSaleLimit: {
-      type: Boolean,
-      default: false
-    },
-
     // stepper 最大值
     stepperMax: {
       type: [Number, String],
@@ -105,17 +97,6 @@ export default create({
       type: [Number, String],
       default: 1
     },
-    // 已购数量
-    purchased: {
-      type: [Number, String],
-      default: 0
-    },
-
-    // 是否显示起购文案
-    showSaleLowest: {
-      type: Boolean,
-      default: false
-    },
 
     // 底部按钮配置  confirm cart  buy
     btnOptions: {
@@ -129,22 +110,15 @@ export default create({
       default: ''
     },
 
-    // 起购文案提示
-    saleLowestText: {
-      type: [Function, Boolean],
-      default: false
-    },
-
-    // 限购文案提示
-    saleLimitText: {
+    // stepper 前面文案
+    stepperExtraText: {
       type: [Function, Boolean],
       default: false
     },
 
-    // 已购文案提示
-    purchasedText: {
-      type: [Function, Boolean],
-      default: false
+    btnExtraText: {
+      type: String,
+      default: ''
     },
 
     // 立即购买文案

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

@@ -3,8 +3,8 @@
     <view class="nut-sub-side-navbar__title" @click.stop="handleClick">
       <span class="nut-sub-side-navbar__title__text">{{ title }}</span>
       <span class="nut-sub-side-navbar__title__icon">
-        <ArrowDown2 v-if="!direction"></ArrowDown2>
-        <ArrowUp2 v-else></ArrowUp2>
+        <ArrowDown2 v-if="!direction" size="12px"></ArrowDown2>
+        <ArrowUp2 v-else size="12px"></ArrowUp2>
       </span>
     </view>
     <view

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

@@ -13,7 +13,7 @@
           >
             {{ item.title }}
             <slot name="icon"></slot>
-            <DownArrow v-if="!$slots.icon && item.sorter" width="12px" height="12px"></DownArrow>
+            <DownArrow v-if="!$slots.icon && item.sorter" size="12px"></DownArrow>
           </span>
         </view>
       </view>
@@ -49,10 +49,114 @@
     </view>
   </view>
 </template>
-
 <script lang="ts">
+import { computed, PropType, reactive, toRefs, watch } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 const { componentName, create, translate } = createComponent('table');
-import { component } from './common';
-export default create(component(componentName, translate));
+import RenderColumn from './renderColumn';
+import { DownArrow } from '@nutui/icons-vue-taro';
+import { TableColumnProps } from './types';
+export default create({
+  components: {
+    RenderColumn,
+    DownArrow
+  },
+  props: {
+    bordered: {
+      type: Boolean,
+      default: true
+    },
+    columns: {
+      type: Array as PropType<TableColumnProps[]>,
+      default: () => {
+        return [];
+      }
+    },
+    data: {
+      type: Object,
+      default: () => {
+        return {};
+      }
+    },
+    summary: {
+      type: Function,
+      default: null
+    },
+    striped: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ['sorter'],
+  setup(props: any, { emit, slots }: any) {
+    const state = reactive({
+      curData: props.data
+    });
+    const classes = computed(() => {
+      const prefixCls = componentName;
+      return {
+        [prefixCls]: true
+      };
+    });
+
+    const cellClasses = (item: TableColumnProps) => {
+      return {
+        'nut-table__main__head__tr--border': props.bordered,
+        [`nut-table__main__head__tr--align${item.align ? item.align : ''}`]: true
+      };
+    };
+
+    const stylehead = (item: TableColumnProps) => {
+      return item.stylehead ? item.stylehead : '';
+    };
+    const stylecolumn = (item: TableColumnProps) => {
+      return item.stylecolumn ? item.stylecolumn : '';
+    };
+
+    const getColumnItem = (value: string): TableColumnProps => {
+      return props.columns.filter((item: TableColumnProps) => item.key === value)[0];
+    };
+    const getColumnItemStyle = (value: string) => {
+      const style = props.columns.filter((item: TableColumnProps) => item.key === value);
+      return style[0].stylecolumn ? style[0].stylecolumn : '';
+    };
+    const handleSorterClick = (item: TableColumnProps) => {
+      if (item.sorter) {
+        emit('sorter', item);
+        state.curData =
+          typeof item.sorter === 'function'
+            ? state.curData.sort(item.sorter)
+            : item.sorter === 'default'
+            ? state.curData.sort()
+            : state.curData;
+      }
+    };
+
+    const sortDataItem = () => {
+      return props.columns.map((columns: TableColumnProps) => {
+        return [columns.key, columns.render];
+      });
+    };
+
+    watch(
+      () => props.data,
+      (val) => {
+        state.curData = val.slice();
+      }
+    );
+
+    return {
+      ...toRefs(state),
+      classes,
+      cellClasses,
+      getColumnItem,
+      getColumnItemStyle,
+      handleSorterClick,
+      sortDataItem,
+      translate,
+      stylehead,
+      stylecolumn
+    };
+  }
+});
 </script>

src/packages/__VUE/table/index.vue

@@ -51,8 +51,113 @@
 </template>
 
 <script lang="ts">
+import { computed, PropType, reactive, toRefs, watch } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 const { componentName, create, translate } = createComponent('table');
-import { component } from './common';
-export default create(component(componentName, translate));
+import RenderColumn from './renderColumn';
+import { DownArrow } from '@nutui/icons-vue';
+import { TableColumnProps } from './types';
+export default create({
+  components: {
+    RenderColumn,
+    DownArrow
+  },
+  props: {
+    bordered: {
+      type: Boolean,
+      default: true
+    },
+    columns: {
+      type: Array as PropType<TableColumnProps[]>,
+      default: () => {
+        return [];
+      }
+    },
+    data: {
+      type: Object,
+      default: () => {
+        return {};
+      }
+    },
+    summary: {
+      type: Function,
+      default: null
+    },
+    striped: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ['sorter'],
+  setup(props: any, { emit, slots }: any) {
+    const state = reactive({
+      curData: props.data
+    });
+    const classes = computed(() => {
+      const prefixCls = componentName;
+      return {
+        [prefixCls]: true
+      };
+    });
+
+    const cellClasses = (item: TableColumnProps) => {
+      return {
+        'nut-table__main__head__tr--border': props.bordered,
+        [`nut-table__main__head__tr--align${item.align ? item.align : ''}`]: true
+      };
+    };
+
+    const stylehead = (item: TableColumnProps) => {
+      return item.stylehead ? item.stylehead : '';
+    };
+    const stylecolumn = (item: TableColumnProps) => {
+      return item.stylecolumn ? item.stylecolumn : '';
+    };
+
+    const getColumnItem = (value: string): TableColumnProps => {
+      return props.columns.filter((item: TableColumnProps) => item.key === value)[0];
+    };
+    const getColumnItemStyle = (value: string) => {
+      const style = props.columns.filter((item: TableColumnProps) => item.key === value);
+      return style[0].stylecolumn ? style[0].stylecolumn : '';
+    };
+    const handleSorterClick = (item: TableColumnProps) => {
+      if (item.sorter) {
+        emit('sorter', item);
+        state.curData =
+          typeof item.sorter === 'function'
+            ? state.curData.sort(item.sorter)
+            : item.sorter === 'default'
+            ? state.curData.sort()
+            : state.curData;
+      }
+    };
+
+    const sortDataItem = () => {
+      return props.columns.map((columns: TableColumnProps) => {
+        return [columns.key, columns.render];
+      });
+    };
+
+    watch(
+      () => props.data,
+      (val) => {
+        state.curData = val.slice();
+      }
+    );
+
+    return {
+      ...toRefs(state),
+      classes,
+      cellClasses,
+      getColumnItem,
+      getColumnItemStyle,
+      handleSorterClick,
+      sortDataItem,
+      translate,
+      stylehead,
+      stylecolumn
+    };
+  }
+});
 </script>

src/packages/__VUE/table/renderColumn.ts

@@ -1,5 +1,5 @@
-import { h, PropType } from 'vue';
-export default {
+import { h, PropType, defineComponent } from 'vue';
+export default defineComponent({
   setup(props: any) {
     return () => h(`view`, {}, props.slots[0] ? props.slots[0](props.record) : props.slots[1](props.record));
   },
@@ -7,4 +7,4 @@ export default {
     slots: Array as PropType<Array<Function | undefined>>,
     record: Object
   }
-};
+});

src/packages/__VUE/textarea/doc.md

@@ -70,7 +70,7 @@ export default {
 
 | 参数        | 说明                                             | 类型           | 默认值         |
 |-------------|--------------------------------------------------|----------------|----------------|
-| v-model     | 输入值，支持双向绑定                             | string         | `-`              |
+| v-model     | 输入值，支持双向绑定                             | string         | -              |
 | placeholder | 设置占位提示文字                                 | string         | `'请输入内容'` |
 | max-length  | 限制最长输入字符                                 | string \| number | -              |
 | rows | textarea的高度，优先级高于autosize属性  `仅支持 H5`       | string \| number | `2`            |

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

@@ -130,7 +130,7 @@ app.use(TrendArrow);
 <template>
   <nut-cell>
     <nut-trend-arrow :rate="10.2365">
-      <template #upIcon><Success color="blue" width="18" height="18" /></template>
+      <template #upIcon><Success color="blue" size="18px" /></template>
     </nut-trend-arrow>
     <nut-trend-arrow :rate="-10.2365">
       <template #downIcon><Failure color="red" /></template>

src/packages/styles/variables-jdb.scss

@@ -596,6 +596,7 @@ $badge-background-color: linear-gradient(135deg, $primary-color-start 0%, $prima
 $badge-color: #fff !default;
 $badge-font-size: $font-size-1 !default;
 $badge-border-radius: 14px !default;
+$badge-icon-padding: 4px !default;
 $badge-padding: 0 5px !default;
 $badge-content-transform: translate(50%, -50%) !default;
 $badge-z-index: 1 !default;

src/packages/styles/variables-jddkh.scss

@@ -528,6 +528,7 @@ $badge-background-color: linear-gradient(135deg, $primary-color 0%, $primary-col
 $badge-color: #fff !default;
 $badge-font-size: $font-size-1 !default;
 $badge-border-radius: 8px !default;
+$badge-icon-padding: 4px !default;
 $badge-padding: 0 5px !default;
 $badge-content-transform: translate(50%, -50%) !default;
 $badge-z-index: 1 !default;

src/packages/styles/variables-jdt.scss

@@ -543,6 +543,7 @@ $badge-background-color: var(
 $badge-color: var(--nut-badge-color, #fff) !default;
 $badge-font-size: var(--nut-badge-font-size, $font-size-1) !default;
 $badge-border-radius: var(--nut-badge-border-radius, 14px) !default;
+$badge-icon-padding: var(--nut-badge-icon-padding, 4px) !default;
 $badge-padding: var(--nut-badge-padding, 0 5px) !default;
 $badge-content-transform: var(--nut-badge-content-transform, translate(50%, -50%)) !default;
 $badge-z-index: var(--nut-badge-z-index, 1) !default;

src/packages/styles/variables.scss

@@ -578,6 +578,7 @@ $badge-background-color: var(
 $badge-color: var(--nut-badge-color, #fff) !default;
 $badge-font-size: var(--nut-badge-font-size, $font-size-1) !default;
 $badge-border-radius: var(--nut-badge-border-radius, 14px) !default;
+$badge-icon-padding: var(--nut-badge-icon-padding, 4px) !default;
 $badge-padding: var(--nut-badge-padding, 0 5px) !default;
 $badge-content-transform: var(--nut-badge-content-transform, translate(50%, -50%)) !default;
 $badge-z-index: var(--nut-badge-z-index, 1) !default;

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

@@ -1,10 +1,10 @@
 <template>
   <div class="demo" :class="{ web: env === 'WEB' }">
     <Header v-if="env === 'WEB'" />
-    <nut-cell :isLink="true" @click="showKeyBoard(1)" :showIcon="true" title="默认键盘"></nut-cell>
+    <nut-cell :isLink="true" @click="showKeyBoard(1)" title="默认键盘"></nut-cell>
     <nut-number-keyboard overlay v-model:visible="visible1" @input="input" @delete="onDelete" @close="close(1)">
     </nut-number-keyboard>
-    <nut-cell :isLink="true" @click="showKeyBoard(2)" :showIcon="true" title="带右侧栏键盘"></nut-cell>
+    <nut-cell :isLink="true" @click="showKeyBoard(2)" title="带右侧栏键盘"></nut-cell>
     <nut-number-keyboard
       type="rightColumn"
       overlay
@@ -14,7 +14,7 @@
       @close="close(2)"
     >
     </nut-number-keyboard>
-    <nut-cell :isLink="true" @click="showKeyBoard(3)" :showIcon="true" title="随机数键盘"></nut-cell>
+    <nut-cell :isLink="true" @click="showKeyBoard(3)" title="随机数键盘"></nut-cell>
     <nut-number-keyboard
       type="rightColumn"
       overlay
@@ -26,7 +26,7 @@
     >
     </nut-number-keyboard>
 
-    <nut-cell :isLink="true" @click="showKeyBoard(4)" :showIcon="true" title="带标题栏键盘"></nut-cell>
+    <nut-cell :isLink="true" @click="showKeyBoard(4)" title="带标题栏键盘"></nut-cell>
     <nut-number-keyboard
       title="默认键盘"
       overlay
@@ -36,10 +36,10 @@
       @close="close(4)"
     >
     </nut-number-keyboard>
-    <nut-cell :isLink="true" @click="showKeyBoard(6)" :showIcon="true" title="身份证键盘"></nut-cell>
+    <nut-cell :isLink="true" @click="showKeyBoard(6)" title="身份证键盘"></nut-cell>
     <nut-number-keyboard overlay v-model:visible="visible6" :custom-key="customKey3" @input="input" @close="close(6)">
     </nut-number-keyboard>
-    <nut-cell :isLink="true" :desc="value" @click="showKeyBoard(5)" :showIcon="true" title="双向绑定"></nut-cell>
+    <nut-cell :isLink="true" :desc="value" @click="showKeyBoard(5)" title="双向绑定"></nut-cell>
     <nut-number-keyboard overlay v-model:visible="visible5" v-model="value" maxlength="6" @close="close(5)">
     </nut-number-keyboard>
   </div>

src/sites/mobile-taro/vue/src/exhibition/pages/badge/index.vue

@@ -49,19 +49,19 @@
     <nut-row>
       <nut-badge>
         <template #icons>
-          <Check color="#ffffff" width="12px" height="12px"></Check>
+          <Check color="#ffffff" size="12px"></Check>
         </template>
         <nut-avatar shape="square"></nut-avatar>
       </nut-badge>
       <nut-badge>
         <template #icons>
-          <Link color="#ffffff" width="12px" height="12px"></Link>
+          <Link color="#ffffff" size="12px"></Link>
         </template>
         <nut-avatar shape="square"></nut-avatar>
       </nut-badge>
       <nut-badge>
         <template #icons>
-          <Download color="#ffffff" width="12px" height="12px"></Download>
+          <Download color="#ffffff" size="12px"></Download>
         </template>
         <nut-avatar shape="square"></nut-avatar>
       </nut-badge>

src/sites/mobile-taro/vue/src/exhibition/pages/table/index.vue

@@ -31,12 +31,12 @@ import { reactive, toRefs, onMounted, onUnmounted, h, defineComponent } from 'vu
 import Taro from '@tarojs/taro';
 import Header from '../../../components/header.vue';
 import { TableColumnProps } from '@/packages/__VUE/table/types';
-import Button from './../../../../../../../packages/__VUE/button/index.taro.vue';
-import Icon from './../../../../../../../packages/__VUE/icon/index.taro.vue';
+import Button from '@nutui/nutui-taro';
+import { Dongdong } from '@nutui/icons-vue-taro';
 export default defineComponent({
   components: {
     Button,
-    Icon,
+    Dongdong,
     Header
   },
   props: {},
@@ -193,7 +193,7 @@ export default defineComponent({
           sex: '女',
           record: '本科',
           render: () => {
-            return h(Icon, { name: 'dongdong', size: '14px' });
+            return h(Dongdong, { size: '14px' });
           }
         },
         {

src/sites/mobile-taro/vue/src/exhibition/pages/trendarrow/index.vue

@@ -46,7 +46,7 @@
     <view class="title">自定义图标</view>
     <nut-cell>
       <nut-trend-arrow :rate="10.2365">
-        <template #upIcon><Success color="blue" width="18" height="18" /></template>
+        <template #upIcon><Success color="blue" size="18px" /></template>
       </nut-trend-arrow>
       <nut-trend-arrow :rate="-10.2365">
         <template #downIcon><Failure color="red" /></template>

src/sites/mobile-taro/vue/src/layout/pages/grid/index.vue

@@ -59,7 +59,7 @@
     <nut-grid :column-num="3">
       <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
       <nut-grid-item text="文字">
-        <Dongdong width="40px" height="40px" color="#478EF2" />
+        <Dongdong size="40px" color="#478EF2" />
       </nut-grid-item>
       <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
     </nut-grid>

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

@@ -10,10 +10,10 @@
     <h2>自定义按钮</h2>
     <nut-pagination v-model="currentPage3" :total-items="500" :show-page-size="5" @change="pageChange">
       <template #prev-text>
-        <Left width="10px" height="10px" />
+        <Left size="10px" />
       </template>
       <template #next-text>
-        <Right width="10px" height="10px" />
+        <Right size="10px" />
       </template>
       <template #page="{ item }">
         {{ item.number == 3 ? 'hot' : item.text }}

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

@@ -68,7 +68,7 @@ export default {
         url: `/${enName}/pages/${name.toLowerCase()}/index`
       });
 
-      if (Taro.getEnv() === 'WEB') {
+      if (Taro.getEnv() === 'WEB' && location.href.includes('nutui.jd.com')) {
         parent.location.href = `${parent.location.origin}/vue_taro/index.html#/zh-CN/component/${name.toLowerCase()}`;
       }
     };