antd vue Layout 組件收縮展開自定義

data變量

//collapsed 當前收起狀態
collapsed: false,

組件設置

<!--右邊頭部-->
<a-layout-header style="background: #fff; padding: 0" >
    <!--收縮/展開-->
    <div @click="function() {
      collapsed = !collapsed;
    }" id="fold_or_unfold">
        <div v-if="collapsed">
            <a-icon type="right-square" :style="{ fontSize: '20px', color: '#08c' }" />
        </div>
        <div v-else>
            <a-icon type="left-square" :style="{ fontSize: '20px', color: '#08c' }"/>
        </div>
    </div>
   

</a-layout-header>

css

/*隱藏原本的圖標*/
.ant-layout-sider-trigger{
    display: none;
}
/*收縮展開*/
#fold_or_unfold{
    float: left;
    margin-left: 20px;
}

效果