Browse Source

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

Ymm0008 3 years ago
parent
commit
bf4bfd4eed

+ 1 - 1
README.md

@@ -3,7 +3,7 @@
     <img alt="logo" src="https://img11.360buyimg.com/imagetools/jfs/t1/211965/25/7152/22022/61b16785E433119bb/aa41d7a9f7e823f3.png" width="150" style="margin-bottom: 10px;">
 </p>
 
-<p align="center">京东风格的移动端 Vue2、Vue3 组件库,支持一套代码生成 H5 和小程序</p>
+<p align="center">京东风格的轻量级 Vue 组件库,支持移动端 H5 和 小程序开发</p>
 
 <p align="center">
     <a href="http://makeapullrequest.com">

+ 32 - 32
src/packages/__VUE/address/doc.en-US.md

@@ -527,20 +527,20 @@ If you want to select a province, you need to set the region ID in the order of
 
 | Attribute            | Description               | Type   | Default  |
 |----- | ----- | ----- | ----- |
-| v-model:visible | Whether to open address | String | ''|
-| type | Choose type: exist/custom/custom2  | String | 'custom'|
-| province | Province data| Array | []|
-| city | City data | Array | []|
-| country | Country data | Array | []|
-| town | Town dta | Array | []|
-| height | Popup height | String、Number | '200px'|
-| exist-address | Exist address list data | Array | []|
-| is-show-custom-address | Whether to change custom address | Boolean | true|
-| custom-address-title  | Custom address title | String | 'Select Region'|
-| exist-address-title|  Exist address title | String | 'Delivery To'|
-| custom-and-exist-title| Custom address and existing address switch button copywriting | String | 'Choose Another Address'|
-| columns-placeholder | Columns placeholder text | String|Array | 'Select'|
-| lock-scroll   | Whether the background is locked   | Boolean        | `true`       |
+| v-model:visible | Whether to open address | string | `''`|
+| type | Choose type: exist/custom/custom2  | string | `custom`|
+| province | Province data| array | `[]`|
+| city | City data | array | `[]`|
+| country | Country data | array | `[]`|
+| town | Town dta | array | `[]`|
+| height | Popup height | string \| number | `200px`|
+| exist-address | Exist address list data | array | `[]`|
+| is-show-custom-address | Whether to change custom address | boolean | `true`|
+| custom-address-title  | Custom address title | string | `Select Region`|
+| exist-address-title|  Exist address title | string | `Delivery To`|
+| custom-and-exist-title| Custom address and existing address switch button copywriting | string | `Choose Another Address`|
+| columns-placeholder | Columns placeholder text | string \| array | `Select`|
+| lock-scroll   | Whether the background is locked   | boolean        | `true`       |
 
 
 ## Event
@@ -563,15 +563,15 @@ If you want to select a province, you need to set the region ID in the order of
 ## selected 
 | Attribute            | Description               | Options   |
 |----- | ----- | ----- |
-| First Option(prevExistAdd) |  Select the previously selected address |  {}|
-| Second Option(nowExistAdd) |  Currently selected address |  {}|
-| Third Option(arr) |  After selecting the existing address list |  {}|
+| First Option(prevExistAdd) |  Select the previously selected address |  `{}`|
+| Second Option(nowExistAdd) |  Currently selected address |  `{}`|
+| Third Option(arr) |  After selecting the existing address list |  `{}`|
 
 ## close 
 | Attribute            | Description               | Options   |
 |----- | ----- | ----- |
 | type | Selected Type  |  exist/custom/custom2|
-| data | Selected Data | {} |
+| data | Selected Data | `{}` |
 
 
 ## Slot
@@ -589,17 +589,17 @@ If you want to select a province, you need to set the region ID in the order of
 
 The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider).
 
-| Name | Default Value | Description |
-| --------------------------------------- | -------------------------- | ---- |
-|  --nut-address-region-tab-line| _linear-gradient(90deg, var(--nut-primary-color) 0%, var(--nut-active-color) 100%)_| -    |
-|  --nut-address-icon-color| _var(--nut-primary-color)_     | -    |
-|  --nut-address-header-title-font-size   | _18px_          | -    |
-|  --nut-address-header-title-color| _#262626_    | -    |
-|  --nut-address-region-tab-font-size| _13px_  | -    |
-|  --nut-address-region-tab-color| _#1d1e1e_  | -    |
-|  --nut-address-region-tab-active-item-font-weight| _bold_    | -    |
-|  --nut-address-region-tab-line-border-radius| _0_   | -    |
-|  --nut-address-region-tab-line-opacity| _1_   | -    |
-|  --nut-address-region-item-color| _#333_    | -    |
-|  --nut-address-region-item-font-size| _var(--nut-font-size-1)_   | -    |
-|  --nut-address-item-margin-right| _9px_  | -    |
+| Name | Default Value | 
+| --------------------------------------- | -------------------------- |
+|  --nut-address-region-tab-line| _linear-gradient(90deg, var(--nut-primary-color) 0%, var(--nut-active-color) 100%)_| 
+|  --nut-address-icon-color| _var(--nut-primary-color)_     | 
+|  --nut-address-header-title-font-size   | _18px_          | 
+|  --nut-address-header-title-color| _#262626_    | 
+|  --nut-address-region-tab-font-size| _13px_  | 
+|  --nut-address-region-tab-color| _#1d1e1e_  | 
+|  --nut-address-region-tab-active-item-font-weight| _bold_    | 
+|  --nut-address-region-tab-line-border-radius| _0_   | 
+|  --nut-address-region-tab-line-opacity| _1_   | 
+|  --nut-address-region-item-color| _#333_    | 
+|  --nut-address-region-item-font-size| _var(--nut-font-size-1)_   | 
+|  --nut-address-item-margin-right| _9px_  | 

+ 49 - 51
src/packages/__VUE/address/doc.md

@@ -2,8 +2,6 @@
 
 ### 介绍
 
-
-
 ### 安装
 
 ``` javascript
@@ -84,24 +82,24 @@ app.use(Address);
 
 ### 选择省市区
 
-如果想选中某个省市区,需要在 model-value 中按照 province、city、country、town 的顺序配置想要展示的地区 id 值,并且保证有能查询到对应的省市区数据即可。
+如果想选中某个省市区,需要在 `model-value` 中按照 `province``city``country``town` 的顺序配置想要展示的地区 id 值,并且保证有能查询到对应的省市区数据即可。
 
 :::demo
 ```html
 <template>
-<nut-cell title="选择地址" :desc="text" is-link @click="showAddress"></nut-cell>
-<nut-address
-    v-model="value"
-    v-model:visible="showPopup"
-    :province="province"
-    :city="city"
-    :country="country"
-    :town="town"
-    @change="onChange"
-    @close="close"
-    custom-address-title="请选择所在地区"
-    :columns-placeholder="placeholder"
-></nut-address>
+  <nut-cell title="选择地址" :desc="text" is-link @click="showAddress"></nut-cell>
+  <nut-address
+      v-model="value"
+      v-model:visible="showPopup"
+      :province="province"
+      :city="city"
+      :country="country"
+      :town="town"
+      @change="onChange"
+      @close="close"
+      custom-address-title="请选择所在地区"
+      :columns-placeholder="placeholder"
+  ></nut-address>
 </template>
 <script>
   import { ref,reactive,toRefs } from 'vue';
@@ -545,20 +543,20 @@ app.use(Address);
 
 | 字段 | 说明 | 类型 | 默认值 |
 |----- | ----- | ----- | ----- |
-| v-model:visible | 是否打开地址选择 | String | '' |
-| type | 地址选择类型 exist/custom/custom2  | String | 'custom' |
-| province | 省,每个省的对象中,必须有 name 字段,如果类型选择 custom2,必须指定 title 字段为首字母 | Array | [] |
-| city | 市,每个市的对象中,必须有 name 字段,如果类型选择 custom2,必须指定 title 字段为首字母 | Array | [] |
-| country | 县,每个县的对象中,必须有 name 字段,如果类型选择 custom2,必须指定 title 字段为首字母 | Array | [] |
-| town | 乡/镇,每个乡/镇的对象中,必须有 name 字段,如果类型选择 custom2,必须指定 title 字段为首字母 | Array | [] |
-| height | 弹层中内容容器的高度,仅在type="custom2"时有效 | String、Number | '200px' |
-| exist-address | 已存在地址列表,每个地址对象中,必传值provinceName、cityName、countyName、townName、addressDetail、selectedAddress(字段解释见下) | Array | [] |
-| is-show-custom-address | 是否可以切换自定义地址选择,type=‘exist’ 时生效 | Boolean | true |
-| custom-address-title  | 自定义地址选择文案,type='custom' 时生效 | String | '请选择所在地区' |
-| exist-address-title| 已有地址文案 ,type=‘exist’ 时生效| String | '配送至' |
-| custom-and-exist-title| 自定义地址与已有地址切换按钮文案 ,type=‘exist’ 时生效| String | '选择其他地址' |
-| columns-placeholder | 列提示文字 | String|Array | '请选择' |
-| lock-scroll  | 背景是否锁定      | Boolean        | `true`  |
+| v-model:visible | 是否打开地址选择 | string | `''` |
+| type | 地址选择类型 exist/custom/custom2  | string | `custom` |
+| province | 省,每个省的对象中,必须有 name 字段,如果类型选择 custom2,必须指定 title 字段为首字母 | array | `[]` |
+| city | 市,每个市的对象中,必须有 name 字段,如果类型选择 custom2,必须指定 title 字段为首字母 | array | `[]` |
+| country | 县,每个县的对象中,必须有 name 字段,如果类型选择 custom2,必须指定 title 字段为首字母 | array | `[]` |
+| town | 乡/镇,每个乡/镇的对象中,必须有 name 字段,如果类型选择 custom2,必须指定 title 字段为首字母 | array | `[]` |
+| height | 弹层中内容容器的高度,仅在type="custom2"时有效 | string \| number | `200px` |
+| exist-address | 已存在地址列表,每个地址对象中,必传值provinceName、cityName、countyName、townName、addressDetail、selectedAddress(字段解释见下) | array | `[]` |
+| is-show-custom-address | 是否可以切换自定义地址选择,type=‘exist’ 时生效 | boolean | `true` |
+| custom-address-title  | 自定义地址选择文案,type='custom' 时生效 | string | `请选择所在地区` |
+| exist-address-title| 已有地址文案 ,type=‘exist’ 时生效| string | `配送至` |
+| custom-and-exist-title| 自定义地址与已有地址切换按钮文案 ,type=‘exist’ 时生效| string | `选择其他地址` |
+| columns-placeholder | 列提示文字 | string \| array | `请选择` |
+| lock-scroll  | 背景是否锁定      | boolean        | `true`  |
 
   * provinceName 省的名字
   * cityName 市的名字
@@ -570,9 +568,9 @@ app.use(Address);
 ### Events
 | 字段 | 说明 | 回调参数  |
 |----- | ----- | ----- |
-| change | 自定义选择地址时,选择地区时触发 |  参考 onChange |
-| selected | 选择已有地址列表时触发 | 参考 selected |
-| close | 地址选择弹框关闭时触发 | 参考 close |
+| change | 自定义选择地址时,选择地区时触发 |  参考 `onChange` |
+| selected | 选择已有地址列表时触发 | 参考 `selected` |
+| close | 地址选择弹框关闭时触发 | 参考 `close` |
 | close-mask |点击遮罩层或点击右上角叉号关闭时触发 | {closeWay:'mask'/'cross'} |
 | switch-module | 点击‘选择其他地址’或自定义地址选择左上角返回按钮触发 | {type:'exist'/'custom'/'custom2'} |
 
@@ -587,15 +585,15 @@ app.use(Address);
 ### selected 回调参数
 | 参数 | 说明 | 可能值 |
 |----- | ----- | ----- |
-| 第一个参数(prevExistAdd) |  选择前选中的地址 |  {} |
-| 第二个参数(nowExistAdd) |  当前选中的地址 |  {} |
-| 第三个参数(arr) |  选择完之后的已有地址列表(selectedAddress 值发生改变) |  {} |
+| 第一个参数(prevExistAdd) |  选择前选中的地址 |  `{}` |
+| 第二个参数(nowExistAdd) |  当前选中的地址 |  `{}` |
+| 第三个参数(arr) |  选择完之后的已有地址列表(selectedAddress 值发生改变) |  `{}` |
 
 ### close 回调参数
 | 参数 | 说明 | 可能值 |
 |----- | ----- | ----- |
 | type | 地址选择类型 exist/custom/custom2  |  exist/custom/custom2 |
-| data | 选择地址的值,custom 时,addressStr 为选择的地址组合 | {}  |
+| data | 选择地址的值,custom 时,addressStr 为选择的地址组合 | `{}`  |
 
 ### Slots
 | 字段 | 说明 | 
@@ -613,17 +611,17 @@ app.use(Address);
 
 组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
 
-| 名称                                    | 默认值                     | 描述 |
-| --------------------------------------- | -------------------------- | ---- |
-|  --nut-address-region-tab-line| _linear-gradient(90deg, var(--nut-primary-color) 0%, var(--nut-active-color) 100%)_| -    |
-|  --nut-address-icon-color| _var(--nut-primary-color)_     | -    |
-|  --nut-address-header-title-font-size   | _18px_          | -    |
-|  --nut-address-header-title-color| _#262626_    | -    |
-|  --nut-address-region-tab-font-size| _13px_  | -    |
-|  --nut-address-region-tab-color| _#1d1e1e_  | -    |
-|  --nut-address-region-tab-active-item-font-weight| _bold_    | -    |
-|  --nut-address-region-tab-line-border-radius| _0_   | -    |
-|  --nut-address-region-tab-line-opacity| _1_   | -    |
-|  --nut-address-region-item-color| _#333_    | -    |
-|  --nut-address-region-item-font-size| _var(--nut-font-size-1)_   | -    |
-|  --nut-address-item-margin-right| _9px_  | -    |
+| 名称                                    | 默认值                     | 
+| --------------------------------------- | -------------------------- | 
+|  --nut-address-region-tab-line| _linear-gradient(90deg, var(--nut-primary-color) 0%, var(--nut-active-color) 100%)_| 
+|  --nut-address-icon-color| _var(--nut-primary-color)_     | 
+|  --nut-address-header-title-font-size   | _18px_          | 
+|  --nut-address-header-title-color| _#262626_    | 
+|  --nut-address-region-tab-font-size| _13px_  | 
+|  --nut-address-region-tab-color| _#1d1e1e_  | 
+|  --nut-address-region-tab-active-item-font-weight| _bold_    | 
+|  --nut-address-region-tab-line-border-radius| _0_   | 
+|  --nut-address-region-tab-line-opacity| _1_   | 
+|  --nut-address-region-item-color| _#333_    | 
+|  --nut-address-region-item-font-size| _var(--nut-font-size-1)_   | 
+|  --nut-address-item-margin-right| _9px_  | 

+ 36 - 36
src/packages/__VUE/address/doc.taro.md

@@ -84,7 +84,7 @@ app.use(Address);
 
 ### 选择省市区
 
-如果想选中某个省市区,需要在 model-value 中按照 province、city、country、town 的顺序配置想要展示的地区 id 值,并且保证有能查询到对应的省市区数据即可。
+如果想选中某个省市区,需要在 `model-value` 中按照 `province``city``country``town` 的顺序配置想要展示的地区 id 值,并且保证有能查询到对应的省市区数据即可。
 
 :::demo
 ```html
@@ -545,20 +545,20 @@ app.use(Address);
 
 | 字段 | 说明 | 类型 | 默认值 |
 |----- | ----- | ----- | ----- |
-| v-model:visible | 是否打开地址选择 | String | '' |
-| type | 地址选择类型 exist/custom/custom2  | String | 'custom' |
-| province | 省,每个省的对象中,必须有 name 字段,如果类型选择 custom2,必须指定 title 字段为首字母 | Array | [] |
-| city | 市,每个市的对象中,必须有 name 字段,如果类型选择 custom2,必须指定 title 字段为首字母 | Array | [] |
-| country | 县,每个县的对象中,必须有 name 字段,如果类型选择 custom2,必须指定 title 字段为首字母 | Array | [] |
-| town | 乡/镇,每个乡/镇的对象中,必须有 name 字段,如果类型选择 custom2,必须指定 title 字段为首字母 | Array | [] |
-| height | 弹层中内容容器的高度,仅在type="custom2"时有效 | String、Number | '200px' |
-| exist-address | 已存在地址列表,每个地址对象中,必传值provinceName、cityName、countyName、townName、addressDetail、selectedAddress(字段解释见下) | Array | [] |
-| is-show-custom-address | 是否可以切换自定义地址选择,type=‘exist’ 时生效 | Boolean | true |
-| custom-address-title  | 自定义地址选择文案,type='custom' 时生效 | String | '请选择所在地区' |
-| exist-address-title| 已有地址文案 ,type=‘exist’ 时生效| String | '配送至' |
-| custom-and-exist-title| 自定义地址与已有地址切换按钮文案 ,type=‘exist’ 时生效| String | '选择其他地址' |
-| columns-placeholder | 列提示文字 | String|Array | '请选择' |
-| lock-scroll  | 背景是否锁定      | Boolean        | `true`  |
+| v-model:visible | 是否打开地址选择 | string | `''` |
+| type | 地址选择类型 exist/custom/custom2  | string | `custom` |
+| province | 省,每个省的对象中,必须有 name 字段,如果类型选择 custom2,必须指定 title 字段为首字母 | array | `[]` |
+| city | 市,每个市的对象中,必须有 name 字段,如果类型选择 custom2,必须指定 title 字段为首字母 | array | `[]` |
+| country | 县,每个县的对象中,必须有 name 字段,如果类型选择 custom2,必须指定 title 字段为首字母 | array | `[]` |
+| town | 乡/镇,每个乡/镇的对象中,必须有 name 字段,如果类型选择 custom2,必须指定 title 字段为首字母 | array | `[]` |
+| height | 弹层中内容容器的高度,仅在type="custom2"时有效 | string \| number | `200px` |
+| exist-address | 已存在地址列表,每个地址对象中,必传值provinceName、cityName、countyName、townName、addressDetail、selectedAddress(字段解释见下) | array | `[]` |
+| is-show-custom-address | 是否可以切换自定义地址选择,type=‘exist’ 时生效 | boolean | `true` |
+| custom-address-title  | 自定义地址选择文案,type='custom' 时生效 | string | `请选择所在地区` |
+| exist-address-title| 已有地址文案 ,type=‘exist’ 时生效| string | `配送至` |
+| custom-and-exist-title| 自定义地址与已有地址切换按钮文案 ,type=‘exist’ 时生效| string | `选择其他地址` |
+| columns-placeholder | 列提示文字 | string \| array | `请选择` |
+| lock-scroll  | 背景是否锁定      | boolean        | `true`  |
 
   * provinceName 省的名字
   * cityName 市的名字
@@ -570,9 +570,9 @@ app.use(Address);
 ### Events
 | 字段 | 说明 | 回调参数  |
 |----- | ----- | ----- |
-| change | 自定义选择地址时,选择地区时触发 |  参考 onChange |
-| selected | 选择已有地址列表时触发 | 参考 selected |
-| close | 地址选择弹框关闭时触发 | 参考 close |
+| change | 自定义选择地址时,选择地区时触发 |  参考 `onChange` |
+| selected | 选择已有地址列表时触发 | 参考 `selected` |
+| close | 地址选择弹框关闭时触发 | 参考 `close` |
 | close-mask |点击遮罩层或点击右上角叉号关闭时触发 | {closeWay:'mask'/'cross'} |
 | switch-module | 点击‘选择其他地址’或自定义地址选择左上角返回按钮触发 | {type:'exist'/'custom'/'custom2'} |
 
@@ -587,15 +587,15 @@ app.use(Address);
 ### selected 回调参数
 | 参数 | 说明 | 可能值 |
 |----- | ----- | ----- |
-| 第一个参数(prevExistAdd) |  选择前选中的地址 |  {} |
-| 第二个参数(nowExistAdd) |  当前选中的地址 |  {} |
-| 第三个参数(arr) |  选择完之后的已有地址列表(selectedAddress 值发生改变) |  {} |
+| 第一个参数(prevExistAdd) |  选择前选中的地址 |  `{}` |
+| 第二个参数(nowExistAdd) |  当前选中的地址 |  `{}` |
+| 第三个参数(arr) |  选择完之后的已有地址列表(selectedAddress 值发生改变) |  `{}` |
 
 ### close 回调参数
 | 参数 | 说明 | 可能值 |
 |----- | ----- | ----- |
 | type | 地址选择类型 exist/custom/custom2  |  exist/custom/custom2 |
-| data | 选择地址的值,custom 时,addressStr 为选择的地址组合 | {}  |
+| data | 选择地址的值,custom 时,addressStr 为选择的地址组合 | `{}`  |
 
 ### Slots
 | 字段 | 说明 | 
@@ -611,17 +611,17 @@ app.use(Address);
 
 组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
 
-| 名称                                    | 默认值                     | 描述 |
-| --------------------------------------- | -------------------------- | ---- |
-|  --nut-address-region-tab-line| _linear-gradient(90deg, var(--nut-primary-color) 0%, var(--nut-active-color) 100%)_| -    |
-|  --nut-address-icon-color| _var(--nut-primary-color)_     | -    |
-|  --nut-address-header-title-font-size   | _18px_          | -    |
-|  --nut-address-header-title-color| _#262626_    | -    |
-|  --nut-address-region-tab-font-size| _13px_  | -    |
-|  --nut-address-region-tab-color| _#1d1e1e_  | -    |
-|  --nut-address-region-tab-active-item-font-weight| _bold_    | -    |
-|  --nut-address-region-tab-line-border-radius| _0_   | -    |
-|  --nut-address-region-tab-line-opacity| _1_   | -    |
-|  --nut-address-region-item-color| _#333_    | -    |
-|  --nut-address-region-item-font-size| _var(--nut-font-size-1)_   | -    |
-|  --nut-address-item-margin-right| _9px_  | -    |
+| 名称                                    | 默认值                     | 
+| --------------------------------------- | -------------------------- | 
+|  --nut-address-region-tab-line| _linear-gradient(90deg, var(--nut-primary-color) 0%, var(--nut-active-color) 100%)_| 
+|  --nut-address-icon-color| _var(--nut-primary-color)_     | 
+|  --nut-address-header-title-font-size   | _18px_          | 
+|  --nut-address-header-title-color| _#262626_    | 
+|  --nut-address-region-tab-font-size| _13px_  | 
+|  --nut-address-region-tab-color| _#1d1e1e_  | 
+|  --nut-address-region-tab-active-item-font-weight| _bold_    | 
+|  --nut-address-region-tab-line-border-radius| _0_   | 
+|  --nut-address-region-tab-line-opacity| _1_   | 
+|  --nut-address-region-item-color| _#333_    | 
+|  --nut-address-region-item-font-size| _var(--nut-font-size-1)_   | 
+|  --nut-address-item-margin-right| _9px_  | 

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

@@ -51,7 +51,7 @@ The `fit` attribute is used to set the image filling mode, which is equivalent t
 
 ### Object Position
 
-The position property can be used to set the position of the picture, which is equivalent to the original Object-position property when combined with the FIT property.
+The position property can be used to set the position of the picture, which is equivalent to the original `Object-position` property when combined with the FIT property.
 
 :::demo
 
@@ -88,7 +88,7 @@ The round attribute allows you to set the image to be round. Note that if the im
 
 ### Loading
 
-The Image component provides a default loading prompt and supports custom content through the loading slot.
+The Image component provides a default `loading` prompt and supports custom content through the loading slot.
 
 :::demo
 
@@ -106,7 +106,7 @@ The Image component provides a default loading prompt and supports custom conten
 
 ### Error
 
-The Image component provides a default loading failure warning and supports custom content through the error slot.
+The Image component provides a default loading failure warning and supports custom content through the `error` slot.
 
 :::demo
 
@@ -128,16 +128,16 @@ The Image component provides a default loading failure warning and supports cust
 
 | Attribute         | Description                             | Type   | Default           |
 |--------------|----------------------------------|--------|------------------|
-| src         | Src               | String | -                |
-| fit         | Fit mode, same as object-fit     | ImageFit | 'fill'                |
-| position    | Position, same as object-position  | ImagePosition | 'center'              |
-| alt         | Alt               | String | -                |
-| width         | Width,Default unit px             | String | -                |
-| height         | Height,Default unit px              | String | -                |
-| round         | Whether to be round               | Boolean | false              |
-| radius         | Border Raduis               | String \| Numer | -                |
-| show-error         | Whether to show error placeholder | Boolean | false              |
-| show-loading         | Whether to show loading placeholder | Boolean | true              |
+| src         | Src               | string | -                |
+| fit         | Fit mode, same as object-fit     | ImageFit | `fill`                |
+| position    | Position, same as object-position  | ImagePosition | `center`              |
+| alt         | Alt               | string | -                |
+| width         | Width,Default unit px             | string | -                |
+| height         | Height,Default unit px              | string | -                |
+| round         | Whether to be round               | boolean | `false`              |
+| radius         | Border Raduis               | string \| number | -                |
+| show-error         | Whether to show error placeholder | boolean | `false`              |
+| show-loading         | Whether to show loading placeholder | boolean | `true`              |
 
 ### ImageFit 
 
@@ -171,5 +171,5 @@ The Image component provides a default loading failure warning and supports cust
 |--------|----------------|--------------|
 | click  | Emitted when image is clicked | event: Event |
 | load  | Emitted when image loaded | - |
-| error  | Emitted when image load failed | event: Event |
+| error  | Emitted when image load failed | - |
 

+ 17 - 17
src/packages/__VUE/image/doc.md

@@ -18,7 +18,7 @@ app.use();
 
 ### 基础用法
 
-基础用法与原生 img 标签一致,可以设置 src、width、height、alt 等原生属性。
+基础用法与原生 `img` 标签一致,可以设置 `src``width``height``alt` 等原生属性。
 
 :::demo
 
@@ -32,7 +32,7 @@ app.use();
 
 ### 填充模式
 
-通过 fit 属性可以设置图片填充模式,等同于原生的 object-fit 属性,可选值见下方表格。
+通过 `fit` 属性可以设置图片填充模式,等同于原生的 `object-fit` 属性,可选值见下方表格。
 
 :::demo
 
@@ -50,7 +50,7 @@ app.use();
 
 ### 图片位置
 
-通过 position 属性可以设置图片位置,结合 fit 属性使用,等同于原生的 object-position 属性。
+通过 `position` 属性可以设置图片位置,结合 `fit` 属性使用,等同于原生的 `object-position` 属性。
 
 :::demo
 
@@ -69,7 +69,7 @@ app.use();
 
 ### 圆形图片
 
-通过 round 属性可以设置图片变圆,注意当图片宽高不相等且 fit 为 contain 或 scale-down 时,将无法填充一个完整的圆形。
+通过 `round` 属性可以设置图片变圆,注意当图片宽高不相等且 `fit``contain``scale-down` 时,将无法填充一个完整的圆形。
 
 :::demo
 
@@ -87,7 +87,7 @@ app.use();
 
 ### 加载中图片
 
-`Image` 组件提供了默认的加载中提示,支持通过 `loading` 插槽自定义内容。
+Image 组件提供了默认的加载中提示,支持通过 `loading` 插槽自定义内容。
 
 :::demo
 
@@ -105,7 +105,7 @@ app.use();
 
 ### 加载失败
 
-`Image` 组件提供了默认的加载失败提示,支持通过 `error` 插槽自定义内容。
+Image 组件提供了默认的加载失败提示,支持通过 `error` 插槽自定义内容。
 
 :::demo
 
@@ -127,16 +127,16 @@ app.use();
 
 | 参数         | 说明                             | 类型   | 默认值           |
 |--------------|----------------------------------|--------|------------------|
-| src         | 图片链接               | String | -                |
-| fit         | 图片填充模式,等同于原生的 object-fit 属性     | ImageFit | 'fill'                |
-| position    | 图片位置,等同于原生的 object-position 属性  | ImagePosition | 'center'              |
-| alt         | 替代文本               | String | -                |
-| width         | 宽度,默认单位`px`               | String | -                |
-| height         | 高度,默认单位`px`               | String | -                |
-| round         | 是否显示为圆角               | Boolean | false              |
-| radius         | 圆角大小               | String \| Numer | -                |
-| show-error         | 是否展示图片加载失败| Boolean | false              |
-| show-loading         | 是否展示加载中图片               | Boolean | true              |
+| src         | 图片链接               | string | -                |
+| fit         | 图片填充模式,等同于原生的 `object-fit` 属性     | ImageFit | `fill`                |
+| position    | 图片位置,等同于原生的 `object-position` 属性  | ImagePosition | `center`             |
+| alt         | 替代文本               | string | -                |
+| width         | 宽度,默认单位`px`               | string | -                |
+| height         | 高度,默认单位`px`               | string | -                |
+| round         | 是否显示为圆角               | boolean | `false`              |
+| radius         | 圆角大小               | string \| number | -                |
+| show-error         | 是否展示图片加载失败| boolean | `false`              |
+| show-loading         | 是否展示加载中图片               | boolean | `true`              |
 
 ### ImageFit 图片填充模式
 
@@ -146,7 +146,7 @@ app.use();
 | cover         | 保持宽高缩放图片,使图片的短边能完全显示出来,裁剪长边     |
 | fill    | 拉伸图片,使图片填满元素  |
 | none    | 保持图片原有尺寸  |
-| scale-down    | 取 none 或 contain 中较小的一个  |
+| scale-down    | 取 `none``contain` 中较小的一个  |
 
 ### ImagePosition 图片位置
 

+ 40 - 40
src/packages/__VUE/sku/doc.en-US.md

@@ -421,18 +421,18 @@ setup() {
 
 | Attribute            | Description               | Type   | Default  |
 |--------------|----------------------------------|--------|------------------|
-| v-model:visible         | Whether to open popup               | boolean |  false              |
-| sku         | Sku data | Array | []               |
-| goods |  Product Info    | Object | - |
-| stepper-max         | Stepper max  | [String, Number] | 99999               |
-| stepper-min         | Stepper min  | [String, Number] | 1               |
-| btn-options        |   Bottom button      | Array | ['confirm']           |
-| btn-extra-text | Add text above button | String | -            |
-| stepper-title         | Stepper left text | String | 'Buy Num'                |
-| stepper-extra-text        |   The text between the stepper and the headline       | [Function, false] | false              |
-| buy-text |  Buy button text    | String | Buy It Now |
-| add-cart-text          |        	Add cart button text                 | String | Add  To cart             |
-| confirm-text          |           Confirm button text              | String | Confirm    |
+| v-model:visible         | Whether to open popup               | boolean |  `false`             |
+| sku         | Sku data | array | `[]`               |
+| goods |  Product Info    | object | - |
+| stepper-max         | Stepper max  | string \| number | `99999`               |
+| stepper-min         | Stepper min  | string \| number | `1`               |
+| btn-options        |   Bottom button      | array | `['confirm']`           |
+| btn-extra-text | Add text above button | string | -            |
+| stepper-title         | Stepper left text | string | `Buy Num`                |
+| stepper-extra-text        |   The text between the stepper and the headline       | function \| false  | `false`              |
+| buy-text |  Buy button text    | string | `Buy It Now` |
+| add-cart-text          |        	Add cart button text                 | string | `Add  To cart`             |
+| confirm-text          |           Confirm button text              | string | `Confirm`   |
 
 ### Events
 
@@ -477,7 +477,7 @@ goods:{
 
 ### sku Data Structure
 
-Each array index represents a specification category。Where,list represents the category value under the specification category。Each category value object includes:name、id、active、disable
+Each array index represents a specification category。Where,`list` represents the category value under the specification category。Each category value object includes:`name``id``active``disable`
 
 ```javascript
 sku : [{
@@ -570,31 +570,31 @@ sku : [{
 
 The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider).
 
-| Name | Default Value | Description |
-| --------------------------------------- | -------------------------- | ---- |
-| --nut-sku-item-border|  _1px solid var(--nut-primary-color)_  | -  |
-| --nut-sku-item-disable-line|  _line-through_  | -  |
-| --nut-sku-opetate-bg-default|  _linear-gradient(90deg, var(--nut-primary-color), var(--nut-primary-color-end) 100%)_  | -  |
-| --nut-sku-item-active-bg|  _var(--nut-active-color)_  | -  |
-| --nut-sku-opetate-bg-buy|  _linear-gradient(135deg,rgba(255, 186, 13, 1) 0%,rgba(255, 195, 13, 1) 69%,rgba(255, 207, 13, 1) 100%)_  | -  |
-| --nut-sku-spec-height|  _30px_  | -  |
-| --nut-sku-spec-line-height|  _var(--nut-sku-spec-height)_  | -  |
-| --nut-sku-spec-font-size|  _11px_  | -  |
-| --nut-sku-spec-background|  _rgba(242, 242, 242, 1)_  | -  |
-| --nut-sku-spec-color|  _var(--nut-black)_  | -  |
-| --nut-sku-spec-margin-right|  _12px_  | -  |
-| --nut-sku-spec-padding|  _0 18px_  | -  |
-| --nut-sku-spec-title-font-weight|  _bold_  | -  |
-| --nut-sku-spec-title-font-size|  _13px_  | -  |
-| --nut-sku-spec-title-color|  _var(--nut-black)_  | -  |
-| --nut-sku-spec-title-margin-bottom|  _18px_  | -  |
-| --nut-sku-operate-btn-height|  _54px_  | -  |
-| --nut-sku-operate-btn-border-top|  _0_  | -  |
-| --nut-sku-operate-btn-item-height|  _40px_  | -  |
-| --nut-sku-operate-btn-item-line-height|  _var(--nut-sku-operate-btn-item-height)_  | -  |
-| --nut-sku-operate-btn-item-font-size|  _15px_  | -  |
-| --nut-sku-operate-btn-item-font-weight|  _normal_  | -  |
-| --nut-sku-product-img-width|  _100px_  | -  |
-| --nut-sku-product-img-height|  _var(--nut-sku-product-img-width)_  | -  |
-| --nut-sku-product-img-border-radius|  _0_  | -  |
+| Name | Default Value | 
+| --------------------------------------- | -------------------------- | 
+| --nut-sku-item-border|  _1px solid var(--nut-primary-color)_  |
+| --nut-sku-item-disable-line|  _line-through_  |
+| --nut-sku-opetate-bg-default|  _linear-gradient(90deg, var(--nut-primary-color), var(--nut-primary-color-end) 100%)_  |
+| --nut-sku-item-active-bg|  _var(--nut-active-color)_  |
+| --nut-sku-opetate-bg-buy|  _linear-gradient(135deg,rgba(255, 186, 13, 1) 0%,rgba(255, 195, 13, 1) 69%,rgba(255, 207, 13, 1) 100%)_  |
+| --nut-sku-spec-height|  _30px_  |
+| --nut-sku-spec-line-height|  _var(--nut-sku-spec-height)_  |
+| --nut-sku-spec-font-size|  _11px_  |
+| --nut-sku-spec-background|  _rgba(242, 242, 242, 1)_  |
+| --nut-sku-spec-color|  _var(--nut-black)_  |
+| --nut-sku-spec-margin-right|  _12px_  |
+| --nut-sku-spec-padding|  _0 18px_  |
+| --nut-sku-spec-title-font-weight|  _bold_  |
+| --nut-sku-spec-title-font-size|  _13px_  |
+| --nut-sku-spec-title-color|  _var(--nut-black)_  |
+| --nut-sku-spec-title-margin-bottom|  _18px_  |
+| --nut-sku-operate-btn-height|  _54px_  |
+| --nut-sku-operate-btn-border-top|  _0_  |
+| --nut-sku-operate-btn-item-height|  _40px_  |
+| --nut-sku-operate-btn-item-line-height|  _var(--nut-sku-operate-btn-item-height)_  |
+| --nut-sku-operate-btn-item-font-size|  _15px_  |
+| --nut-sku-operate-btn-item-font-weight|  _normal_  |
+| --nut-sku-product-img-width|  _100px_  |
+| --nut-sku-product-img-height|  _var(--nut-sku-product-img-width)_  |
+| --nut-sku-product-img-border-radius|  _0_  |
 

+ 40 - 40
src/packages/__VUE/sku/doc.md

@@ -420,18 +420,18 @@ setup() {
 
 | 参数         | 说明                             | 类型   | 默认值           |
 |--------------|----------------------------------|--------|------------------|
-| v-model:visible         | 是否显示商品规格弹框               | boolean |  false              |
-| sku         | 商品 sku 数据 | Array | []               |
-| goods |  商品信息    | Object | - |
-| stepper-max         | 设置 inputNumber 最大值  | [String, Number] | 99999               |
-| stepper-min         | 设置 inputNumber 最小值  | [String, Number] | 1               |
-| btn-options        |           底部按钮设置。['confirm','buy','cart' ] 分别对应确定、立即购买、加入购物车              | Array | ['confirm']           |
-| btn-extra-text | 按钮上部添加文案,默认为空,有值时显示 | String | -            |
-| stepper-title         | 数量选择组件左侧文案 | String | '购买数量'                |
-| stepper-extra-text        |   inputNumber 与标题之间的文案       | [Function, false] | false              |
-| buy-text |  立即购买按钮文案    | String | 立即购买 |
-| add-cart-text          |        加入购物车按钮文案                 | String | 加入购物车             |
-| confirm-text          |           确定按钮文案              | String | 确定             |
+| v-model:visible         | 是否显示商品规格弹框               | boolean |  `false`              |
+| sku         | 商品 sku 数据 | array | `[]`               |
+| goods |  商品信息    | object | - |
+| stepper-max         | 设置 inputNumber 最大值  | string \| number | `99999`               |
+| stepper-min         | 设置 inputNumber 最小值  | string \| number | `1`               |
+| btn-options        |           底部按钮设置。['confirm','buy','cart' ] 分别对应确定、立即购买、加入购物车              | array | `['confirm']`           |
+| btn-extra-text | 按钮上部添加文案,默认为空,有值时显示 | string | -            |
+| stepper-title         | 数量选择组件左侧文案 | string | `购买数量`                |
+| stepper-extra-text        |   inputNumber 与标题之间的文案       | function \| false | `false`              |
+| buy-text |  立即购买按钮文案    | string | `立即购买` |
+| add-cart-text          |        加入购物车按钮文案                 | string | `加入购物车 `            |
+| confirm-text          |           确定按钮文案              | string | `确定`             |
 
 ### Events
 
@@ -476,7 +476,7 @@ goods:{
 
 ### sku 数组结构
 
-sku 数组中,每一个数组索引代表一个规格类目。其中,list 代表该规格类目下的类目值。每个类目值对象包括:name、id、active(是否选中)、disable(是否可选)
+sku 数组中,每一个数组索引代表一个规格类目。其中,`list` 代表该规格类目下的类目值。每个类目值对象包括:`name``id``active`(是否选中)、`disable`(是否可选)
 
 ```javascript
 sku : [{
@@ -570,30 +570,30 @@ sku : [{
 
 组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
 
-| 名称                                    | 默认值                     | 描述 |
-| --------------------------------------- | -------------------------- | ---- |
-| --nut-sku-item-border|  _1px solid var(--nut-primary-color)_  | -  |
-| --nut-sku-item-disable-line|  _line-through_  | -  |
-| --nut-sku-opetate-bg-default|  _linear-gradient(90deg, var(--nut-primary-color), var(--nut-primary-color-end) 100%)_  | -  |
-| --nut-sku-item-active-bg|  _var(--nut-active-color)_  | -  |
-| --nut-sku-opetate-bg-buy|  _linear-gradient(135deg,rgba(255, 186, 13, 1) 0%,rgba(255, 195, 13, 1) 69%,rgba(255, 207, 13, 1) 100%)_  | -  |
-| --nut-sku-spec-height|  _30px_  | -  |
-| --nut-sku-spec-line-height|  _var(--nut-sku-spec-height)_  | -  |
-| --nut-sku-spec-font-size|  _11px_  | -  |
-| --nut-sku-spec-background|  _rgba(242, 242, 242, 1)_  | -  |
-| --nut-sku-spec-color|  _var(--nut-black)_  | -  |
-| --nut-sku-spec-margin-right|  _12px_  | -  |
-| --nut-sku-spec-padding|  _0 18px_  | -  |
-| --nut-sku-spec-title-font-weight|  _bold_  | -  |
-| --nut-sku-spec-title-font-size|  _13px_  | -  |
-| --nut-sku-spec-title-color|  _var(--nut-black)_  | -  |
-| --nut-sku-spec-title-margin-bottom|  _18px_  | -  |
-| --nut-sku-operate-btn-height|  _54px_  | -  |
-| --nut-sku-operate-btn-border-top|  _0_  | -  |
-| --nut-sku-operate-btn-item-height|  _40px_  | -  |
-| --nut-sku-operate-btn-item-line-height|  _var(--nut-sku-operate-btn-item-height)_  | -  |
-| --nut-sku-operate-btn-item-font-size|  _15px_  | -  |
-| --nut-sku-operate-btn-item-font-weight|  _normal_  | -  |
-| --nut-sku-product-img-width|  _100px_  | -  |
-| --nut-sku-product-img-height|  _var(--nut-sku-product-img-width)_  | -  |
-| --nut-sku-product-img-border-radius|  _0_  | -  |
+| 名称                                    | 默认值                     | 
+| --------------------------------------- | -------------------------- | 
+| --nut-sku-item-border|  _1px solid var(--nut-primary-color)_  |
+| --nut-sku-item-disable-line|  _line-through_  |
+| --nut-sku-opetate-bg-default|  _linear-gradient(90deg, var(--nut-primary-color), var(--nut-primary-color-end) 100%)_  |
+| --nut-sku-item-active-bg|  _var(--nut-active-color)_  |
+| --nut-sku-opetate-bg-buy|  _linear-gradient(135deg,rgba(255, 186, 13, 1) 0%,rgba(255, 195, 13, 1) 69%,rgba(255, 207, 13, 1) 100%)_  |
+| --nut-sku-spec-height|  _30px_  |
+| --nut-sku-spec-line-height|  _var(--nut-sku-spec-height)_  |
+| --nut-sku-spec-font-size|  _11px_  |
+| --nut-sku-spec-background|  _rgba(242, 242, 242, 1)_  |
+| --nut-sku-spec-color|  _var(--nut-black)_  |
+| --nut-sku-spec-margin-right|  _12px_  |
+| --nut-sku-spec-padding|  _0 18px_  |
+| --nut-sku-spec-title-font-weight|  _bold_  |
+| --nut-sku-spec-title-font-size|  _13px_  |
+| --nut-sku-spec-title-color|  _var(--nut-black)_  |
+| --nut-sku-spec-title-margin-bottom|  _18px_  |
+| --nut-sku-operate-btn-height|  _54px_  |
+| --nut-sku-operate-btn-border-top|  _0_  |
+| --nut-sku-operate-btn-item-height|  _40px_  |
+| --nut-sku-operate-btn-item-line-height|  _var(--nut-sku-operate-btn-item-height)_  |
+| --nut-sku-operate-btn-item-font-size|  _15px_  |
+| --nut-sku-operate-btn-item-font-weight|  _normal_  |
+| --nut-sku-product-img-width|  _100px_  |
+| --nut-sku-product-img-height|  _var(--nut-sku-product-img-width)_  |
+| --nut-sku-product-img-border-radius|  _0_  |

+ 40 - 40
src/packages/__VUE/sku/doc.taro.md

@@ -418,18 +418,18 @@ setup() {
 
 | 参数         | 说明                             | 类型   | 默认值           |
 |--------------|----------------------------------|--------|------------------|
-| v-model:visible         | 是否显示商品规格弹框               | boolean |  false              |
-| sku         | 商品 sku 数据 | Array | []               |
-| goods |  商品信息    | Object | - |
-| stepper-max         | 设置 inputNumber 最大值  | [String, Number] | 99999               |
-| stepper-min         | 设置 inputNumber 最小值  | [String, Number] | 1               |
-| btn-options        |           底部按钮设置。['confirm','buy','cart' ] 分别对应确定、立即购买、加入购物车              | Array | ['confirm']           |
-| btn-extra-text | 按钮上部添加文案,默认为空,有值时显示 | String | -            |
-| stepper-title         | 数量选择组件左侧文案 | String | '购买数量'                |
-| stepper-extra-text        |   inputNumber 与标题之间的文案       | [Function, false] | false              |
-| buy-text |  立即购买按钮文案    | String | 立即购买 |
-| add-cart-text          |        加入购物车按钮文案                 | String | 加入购物车             |
-| confirm-text          |           确定按钮文案              | String | 确定             |
+| v-model:visible         | 是否显示商品规格弹框               | boolean |  `false`              |
+| sku         | 商品 sku 数据 | array | `[]`               |
+| goods |  商品信息    | object | - |
+| stepper-max         | 设置 inputNumber 最大值  | string \| number | `99999`               |
+| stepper-min         | 设置 inputNumber 最小值  | string \| number | `1`               |
+| btn-options        |           底部按钮设置。['confirm','buy','cart' ] 分别对应确定、立即购买、加入购物车              | array | `['confirm']`           |
+| btn-extra-text | 按钮上部添加文案,默认为空,有值时显示 | string | -            |
+| stepper-title         | 数量选择组件左侧文案 | string | `购买数量`                |
+| stepper-extra-text        |   inputNumber 与标题之间的文案       | function \| false | `false`              |
+| buy-text |  立即购买按钮文案    | string | `立即购买` |
+| add-cart-text          |        加入购物车按钮文案                 | string | `加入购物车 `            |
+| confirm-text          |           确定按钮文案              | string | `确定`             |
 
 ### Events
 
@@ -474,7 +474,7 @@ goods:{
 
 ### sku 数组结构
 
-sku 数组中,每一个数组索引代表一个规格类目。其中,list 代表该规格类目下的类目值。每个类目值对象包括:name、id、active(是否选中)、disable(是否可选)
+sku 数组中,每一个数组索引代表一个规格类目。其中,`list` 代表该规格类目下的类目值。每个类目值对象包括:`name``id``active`(是否选中)、`disable`(是否可选)
 
 ```javascript
 sku : [{
@@ -567,31 +567,31 @@ sku : [{
 
 组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
 
-| 名称                                    | 默认值                     | 描述 |
-| --------------------------------------- | -------------------------- | ---- |
-| --nut-sku-item-border|  _1px solid var(--nut-primary-color)_  | -  |
-| --nut-sku-item-disable-line|  _line-through_  | -  |
-| --nut-sku-opetate-bg-default|  _linear-gradient(90deg, var(--nut-primary-color), var(--nut-primary-color-end) 100%)_  | -  |
-| --nut-sku-item-active-bg|  _var(--nut-active-color)_  | -  |
-| --nut-sku-opetate-bg-buy|  _linear-gradient(135deg,rgba(255, 186, 13, 1) 0%,rgba(255, 195, 13, 1) 69%,rgba(255, 207, 13, 1) 100%)_  | -  |
-| --nut-sku-spec-height|  _30px_  | -  |
-| --nut-sku-spec-line-height|  _var(--nut-sku-spec-height)_  | -  |
-| --nut-sku-spec-font-size|  _11px_  | -  |
-| --nut-sku-spec-background|  _rgba(242, 242, 242, 1)_  | -  |
-| --nut-sku-spec-color|  _var(--nut-black)_  | -  |
-| --nut-sku-spec-margin-right|  _12px_  | -  |
-| --nut-sku-spec-padding|  _0 18px_  | -  |
-| --nut-sku-spec-title-font-weight|  _bold_  | -  |
-| --nut-sku-spec-title-font-size|  _13px_  | -  |
-| --nut-sku-spec-title-color|  _var(--nut-black)_  | -  |
-| --nut-sku-spec-title-margin-bottom|  _18px_  | -  |
-| --nut-sku-operate-btn-height|  _54px_  | -  |
-| --nut-sku-operate-btn-border-top|  _0_  | -  |
-| --nut-sku-operate-btn-item-height|  _40px_  | -  |
-| --nut-sku-operate-btn-item-line-height|  _var(--nut-sku-operate-btn-item-height)_  | -  |
-| --nut-sku-operate-btn-item-font-size|  _15px_  | -  |
-| --nut-sku-operate-btn-item-font-weight|  _normal_  | -  |
-| --nut-sku-product-img-width|  _100px_  | -  |
-| --nut-sku-product-img-height|  _var(--nut-sku-product-img-width)_  | -  |
-| --nut-sku-product-img-border-radius|  _0_  | -  |
+| 名称                                    | 默认值                     | 
+| --------------------------------------- | -------------------------- | 
+| --nut-sku-item-border|  _1px solid var(--nut-primary-color)_  |
+| --nut-sku-item-disable-line|  _line-through_  |
+| --nut-sku-opetate-bg-default|  _linear-gradient(90deg, var(--nut-primary-color), var(--nut-primary-color-end) 100%)_  |
+| --nut-sku-item-active-bg|  _var(--nut-active-color)_  |
+| --nut-sku-opetate-bg-buy|  _linear-gradient(135deg,rgba(255, 186, 13, 1) 0%,rgba(255, 195, 13, 1) 69%,rgba(255, 207, 13, 1) 100%)_  |
+| --nut-sku-spec-height|  _30px_  |
+| --nut-sku-spec-line-height|  _var(--nut-sku-spec-height)_  |
+| --nut-sku-spec-font-size|  _11px_  |
+| --nut-sku-spec-background|  _rgba(242, 242, 242, 1)_  |
+| --nut-sku-spec-color|  _var(--nut-black)_  |
+| --nut-sku-spec-margin-right|  _12px_  |
+| --nut-sku-spec-padding|  _0 18px_  |
+| --nut-sku-spec-title-font-weight|  _bold_  |
+| --nut-sku-spec-title-font-size|  _13px_  |
+| --nut-sku-spec-title-color|  _var(--nut-black)_  |
+| --nut-sku-spec-title-margin-bottom|  _18px_  |
+| --nut-sku-operate-btn-height|  _54px_  |
+| --nut-sku-operate-btn-border-top|  _0_  |
+| --nut-sku-operate-btn-item-height|  _40px_  |
+| --nut-sku-operate-btn-item-line-height|  _var(--nut-sku-operate-btn-item-height)_  |
+| --nut-sku-operate-btn-item-font-size|  _15px_  |
+| --nut-sku-operate-btn-item-font-weight|  _normal_  |
+| --nut-sku-product-img-width|  _100px_  |
+| --nut-sku-product-img-height|  _var(--nut-sku-product-img-width)_  |
+| --nut-sku-product-img-border-radius|  _0_  |