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

CHANGELOG.md

@@ -1,3 +1,28 @@
+## v3.3.3
+
+`2022-1-18`
+
+小程序版本依赖 Taro ^3.5.6
+
+NutUI 非常感谢您对开源事业做出的贡献！🌷🌷🌷
+本次社区贡献者 @gyt95  @thx125 @rocwong-cn
+
+
+* :zap: feat(config-provider): 支持统一自定义 icon 、font-class-name、class-prefix (#2016) @thx125
+* :bug: fix(numberkeyboard): type edit (#2067) @Drjingfubo
+* :bug: fix(progress): component optimization (#2060) @Drjingfubo
+* :bug: fix(tabs): the automatic scrolling fails while updating title bar data @gyt95
+* :bug: fix(comment、ellipsis、noticebar、picker、sku): v4 bug 同步修复 @yangxiaolu1993
+* :bug: fix(input、price、addresslist): v4 bug 同步修复 & v3 taro环境input使用bug @ailululu 
+* :bug: fix(uploader): is-deletable在列表模式下不生效 (#2062) @rocwong-cn
+* :bug: fix(collapse、signature): collapse 渲染卡顿问题、signature 组件增加空值返回 (#2061) @Ymm0008
+* :bug: fix: cdn minify bug 3.3.3 @richard1015
+* :bug: fix: 国际化 treeshaking 修复 @richard1015
+* :bug: fix(cell): desc-text-align bug @richard1015
+* :bug: fix(rate): readonly state disable touch  @richard1015
+* :bug: fix(barrage): slot 模式优化 (#2066) @Ymm0008
+* 📖 docs(tabbar): fix format (#2018) @gyt95
+
 ## v3.3.2
 
 `2022-1-4`

package.json

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

publish/nutui-taro/CHANGELOG.md

@@ -1,3 +1,28 @@
+## v3.3.3
+
+`2022-1-18`
+
+小程序版本依赖 Taro ^3.5.6
+
+NutUI 非常感谢您对开源事业做出的贡献！🌷🌷🌷
+本次社区贡献者 @gyt95  @thx125 @rocwong-cn
+
+
+* :zap: feat(config-provider): 支持统一自定义 icon 、font-class-name、class-prefix (#2016) @thx125
+* :bug: fix(numberkeyboard): type edit (#2067) @Drjingfubo
+* :bug: fix(progress): component optimization (#2060) @Drjingfubo
+* :bug: fix(tabs): the automatic scrolling fails while updating title bar data @gyt95
+* :bug: fix(comment、ellipsis、noticebar、picker、sku): v4 bug 同步修复 @yangxiaolu1993
+* :bug: fix(input、price、addresslist): v4 bug 同步修复 & v3 taro环境input使用bug @ailululu 
+* :bug: fix(uploader): is-deletable在列表模式下不生效 (#2062) @rocwong-cn
+* :bug: fix(collapse、signature): collapse 渲染卡顿问题、signature 组件增加空值返回 (#2061) @Ymm0008
+* :bug: fix: cdn minify bug 3.3.3 @richard1015
+* :bug: fix: 国际化 treeshaking 修复 @richard1015
+* :bug: fix(cell): desc-text-align bug @richard1015
+* :bug: fix(rate): readonly state disable touch  @richard1015
+* :bug: fix(barrage): slot 模式优化 (#2066) @Ymm0008
+* 📖 docs(tabbar): fix format (#2018) @gyt95
+
 ## v3.3.2
 
 `2022-1-4`

publish/nutui-taro/package.json

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

publish/nutui/CHANGELOG.md

@@ -1,3 +1,28 @@
+## v3.3.3
+
+`2022-1-18`
+
+小程序版本依赖 Taro ^3.5.6
+
+NutUI 非常感谢您对开源事业做出的贡献！🌷🌷🌷
+本次社区贡献者 @gyt95  @thx125 @rocwong-cn
+
+
+* :zap: feat(config-provider): 支持统一自定义 icon 、font-class-name、class-prefix (#2016) @thx125
+* :bug: fix(numberkeyboard): type edit (#2067) @Drjingfubo
+* :bug: fix(progress): component optimization (#2060) @Drjingfubo
+* :bug: fix(tabs): the automatic scrolling fails while updating title bar data @gyt95
+* :bug: fix(comment、ellipsis、noticebar、picker、sku): v4 bug 同步修复 @yangxiaolu1993
+* :bug: fix(input、price、addresslist): v4 bug 同步修复 & v3 taro环境input使用bug @ailululu 
+* :bug: fix(uploader): is-deletable在列表模式下不生效 (#2062) @rocwong-cn
+* :bug: fix(collapse、signature): collapse 渲染卡顿问题、signature 组件增加空值返回 (#2061) @Ymm0008
+* :bug: fix: cdn minify bug 3.3.3 @richard1015
+* :bug: fix: 国际化 treeshaking 修复 @richard1015
+* :bug: fix(cell): desc-text-align bug @richard1015
+* :bug: fix(rate): readonly state disable touch  @richard1015
+* :bug: fix(barrage): slot 模式优化 (#2066) @Ymm0008
+* 📖 docs(tabbar): fix format (#2018) @gyt95
+
 ## v3.3.2
 
 `2022-1-4`

publish/nutui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nutui/nutui",
-  "version": "3.3.3-beta.1",
+  "version": "3.3.3",
   "description": "京东风格的轻量级移动端 Vue2、Vue3 组件库",
   "main": "dist/nutui.umd.cjs",
   "module": "dist/nutui.es.js",

src/packages/__VUE/audio/demo.vue

@@ -22,7 +22,7 @@
       ref="audioDemo"
     >
       <div class="nut-voice">
-        <div><nut-icon name="voice"></nut-icon></div>
+        <div style="display: flex"><nut-icon name="voice"></nut-icon></div>
         <div>{{ duration }}"</div>
       </div>
     </nut-audio>
@@ -167,6 +167,7 @@ export default createDemo({
   .nut-voice {
     display: flex;
     justify-content: space-between;
+    align-items: center;
     width: 100px;
     height: 20px;
     padding: 8px;

src/packages/__VUE/checkbox/__tests__/__snapshots__/checkbox.spec.ts.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`basic usage 1`] = `
-"<view class=\\"nut-checkbox \\"><i class=\\"nutui-iconfont nut-icon nut-icon-checked nut-checkbox__icon\\" src=\\"\\"></i>
+"<view class=\\"nut-checkbox nut-checkbox--round \\"><i class=\\"nutui-iconfont nut-icon nut-icon-checked nut-checkbox__icon\\" src=\\"\\"></i>
   <view class=\\"nut-checkbox__label \\"></view>
 </view>"
 `;

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

@@ -145,3 +145,22 @@ test('should emit "update:modelValue" event when checkbox is clicked', async ()
   wrapper.trigger('click');
   expect(wrapper.emitted('update:modelValue')![1]).toEqual([false]);
 });
+
+test('checkbox shape test', async () => {
+  const wrapper = mount({
+    components: {
+      'nut-checkbox': Checkbox
+    },
+    template: `
+      <template>
+        <nut-checkbox shape="button"></nut-checkbox>
+        <nut-checkbox></nut-checkbox>
+      </template>
+    `
+  });
+
+  const items = wrapper.findAll('.nut-checkbox');
+
+  expect((items[0] as any).find('.nut-checkbox__button').exists()).toBeTruthy();
+  expect((items[1] as any).find('.nut-checkbox__button').exists()).toBeFalsy();
+});

src/packages/__VUE/checkbox/common.ts

@@ -49,6 +49,10 @@ export const component = (componentName: string, nutIcon: object) => {
       indeterminate: {
         type: Boolean,
         default: false
+      },
+      shape: {
+        type: String,
+        default: 'round' // button
       }
     },
     emits: ['change', 'update:modelValue'],
@@ -124,6 +128,18 @@ export const component = (componentName: string, nutIcon: object) => {
         );
       };
 
+      const renderButton = () => {
+        return h(
+          'view',
+          {
+            class: `${componentName}__button ${pValue.value && `${componentName}__button--active`} ${
+              pDisabled.value ? `${componentName}__button--disabled` : ''
+            }`
+          },
+          slots.default?.()
+        );
+      };
+
       const handleClick = (e: MouseEvent | TouchEvent) => {
         if (pDisabled.value) return;
         if (checked.value && state.partialSelect) {
@@ -133,9 +149,9 @@ export const component = (componentName: string, nutIcon: object) => {
         }
         emitChange(!checked.value, slots.default?.()[0].children as string);
         if (hasParent.value) {
-          let value = parent.value.value;
-          let max = parent.max.value;
-          let { label } = props;
+          const value = parent.value.value;
+          const max = parent.max.value;
+          const { label } = props;
           const index = value.indexOf(label);
           if (index > -1) {
             value.splice(index, 1);
@@ -161,10 +177,12 @@ export const component = (componentName: string, nutIcon: object) => {
         return h(
           'view',
           {
-            class: `${componentName} ${props.textPosition === 'left' ? `${componentName}--reverse` : ''}`,
+            class: `${componentName} ${componentName}--${props.shape} ${
+              props.textPosition === 'left' ? `${componentName}--reverse` : ''
+            }`,
             onClick: handleClick
           },
-          [renderIcon(), renderLabel()]
+          [props.shape == 'button' ? renderButton() : [renderIcon(), renderLabel()]]
         );
       };
     }

src/packages/__VUE/checkbox/demo.vue

@@ -128,6 +128,15 @@
         >
       </nut-checkboxgroup>
     </nut-cell-group>
+
+    <nut-cell-group :title="translate('useShape')">
+      <nut-cell>
+        <nut-checkboxgroup v-model="checkboxgroup6">
+          <nut-checkbox label="1" shape="button">{{ translate('useShape') }}</nut-checkbox>
+          <nut-checkbox label="2" shape="button">{{ translate('useShape') }}</nut-checkbox>
+        </nut-checkboxgroup>
+      </nut-cell>
+    </nut-cell-group>
   </div>
 </template>
 <script lang="ts">
@@ -158,7 +167,8 @@ const initTranslate = () =>
       checkbox: '复选框',
       selectedDisable: '选中时禁用状态',
       unselectDisable: '未选时禁用状态',
-      useGroupInte: '全选/半选/取消'
+      useGroupInte: '全选/半选/取消',
+      useShape: '按钮形状'
     },
     'en-US': {
       basic: 'Basic usage - left and right',
@@ -180,7 +190,8 @@ const initTranslate = () =>
       checkbox: 'check box',
       selectedDisable: 'Disabled when selected',
       unselectDisable: 'Disabled when not selected',
-      useGroupInte: 'Select all / half / cancel'
+      useGroupInte: 'Select all / half / cancel',
+      useShape: 'Button shape'
     }
   });
 export default createDemo({
@@ -204,6 +215,7 @@ export default createDemo({
       checkboxgroup3: ['2'],
       checkboxgroup4: ['2'],
       checkboxgroup5: [],
+      checkboxgroup6: [],
       checkboxsource: [
         { label: '1', value: translate('combine') },
         { label: '2', value: translate('combine') },

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

@@ -385,6 +385,7 @@ When the value changes, the `change` event will be triggered
 | icon-font-class-name | Basic class name of custom icon font        | String                  | `nutui-iconfont` 
 | label | Text content of the check box | String | - 
 | indeterminate | Whether half selection status is currently supported. It is generally used in select all operation       | Boolean                  | `false` |
+| shape `v3.3.4` | Shape, optional values：`button`、`round` | String | `round` |
 
 
 ### CheckboxGroup Props

src/packages/__VUE/checkbox/doc.md

@@ -389,6 +389,7 @@ app.use(Icon);
 | icon-font-class-name | 自定义 icon 字体基础类名        | String                  | `nutui-iconfont` |
 | label | 复选框的文本内容 | String | -
 | indeterminate | 当前是否支持半选状态，一般用在全选操作中        | Boolean                  | `false` |
+| shape `v3.3.4` | 形状，可选值：`button`、`round` | String | `round` |
 ### CheckboxGroup Props
 
 | 字段 | 说明 | 类型 | 默认值

src/packages/__VUE/checkbox/index.scss

@@ -6,6 +6,14 @@
         color: $checkbox-label-disable-color;
       }
     }
+    &__button {
+      background: $dark-background;
+      color: $dark-color;
+      &--disabled {
+        color: $checkbox-label-disable-color;
+        border: 1px solid $checkbox-label-disable-color;
+      }
+    }
   }
 }
 .nut-checkbox {
@@ -18,6 +26,26 @@
       margin-left: 0;
     }
   }
+  &__button {
+    display: inline-flex;
+    align-items: center;
+    padding: $checkbox-button-padding;
+    font-size: $checkbox-button-font-size;
+    background: $checkbox-label-button-bg-color;
+    border-radius: $checkbox-button-border-radius;
+    color: $checkbox-label-color;
+    box-sizing: border-box;
+    border: 1px solid $checkbox-label-button-border-color;
+    &--active {
+      background: $checkbox-label-button-bg-active-color;
+      color: $checkbox-label-font-active-color;
+      border: 1px solid $checkbox-label-button-border-active-color;
+    }
+    &--disabled {
+      color: $checkbox-label-disable-color;
+      border: none;
+    }
+  }
   &__label {
     flex: 1;
     margin-left: $checkbox-label-margin-left;

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

@@ -32,7 +32,6 @@ By default, images of reviews for individual items are displayed in a single sli
     :images="cmt.images"
     :videos="cmt.videos"
     :info="cmt.info"
-    :labels="labels"
     @click="handleclick"
     @clickImages="clickImages"
     :operation="['replay']"
@@ -45,14 +44,11 @@ By default, images of reviews for individual items are displayed in a single sli
     </template>
 </nut-comment>
 </template>
-<script>
+<script lang="ts">
 import { reactive, ref,onMounted } from 'vue';
 export default {
   setup() {
     let cmt = ref({});
-    const labels = () => {
-      return '<nut-icon name="dongdong" color="#fa2c19"></nut-icon>';
-    };
     onMounted(()=>{
       fetch('//storage.360buyimg.com/nutui/3x/comment_data.json')
         .then((response) => response.json())
@@ -69,12 +65,12 @@ export default {
     }
     return {
       cmt,
-      labels,
       handleclick,
       clickImages
     };
   }
 }
+</script>
 
 ```
 :::
@@ -112,7 +108,7 @@ The value of `headerType` allows you to set the image to be displayed in multipl
 </nut-comment>
 
 </template>
-<script>
+<script lang="ts">
 import { reactive, ref,onMounted } from 'vue';
 export default {
   setup() {
@@ -134,7 +130,7 @@ export default {
     };
   }
 }
-
+</script>
 ```
 :::
 
@@ -153,7 +149,7 @@ export default {
 ></nut-comment>
 
 </template>
-<script>
+<script lang="ts">
 import { reactive, ref,onMounted } from 'vue';
 export default {
   setup() {
@@ -175,6 +171,7 @@ export default {
     };
   }
 }
+</script>
 
 ```
 :::
@@ -243,3 +240,15 @@ const info = [{
   "like":1, // Number of likes for this comment
 }]
 ```
+
+### follow 对象
+
+用于存放追评相关的信息。
+
+```javascript
+const follow = {
+  "days": 0, // 购买多少天后进行追评
+  "content": "", // 追评内容
+  "images": [] // 追评图片
+}
+```

src/packages/__VUE/comment/doc.md

@@ -32,7 +32,6 @@ app.use(Rate);
     :images="cmt.images"
     :videos="cmt.videos"
     :info="cmt.info"
-    :labels="labels"
     @click="handleclick"
     @clickImages="clickImages"
     :operation="['replay']"
@@ -45,14 +44,11 @@ app.use(Rate);
     </template>
 </nut-comment>
 </template>
-<script>
+<script lang="ts">
 import { reactive, ref,onMounted } from 'vue';
 export default {
   setup() {
     let cmt = ref({});
-    const labels = () => {
-      return '<nut-icon name="dongdong" color="#fa2c19"></nut-icon>';
-    };
     onMounted(()=>{
       fetch('//storage.360buyimg.com/nutui/3x/comment_data.json')
         .then((response) => response.json())
@@ -69,12 +65,12 @@ export default {
     }
     return {
       cmt,
-      labels,
       handleclick,
       clickImages
     };
   }
 }
+</script>
 
 ```
 :::
@@ -112,7 +108,7 @@ export default {
 </nut-comment>
 
 </template>
-<script>
+<script lang="ts">
 import { reactive, ref,onMounted } from 'vue';
 export default {
   setup() {
@@ -134,6 +130,7 @@ export default {
     };
   }
 }
+</script>
 
 ```
 :::
@@ -153,7 +150,7 @@ export default {
 ></nut-comment>
 
 </template>
-<script>
+<script lang="ts">
 import { reactive, ref,onMounted } from 'vue';
 export default {
   setup() {
@@ -175,7 +172,7 @@ export default {
     };
   }
 }
-
+</script>
 ```
 :::
 ## API
@@ -247,3 +244,15 @@ const info = [{
   "like":1, // 此评论的点赞数
 }]
 ```
+
+### follow 对象
+
+用于存放追评相关的信息。
+
+```javascript
+const follow = {
+  "days": 0, // 购买多少天后进行追评
+  "content": "", // 追评内容
+  "images": [] // 追评图片
+}
+```

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

@@ -290,10 +290,10 @@ Paused and restarted the countdown with the paused attribute
         CountDown.value.reset();
       };
       return {
-          toggle,
-          onpaused,
-          onrestart,
-        ...toRefs(state)
+          start,
+          pause,
+          reset,
+          CountDown
       };
     }
   }

src/packages/__VUE/countdown/doc.md

@@ -293,10 +293,10 @@ app.use(CountDown);
         CountDown.value.reset();
       };
       return {
-          toggle,
-          onpaused,
-          onrestart,
-        ...toRefs(state)
+          start,
+          pause,
+          reset,
+          CountDown
       };
     }
   }

src/packages/__VUE/datepicker/doc.md

@@ -37,7 +37,7 @@ app.use(OverLay);
   ></nut-datepicker> 
 </template>
 
-<script>
+<script lang="ts">
   import { ref } from 'vue';
   export default {
     setup(props) {

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

@@ -2,7 +2,7 @@
   <view
     :class="classes"
     ref="myDrag"
-    :id="'drag-' + refRandomId"
+    :id="'myDrag' + refRandomId"
     class="myDrag"
     @touchstart="touchStart($event)"
     @touchmove.prevent="touchMove($event)"
@@ -21,6 +21,7 @@
 import { onMounted, onDeactivated, onActivated, reactive, ref, computed } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 import requestAniFrame from '@/packages/utils/raf';
+import { useTaroRect } from '@/packages/utils/useTaroRect';
 const { componentName, create } = createComponent('drag');
 import Taro, { eventCenter, getCurrentInstance } from '@tarojs/taro';
 export default create({
@@ -81,18 +82,12 @@ export default create({
       };
     });
     const domElem = Taro.getSystemInfoSync();
-    function getInfo() {
-      const query = Taro.createSelectorQuery();
-      query
-        .select('#drag-' + refRandomId)
-        .boundingClientRect((rec: any) => {
-          state.elWidth = rec.width;
-          state.elHeight = rec.height;
-          state.initTop = rec.top;
-          state.initLeft = rec.left;
-        })
-        .exec();
-      // console.log(domElem.windowWidth);
+    async function getInfo() {
+      const rec = await useTaroRect(myDrag, Taro);
+      state.elWidth = rec.width;
+      state.elHeight = rec.height;
+      state.initTop = rec.top;
+      state.initLeft = rec.left;
 
       state.screenWidth = domElem.screenWidth;
       state.screenHeight = domElem.screenHeight;

src/packages/__VUE/noticebar/demo.vue

@@ -148,10 +148,9 @@ export default createDemo({
 .demo {
   padding-bottom: 30px !important;
 
-  // .interstroll-list {
-  //   padding: 0 10px;
-  //   background: rgba(251, 248, 220, 1);
-  //   color: #d9500b;
-  // }
+  .interstroll-list {
+    background: rgba(251, 248, 220, 1);
+    color: #d9500b;
+  }
 }
 </style>

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

@@ -61,7 +61,7 @@
           <slot name="rightIcon"></slot>
         </template>
         <template v-else-if="closeMode">
-          <nut-icon type="cross" :color="color" size="11px"></nut-icon>
+          <nut-icon v-bind="$attrs" name="close" v-if="closeMode" :color="color" size="11px"></nut-icon>
         </template>
       </view>
     </view>

src/packages/__VUE/noticebar/index.vue

@@ -56,8 +56,8 @@
       </template>
 
       <view class="go" @click="!slots.rightIcon && handleClickIcon()">
-        <slot name="rightIcon">
-          <nut-icon type="cross" v-if="closeMode" :color="color" size="11px"></nut-icon>
+        <slot name="right-icon">
+          <nut-icon v-bind="$attrs" name="close" v-if="closeMode" :color="color" size="11px"></nut-icon>
         </slot>
       </view>
     </view>

src/packages/__VUE/picker/doc.md

@@ -166,15 +166,15 @@ columns 属性可以通过二维数组的形式配置多列选择。
 ```html
 <template>
   <nut-cell title="请选择城市" :desc="desc" @click="()=>{show=true}"></nut-cell>
-    <nut-picker
-      v-model="selectedTime"
-      v-model:visible="show"
-      :columns="multipleColumns"
-      title="城市选择"
-      @confirm="confirm"
-      @change="change"
-    >
-    </nut-picker>
+  <nut-picker
+    v-model="selectedTime"
+    v-model:visible="show"
+    :columns="multipleColumns"
+    title="城市选择"
+    @confirm="confirm"
+    @change="change"
+  >
+  </nut-picker>
 </template>
 <script>
   import { ref } from 'vue';
@@ -207,10 +207,11 @@ columns 属性可以通过二维数组的形式配置多列选择。
         console.log(selectedValue);
       };
 
-      return {show,desc,columns,change, confirm, selectedTime};
+      return {show,desc,change, confirm, selectedTime,multipleColumns};
     }
   };
 </script>
+
 ```
 :::
 
@@ -315,7 +316,7 @@ columns 属性可以通过二维数组的形式配置多列选择。
     @confirm="confirm"
   ></nut-picker>
 </template>
-<script>
+<script lang="ts">
   import { ref, onMounted } from 'vue';
   export default {
     setup(props) {
@@ -362,7 +363,7 @@ Picker 组件在底部和顶部分别设置了插槽，可进行自定义设置
   <nut-cell title="请选择截止时间" :desc="desc" @click="()=>{show=true}"></nut-cell>
   <nut-picker
     v-model:visible="show"
-    :columns="asyncColumns"
+    :columns="effectColumns"
     title="日期选择"
     @confirm="confirm"
   >

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

@@ -1,6 +1,6 @@
 <template>
   <view class="nut-sku-header">
-    <img :src="goods.imagePath" />
+    <img class="nut-sku-header-img" :src="goods.imagePath" />
 
     <view class="nut-sku-header-right">
       <template v-if="getSlots('sku-header-price')">

src/packages/styles/variables-jdb.scss

@@ -509,6 +509,14 @@ $checkbox-label-margin-left: 15px !default;
 $checkbox-label-font-size: 14px !default;
 $checkbox-icon-font-size: 18px !default;
 $checkbox-icon-disable-color2: $help-color !default;
+$checkbox-button-padding: 5px 18px !default;
+$checkbox-button-font-size: 12px !default;
+$checkbox-button-border-radius: 15px !default;
+$checkbox-label-button-bg-color: #f6f7f9 !default;
+$checkbox-label-button-border-color: #f6f7f9 !default;
+$checkbox-label-button-bg-active-color: rgba($primary-color, 0.05) !default;
+$checkbox-label-button-border-active-color: $primary-color !default;
+$checkbox-label-font-active-color: $primary-color !default;
 
 //radio
 $radio-label-font-color: #1d1e1e !default;

src/packages/styles/variables-jddkh.scss

@@ -440,6 +440,14 @@ $checkbox-label-margin-left: 15px !default;
 $checkbox-label-font-size: 14px !default;
 $checkbox-icon-font-size: 18px !default;
 $checkbox-icon-disable-color2: $checkbox-icon-disable-color !default;
+$checkbox-button-padding: 5px 18px !default;
+$checkbox-button-font-size: 12px !default;
+$checkbox-button-border-radius: 15px !default;
+$checkbox-label-button-bg-color: #f6f7f9 !default;
+$checkbox-label-button-border-color: #f6f7f9 !default;
+$checkbox-label-button-bg-active-color: rgba($primary-color, 0.05) !default;
+$checkbox-label-button-border-active-color: $primary-color !default;
+$checkbox-label-font-active-color: $primary-color !default;
 
 //radio
 $radio-label-font-color: #1d1e1e !default;

src/packages/styles/variables-jdt.scss

@@ -416,6 +416,14 @@ $checkbox-label-margin-left: 8px !default;
 $checkbox-label-font-size: 16px !default;
 $checkbox-icon-font-size: 20px !default;
 $checkbox-icon-disable-color2: $help-color !default;
+$checkbox-button-padding: 5px 18px !default;
+$checkbox-button-font-size: 12px !default;
+$checkbox-button-border-radius: 15px !default;
+$checkbox-label-button-bg-color: #f6f7f9 !default;
+$checkbox-label-button-border-color: #f6f7f9 !default;
+$checkbox-label-button-bg-active-color: rgba($primary-color, 0.05) !default;
+$checkbox-label-button-border-active-color: $primary-color !default;
+$checkbox-label-font-active-color: $primary-color !default;
 
 //radio
 $radio-label-font-color: rgba(0, 0, 0, 0.85) !default;

src/packages/styles/variables.scss

@@ -440,6 +440,14 @@ $checkbox-label-margin-left: 15px !default;
 $checkbox-label-font-size: 14px !default;
 $checkbox-icon-font-size: 18px !default;
 $checkbox-icon-disable-color2: $help-color !default;
+$checkbox-button-padding: 5px 18px !default;
+$checkbox-button-font-size: 12px !default;
+$checkbox-button-border-radius: 15px !default;
+$checkbox-label-button-bg-color: #f6f7f9 !default;
+$checkbox-label-button-border-color: #f6f7f9 !default;
+$checkbox-label-button-bg-active-color: rgba($primary-color, 0.05) !default;
+$checkbox-label-button-border-active-color: $primary-color !default;
+$checkbox-label-font-active-color: $primary-color !default;
 
 //radio
 $radio-label-font-color: #1d1e1e !default;

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

@@ -50,6 +50,8 @@
           <nut-checkbox label="2">组合复选框</nut-checkbox>
           <nut-checkbox label="3">组合复选框</nut-checkbox>
           <nut-checkbox label="4">组合复选框</nut-checkbox>
+          <nut-checkbox label="5" shape="button">组合复选框</nut-checkbox>
+          <nut-checkbox label="6" shape="button">组合复选框</nut-checkbox>
         </nut-checkboxgroup>
       </nut-cell>
       <nut-cell>
@@ -106,6 +108,14 @@
         <nut-cell><nut-checkbox label="4">组合复选框</nut-checkbox></nut-cell>
       </nut-checkboxgroup>
     </nut-cell-group>
+    <nut-cell-group title="按钮形状">
+      <nut-cell>
+        <nut-checkboxgroup v-model="checkboxgroup6">
+          <nut-checkbox label="1" shape="button">按钮形状</nut-checkbox>
+          <nut-checkbox label="2" shape="button">按钮形状</nut-checkbox>
+        </nut-checkboxgroup>
+      </nut-cell>
+    </nut-cell-group>
   </div>
 </template>
 <script lang="ts">
@@ -130,6 +140,7 @@ export default {
       checkboxgroup3: ['2'],
       checkboxgroup4: ['2'],
       checkboxgroup5: [],
+      checkboxgroup6: [],
       checkboxsource: [
         { label: '1', value: '组合复选框' },
         { label: '2', value: '组合复选框' },