在使用Ant design Vue的布局组件时，通常会用到左右布局的sider，但是其宽度是固定不变的，如果想调整其宽度不太方便。本文通过将其宽度动态改变的方式来实现效果。工具/原料moreVueAnt design vue方法/步骤1/6分步阅读

在页面中使用layout布局组件，同时使用layout-sider，将其样式用动态属性元素存储。

2/6

然后在页面中增加两个按钮，用来增大和缩小sider的宽度，来实现sider宽度动态改变的目的。

3/6

在增加宽度的按钮，增加事件，addWidth，用来判断当宽度小于某个最大宽度时，动态增加宽度。

4/6

在缩小宽度的按钮，增加事件，minusWidth，用来判断当宽度大于某个最大宽度时，动态缩小宽度。

5/6

我们点击增加宽度的按钮，发现宽度按照规律不断增加，当增加到最大宽度后不再变化。

6/6

我们点击缩小宽度的按钮，发现宽度按照规律不断缩小，当缩小到最小宽度后不再变化。

SIDER宽度自动