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'
    })
}

效果图如下：

  • 无标签