WEB程序开发笔记

Ant Design Pro of Vue 修改侧栏菜单宽度的正确姿势

原创
作者：程序员三丰
发布时间：2022-08-31 18:00
标签： Javascript Vue Ant Design Pro of Vue
浏览量：925

本文教会您 Ant Design Pro of Vue v3.0.2 管理后台修改侧栏菜单宽度的正确方法，超简单，不改 CSS。

只需要在 `src/layouts/BasicLayout.vue` 给 `pro-layout`组件增加一个属性 `siderWidth` 即可，通过阅读源码，这个属性就是用来设置侧栏宽度的，它的值设置为一个数值即可，比如 200 或 220。

下面附上代码片段

<!-- file: src/layouts/BasicLayout.vue -->

<template>
    <pro-layout
        :menus="menus"
        :collapsed="collapsed"
        :mediaQuery="query"
        :isMobile="isMobile"
        :handleMediaQuery="handleMediaQuery"
        :handleCollapse="handleCollapse"
        :i18nRender="i18nRender"
        :siderWidth="200"
        v-bind="settings"
    >
    // ……其他代码

附实测代码截图

Ant Design Pro of Vue 修改侧栏菜单宽度设置图片教程

声明：本文为原创文章，51blog.xyz和作者拥有版权，如需转载，请注明来源于51blog.xyz并保留原文链接：https://www.51blog.xyz/article/32

文章归档

PHP后端

Javascript前端

HTML/CSS

开发运维

资源分享

Go入门学习笔记

Python

Thinkphp8 Vue3 Element PLus TypeScript Vite Pinia

🔥BuildAdmin是一个永久免费开源，无需授权即可商业使用，且使用了流行技术栈快速创建商业级后台管理系统。

Ant Design Pro of Vue 修改侧栏菜单宽度的正确姿势

只需要在 `src/layouts/BasicLayout.vue` 给 `pro-layout`组件增加一个属性 `siderWidth` 即可，通过阅读源码，这个属性就是用来设置侧栏宽度的，它的值设置为一个数值即可，比如 200 或 220。

文章归档

推荐文章

热门标签

友情链接

Ant Design Pro of Vue 修改侧栏菜单宽度的正确姿势

只需要在 src/layouts/BasicLayout.vue 给 pro-layout组件增加一个属性 siderWidth 即可，通过阅读源码，这个属性就是用来设置侧栏宽度的，它的值设置为一个数值即可，比如 200 或 220。

文章归档

推荐文章

热门标签

友情链接

只需要在 `src/layouts/BasicLayout.vue` 给 `pro-layout`组件增加一个属性 `siderWidth` 即可，通过阅读源码，这个属性就是用来设置侧栏宽度的，它的值设置为一个数值即可，比如 200 或 220。