FAQ中心
页面树结构
转至元数据结尾
转至元数据起始

（本文仅供参考，该宏代码已验证适用于 V11 版本。由于宏代码在特定场景下可能存在限制，如果与实际应用场景不完全匹配，请根据具体需求自行调整相关代码，以确保其满足实际使用要求。）

问题

希望修改仪表盘单选框、多选框样式大小

解决方案

参考以下宏代码

单选框

function main(page: IPage, portlet: IFilterPortlet) {
    // 设置单选框外框样式
    portlet.appendCss('.el-radio__input .el-radio__inner', {
        'height': '100px !important',
        'width': '100px !important'
    })
    // 设置单选框选中点的样式
    portlet.appendCss('.el-radio__inner::after', {
        'height': '100px',
        'width': '100px'
    })
}

function main(page: IPage, portlet: IFilterPortlet) {
    // 设置多选框外框的样式
    portlet.appendCss('.el-checkbox__inner', {
        'height': '128px',
        'width': '128px'
    })
    // 设置多选框对勾的样式
    portlet.appendCss('.el-checkbox__inner::after', {
        'height': '50px',
        'width': '50px'
    })
    // 设置单选框外框样式
    let portletId = portlet.getId()
    let radioInners: HTMLElement = document.querySelectorAll(`.theme__portlet--${portletId} .el-radio__input .el-radio__inner`)
    radioInners.forEach((radioInner) => {
        radioInner.style.height = '80px'
        radioInner.style.width = '80px'
    })
    // 设置单选框选中点的样式
    portlet.appendCss('.el-radio__inner::after', {
        'height': '100px',
        'width': '100px'
    })
}

效果图如下：