102 lines
2.3 KiB
Vue
102 lines
2.3 KiB
Vue
<docs>
|
||
---
|
||
order: 5
|
||
title:
|
||
zh-CN: 自定义触发器
|
||
en-US: Custom trigger
|
||
---
|
||
|
||
## zh-CN
|
||
|
||
要使用自定义触发器，可以设置 `:trigger="null"` 来隐藏默认设定。
|
||
|
||
## en-US
|
||
|
||
If you want to use a customized trigger, you can hide the default one by setting `:trigger="null"`.
|
||
|
||
</docs>
|
||
<template>
|
||
<a-layout>
|
||
<a-layout-sider v-model:collapsed="collapsed" :trigger="null" collapsible>
|
||
<div class="logo" />
|
||
<a-menu v-model:selectedKeys="selectedKeys" theme="dark" mode="inline">
|
||
<a-menu-item key="1">
|
||
<user-outlined />
|
||
<span>nav 1</span>
|
||
</a-menu-item>
|
||
<a-menu-item key="2">
|
||
<video-camera-outlined />
|
||
<span>nav 2</span>
|
||
</a-menu-item>
|
||
<a-menu-item key="3">
|
||
<upload-outlined />
|
||
<span>nav 3</span>
|
||
</a-menu-item>
|
||
</a-menu>
|
||
</a-layout-sider>
|
||
<a-layout>
|
||
<a-layout-header style="background: #fff; padding: 0">
|
||
<menu-unfold-outlined
|
||
v-if="collapsed"
|
||
class="trigger"
|
||
@click="() => (collapsed = !collapsed)"
|
||
/>
|
||
<menu-fold-outlined v-else class="trigger" @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 lang="ts">
|
||
import {
|
||
UserOutlined,
|
||
VideoCameraOutlined,
|
||
UploadOutlined,
|
||
MenuUnfoldOutlined,
|
||
MenuFoldOutlined,
|
||
} from '@ant-design/icons-vue';
|
||
import { defineComponent, ref } from 'vue';
|
||
export default defineComponent({
|
||
components: {
|
||
UserOutlined,
|
||
VideoCameraOutlined,
|
||
UploadOutlined,
|
||
MenuUnfoldOutlined,
|
||
MenuFoldOutlined,
|
||
},
|
||
setup() {
|
||
return {
|
||
selectedKeys: ref<string[]>(['1']),
|
||
collapsed: ref<boolean>(false),
|
||
};
|
||
},
|
||
});
|
||
</script>
|
||
<style>
|
||
#components-layout-demo-custom-trigger .trigger {
|
||
font-size: 18px;
|
||
line-height: 64px;
|
||
padding: 0 24px;
|
||
cursor: pointer;
|
||
transition: color 0.3s;
|
||
}
|
||
|
||
#components-layout-demo-custom-trigger .trigger:hover {
|
||
color: #1890ff;
|
||
}
|
||
|
||
#components-layout-demo-custom-trigger .logo {
|
||
height: 32px;
|
||
background: rgba(255, 255, 255, 0.3);
|
||
margin: 16px;
|
||
}
|
||
|
||
.site-layout .site-layout-background {
|
||
background: #fff;
|
||
}
|
||
</style>
|