feat: checkbox、radio

pages/component/checkbox/checkbox.test.js

@@ -30,7 +30,7 @@ describe('Checkbox.uvue', () => {
     const checkboxGroupElements = await page.$$('.checkbox-group')
     expect(checkboxGroupElements.length).toBe(3)
     const checkboxElements = await page.$$('.checkbox')
-    expect(checkboxElements.length).toBe(11)
+    expect(checkboxElements.length).toBe(12)
   })
   it('text', async () => {
     const cb = await page.$('.cb1')

pages/component/checkbox/checkbox.uvue

@@ -8,11 +8,14 @@
                 </text>
             </view>
             <view>
-                <checkbox-group class="uni-flex uni-row checkbox-group" @change="testChange">
+                <checkbox-group class="uni-flex uni-row checkbox-group" @change="testChange" style="flex-wrap: wrap;">
                     <checkbox value="cb" :checked="checked" :color="color" style="margin-right: 30rpx;"
                         class="checkbox cb">选中</checkbox>
                     <checkbox value="cb1" style="margin-right: 30rpx;" class="checkbox cb1">{{text}}</checkbox>
                     <checkbox value="cb2" :disabled="disabled" class="checkbox cb2">禁用</checkbox>
+                    <checkbox value="cb3" style="margin-top: 20rpx;" class="checkbox cb3">
+                        {{wrapText}}
+                    </checkbox>
                 </checkbox-group>
             </view>
             <view class="uni-title uni-common-mt">
@@ -35,9 +38,6 @@
                 <text class="uni-title-text">
                     推荐展示样式
                 </text>
-                <text class="uni-subtitle-text">
-                    使用 uni-list 布局
-                </text>
             </view>
         </view>
         <view class="uni-list uni-common-pl">
@@ -61,16 +61,17 @@
         data() {
             return {
                 title: 'checkbox 复选框',
-                items: [{
-                    value: 'USA',
-                    name: '美国',
-                    checked: false
-                },
+                items: [
                     {
                         value: 'CHN',
                         name: '中国',
                         checked: true
                     },
+                    {
+                        value: 'USA',
+                        name: '美国',
+                        checked: false
+                    },
                     {
                         value: 'BRA',
                         name: '巴西',
@@ -94,24 +95,25 @@
                 ] as ItemType[],
 
                 text: '未选中',
+                wrapText: 'uni-app x，终极跨平台方案\nuts，大一统语言',
                 value: [] as string[],
                 disabled: true,
                 checked: true,
-                color: '#007aff'
+                color: '#007aff',
             }
         },
         methods: {
             checkboxChange: function (e : CheckboxGroupChangeEvent) {
-                var items = this.items,
-                    values = e.detail.value;
-                for (var i = 0, lenI = items.length; i < lenI; ++i) {
-                    const item = items[i]
-                    if (values.indexOf(item.value) >= 0) {
-                        item.checked = true
-                    } else {
-                        item.checked = false
-                    }
+                const selectedNames : string[] = []
+                this.items.forEach(item => {
+                    if (e.detail.value.includes(item.value)) {
+                        selectedNames.push(item.name)
                     }
+                })
+                uni.showToast({
+                    icon: 'none',
+                    title: '当前选中:' + selectedNames.join(',')
+                })
             },
             testChange: function (e : CheckboxGroupChangeEvent) {
                 this.value = e.detail.value

pages/component/radio/radio.test.js

@@ -28,7 +28,7 @@ describe('Radio.uvue', () => {
     const radioGroupElements = await page.$$('.radio-group')
     expect(radioGroupElements.length).toBe(3)
     const radioElements = await page.$$('.radio')
-    expect(radioElements.length).toBe(11)
+    expect(radioElements.length).toBe(12)
   })
   it('text', async () => {
     const radio = await page.$('.r1')

pages/component/radio/radio.uvue

@@ -7,13 +7,15 @@
                     默认样式
                 </text>
             </view>
-            <radio-group class="uni-flex uni-row radio-group" @change="testChange">
+            <radio-group class="uni-flex uni-row radio-group" @change="testChange" style="flex-wrap: wrap;">
                 <radio value="r" :checked="checked" :color="color" style="margin-right: 30rpx;" class="radio r">选中
                 </radio>
                 <radio value="r1" style="margin-right: 30rpx;" class="radio r1">{{text}}</radio>
                 <radio value="r2" :disabled="disabled" class="radio r2">禁用</radio>
+                <radio value="r3" class="radio r3" style="margin-top: 20rpx;">{{wrapText}}</radio>
             </radio-group>
         </view>
+
         <view class="uni-padding-wrap">
             <view class="uni-title uni-common-mt">
                 <text class="uni-title-text">
@@ -27,6 +29,7 @@
                 <radio value="r2" color="#FFCC33" style="transform:scale(0.7)" class="radio">未选中</radio>
             </radio-group>
         </view>
+
         <view class="uni-padding-wrap">
             <view class="uni-title uni-common-mt">
                 <text class="uni-title-text">
@@ -54,14 +57,16 @@
         data() {
             return {
                 title: 'radio 单选框',
-                items: [{
-                    value: 'USA',
-                    name: '美国'
-                },
+                items: [
                     {
                         value: 'CHN',
                         name: '中国'
                     },
+                    {
+                        value: 'USA',
+                        name: '美国'
+                    },
+
                     {
                         value: 'BRA',
                         name: '巴西'
@@ -83,6 +88,7 @@
 
                 value: '',
                 text: '未选中',
+                wrapText: 'uni-app x，终极跨平台方案\nuts，大一统语言',
                 disabled: true,
                 checked: true,
                 color: '#007aff'
@@ -90,12 +96,13 @@
         },
         methods: {
             radioChange(e : RadioGroupChangeEvent) {
-                for (let i = 0; i < this.items.length; i++) {
-                    if (this.items[i].value === e.detail.value) {
-                        this.current = i;
-                        break;
-                    }
-                }
+                const selected = this.items.find((item) : boolean => {
+                    return item.value == e.detail.value
+                })
+                uni.showToast({
+                    icon: 'none',
+                    title: '当前选中:' + selected?.name
+                })
             },
             testChange(e : RadioGroupChangeEvent) {
                 this.value = e.detail.value