<cn> #### 自定义触发器 要使用自定义触发器,可以设置 `:trigger="null"` 来隐藏默认设定。 </cn> <us> #### Custom trigger If you want to use a customized trigger, you can hide the default one by setting `:trigger="null"`. </us> ```html <template> <a-layout id="components-layout-demo-custom-trigger"> <a-layout-sider :trigger="null" collapsible v-model="collapsed" > <div class="logo" /> <a-menu theme="dark" mode="inline" :defaultSelectedKeys="['1']"> <a-menu-item key="1"> <a-icon type="user" /> <span>nav 1</span> </a-menu-item> <a-menu-item key="2"> <a-icon type="video-camera" /> <span>nav 2</span> </a-menu-item> <a-menu-item key="3"> <a-icon type="upload" /> <span>nav 3</span> </a-menu-item> </a-menu> </a-layout-sider> <a-layout> <a-layout-header style="background: #fff; padding: 0"> <a-icon class="trigger" :type="collapsed ? 'menu-unfold' : 'menu-fold'" @click="()=> collapsed = !collapsed" /> </a-layout-header> <a-layout-content :style="{ margin: '24px 16px', padding: '24px', background: '#fff', minHeight: '280px' }"> Content </a-layout-content> </a-layout> </a-layout> </template> <script> export default { data(){ return { collapsed: false, } }, } </script> <style> #components-layout-demo-custom-trigger .trigger { font-size: 18px; line-height: 64px; padding: 0 24px; cursor: pointer; transition: color .3s; } #components-layout-demo-custom-trigger .trigger:hover { color: #1890ff; } #components-layout-demo-custom-trigger .logo { height: 32px; background: rgba(255,255,255,.2); margin: 16px; } </style> ```