vxe-pc-ui 4.14.5 → 4.14.7

package/README.md

@@ -23,10 +23,10 @@
 
 * 版本说明
   * **V4**
-    * [x] v4.7 拆分 [vxe-design](https://github.com/x-extends/vxe-design) 可视化组件和基础组件库
+    * [x] v4.7 基于 xe-utils@4.0+，拆分 [vxe-design](https://github.com/x-extends/vxe-design) 可视化组件和基础组件库
     * [x] v4.0 基于 vue3.2~2.7，只支持现代浏览器，不支持 IE
   * **V3**
-    * [x] v3.7 拆分 [vxe-design](https://github.com/x-extends/vxe-design) 可视化组件和基础组件库
+    * [x] v3.7 基于 xe-utils@4.0+，拆分 [vxe-design](https://github.com/x-extends/vxe-design) 可视化组件和基础组件库
     * [x] v3.0 基于 vue2.6~2.7，只支持现代浏览器，不支持 IE
   * **V2**
     * [x] ~~v2.0 基于 vue2.6~2.7，停止维护~~

package/es/checkbox/src/button.js

@@ -2,7 +2,7 @@ import { h, computed, reactive, inject } from 'vue';
 import { defineVxeComponent } from '../../ui/src/comp';
 import XEUtils from 'xe-utils';
 import { getFuncText } from '../../ui/src/utils';
-import { getConfig, createEvent, useSize } from '../../ui';
+import { getConfig, createEvent, useSize, renderEmptyElement } from '../../ui';
 export default defineVxeComponent({
     name: 'VxeCheckboxButton',
     props: {
@@ -59,10 +59,11 @@ export default defineVxeComponent({
             const isChecked = computeIsChecked.value;
             if (disabled === null) {
                 if ($xeCheckboxGroup) {
-                    const { computeIsDisabled: computeIsGroupDisabled, computeIsMaximize: computeIsGroupMaximize } = $xeCheckboxGroup.getComputeMaps();
+                    const { computeIsDisabled: computeIsGroupDisabled, computeIsReadonly: computeIsGroupReadonly, computeIsMaximize: computeIsGroupMaximize } = $xeCheckboxGroup.getComputeMaps();
                     const isGroupDisabled = computeIsGroupDisabled.value;
+                    const isGroupReadonly = computeIsGroupReadonly.value;
                     const isGroupMaximize = computeIsGroupMaximize.value;
-                    return isGroupDisabled || (isGroupMaximize && !isChecked);
+                    return isGroupDisabled || isGroupReadonly || (isGroupMaximize && !isChecked);
                 }
             }
             return disabled;
@@ -95,10 +96,30 @@ export default defineVxeComponent({
         const checkboxButtonPrivateMethods = {};
         Object.assign($xeCheckboxButton, checkboxButtonMethods, checkboxButtonPrivateMethods);
         const renderVN = () => {
-            const { label } = props;
+            const { label, content } = props;
             const vSize = computeSize.value;
             const isDisabled = computeIsDisabled.value;
             const isChecked = computeIsChecked.value;
+            const defaultSlot = slots.default;
+            if ($xeCheckboxGroup) {
+                const { computeIsReadonly: computeIsGroupReadonly } = $xeCheckboxGroup.getComputeMaps();
+                const isGroupReadonly = computeIsGroupReadonly.value;
+                if (isGroupReadonly) {
+                    if (isChecked) {
+                        return h('label', {
+                            class: ['vxe-checkbox vxe-checkbox--button-view', {
+                                    [`size--${vSize}`]: vSize,
+                                    'is--readonly': isGroupReadonly
+                                }]
+                        }, [
+                            h('span', {
+                                class: 'vxe-checkbox--label'
+                            }, defaultSlot ? defaultSlot({}) : getFuncText(content))
+                        ]);
+                    }
+                    return renderEmptyElement($xeCheckboxButton);
+                }
+            }
             return h('label', {
                 key: label,
                 class: ['vxe-checkbox vxe-checkbox--button', {
@@ -116,7 +137,7 @@ export default defineVxeComponent({
                 }),
                 h('span', {
                     class: 'vxe-checkbox--label'
-                }, slots.default ? slots.default({}) : getFuncText(props.content))
+                }, slots.default ? slots.default({}) : getFuncText(content))
             ]);
         };
         $xeCheckboxButton.renderVN = renderVN;

package/es/checkbox/src/checkbox.js

@@ -2,7 +2,7 @@ import { h, computed, inject, reactive } from 'vue';
 import { defineVxeComponent } from '../../ui/src/comp';
 import XEUtils from 'xe-utils';
 import { getFuncText } from '../../ui/src/utils';
-import { getConfig, createEvent, useSize, getIcon } from '../../ui';
+import { getConfig, createEvent, useSize, getIcon, renderEmptyElement } from '../../ui';
 export default defineVxeComponent({
     name: 'VxeCheckbox',
     props: {
@@ -61,10 +61,11 @@ export default defineVxeComponent({
             const isChecked = computeIsChecked.value;
             if (disabled === null) {
                 if ($xeCheckboxGroup) {
-                    const { computeIsDisabled: computeIsGroupDisabled, computeIsMaximize: computeIsGroupMaximize } = $xeCheckboxGroup.getComputeMaps();
+                    const { computeIsDisabled: computeIsGroupDisabled, computeIsReadonly: computeIsGroupReadonly, computeIsMaximize: computeIsGroupMaximize } = $xeCheckboxGroup.getComputeMaps();
                     const isGroupDisabled = computeIsGroupDisabled.value;
+                    const isGroupReadonly = computeIsGroupReadonly.value;
                     const isGroupMaximize = computeIsGroupMaximize.value;
-                    return isGroupDisabled || (isGroupMaximize && !isChecked);
+                    return isGroupDisabled || isGroupReadonly || (isGroupMaximize && !isChecked);
                 }
             }
             return disabled;
@@ -97,11 +98,31 @@ export default defineVxeComponent({
         };
         Object.assign($xeCheckbox, checkboxMethods);
         const renderVN = () => {
-            const { label } = props;
+            const { label, content } = props;
             const vSize = computeSize.value;
             const isDisabled = computeIsDisabled.value;
             const isChecked = computeIsChecked.value;
             const indeterminate = !isChecked && props.indeterminate;
+            const defaultSlot = slots.default;
+            if ($xeCheckboxGroup) {
+                const { computeIsReadonly: computeIsGroupReadonly } = $xeCheckboxGroup.getComputeMaps();
+                const isGroupReadonly = computeIsGroupReadonly.value;
+                if (isGroupReadonly) {
+                    if (isChecked) {
+                        return h('label', {
+                            class: ['vxe-checkbox vxe-checkbox--view', {
+                                    [`size--${vSize}`]: vSize,
+                                    'is--readonly': isGroupReadonly
+                                }]
+                        }, [
+                            h('span', {
+                                class: 'vxe-checkbox--label'
+                            }, defaultSlot ? defaultSlot({}) : getFuncText(content))
+                        ]);
+                    }
+                    return renderEmptyElement($xeCheckbox);
+                }
+            }
             return h('label', {
                 key: label,
                 class: ['vxe-checkbox vxe-checkbox--default', {
@@ -124,7 +145,7 @@ export default defineVxeComponent({
                 }),
                 h('span', {
                     class: 'vxe-checkbox--label'
-                }, slots.default ? slots.default({}) : getFuncText(props.content))
+                }, defaultSlot ? defaultSlot({}) : getFuncText(content))
             ]);
         };
         $xeCheckbox.renderVN = renderVN;

package/es/checkbox/src/group.js

@@ -14,6 +14,10 @@ export default defineVxeComponent({
         modelValue: Array,
         options: Array,
         optionProps: Object,
+        readonly: {
+            type: Boolean,
+            default: null
+        },
         disabled: {
             type: Boolean,
             default: null
@@ -40,11 +44,21 @@ export default defineVxeComponent({
         const xID = XEUtils.uniqueId();
         const reactData = reactive({});
         const internalData = createInternalData();
+        const computeIsReadonly = computed(() => {
+            const { readonly } = props;
+            if (readonly === null) {
+                if ($xeForm) {
+                    return $xeForm.props.readonly;
+                }
+                return false;
+            }
+            return readonly;
+        });
         const computeIsDisabled = computed(() => {
             const { disabled } = props;
             if (disabled === null) {
                 if ($xeForm) {
-                    return $xeForm.props.readonly || $xeForm.props.disabled;
+                    return $xeForm.props.disabled;
                 }
                 return false;
             }
@@ -77,7 +91,8 @@ export default defineVxeComponent({
         });
         const computeMaps = {
             computeIsMaximize,
-            computeIsDisabled
+            computeIsDisabled,
+            computeIsReadonly
         };
         const $xeCheckboxGroup = {
             xID,
@@ -155,8 +170,13 @@ export default defineVxeComponent({
             const valueField = computeValueField.value;
             const labelField = computeLabelField.value;
             const disabledField = computeDisabledField.value;
+            const isReadonly = computeIsReadonly.value;
+            const isDisabled = computeIsDisabled.value;
             return h('div', {
-                class: 'vxe-checkbox-group'
+                class: ['vxe-checkbox-group', {
+                        'is--readonly': isReadonly,
+                        'is--disabled': isDisabled
+                    }]
             }, defaultSlot
                 ? defaultSlot({})
                 : (options

package/es/checkbox/style.css

@@ -21,6 +21,9 @@
   white-space: nowrap;
   line-height: 1;
 }
+.vxe-checkbox {
+  cursor: pointer;
+}
 .vxe-checkbox .vxe-checkbox--icon {
   font-size: 1.22em;
 }
@@ -38,15 +41,15 @@
 .vxe-checkbox.is--checked .vxe-checkbox--icon, .vxe-checkbox.is--indeterminate .vxe-checkbox--icon {
   color: var(--vxe-ui-font-primary-color);
 }
-.vxe-checkbox:not(.is--disabled) {
-  cursor: pointer;
-}
 .vxe-checkbox:not(.is--disabled):hover .vxe-checkbox--icon {
   color: var(--vxe-ui-font-primary-color);
 }
 .vxe-checkbox.is--hidden {
   cursor: default;
 }
+.vxe-checkbox.is--readonly {
+  cursor: auto;
+}
 .vxe-checkbox.is--disabled {
   color: var(--vxe-ui-font-disabled-color);
   cursor: not-allowed;

package/es/checkbox/style.min.css

@@ -1 +1 @@
-.vxe-checkbox-group{display:inline-flex;vertical-align:middle;line-height:1}.vxe-checkbox-slots{display:none}.vxe-checkbox--readonly{color:var(--vxe-ui-font-color);display:inline-flex}.vxe-checkbox{display:inline-flex;vertical-align:middle;white-space:nowrap;line-height:1}.vxe-checkbox .vxe-checkbox--icon{font-size:1.22em}.vxe-checkbox .vxe-checkbox--icon{color:var(--vxe-ui-input-border-color);vertical-align:middle;font-weight:700;-webkit-user-select:none;-moz-user-select:none;user-select:none}.vxe-checkbox.is--checked,.vxe-checkbox.is--indeterminate{color:var(--vxe-ui-font-primary-color)}.vxe-checkbox.is--checked .vxe-checkbox--icon,.vxe-checkbox.is--indeterminate .vxe-checkbox--icon{color:var(--vxe-ui-font-primary-color)}.vxe-checkbox:not(.is--disabled){cursor:pointer}.vxe-checkbox:not(.is--disabled):hover .vxe-checkbox--icon{color:var(--vxe-ui-font-primary-color)}.vxe-checkbox.is--hidden{cursor:default}.vxe-checkbox.is--disabled{color:var(--vxe-ui-font-disabled-color);cursor:not-allowed}.vxe-checkbox.is--disabled .vxe-checkbox--icon{color:var(--vxe-ui-input-disabled-color)}.vxe-checkbox .vxe-checkbox--label{padding-left:.5em;vertical-align:middle}.vxe-checkbox>input[type=checkbox]{position:absolute;width:0;height:0;border:0;-webkit-appearance:none;-moz-appearance:none;appearance:none}.vxe-checkbox:not(.is--disabled)>input:focus+.vxe-checkbox--icon{color:var(--vxe-ui-font-primary-darken-color)}.vxe-checkbox .vxe-checkbox--label{padding-left:.5em;vertical-align:middle;display:inline-block;max-width:50em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vxe-checkbox{font-size:var(--vxe-ui-font-size-default)}.vxe-checkbox.size--medium{font-size:var(--vxe-ui-font-size-medium)}.vxe-checkbox.size--small{font-size:var(--vxe-ui-font-size-small)}.vxe-checkbox.size--mini{font-size:var(--vxe-ui-font-size-mini)}.vxe-checkbox--default,.vxe-checkbox-group{margin-right:var(--vxe-ui-base-margin-gap-default)}.vxe-checkbox--default.size--medium,.vxe-checkbox-group.size--medium{margin-right:var(--vxe-ui-base-margin-gap-medium)}.vxe-checkbox--default.size--small,.vxe-checkbox-group.size--small{margin-right:var(--vxe-ui-base-margin-gap-small)}.vxe-checkbox--default.size--mini,.vxe-checkbox-group.size--mini{margin-right:var(--vxe-ui-base-margin-gap-mini)}.vxe-checkbox--default:last-of-type,.vxe-checkbox-group:last-of-type{margin-right:0}
+.vxe-checkbox-group{display:inline-flex;vertical-align:middle;line-height:1}.vxe-checkbox-slots{display:none}.vxe-checkbox--readonly{color:var(--vxe-ui-font-color);display:inline-flex}.vxe-checkbox{display:inline-flex;vertical-align:middle;white-space:nowrap;line-height:1}.vxe-checkbox{cursor:pointer}.vxe-checkbox .vxe-checkbox--icon{font-size:1.22em}.vxe-checkbox .vxe-checkbox--icon{color:var(--vxe-ui-input-border-color);vertical-align:middle;font-weight:700;-webkit-user-select:none;-moz-user-select:none;user-select:none}.vxe-checkbox.is--checked,.vxe-checkbox.is--indeterminate{color:var(--vxe-ui-font-primary-color)}.vxe-checkbox.is--checked .vxe-checkbox--icon,.vxe-checkbox.is--indeterminate .vxe-checkbox--icon{color:var(--vxe-ui-font-primary-color)}.vxe-checkbox:not(.is--disabled):hover .vxe-checkbox--icon{color:var(--vxe-ui-font-primary-color)}.vxe-checkbox.is--hidden{cursor:default}.vxe-checkbox.is--readonly{cursor:auto}.vxe-checkbox.is--disabled{color:var(--vxe-ui-font-disabled-color);cursor:not-allowed}.vxe-checkbox.is--disabled .vxe-checkbox--icon{color:var(--vxe-ui-input-disabled-color)}.vxe-checkbox .vxe-checkbox--label{padding-left:.5em;vertical-align:middle}.vxe-checkbox>input[type=checkbox]{position:absolute;width:0;height:0;border:0;-webkit-appearance:none;-moz-appearance:none;appearance:none}.vxe-checkbox:not(.is--disabled)>input:focus+.vxe-checkbox--icon{color:var(--vxe-ui-font-primary-darken-color)}.vxe-checkbox .vxe-checkbox--label{padding-left:.5em;vertical-align:middle;display:inline-block;max-width:50em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vxe-checkbox{font-size:var(--vxe-ui-font-size-default)}.vxe-checkbox.size--medium{font-size:var(--vxe-ui-font-size-medium)}.vxe-checkbox.size--small{font-size:var(--vxe-ui-font-size-small)}.vxe-checkbox.size--mini{font-size:var(--vxe-ui-font-size-mini)}.vxe-checkbox--default,.vxe-checkbox-group{margin-right:var(--vxe-ui-base-margin-gap-default)}.vxe-checkbox--default.size--medium,.vxe-checkbox-group.size--medium{margin-right:var(--vxe-ui-base-margin-gap-medium)}.vxe-checkbox--default.size--small,.vxe-checkbox-group.size--small{margin-right:var(--vxe-ui-base-margin-gap-small)}.vxe-checkbox--default.size--mini,.vxe-checkbox-group.size--mini{margin-right:var(--vxe-ui-base-margin-gap-mini)}.vxe-checkbox--default:last-of-type,.vxe-checkbox-group:last-of-type{margin-right:0}

package/es/language/ar-EG.js

@@ -556,6 +556,10 @@ export default {
         contextMenu: {
             loadingText: '加载中...'
         },
+        switch: {
+            onText: '打开',
+            offText: '关闭'
+        },
         gantt: {
             tFullFormat: {
                 year: '{yyyy}年',

package/es/language/de-DE.js

@@ -556,6 +556,10 @@ export default {
         contextMenu: {
             loadingText: '加载中...'
         },
+        switch: {
+            onText: '打开',
+            offText: '关闭'
+        },
         gantt: {
             tFullFormat: {
                 year: '{yyyy}年',

package/es/language/en-US.js

@@ -556,6 +556,10 @@ export default {
         contextMenu: {
             loadingText: 'Loading'
         },
+        switch: {
+            onText: 'On',
+            offText: 'Off'
+        },
         gantt: {
             tFullFormat: {
                 year: '{yyyy}年',

package/es/language/es-ES.js

@@ -556,6 +556,10 @@ export default {
         contextMenu: {
             loadingText: '加载中...'
         },
+        switch: {
+            onText: '打开',
+            offText: '关闭'
+        },
         gantt: {
             tFullFormat: {
                 year: '{yyyy}年',

package/es/language/fr-FR.js

@@ -556,6 +556,10 @@ export default {
         contextMenu: {
             loadingText: '加载中...'
         },
+        switch: {
+            onText: '打开',
+            offText: '关闭'
+        },
         gantt: {
             tFullFormat: {
                 year: '{yyyy}年',

package/es/language/hu-HU.js

@@ -556,6 +556,10 @@ export default {
         contextMenu: {
             loadingText: '加载中...'
         },
+        switch: {
+            onText: '打开',
+            offText: '关闭'
+        },
         gantt: {
             tFullFormat: {
                 year: '{yyyy}年',

package/es/language/hy-AM.js

@@ -556,6 +556,10 @@ export default {
         contextMenu: {
             loadingText: '加载中...'
         },
+        switch: {
+            onText: '打开',
+            offText: '关闭'
+        },
         gantt: {
             tFullFormat: {
                 year: '{yyyy}年',

package/es/language/id-ID.js

@@ -556,6 +556,10 @@ export default {
         contextMenu: {
             loadingText: '加载中...'
         },
+        switch: {
+            onText: '打开',
+            offText: '关闭'
+        },
         gantt: {
             tFullFormat: {
                 year: '{yyyy}年',

package/es/language/it-IT.js

@@ -556,6 +556,10 @@ export default {
         contextMenu: {
             loadingText: '加载中...'
         },
+        switch: {
+            onText: '打开',
+            offText: '关闭'
+        },
         gantt: {
             tFullFormat: {
                 year: '{yyyy}年',

package/es/language/ja-JP.js

@@ -556,6 +556,10 @@ export default {
         contextMenu: {
             loadingText: '加载中...'
         },
+        switch: {
+            onText: '打开',
+            offText: '关闭'
+        },
         gantt: {
             tFullFormat: {
                 year: '{yyyy}年',

package/es/language/ko-KR.js

@@ -556,6 +556,10 @@ export default {
         contextMenu: {
             loadingText: '加载中...'
         },
+        switch: {
+            onText: '打开',
+            offText: '关闭'
+        },
         gantt: {
             tFullFormat: {
                 year: '{yyyy}年',

package/es/language/ms-MY.js

@@ -556,6 +556,10 @@ export default {
         contextMenu: {
             loadingText: '加载中...'
         },
+        switch: {
+            onText: '打开',
+            offText: '关闭'
+        },
         gantt: {
             tFullFormat: {
                 year: '{yyyy}年',

package/es/language/nb-NO.js

@@ -556,6 +556,10 @@ export default {
         contextMenu: {
             loadingText: '加载中...'
         },
+        switch: {
+            onText: '打开',
+            offText: '关闭'
+        },
         gantt: {
             tFullFormat: {
                 year: '{yyyy}年',

package/es/language/pt-BR.js

@@ -556,6 +556,10 @@ export default {
         contextMenu: {
             loadingText: '加载中...'
         },
+        switch: {
+            onText: '打开',
+            offText: '关闭'
+        },
         gantt: {
             tFullFormat: {
                 year: '{yyyy}年',

package/es/language/ru-RU.js

@@ -556,6 +556,10 @@ export default {
         contextMenu: {
             loadingText: '加载中...'
         },
+        switch: {
+            onText: '打开',
+            offText: '关闭'
+        },
         gantt: {
             tFullFormat: {
                 year: '{yyyy}年',

package/es/language/th-TH.js

@@ -556,6 +556,10 @@ export default {
         contextMenu: {
             loadingText: '加载中...'
         },
+        switch: {
+            onText: '打开',
+            offText: '关闭'
+        },
         gantt: {
             tFullFormat: {
                 year: '{yyyy}年',

package/es/language/ug-CN.js

@@ -556,6 +556,10 @@ export default {
         contextMenu: {
             loadingText: '加载中...'
         },
+        switch: {
+            onText: '打开',
+            offText: '关闭'
+        },
         gantt: {
             tFullFormat: {
                 year: '{yyyy}年',

package/es/language/uk-UA.js

@@ -556,6 +556,10 @@ export default {
         contextMenu: {
             loadingText: '加载中...'
         },
+        switch: {
+            onText: '打开',
+            offText: '关闭'
+        },
         gantt: {
             tFullFormat: {
                 year: '{yyyy}年',

package/es/language/uz-UZ.js

@@ -556,6 +556,10 @@ export default {
         contextMenu: {
             loadingText: '加载中...'
         },
+        switch: {
+            onText: '打开',
+            offText: '关闭'
+        },
         gantt: {
             tFullFormat: {
                 year: '{yyyy}年',

package/es/language/vi-VN.js

@@ -556,6 +556,10 @@ export default {
         contextMenu: {
             loadingText: '加载中...'
         },
+        switch: {
+            onText: '打开',
+            offText: '关闭'
+        },
         gantt: {
             tFullFormat: {
                 year: '{yyyy}年',

package/es/language/zh-CHT.js

@@ -556,6 +556,10 @@ export default {
         contextMenu: {
             loadingText: '加载中...'
         },
+        switch: {
+            onText: '打开',
+            offText: '关闭'
+        },
         gantt: {
             tFullFormat: {
                 year: '{yyyy}年',

package/es/language/zh-CN.js

@@ -556,6 +556,10 @@ export default {
         contextMenu: {
             loadingText: '加载中...'
         },
+        switch: {
+            onText: '打开',
+            offText: '关闭'
+        },
         gantt: {
             tFullFormat: {
                 year: '{yyyy}年',

package/es/radio/src/button.js

@@ -2,7 +2,7 @@ import { h, computed, reactive, inject } from 'vue';
 import { defineVxeComponent } from '../../ui/src/comp';
 import XEUtils from 'xe-utils';
 import { getFuncText } from '../../ui/src/utils';
-import { getConfig, createEvent, useSize } from '../../ui';
+import { getConfig, createEvent, useSize, renderEmptyElement } from '../../ui';
 export default defineVxeComponent({
     name: 'VxeRadioButton',
     props: {
@@ -55,8 +55,10 @@ export default defineVxeComponent({
             const { disabled } = props;
             if (disabled === null) {
                 if ($xeRadioGroup) {
-                    const { computeIsDisabled } = $xeRadioGroup.getComputeMaps();
-                    return computeIsDisabled.value;
+                    const { computeIsDisabled: computeIsGroupDisabled, computeIsReadonly: computeIsGroupReadonly } = $xeRadioGroup.getComputeMaps();
+                    const isGroupDisabled = computeIsGroupDisabled.value;
+                    const isGroupReadonly = computeIsGroupReadonly.value;
+                    return isGroupDisabled || isGroupReadonly;
                 }
             }
             return disabled;
@@ -114,12 +116,32 @@ export default defineVxeComponent({
             }
         };
         const renderVN = () => {
-            const { label, checkedValue } = props;
+            const { label, content, checkedValue } = props;
             const radioValue = XEUtils.isUndefined(checkedValue) ? label : checkedValue;
             const vSize = computeSize.value;
             const isDisabled = computeIsDisabled.value;
             const name = computeName.value;
             const isChecked = computeChecked.value;
+            const defaultSlot = slots.default;
+            if ($xeRadioGroup) {
+                const { computeIsReadonly: computeIsGroupReadonly } = $xeRadioGroup.getComputeMaps();
+                const isGroupReadonly = computeIsGroupReadonly.value;
+                if (isGroupReadonly) {
+                    if (isChecked) {
+                        return h('label', {
+                            class: ['vxe-radio vxe-radio--button-view', {
+                                    [`size--${vSize}`]: vSize,
+                                    'is--readonly': isGroupReadonly
+                                }]
+                        }, [
+                            h('span', {
+                                class: 'vxe-checkbox--label'
+                            }, defaultSlot ? defaultSlot({}) : getFuncText(content))
+                        ]);
+                    }
+                    return renderEmptyElement($xeRadioButton);
+                }
+            }
             return h('label', {
                 key: radioValue,
                 class: ['vxe-radio vxe-radio--button', {
@@ -139,7 +161,7 @@ export default defineVxeComponent({
                 }),
                 h('span', {
                     class: 'vxe-radio--label'
-                }, slots.default ? slots.default({}) : getFuncText(props.content))
+                }, defaultSlot ? defaultSlot({}) : getFuncText(content))
             ]);
         };
         $xeRadioButton.renderVN = renderVN;

package/es/radio/src/group.js

@@ -17,6 +17,10 @@ export default defineVxeComponent({
             type: Boolean,
             default: null
         },
+        readonly: {
+            type: Boolean,
+            default: null
+        },
         type: String,
         options: Array,
         optionProps: Object,
@@ -43,11 +47,21 @@ export default defineVxeComponent({
         const { computeSize } = useSize(props);
         const reactData = reactive({});
         const internalData = createInternalData();
+        const computeIsReadonly = computed(() => {
+            const { readonly } = props;
+            if (readonly === null) {
+                if ($xeForm) {
+                    return $xeForm.props.readonly;
+                }
+                return false;
+            }
+            return readonly;
+        });
         const computeIsDisabled = computed(() => {
             const { disabled } = props;
             if (disabled === null) {
                 if ($xeForm) {
-                    return $xeForm.props.readonly || $xeForm.props.disabled;
+                    return $xeForm.props.disabled;
                 }
                 return false;
             }
@@ -57,7 +71,8 @@ export default defineVxeComponent({
             return Object.assign({}, props.defaultConfig);
         });
         const computeMaps = {
-            computeIsDisabled
+            computeIsDisabled,
+            computeIsReadonly
         };
         const $xeRadioGroup = {
             xID,