gh_mirrors/1Panel
1
0
Fork 0
mirror of https://github.com/1Panel-dev/1Panel.git synced 2025-03-15 02:04:46 +08:00
Code

feat: 增加drawer指令

Browse Source
This commit is contained in:
wangdan 2023-03-09 15:15:28 +08:00 committed by wangdan-fit2cloud
parent 220d329d8e
commit 25508011e1
3 changed files with 99 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/directives/index.ts
View File

@ -5,6 +5,7 @@ import draggable from './modules/draggable';
import debounce from './modules/debounce'; import debounce from './modules/debounce';
import throttle from './modules/throttle'; import throttle from './modules/throttle';
import longpress from './modules/longpress'; import longpress from './modules/longpress';
import drawerDrag from './modules/drawer-drag';
const directivesList: any = { const directivesList: any = {
// Custom directives // Custom directives
@ -14,6 +15,7 @@ const directivesList: any = {
debounce, debounce,
throttle, throttle,
longpress, longpress,
drawerDrag,
}; };
const directives = { const directives = {

60
frontend/src/directives/modules/drawer-drag.ts Normal file
View File

@ -0,0 +1,60 @@
/*
需求：实现一个drawer可拖拽指令。
使用：在 Dom 上加上 v-draggable 即可
<el-drawer v-drawerDrag />
*/
import type { Directive } from 'vue';
interface ElType extends HTMLElement {
parentNode: any;
}
const drawerDrag: Directive = {
mounted: function (el: ElType) {
const minWidth = 400;
const maxWidth = document.body.clientWidth;
const dragDom = el.querySelector('.el-drawer');
(dragDom as HTMLElement).style.overflow = 'auto';
const resizeElL = document.createElement('div');
dragDom.appendChild(resizeElL);
resizeElL.style.cursor = 'w-resize';
resizeElL.style.position = 'absolute';
resizeElL.style.height = '100%';
resizeElL.style.width = '10px';
resizeElL.style.left = '0px';
resizeElL.style.top = '0px';
resizeElL.onmousedown = (e) => {
const elW = dragDom.clientWidth;
const EloffsetLeft = (dragDom as HTMLElement).offsetLeft;
const clientX = e.clientX;
document.onmousemove = function (e) {
e.preventDefault();
// 左侧鼠标拖拽位置
if (clientX > EloffsetLeft && clientX < EloffsetLeft + 10) {
// 往左拖拽
if (clientX > e.clientX) {
if (dragDom.clientWidth < maxWidth) {
(dragDom as HTMLElement).style.width = elW + (clientX - e.clientX) + 'px';
} else {
(dragDom as HTMLElement).style.width = maxWidth + 'px';
}
}
// 往右拖拽
if (clientX < e.clientX) {
if (dragDom.clientWidth > minWidth) {
(dragDom as HTMLElement).style.width = elW - (e.clientX - clientX) + 'px';
} else {
(dragDom as HTMLElement).style.width = minWidth + 'px';
}
}
}
};
// 拉伸结束
document.onmouseup = function () {
document.onmousemove = null;
document.onmouseup = null;
};
};
},
};
export default drawerDrag;

72
frontend/src/views/container/container/log/index.vue
View File

@ -1,41 +1,43 @@
<template> <template>
<el-drawer v-model="logVisiable" :destroy-on-close="true" :close-on-click-modal="false" size="50%"> <div>
<template #header> <el-drawer v-model="logVisiable" :destroy-on-close="true" :close-on-click-modal="false" size="50%">
<DrawerHeader :header="$t('commons.button.log')" :back="handleClose" /> <template #header>
</template> <DrawerHeader :header="$t('commons.button.log')" :back="handleClose" />
<div> </template>
<el-select @change="searchLogs" style="width: 30%; float: left" v-model="logSearch.mode"> <div>
<el-option v-for="item in timeOptions" :key="item.label" :value="item.value" :label="item.label" /> <el-select @change="searchLogs" style="width: 30%; float: left" v-model="logSearch.mode">
</el-select> <el-option v-for="item in timeOptions" :key="item.label" :value="item.value" :label="item.label" />
<div style="margin-left: 20px; float: left"> </el-select>
<el-checkbox border v-model="logSearch.isWatch">{{ $t('commons.button.watch') }}</el-checkbox> <div style="margin-left: 20px; float: left">
<el-checkbox border v-model="logSearch.isWatch">{{ $t('commons.button.watch') }}</el-checkbox>
</div>
<el-button style="margin-left: 20px" @click="onDownload" icon="Download">
{{ $t('file.download') }}
</el-button>
</div> </div>
<el-button style="margin-left: 20px" @click="onDownload" icon="Download">
{{ $t('file.download') }}
</el-button>
</div>
<codemirror <codemirror
:autofocus="true" :autofocus="true"
placeholder="None data" placeholder="None data"
:indent-with-tab="true" :indent-with-tab="true"
:tabSize="4" :tabSize="4"
style="margin-top: 20px; height: calc(100vh - 230px)" style="margin-top: 20px; height: calc(100vh - 230px)"
:lineWrapping="true" :lineWrapping="true"
:matchBrackets="true" :matchBrackets="true"
theme="cobalt" theme="cobalt"
:styleActiveLine="true" :styleActiveLine="true"
:extensions="extensions" :extensions="extensions"
v-model="logInfo" v-model="logInfo"
@ready="handleReady" @ready="handleReady"
:disabled="true" :disabled="true"
/> />
<template #footer> <template #footer>
<span class="dialog-footer"> <span class="dialog-footer">
<el-button @click="logVisiable = false">{{ $t('commons.button.cancel') }}</el-button> <el-button @click="logVisiable = false">{{ $t('commons.button.cancel') }}</el-button>
</span> </span>
</template> </template>
</el-drawer> </el-drawer>
</div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>