78 lines
1.8 KiB
Markdown
78 lines
1.8 KiB
Markdown
<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>
|
|
```
|