github/cool-admin-vue
1
0
Fork 0
mirror of https://github.com/cool-team-official/cool-admin-vue.git synced 2025-12-12 21:52:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

优化视图的滚动方法

Browse Source
This commit is contained in:
icssoa 2024-02-19 18:22:10 +08:00
parent 7aee76cbd0
commit eb452189ea
10 changed files with 443 additions and 421 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/modules/base/pages/main/components/views.vue
View File

@ -1,13 +1,11 @@
<template>
<div class="app-views">
<router-view v-slot="{ Component }">
<el-scrollbar :ref="setRefs('scrollbar')" :key="key">
<transition :name="app.info.router.transition || 'none'">
<keep-alive :include="caches">
<keep-alive :include="caches" :key="key">
<component :is="Component" />
</keep-alive>
</transition>
</el-scrollbar>
</router-view>
</div>
</template>
@ -17,7 +15,7 @@ import { computed, onMounted, onUnmounted, ref } from "vue";
import { useBase } from "/$/base";
import { useCool } from "/@/cool";
const { refs, setRefs, mitt } = useCool();
const { mitt } = useCool();
const { process, app } = useBase();
// 缓存数
@ -37,27 +35,11 @@ function refresh() {
key.value += 1;
}
// 滚动到
function scrollTo({ el, top }: { el?: string; top?: number }) {
const scrollbar = refs.scrollbar.wrapRef;
if (el) {
top = scrollbar.querySelector(el).offsetTop;
}
scrollbar.scrollTo({
top,
behavior: "smooth"
});
}
onMounted(() => {
mitt.on("view.scrollTo", scrollTo);
mitt.on("view.refresh", refresh);
});
onUnmounted(() => {
mitt.off("view.scrollTo");
mitt.off("view.refresh");
});
</script>
@ -72,10 +54,6 @@ onUnmounted(() => {
border-radius: 4px;
position: relative;
:deep(.el-scrollbar__view) {
height: 100%;
}
.none-enter-active {
position: absolute;
}

13
src/modules/base/static/css/index.scss
View File

@ -1,16 +1,3 @@
*::-webkit-scrollbar {
width: 10px;
height: 10px;
}
*::-webkit-scrollbar-thumb {
background-color: rgba(144, 147, 153, 0.3);
}
*::-webkit-scrollbar-track {
background: transparent;
}
#app {
height: 100vh;
width: 100vw;

2
src/modules/demo/views/home/index.vue
View File

@ -1,4 +1,5 @@
<template>
<el-scrollbar>
<div class="view-home">
<el-row :gutter="15">
<el-col :lg="6" :md="12" :xs="24">
@ -49,6 +50,7 @@
</el-col>
</el-row>
</div>
</el-scrollbar>
</template>
<script lang="ts" name="home" setup>

7
src/modules/design/views/page.vue
View File

@ -7,10 +7,11 @@
<div class="footer">
<el-button @click="clear">清空</el-button>
<el-button type="info" @click="save">保存草稿</el-button>
<el-button type="success" @click="create">生成代码</el-button>
</div>
<cl-editor-preview title="代码预览" name="monaco" :ref="setRefs('preview')" />
<cl-editor-preview title="代码预览" name="monaco" :ref="setRefs('preview')">
<el-button type="success" @click="create">生成代码</el-button>
</cl-editor-preview>
</div>
</div>
</template>

25
src/modules/helper/hooks/ai.ts
View File

@ -142,28 +142,3 @@ export function useAi() {
matchType
};
}
export function useScroll() {
const { mitt } = useCool();
let timer: any;
function start() {
stop();
timer = setInterval(() => {
mitt.emit("view.scrollTo", { top: Math.random() + 10000 });
}, 100);
}
function stop() {
if (timer) {
clearInterval(timer);
}
}
return {
start,
stop
};
}

7
src/modules/helper/static/index.scss
View File

@ -1,9 +1,10 @@
.plugins {
overflow-x: hidden;
background-color: var(--el-bg-color);
padding: 10px;
&__wrapper {
background-color: var(--el-bg-color);
height: 100%;
box-sizing: border-box;
}
.scope {
border-radius: 8px;

55
src/modules/helper/views/ai-code.vue
View File

@ -1,4 +1,5 @@
<template>
<el-scrollbar :ref="setRefs('scrollbar')">
<div class="ai-code">
<div class="container">
<div class="head">
@ -142,7 +143,9 @@
</div>
<template v-if="!temp.disabled">
<el-button round size="small" @click="copyCode('vue')">Copy</el-button>
<el-button round size="small" @click="copyCode('vue')"
>Copy</el-button
>
</template>
</div>
@ -171,6 +174,7 @@
<!-- 创建菜单 -->
<cl-form ref="Form" />
</div>
</el-scrollbar>
</template>
<script lang="tsx" setup name="helper-ai-code">
@ -180,19 +184,54 @@ import { Promotion, Loading, Close, Check } from "@element-plus/icons-vue";
import { ElLoading, ElMessage, ElMessageBox } from "element-plus";
import { debounce, isEmpty } from "lodash-es";
import { useClipboard } from "@vueuse/core";
import { useMenu, useAi, useScroll } from "../hooks";
import { useMenu, useAi } from "../hooks";
import { isDev } from "/@/config";
import { useForm } from "@cool-vue/crud";
import type { CodeType } from "../types";
import Text2 from "../components/text.vue";
const { service, mitt, refs, setRefs } = useCool();
const { service, refs, setRefs } = useCool();
const { copy } = useClipboard();
const menu = useMenu();
const ai = useAi();
const scroll = useScroll();
const Form = useForm();
// 滚动条
const scroller = {
timer: null as any,
scrollTo({ el, top }: { el?: string; top?: number }) {
const scrollbar = refs.scrollbar.wrapRef;
if (el) {
top = scrollbar.querySelector(el).offsetTop;
}
scrollbar.scrollTo({
top,
behavior: "smooth"
});
},
start() {
this.stop();
this.timer = setInterval(() => {
if (codes.entity) {
this.scrollTo({
top: Math.random() + 10000
});
}
}, 100);
},
stop() {
if (this.timer) {
clearInterval(this.timer);
}
}
};
// 编辑器
const editor = reactive({
options: {
@ -275,14 +314,14 @@ function send(type: CodeType = "entity", data: any) {
});
// 开始滚动
scroll.start();
scroller.start();
}
// 结束
function stop() {
temp.disabled = false;
temp.coding = "";
scroll.stop();
scroller.stop();
}
// 重置
@ -454,7 +493,7 @@ const createVue = debounce((auto?: boolean) => {
stop();
setTimeout(() => {
mitt.emit("view.scrollTo", { el: `.codes .is-vue` });
scroller.scrollTo({ el: `.codes .is-vue` });
refs.codeVue.formatCode();
}, 300);
}
@ -629,7 +668,7 @@ onMounted(() => {
}
.bottom {
height: 100px;
height: 10vh;
}
}
</style>

30
src/modules/helper/views/plugins/serve.vue
View File

@ -1,4 +1,6 @@
<template>
<div class="plugins__wrapper">
<el-scrollbar>
<div class="plugins" @dragover="onDragover" @drop="onDrop">
<el-tabs v-model="tab.active" type="card" @tab-change="tab.onChange">
<el-tab-pane label="已安装插件" name="installed"> </el-tab-pane>
@ -6,7 +8,14 @@
</el-tabs>
<el-row :gutter="10">
<el-col v-for="(item, index) in list" :key="index" :xs="24" :sm="12" :md="8" :lg="6">
<el-col
v-for="(item, index) in list"
:key="index"
:xs="24"
:sm="12"
:md="8"
:lg="6"
>
<div class="scope">
<div class="c">
<el-icon class="set" @click="toSet(item)">
@ -17,7 +26,9 @@
<div class="det">
<div class="tag">
<el-tag size="small" effect="dark">{{ item.keyName }}</el-tag>
<el-tag size="small" effect="dark">{{
item.keyName
}}</el-tag>
<el-tag size="small" effect="dark" type="success"
>v{{ item.version }}</el-tag
>
@ -38,11 +49,16 @@
<div class="f">
<el-button round @click="toDetail(item)">详情</el-button>
<el-button type="danger" round @click="toDel(item, index)">卸载</el-button>
<el-button type="danger" round @click="toDel(item, index)"
>卸载</el-button
>
<cl-flex1 />
<cl-switch v-model="item.status" @change="onStatusChange(item)"></cl-switch>
<cl-switch
v-model="item.status"
@change="onStatusChange(item)"
></cl-switch>
</div>
</div>
</el-col>
@ -91,6 +107,8 @@
</template>
</cl-form>
</div>
</el-scrollbar>
</div>
</template>
<script lang="ts" setup name="helper-plugins-serve">
@ -137,6 +155,10 @@ function toSet(item: Eps.PluginInfoEntity) {
Form.value?.open({
title: "设置",
props: {
labelWidth: "60px"
},
form: {
...item
},

21
src/modules/helper/views/plugins/vue.vue
View File

@ -1,19 +1,33 @@
<template>
<div class="plugins__wrapper">
<el-scrollbar>
<div class="plugins">
<div class="header">
<el-tabs v-model="tab.active" type="card" @tab-change="tab.onChange">
<el-tab-pane label="已安装插件" name="installed"> </el-tab-pane>
<el-tab-pane label="插件市场" name="shop"> </el-tab-pane>
</el-tabs>
</div>
<div class="container">
<el-row :gutter="10">
<el-col v-for="(item, index) in list" :key="index" :xs="24" :sm="12" :md="8" :lg="6">
<el-col
v-for="(item, index) in list"
:key="index"
:xs="24"
:sm="12"
:md="8"
:lg="6"
>
<div class="scope">
<div class="c">
<img class="logo" :src="item.logo" />
<div class="det">
<div class="tag">
<el-tag size="small" effect="dark">{{ item.name }}</el-tag>
<el-tag size="small" effect="dark">{{
item.name
}}</el-tag>
<el-tag size="small" effect="dark" type="success"
>v{{ item.version || "1.0.0" }}</el-tag
>
@ -44,6 +58,7 @@
</div>
</el-col>
</el-row>
</div>
<cl-dialog v-model="det.visible" :title="det.title" width="60%">
<el-tabs v-model="det.active" type="card" @tab-change="tab.onChange">
@ -58,6 +73,8 @@
</el-tabs>
</cl-dialog>
</div>
</el-scrollbar>
</div>
</template>
<script lang="ts" setup name="helper-plugins-vue">

2
src/modules/space/views/list.vue
View File

@ -2,6 +2,6 @@
<space-inner />
</template>
<script lang="ts" setup name="space-list">
<script lang="ts" setup name="upload-list">
import SpaceInner from "../components/space-inner.vue";
</script>