test: 补充 checkbox iconColor/foreColor 相关测试

pages/component/checkbox/checkbox.uvue

-<script>
-  type ItemType = {
-    value : string
-    name : string
-    checked : boolean
-  }
-  export default {
-    data() {
-      return {
-        items: [
-          {
-            value: 'CHN',
-            name: '中国',
-            checked: true,
-          },
-          {
-            value: 'USA',
-            name: '美国',
-            checked: false,
-          },
-          {
-            value: 'BRA',
-            name: '巴西',
-            checked: false,
-          },
-          {
-            value: 'JPN',
-            name: '日本',
-            checked: false,
-          },
-          {
-            value: 'ENG',
-            name: '英国',
-            checked: false,
-          },
-          {
-            value: 'FRA',
-            name: '法国',
-            checked: false,
-          },
-        ] as ItemType[],
-        testEvent: false,
-        text: '未选中',
-        wrapText: 'uni-app x，终极跨平台方案\nuts，大一统语言',
-        value: [] as string[],
-        disabled: true,
-        checked: true,
-        color: '#007aff',
-        iconColor: '#211cfe',
-        foreColor: '#ff0000',
-        // 组件属性 autotest
-        checked_boolean: false,
-        disabled_boolean: false,
-        color_input: "#007aff",
-        backgroundColor_input: "#ffffff",
-        borderColor_input: "#d1d1d1",
-        activeBackgroundColor_input: "#ffffff",
-        activeBorderColor_input: "#d1d1d1",
-        iconColor_input: "#007aff",
-        foreColor_input: '#ff0000'
-      }
-    },
-    methods: {
-
-      checkboxChange: function (e : UniCheckboxGroupChangeEvent) {
-        // 自动化测试
-        if ((e.target?.tagName ?? '') == 'CHECKBOX-GROUP' && e.type === 'change') {
-          this.testEvent = true
-        }
-
-        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 : UniCheckboxGroupChangeEvent) {
-        this.value = e.detail.value
-      },
-      checkbox_click() { console.log("组件被点击时触发") },
-      checkbox_touchstart() { console.log("手指触摸动作开始") },
-      checkbox_touchmove() { console.log("手指触摸后移动") },
-      checkbox_touchcancel() { console.log("手指触摸动作被打断，如来电提醒，弹窗") },
-      checkbox_touchend() { console.log("手指触摸动作结束") },
-      checkbox_tap() { console.log("手指触摸后马上离开") },
-      checkbox_longpress() { console.log("如果一个组件被绑定了 longpress 事件，那么当用户长按这个组件时，该事件将会被触发。") },
-      change_checked_boolean(checked : boolean) { this.checked_boolean = checked },
-      change_disabled_boolean(checked : boolean) { this.disabled_boolean = checked },
-      confirm_color_input(value : string) { this.color_input = value },
-      confirm_backgroundColor_input(value : string) { this.backgroundColor_input = value },
-      confirm_borderColor_input(value : string) { this.borderColor_input = value },
-      confirm_activeBackgroundColor_input(value : string) { this.activeBackgroundColor_input = value },
-      confirm_activeBorderColor_input(value : string) { this.activeBorderColor_input = value },
-      confirm_iconColor_input(value : string) { this.iconColor_input = value },
-      confirm_foreColor_input(value : string) { this.foreColor_input = value }
-    }
-  }
-</script>
-
-<template>
-  <view class="main">
-    <checkbox :disabled="disabled_boolean" :checked="checked_boolean" :color="color_input" :iconColor="iconColor_input"
-      :foreColor="foreColor_input" :backgroundColor="backgroundColor_input" :borderColor="borderColor_input"
-      :activeBackgroundColor="activeBackgroundColor_input" :activeBorderColor="activeBorderColor_input"
-      @click="checkbox_click" @touchstart="checkbox_touchstart" @touchmove="checkbox_touchmove"
-      @touchcancel="checkbox_touchcancel" @touchend="checkbox_touchend" @tap="checkbox_tap"
-      @longpress="checkbox_longpress"><text>uni-app-x</text></checkbox>
-  </view>
-
-  <scroll-view style="flex: 1">
-    <view class="content">
-      <page-head title="组件属性"></page-head>
-      <boolean-data :defaultValue="false" title="当前是否选中，可用来设置默认选中" @change="change_checked_boolean"></boolean-data>
-      <boolean-data :defaultValue="false" title="是否禁用" @change="change_disabled_boolean"></boolean-data>
-      <input-data defaultValue="#007aff" title="checkbox的颜色" type="text" @confirm="confirm_color_input"></input-data>
-      <input-data defaultValue="#ffffff" title="checkbox默认的背景颜色" type="text"
-        @confirm="confirm_backgroundColor_input"></input-data>
-      <input-data defaultValue="#d1d1d1" title="checkbox默认的边框颜色" type="text"
-        @confirm="confirm_borderColor_input"></input-data>
-      <input-data defaultValue="#ffffff" title="checkbox选中时的背景颜色" type="text"
-        @confirm="confirm_activeBackgroundColor_input"></input-data>
-      <input-data defaultValue="#d1d1d1" title="checkbox选中时的边框颜色" type="text"
-        @confirm="confirm_activeBorderColor_input"></input-data>
-      <input-data defaultValue="#007aff" title="iconColor: checkbox的图标颜色，优先级大于color属性" type="text"
-        @confirm="confirm_iconColor_input"></input-data>
-      <input-data defaultValue="#ff0000" title="foreColor: checkbox的图标颜色，优先级大于color属性" type="text"
-        @confirm="confirm_foreColor_input"></input-data>
-    </view>
-
-    <view>
-      <page-head title="默认及使用"></page-head>
-      <view class="uni-padding-wrap uni-common-mt">
-        <view class="uni-title uni-common-mt">
-          <text class="uni-title-text"> 默认样式 </text>
-        </view>
-        <view>
-          <checkbox-group class="uni-flex uni-row checkbox-group" @change="testChange" style="flex-wrap: wrap">
-            <checkbox value="cb" :checked="checked" :color="color" :iconColor="iconColor" :foreColor="foreColor"
-              style="margin-right: 15px" class="checkbox cb">选中
-            </checkbox>
-            <checkbox value="cb1" style="margin-right: 15px" class="checkbox cb1">{{ text }}</checkbox>
-            <checkbox value="cb2" :disabled="disabled" class="checkbox cb2">禁用</checkbox>
-            <checkbox value="cb3" style="margin-top: 10px" class="checkbox cb3">
-              {{ wrapText }}
-            </checkbox>
-          </checkbox-group>
-        </view>
-        <view class="uni-title uni-common-mt">
-          <text class="uni-title-text"> 不同颜色和尺寸的checkbox </text>
-        </view>
-        <view>
-          <checkbox-group class="uni-flex uni-row checkbox-group">
-            <checkbox value="cb1" :checked="true" color="#FFCC33" style="transform: scale(0.7); margin-right: 15px"
-              class="checkbox">选中
-            </checkbox>
-            <checkbox value="cb" color="#FFCC33" style="transform: scale(0.7)" class="checkbox">未选中</checkbox>
-          </checkbox-group>
-        </view>
-      </view>
-
-      <view class="uni-padding-wrap">
-        <view class="uni-title uni-common-mt">
-          <text class="uni-title-text"> 推荐展示样式 </text>
-        </view>
-      </view>
-      <view class="uni-list uni-common-pl">
-        <checkbox-group @change="checkboxChange" class="checkbox-group" id="trigger-change">
-          <checkbox class="uni-list-cell uni-list-cell-pd checkbox" v-for="(item, index) in items" :key="item.value"
-            :value="item.value" :checked="item.checked" :class="[
-              index < items.length - 1 ? 'uni-list-cell-line' : '',
-              'checkbox-item-' + index,
-            ]">
-            {{ item.name }}
-          </checkbox>
-        </checkbox-group>
-      </view>
-    </view>
-  </scroll-view>
-</template>
-
-<style>
-  .main {
-    max-height: 250px;
-    padding: 5px 0;
-    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
-    flex-direction: row;
-    justify-content: center;
-  }
-
-  .main .list-item {
-    width: 100%;
-    height: 100px;
-    border: 1px solid #666;
-  }
-
-  .uni-list-cell {
-    justify-content: flex-start;
-  }
+<script>
+  type ItemType = {
+    value : string
+    name : string
+    checked : boolean
+  }
+  export default {
+    data() {
+      return {
+        items: [
+          {
+            value: 'CHN',
+            name: '中国',
+            checked: true,
+          },
+          {
+            value: 'USA',
+            name: '美国',
+            checked: false,
+          },
+          {
+            value: 'BRA',
+            name: '巴西',
+            checked: false,
+          },
+          {
+            value: 'JPN',
+            name: '日本',
+            checked: false,
+          },
+          {
+            value: 'ENG',
+            name: '英国',
+            checked: false,
+          },
+          {
+            value: 'FRA',
+            name: '法国',
+            checked: false,
+          },
+        ] as ItemType[],
+        testEvent: false,
+        text: '未选中',
+        wrapText: 'uni-app x，终极跨平台方案\nuts，大一统语言',
+        value: [] as string[],
+        disabled: true,
+        checked: true,
+        color: '#007aff',
+        iconColor: '#211cfe',
+        foreColor: '#ff0000',
+        // 组件属性 autotest
+        checked_boolean: false,
+        disabled_boolean: false,
+        color_input: "#007aff",
+        backgroundColor_input: "#ffffff",
+        borderColor_input: "#d1d1d1",
+        activeBackgroundColor_input: "#ffffff",
+        activeBorderColor_input: "#d1d1d1",
+        iconColor_input: "#007aff",
+        foreColor_input: '#ff0000'
+      }
+    },
+    methods: {
+
+      checkboxChange: function (e : UniCheckboxGroupChangeEvent) {
+        // 自动化测试
+        if ((e.target?.tagName ?? '') == 'CHECKBOX-GROUP' && e.type === 'change') {
+          this.testEvent = true
+        }
+
+        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 : UniCheckboxGroupChangeEvent) {
+        this.value = e.detail.value
+      },
+      checkbox_click() { console.log("组件被点击时触发") },
+      checkbox_touchstart() { console.log("手指触摸动作开始") },
+      checkbox_touchmove() { console.log("手指触摸后移动") },
+      checkbox_touchcancel() { console.log("手指触摸动作被打断，如来电提醒，弹窗") },
+      checkbox_touchend() { console.log("手指触摸动作结束") },
+      checkbox_tap() { console.log("手指触摸后马上离开") },
+      checkbox_longpress() { console.log("如果一个组件被绑定了 longpress 事件，那么当用户长按这个组件时，该事件将会被触发。") },
+      change_checked_boolean(checked : boolean) { this.checked_boolean = checked },
+      change_disabled_boolean(checked : boolean) { this.disabled_boolean = checked },
+      confirm_color_input(value : string) { this.color_input = value },
+      confirm_backgroundColor_input(value : string) { this.backgroundColor_input = value },
+      confirm_borderColor_input(value : string) { this.borderColor_input = value },
+      confirm_activeBackgroundColor_input(value : string) { this.activeBackgroundColor_input = value },
+      confirm_activeBorderColor_input(value : string) { this.activeBorderColor_input = value },
+      confirm_iconColor_input(value : string) { this.iconColor_input = value },
+      confirm_foreColor_input(value : string) { this.foreColor_input = value }
+    }
+  }
+</script>
+
+<template>
+  <view class="main">
+    <checkbox :disabled="disabled_boolean" :checked="checked_boolean" :color="color_input" :iconColor="iconColor_input"
+      :foreColor="foreColor_input" :backgroundColor="backgroundColor_input" :borderColor="borderColor_input"
+      :activeBackgroundColor="activeBackgroundColor_input" :activeBorderColor="activeBorderColor_input"
+      @click="checkbox_click" @touchstart="checkbox_touchstart" @touchmove="checkbox_touchmove"
+      @touchcancel="checkbox_touchcancel" @touchend="checkbox_touchend" @tap="checkbox_tap"
+      @longpress="checkbox_longpress"><text>uni-app-x</text></checkbox>
+  </view>
+
+  <scroll-view style="flex: 1">
+    <view class="content">
+      <page-head title="组件属性"></page-head>
+      <boolean-data :defaultValue="false" title="当前是否选中，可用来设置默认选中" @change="change_checked_boolean"></boolean-data>
+      <boolean-data :defaultValue="false" title="是否禁用" @change="change_disabled_boolean"></boolean-data>
+      <input-data defaultValue="#007aff" title="checkbox的颜色" type="text" @confirm="confirm_color_input"></input-data>
+      <input-data defaultValue="#ffffff" title="checkbox默认的背景颜色" type="text"
+        @confirm="confirm_backgroundColor_input"></input-data>
+      <input-data defaultValue="#d1d1d1" title="checkbox默认的边框颜色" type="text"
+        @confirm="confirm_borderColor_input"></input-data>
+      <input-data defaultValue="#ffffff" title="checkbox选中时的背景颜色" type="text"
+        @confirm="confirm_activeBackgroundColor_input"></input-data>
+      <input-data defaultValue="#d1d1d1" title="checkbox选中时的边框颜色" type="text"
+        @confirm="confirm_activeBorderColor_input"></input-data>
+      <input-data defaultValue="#007aff" title="iconColor: checkbox的图标颜色，优先级大于color属性" type="text"
+        @confirm="confirm_iconColor_input"></input-data>
+      <input-data defaultValue="#ff0000" title="foreColor: checkbox的图标颜色，优先级大于color属性" type="text"
+        @confirm="confirm_foreColor_input"></input-data>
+    </view>
+
+    <view>
+      <page-head title="默认及使用"></page-head>
+      <view class="uni-padding-wrap uni-common-mt">
+        <view class="uni-title uni-common-mt">
+          <text class="uni-title-text"> 默认样式 </text>
+        </view>
+        <view>
+          <checkbox-group class="uni-flex uni-row checkbox-group" @change="testChange" style="flex-wrap: wrap">
+            <checkbox value="cb" :checked="checked" :color="color" :iconColor="iconColor" :foreColor="foreColor"
+              style="margin-right: 15px" class="checkbox cb">选中
+            </checkbox>
+            <checkbox value="cb1" style="margin-right: 15px" class="checkbox cb1">{{ text }}</checkbox>
+            <checkbox value="cb2" :disabled="disabled" class="checkbox cb2">禁用</checkbox>
+            <checkbox value="cb3" style="margin-top: 10px" class="checkbox cb3">
+              {{ wrapText }}
+            </checkbox>
+          </checkbox-group>
+        </view>
+        <view class="uni-title uni-common-mt">
+          <text class="uni-title-text"> 不同颜色和尺寸的checkbox </text>
+        </view>
+        <view>
+          <checkbox-group class="uni-flex uni-row checkbox-group">
+            <checkbox value="cb1" :checked="true" color="#FFCC33" style="transform: scale(0.7); margin-right: 15px"
+              class="checkbox">选中
+            </checkbox>
+            <checkbox value="cb" color="#FFCC33" style="transform: scale(0.7)" class="checkbox">未选中</checkbox>
+          </checkbox-group>
+        </view>
+      </view>
+
+      <view class="uni-padding-wrap">
+        <view class="uni-title uni-common-mt">
+          <text class="uni-title-text"> 推荐展示样式 </text>
+        </view>
+      </view>
+      <view class="uni-list uni-common-pl">
+        <checkbox-group @change="checkboxChange" class="checkbox-group" id="trigger-change">
+          <checkbox class="uni-list-cell uni-list-cell-pd checkbox" v-for="(item, index) in items" :key="item.value"
+            :value="item.value" :checked="item.checked" :class="[
+              index < items.length - 1 ? 'uni-list-cell-line' : '',
+              'checkbox-item-' + index,
+            ]">
+            {{ item.name }}
+          </checkbox>
+        </checkbox-group>
+      </view>
+    </view>
+  </scroll-view>
+</template>
+
+<style>
+  .main {
+    max-height: 250px;
+    padding: 5px 0;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+    flex-direction: row;
+    justify-content: center;
+  }
+
+  .main .list-item {
+    width: 100%;
+    height: 100px;
+    border: 1px solid #666;
+  }
+
+  .uni-list-cell {
+    justify-content: flex-start;
+  }
 </style>