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

package.json

@@ -77,7 +77,7 @@
     }
   },
   "dependencies": {
-    "@nutui/icons-vue": "^0.0.23",
+    "@nutui/icons-vue": "^0.0.24",
     "@nutui/icons-vue-taro": "^0.0.8",
     "@tarojs/components": "3.5.6",
     "sass": "^1.50.0",

publish/nutui/package.json

@@ -36,7 +36,7 @@
     "publish:beta": "npm publish --tag=beta"
   },
   "dependencies": {
-    "@nutui/icons-vue": "^0.0.23",
+    "@nutui/icons-vue": "^0.0.24",
     "sass": "^1.50.0"
   },
   "devDependencies": {},

src/packages/__VUE/badge/index.scss

@@ -10,10 +10,10 @@
   position: relative;
   display: inline-block;
   .nut-badge__icon {
+    line-height: normal;
+    transform: $badge-content-transform;
     position: absolute;
     background: $badge-background-color;
-    top: -20%;
-    right: -20%;
     padding: $badge-padding;
     text-align: center;
     border-radius: $badge-border-radius;

src/packages/__VUE/comment/demo.vue

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

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

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

src/packages/__VUE/comment/doc.md

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

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

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

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

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

src/packages/__VUE/datepicker/doc.md

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

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

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

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

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

src/packages/__VUE/indicator/doc.md

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

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

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

src/packages/__VUE/indicator/index.scss

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

src/packages/__VUE/picker/Column.vue

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

src/packages/__VUE/picker/common.ts

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

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

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

src/packages/__VUE/picker/doc.md

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

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

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

src/packages/__VUE/rate/demo.vue

@@ -9,10 +9,13 @@
     <nut-cell class="cell"><nut-rate allow-half v-model="state.val1"></nut-rate></nut-cell>
 
     <h2>{{ translate('title2') }}</h2>
-    <nut-cell class="cell"><nut-rate :icon="HeartFill" v-model="state.val2"></nut-rate></nut-cell>
+    <nut-cell class="cell"><nut-rate :custom-icon="HeartFill" v-model="state.val2"></nut-rate></nut-cell>
 
     <h2>{{ translate('title3') }}</h2>
-    <nut-cell class="cell"><nut-rate :count="6" v-model="state.val3"></nut-rate></nut-cell>
+    <nut-cell class="cell"><nut-rate count="10" v-model="state.val3"></nut-rate></nut-cell>
+
+    <h2>{{ translate('title4') }}</h2>
+    <nut-cell class="cell"><nut-rate active-color="#FFC800" v-model="state.val4"></nut-rate></nut-cell>
 
     <h2>{{ translate('title5') }}</h2>
     <nut-cell class="cell"><nut-rate disabled v-model="state.val5"></nut-rate></nut-cell>
@@ -22,6 +25,9 @@
 
     <h2>{{ translate('title7') }}</h2>
     <nut-cell class="cell"><nut-rate v-model="state.val7" @change="onChange"></nut-rate></nut-cell>
+
+    <h2>{{ translate('title8') }}</h2>
+    <nut-cell class="cell"><nut-rate v-model="state.val8" size="35"></nut-rate></nut-cell>
   </div>
 </template>
 

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

@@ -42,7 +42,7 @@ export default {
 <template>
      <nut-cell class="cell">
          <nut-rate allow-half v-model="value"></nut-rate>
-     </<nut-cell>
+     <nut-cell>
 </template>
 <script lang="ts">
 import { ref } from 'vue';
@@ -62,7 +62,7 @@ export default {
 ```html
 <template>
      <nut-cell class="cell">
-         <nut-rate :icon="HeartFill" v-model="value" />
+         <nut-rate :custom-icon="HeartFill" v-model="value" />
      </nut-cell>
 </template>
 <script lang="ts">
@@ -85,7 +85,7 @@ export default {
 ```html
 <template>
      <nut-cell class="cell">
-         <nut-rate :count="6" v-model="value" />
+         <nut-rate count="10" v-model="value" />
      </nut-cell>
 </template>
 <script lang="ts">
@@ -167,20 +167,44 @@ export default {
 ```
 :::
 
+### Custom Size 35px
+
+:::demo
+```html
+<template>
+    <nut-cell class="cell">
+        <nut-rate v-model="value" size="35" />
+    </nut-cell>
+</template>
+<script lang="ts">
+import { ref } from 'vue';
+export default {
+    setup() {
+        const value = ref(3);
+        return { value }
+    }
+}
+</script>
+```
+:::
+
+
 ## API
 ### Props
 
-| Attribute    | Description                                                                      | Type    | Default |
-|--------------|----------------------------------------------------------------------------------|---------|---------|
-| v-model      | The current number of stars, you can use v-model to bind data in both directions | number  | -       |
-| count        | Total number of stars                                                            | number  | `5`       |
-| active-color | Icon selection color                                                             | string  | `#fa200c` |
-| void-color   | Icon unselected color                                                            | string  | `#ccc`    |
-| allow-half   | half star                                                                        | boolean | `false`   |
-| readonly     | read-only                                                                        | boolean | `false`   |
-| disabled     | whether to disable                                                               | boolean | `false`   |
-| spacing      | spacing                                                                          | number  | `20`      |
-| touchable    | Whether to allow select rate by touch gesture                                    | boolean | `true`    |
+| Attribute    | Description                                                                                     | Type             | Default     |
+|--------------|-------------------------------------------------------------------------------------------------|------------------|-------------|
+| v-model      | The current number of stars, you can use v-model to bind data in both directions                | number \| string | -           |
+| count        | Total number \| string of stars                                                                 | number \| string | `5`         |
+| active-color | Icon selection color                                                                            | string           | `#fa200c`   |
+| void-color   | Icon unselected color                                                                           | string           | `#ccc`      |
+| allow-half   | half star                                                                                       | boolean          | `false`     |
+| readonly     | read-only                                                                                       | boolean          | `false`     |
+| disabled     | whether to disable                                                                              | boolean          | `false`     |
+| spacing      | spacing                                                                                         | number \| string | `20`        |
+| touchable    | Whether to allow select rate by touch gesture                                                   | boolean          | `true`      |
+| size         | `Icon` custom size , eg `20px` `2em` `2rem`                                                     | number \| string | -           |
+| custom-icon  | custom `Icon`, set [VNode](https://vuejs.org/guide/extras/render-function.html#creating-vnodes) | VNode \| h       | `StarFillN` |
 
 
 ### Events

src/packages/__VUE/rate/doc.md

@@ -21,7 +21,7 @@ app.use(Rate);
 ```html
 <template>
     <nut-cell class="cell">
-      <nut-rate v-model="state.val" />
+      <nut-rate v-model="value" />
     </nut-cell>
 </template>
 <script lang="ts">
@@ -43,7 +43,7 @@ export default {
 <template>
     <nut-cell class="cell">
         <nut-rate allow-half v-model="value"></nut-rate>
-    </<nut-cell>
+    <nut-cell>
 </template>
 <script lang="ts">
 import { ref } from 'vue';
@@ -63,7 +63,7 @@ export default {
 ```html
 <template>
     <nut-cell class="cell">
-        <nut-rate :icon="HeartFill" v-model="value" />
+        <nut-rate :custom-icon="HeartFill" v-model="value" />
     </nut-cell>
 </template>
 <script lang="ts">
@@ -86,7 +86,7 @@ export default {
 ```html
 <template>
     <nut-cell class="cell">
-        <nut-rate :count="6" v-model="value" />
+        <nut-rate count="10" v-model="value" />
     </nut-cell>
 </template>
 <script lang="ts">
@@ -167,26 +167,48 @@ export default {
 </script>
 ```
 :::
+### 自定义尺寸 35px
+
+:::demo
+```html
+<template>
+    <nut-cell class="cell">
+        <nut-rate v-model="value" size="35" />
+    </nut-cell>
+</template>
+<script lang="ts">
+import { ref } from 'vue';
+export default {
+    setup() {
+        const value = ref(3);
+        return { value }
+    }
+}
+</script>
+```
+:::
 
 
 
 ## API
 ### Props
 
-| 参数         | 说明                                      | 类型    | 默认值  |
-|--------------|-------------------------------------------|---------|---------|
-| v-model      | 当前 `star` 数，可使用 `v-model` 双向绑定数据 | number  | -       |
-| count        | `star` 总数                                 | number  | `5`       |
-| active-color | 图标选中颜色                              | string  | `#fa200c` |
-| void-color   | 图标未选中颜色                            | string  | `#ccc`    |
-| allow-half   | 是否半星                                  | boolean | `false`   |
-| readonly     | 是否只读                                  | boolean | `false`   |
-| disabled     | 是否禁用                                  | boolean | `false`   |
-| spacing      | 间距                                      | number  | `20`      |
-| touchable    | 是否可以通过滑动手势选择评分              | boolean | `true`    |
+| 参数         | 说明                                                                                                | 类型             | 默认值      |
+|--------------|-----------------------------------------------------------------------------------------------------|------------------|-------------|
+| v-model      | 当前 `star` 数，可使用 `v-model` 双向绑定数据                                                       | number \| string | -           |
+| count        | `star` 总数                                                                                         | number \| string | `5`         |
+| active-color | 图标选中颜色                                                                                        | string           | `#fa200c`   |
+| void-color   | 图标未选中颜色                                                                                      | string           | `#ccc`      |
+| allow-half   | 是否半星                                                                                            | boolean          | `false`     |
+| readonly     | 是否只读                                                                                            | boolean          | `false`     |
+| disabled     | 是否禁用                                                                                            | boolean          | `false`     |
+| spacing      | 间距                                                                                                | number \| string | `20`        |
+| touchable    | 是否可以通过滑动手势选择评分                                                                        | boolean          | `true`      |
+| size         | `Icon` 尺寸大小，如 `20px` `2em` `2rem`                                                             | number \| string | -           |
+| custom-icon  | 自定义 `Icon`, 传入 [VNode](https://cn.vuejs.org/guide/extras/render-function.html#creating-vnodes) | VNode            | `StarFillN` |
 
 ### Events
-| 事件名   | 说明                       | 回调参数 |
+| 事件名 | 说明                       | 回调参数 |
 |--------|----------------------------|----------|
 | change | 当前分值修改时时触发的事件 | 当前值   |
 

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

@@ -62,7 +62,7 @@ export default {
 ```html
 <template>
     <nut-cell class="cell">
-        <nut-rate :icon="HeartFill" v-model="value" />
+        <nut-rate :custom-icon="HeartFill" v-model="value" />
     </nut-cell>
 </template>
 <script lang="ts">
@@ -166,27 +166,45 @@ export default {
 :::
 
 
+### 自定义尺寸 35px
+
+:::demo
+```html
+<template>
+    <nut-cell class="cell">
+        <nut-rate v-model="value" size="35" />
+    </nut-cell>
+</template>
+<script lang="ts">
+import { ref } from 'vue';
+export default {
+    setup() {
+        const value = ref(3);
+        return { value }
+    }
+}
+</script>
+```
+:::
+
 ## API
 ### Props
 
-| 参数            | 说明                                               | 类型    | 默认值           |
-|-----------------|----------------------------------------------------|---------|------------------|
-| v-model         | 当前 `star` 数，可使用 `v-model` 双向绑定数据          | number  | -                |
-| count           | `star` 总数                                          | number  | `5`                |
-| icon-size       | `star` 大小                                          | number  | `18`               |
-| active-color    | 图标选中颜色                                       | string  | `#fa200c `         |
-| void-color      | 图标未选中颜色                                     | string  | `#ccc`             |
-| unchecked-icon  | 使用图标(未选中)[图标名称](#/zh-CN/component/icon) | string  | `star-n`           |
-| checked-icon    | 使用图标(选中)[图标名称](#/zh-CN/component/icon)   | string  | `star-fill-n`      |
-| font-class-name | 自定义icon 字体基础类名                            | string  | `nutui-iconfont` |
-| class-prefix    | 自定义icon 类名前缀，用于使用自定义图标            | string  | `nut-icon`       |
-| allow-half      | 是否半星                                           | Boolean | `false`            |
-| readonly        | 是否只读                                           | Boolean | `false`            |
-| disabled        | 是否禁用                                           | Boolean | `false`            |
-| spacing         | 间距                                               | number  | `20`               |
+| 参数         | 说明                                                                                                | 类型             | 默认值      |
+|--------------|-----------------------------------------------------------------------------------------------------|------------------|-------------|
+| v-model      | 当前 `star` 数，可使用 `v-model` 双向绑定数据                                                       | number \| string | -           |
+| count        | `star` 总数                                                                                         | number \| string | `5`         |
+| active-color | 图标选中颜色                                                                                        | string           | `#fa200c `  |
+| void-color   | 图标未选中颜色                                                                                      | string           | `#ccc`      |
+| allow-half   | 是否半星                                                                                            | Boolean          | `false`     |
+| readonly     | 是否只读                                                                                            | Boolean          | `false`     |
+| disabled     | 是否禁用                                                                                            | Boolean          | `false`     |
+| spacing      | 间距                                                                                                | number \| string | `20`        |
+| size         | `Icon` 尺寸大小，如 `20px` `2em` `2rem`                                                             | number \| string | -           |
+| custom-icon  | 自定义 `Icon`, 传入 [VNode](https://cn.vuejs.org/guide/extras/render-function.html#creating-vnodes) | VNode            | `StarFillN` |
 
 ### Events
-| 事件名   | 说明                       | 回调参数 |
+| 事件名 | 说明                       | 回调参数 |
 |--------|----------------------------|----------|
 | change | 当前分值修改时时触发的事件 | 当前值   |
 

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

@@ -1,10 +1,9 @@
 <template src="./template.html"></template>
 <script lang="ts">
-import { StarN } from '@nutui/icons-vue-taro';
-import { computed, h, Ref, ref } from 'vue';
+import { StarFillN } from '@nutui/icons-vue-taro';
+import { computed, ref } from 'vue';
 import { createComponent, renderIcon } from '@/packages/utils/create';
 import { pxCheck } from '@/packages/utils/pxCheck';
-import { useTouch } from '@/packages/utils/useTouch';
 const { create, componentName } = createComponent('rate');
 export default create({
   props: {
@@ -16,12 +15,16 @@ export default create({
       type: [String, Number],
       default: 0
     },
-    icon: {
+    customIcon: {
       type: Object,
       default: () => {
-        return StarN;
+        return StarFillN;
       }
     },
+    size: {
+      type: [String, Number],
+      default: undefined
+    },
     activeColor: {
       type: String,
       default: ''
@@ -42,16 +45,12 @@ export default create({
       type: Boolean,
       default: false
     },
-    touchable: {
-      type: Boolean,
-      default: true
-    },
     spacing: {
       type: [String, Number],
       default: 14
     }
   },
-  components: { StarN },
+  components: { StarFillN },
   emits: ['update:modelValue', 'change'],
   setup(props: any, { emit, slots }: any) {
     const rateRefs = ref<HTMLElement[]>([]);
@@ -77,42 +76,9 @@ export default create({
       }
       updateVal(value);
     };
-    const getScoreByPosition = (x: number, rateRefs: Ref<HTMLElement[]>, allowHalf: boolean) => {
-      let v = 0;
-      for (let index = rateRefs.value.length - 1; index >= 0; index--) {
-        const item = rateRefs.value[index];
-        if (x > item.offsetLeft) {
-          if (allowHalf) {
-            v = index + (x > item.offsetLeft + item.clientWidth / 2 ? 1 : 0.5);
-          } else {
-            v = index + 1;
-          }
-          break;
-        }
-      }
-      return v;
-    };
-    const touch = useTouch();
-    const touchMethods = {
-      onTouchStart(event: Event) {
-        if (!props.touchable) return;
-        touch.start(event);
-      },
-      onTouchMove(event: Event) {
-        if (!props.touchable || !false) return;
-        touch.move(event);
-        if (touch.isHorizontal()) {
-          if (rateRefs.value) {
-            event.preventDefault();
-            updateVal(getScoreByPosition(touch.moveX.value, rateRefs, props.allowHalf));
-          }
-        }
-      }
-    };
     const refRandomId = Math.random().toString(36).slice(-8);
     return {
       classes,
-      ...touchMethods,
       onClick,
       pxCheck,
       rateRefs,

src/packages/__VUE/rate/index.vue

@@ -1,7 +1,7 @@
 <template src="./template.html"></template>
 <script lang="ts">
 import { computed, h, Ref, ref } from 'vue';
-import { StarN } from '@nutui/icons-vue';
+import { StarFillN } from '@nutui/icons-vue';
 import { createComponent, renderIcon } from '@/packages/utils/create';
 import { pxCheck } from '@/packages/utils/pxCheck';
 import { useTouch } from '@/packages/utils/useTouch';
@@ -16,12 +16,16 @@ export default create({
       type: [String, Number],
       default: 0
     },
-    icon: {
+    customIcon: {
       type: Object,
       default: () => {
-        return h(StarN, { width: 18, height: 18 });
+        return StarFillN;
       }
     },
+    size: {
+      type: [String, Number],
+      default: undefined
+    },
     activeColor: {
       type: String,
       default: ''
@@ -51,7 +55,7 @@ export default create({
       default: 14
     }
   },
-  components: { StarN },
+  components: { StarFillN },
   emits: ['update:modelValue', 'change'],
   setup(props: any, { emit, slots }: any) {
     const rateRefs = ref<HTMLElement[]>([]);
@@ -95,11 +99,11 @@ export default create({
     const touch = useTouch();
     const touchMethods = {
       onTouchStart(event: Event) {
-        if (!props.touchable) return;
+        if (!props.touchable || props.readonly) return;
         touch.start(event);
       },
       onTouchMove(event: Event) {
-        if (!props.touchable || !true) return;
+        if (!props.touchable) return;
         touch.move(event);
         if (touch.isHorizontal()) {
           if (rateRefs.value) {

src/packages/__VUE/rate/template.html

@@ -1,36 +1,20 @@
 <view :class="classes" @touchstart="onTouchStart" @touchmove="onTouchMove">
-    <view
-      class="nut-rate-item"
-      v-for="n in Number(count)"
-      :key="n"
-      ref="rateRefs"
-      :id="'rateRefs-' + refRandomId + n"
-      :style="{ marginRight: pxCheck(spacing) }"
-    >
+  <view class="nut-rate-item" v-for="n in Number(count)" :key="n" ref="rateRefs" :id="'rateRefs-' + refRandomId + n"
+    :style="{ marginRight: pxCheck(spacing) }">
     <view>
       <component
-        :is="renderIcon(icon)"
-        class="nut-rate-item__icon"
-        :class="{ 'nut-rate-item__icon--disabled': disabled || n > modelValue }"
-        :color="n <= modelValue ? activeColor : voidColor"
-        @click="onClick(1, n)"
-      ></component>
+        :is="renderIcon(customIcon,{width:size,height:size,size,color:n <= modelValue ? activeColor : voidColor})"
+        class="nut-rate-item__icon" :class="{ 'nut-rate-item__icon--disabled': disabled || n > modelValue }"
+        @click="onClick(1, n)"></component>
     </view>
-      <view class="nut-rate-item__icon--half" v-if="allowHalf && Number(modelValue) + 1 > n">
-        <component
-          :is="renderIcon(icon)"
-          class="nut-rate-item__icon"
-          :color="n <= Number(modelValue) + 1 ? activeColor : voidColor"
-          @click="onClick(2, n)"
-        ></component>
-      </view>
-      <view class="nut-rate-item__icon--half" v-else-if="allowHalf && Number(modelValue) + 1 < n">
-        <component
-          :is="renderIcon(icon)"
-          class="nut-rate-item__icon nut-rate-item__icon--disabled"
-          :color="voidColor"
-          @click="onClick(2, n)"
-        ></component>
-      </view>
+    <view class="nut-rate-item__icon--half" v-if="allowHalf && Number(modelValue) + 1 > n">
+      <component
+        :is="renderIcon(customIcon,{width:size,height:size,size,color:n <= Number(modelValue) + 1 ? activeColor : voidColor})"
+        class="nut-rate-item__icon" @click="onClick(2, n)"></component>
+    </view>
+    <view class="nut-rate-item__icon--half" v-else-if="allowHalf && Number(modelValue) + 1 < n">
+      <component :is="renderIcon(customIcon,{width:size,height:size,size,color:voidColor})"
+        class="nut-rate-item__icon nut-rate-item__icon--disabled" @click="onClick(2, n)"></component>
     </view>
-  </view>
+  </view>
+</view>

src/packages/styles/variables-jdb.scss

@@ -597,7 +597,7 @@ $badge-color: #fff !default;
 $badge-font-size: $font-size-1 !default;
 $badge-border-radius: 14px !default;
 $badge-padding: 0 5px !default;
-$badge-content-transform: translateY(-50%) translateX(100%) !default;
+$badge-content-transform: translate(50%, -50%) !default;
 $badge-z-index: 1 !default;
 $badge-dot-width: 7px !default;
 $badge-dot-height: 7px !default;
@@ -670,9 +670,9 @@ $tabs-titles-item-line-border-radius: 0 !default;
 $tabs-titles-item-line-opacity: 1 !default;
 
 // indicator
-$indicator-color: $primary-color !default;
+$indicator-bg-color: $primary-color !default;
 $indicator-dot-color: $disable-color !default;
-$indicator-white: $white !default;
+$indicator-color: $white !default;
 $indicator-size: 18px !default;
 $indicator-dot-size: calc($indicator-size / 3) !default;
 $indicator-border-size: $indicator-size + 2 !default;

src/packages/styles/variables-jddkh.scss

@@ -529,7 +529,7 @@ $badge-color: #fff !default;
 $badge-font-size: $font-size-1 !default;
 $badge-border-radius: 8px !default;
 $badge-padding: 0 5px !default;
-$badge-content-transform: translateY(-50%) translateX(100%) !default;
+$badge-content-transform: translate(50%, -50%) !default;
 $badge-z-index: 1 !default;
 $badge-dot-width: 7px !default;
 $badge-dot-height: 7px !default;
@@ -602,9 +602,9 @@ $tabs-titles-item-line-border-radius: 2px !default;
 $tabs-titles-item-line-opacity: 0.8 !default;
 
 // indicator
-$indicator-color: $primary-color !default;
+$indicator-bg-color: $primary-color !default;
 $indicator-dot-color: $disable-color !default;
-$indicator-white: $white !default;
+$indicator-color: $white !default;
 $indicator-size: 18px !default;
 $indicator-dot-size: calc($indicator-size / 3) !default;
 $indicator-border-size: $indicator-size + 2 !default;

src/packages/styles/variables-jdt.scss

@@ -544,7 +544,7 @@ $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-padding: var(--nut-badge-padding, 0 5px) !default;
-$badge-content-transform: var(--nut-badge-content-transform, translateY(-50%) translateX(100%)) !default;
+$badge-content-transform: var(--nut-badge-content-transform, translate(50%, -50%)) !default;
 $badge-z-index: var(--nut-badge-z-index, 1) !default;
 $badge-dot-width: var(--nut-badge-dot-width, 7px) !default;
 $badge-dot-height: var(--nut-badge-dot-height, 7px) !default;
@@ -626,9 +626,9 @@ $tabs-titles-item-line-border-radius: var(--nut-tabs-titles-item-line-border-rad
 $tabs-titles-item-line-opacity: var(--nut-tabs-titles-item-line-opacity, 1) !default;
 
 // indicator
-$indicator-color: var(--nut-indicator-color, $primary-color) !default;
+$indicator-bg-color: var(--nut-indicator-bg-color, $primary-color) !default;
 $indicator-dot-color: var(--nut-indicator-dot-color, $disable-color) !default;
-$indicator-white: var(--nut-indicator-white, $white) !default;
+$indicator-color: var(--nut-indicator-color, $white) !default;
 $indicator-size: var(--nut-indicator-size, 18px) !default;
 $indicator-dot-size: var(--nut-indicator-dot-size, calc($indicator-size / 3)) !default;
 $indicator-border-size: var(--nut-indicator-border-size, $indicator-size + 2) !default;

src/packages/styles/variables.scss

@@ -673,9 +673,9 @@ $tabs-titles-item-line-border-radius: var(--nut-tabs-titles-item-line-border-rad
 $tabs-titles-item-line-opacity: var(--nut-tabs-titles-item-line-opacity, 1) !default;
 
 // indicator
-$indicator-color: var(--nut-indicator-color, $primary-color) !default;
+$indicator-bg-color: var(--nut-indicator-bg-color, $primary-color) !default;
 $indicator-dot-color: var(--nut-indicator-dot-color, $disable-color) !default;
-$indicator-white: var(--nut-indicator-white, $white) !default;
+$indicator-color: var(--nut-indicator-color, $white) !default;
 $indicator-size: var(--nut-indicator-size, 18px) !default;
 $indicator-dot-size: var(--nut-indicator-dot-size, calc($indicator-size / 3)) !default;
 $indicator-border-size: var(--nut-indicator-border-size, $indicator-size + 2) !default;

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

@@ -10,10 +10,13 @@
     <nut-cell class="cell"><nut-rate allow-half v-model="state.val1"></nut-rate></nut-cell>
 
     <h2>自定义 icon </h2>
-    <nut-cell class="cell"><nut-rate :icon="HeartFill" v-model="state.val2"></nut-rate></nut-cell>
+    <nut-cell class="cell"><nut-rate :custom-icon="HeartFill" v-model="state.val2"></nut-rate></nut-cell>
 
     <h2>自定义数量</h2>
-    <nut-cell class="cell"><nut-rate :count="6" v-model="state.val3"></nut-rate></nut-cell>
+    <nut-cell class="cell"><nut-rate count="10" v-model="state.val3"></nut-rate></nut-cell>
+
+    <h2>自定义颜色</h2>
+    <nut-cell class="cell"><nut-rate active-color="#FFC800" v-model="state.val4"></nut-rate></nut-cell>
 
     <h2>禁用状态</h2>
     <nut-cell class="cell"><nut-rate disabled v-model="state.val5"></nut-rate></nut-cell>
@@ -23,6 +26,9 @@
 
     <h2>绑定事件</h2>
     <nut-cell class="cell"><nut-rate v-model="state.val7" @change="onChange"></nut-rate></nut-cell>
+
+    <h2>自定义尺寸 35px</h2>
+    <nut-cell class="cell"><nut-rate v-model="state.val8" size="35"></nut-rate></nut-cell>
   </div>
 </template>
 
@@ -36,7 +42,6 @@ export default {
   components: { HeartFill, StarFillN, Header },
   setup() {
     const env = Taro.getEnv();
-    let { proxy } = getCurrentInstance();
 
     const state = reactive({
       val: 3,
@@ -50,7 +55,7 @@ export default {
       val8: 3
     });
     const onChange = (val) => {
-      // proxy.$toast.text(val);
+      console.log(val);
     };
     return {
       state,