|
|
@@ -1,156 +0,0 @@
|
|
|
-<template>
|
|
|
- <Teleport to="body" v-if="props.modelValue">
|
|
|
- <div class="drawer">
|
|
|
- <!-- header -->
|
|
|
- <div class="drawer-header" v-if="!props.hideHeader">
|
|
|
- <el-icon class="drawer-header-icon" color="#5a5e66" v-if="props.icon">
|
|
|
- <props.icon />
|
|
|
- </el-icon>
|
|
|
- <div class="drawer-header-title">{{ props.title }}</div>
|
|
|
- <el-icon class="drawer-header-close" color="#5a5e66" @click="close" v-if="!props.hideCloseBtn">
|
|
|
- <Close />
|
|
|
- </el-icon>
|
|
|
- </div>
|
|
|
- <!-- body -->
|
|
|
- <div class="drawer-body">
|
|
|
- <slot></slot>
|
|
|
- </div>
|
|
|
- <!-- footer -->
|
|
|
- <div class="drawer-footer">
|
|
|
- <slot name="footer"></slot>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <!-- 遮罩 -->
|
|
|
- <div class="drawer-overlay"></div>
|
|
|
- </Teleport>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script setup lang="ts" name="Drawer">
|
|
|
- import { onMounted, onUnmounted } from 'vue'
|
|
|
- import { Close } from '@element-plus/icons-vue'
|
|
|
-
|
|
|
- const props = defineProps({
|
|
|
- modelValue: {
|
|
|
- type: Boolean,
|
|
|
- default: false
|
|
|
- },
|
|
|
- title: {
|
|
|
- type: String,
|
|
|
- default: null
|
|
|
- },
|
|
|
- icon: {
|
|
|
- type: String,
|
|
|
- default: null
|
|
|
- },
|
|
|
- 'z-index': {
|
|
|
- type: Number,
|
|
|
- default: 2000
|
|
|
- },
|
|
|
- 'hide-header': {
|
|
|
- // 控制是否显示 header 栏, 默认为 false
|
|
|
- type: Boolean,
|
|
|
- default: false
|
|
|
- },
|
|
|
- 'hide-close-btn': {
|
|
|
- // 控制是否显示 关闭按钮, 默认为 false
|
|
|
- type: Boolean,
|
|
|
- default: false
|
|
|
- },
|
|
|
- width: {
|
|
|
- type: String,
|
|
|
- default: '500px'
|
|
|
- }
|
|
|
- })
|
|
|
-
|
|
|
- onMounted(() => {
|
|
|
- window.addEventListener('keydown', escListener)
|
|
|
- })
|
|
|
-
|
|
|
- onUnmounted(() => {
|
|
|
- window.removeEventListener('keydown', escListener)
|
|
|
- })
|
|
|
-
|
|
|
- // 监听ESC事件
|
|
|
- const escListener = (event) => {
|
|
|
- if (event.keyCode === 27) {
|
|
|
- close()
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- const emit = defineEmits(['update:modelValue', 'close'])
|
|
|
- const close = () => {
|
|
|
- emit('update:modelValue', false)
|
|
|
- emit('close')
|
|
|
- }
|
|
|
-</script>
|
|
|
-
|
|
|
-<style lang="scss" scoped>
|
|
|
- .drawer {
|
|
|
- position: fixed;
|
|
|
- width: v-bind('props.width');
|
|
|
- height: 100%;
|
|
|
- background: var(--art-main-bg-color);
|
|
|
- box-shadow: -5px -5px 10px 2px rgba(0, 0, 0, 0.2);
|
|
|
- top: 0;
|
|
|
- right: 0;
|
|
|
- z-index: v-bind('props.zIndex + 1');
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- }
|
|
|
-
|
|
|
- .drawer-header {
|
|
|
- padding: 16px;
|
|
|
- border-bottom: 1px solid #cacaca;
|
|
|
- min-height: 30px;
|
|
|
- display: flex;
|
|
|
- flex-direction: row;
|
|
|
- width: 100%;
|
|
|
- align-items: center;
|
|
|
- box-sizing: border-box;
|
|
|
-
|
|
|
- .drawer-header-icon {
|
|
|
- width: 20px;
|
|
|
- height: 20px;
|
|
|
- font-size: 16px;
|
|
|
- padding-right: 10px;
|
|
|
- }
|
|
|
- .drawer-header-title {
|
|
|
- flex: 1;
|
|
|
- font-size: 16px;
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
- .drawer-header-close {
|
|
|
- width: 20px;
|
|
|
- height: 20px;
|
|
|
- font-size: 16px;
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .drawer-body {
|
|
|
- flex: 1;
|
|
|
- padding: 16px;
|
|
|
- overflow-y: auto;
|
|
|
- }
|
|
|
-
|
|
|
- .drawer-footer {
|
|
|
- padding: 16px;
|
|
|
- display: flex;
|
|
|
- flex-direction: row;
|
|
|
- width: 100%;
|
|
|
- align-items: center;
|
|
|
- box-sizing: border-box;
|
|
|
- justify-content: right;
|
|
|
- }
|
|
|
- .drawer-overlay {
|
|
|
- position: fixed;
|
|
|
- top: 0;
|
|
|
- right: 0;
|
|
|
- bottom: 0;
|
|
|
- left: 0;
|
|
|
- z-index: v-bind('props.zIndex');
|
|
|
- height: 100%;
|
|
|
- background-color: rgba(0, 0, 0, 0.5);
|
|
|
- overflow: auto;
|
|
|
- }
|
|
|
-</style>
|