Big-Data-Lab
/
CET-vue-3.0
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 1 Wiki Activity

添加标题

This commit is contained in:
Cool 2024-05-30 20:48:49 +08:00
parent 3f98ead83c
commit 965fe871c8
1 changed files with 179 additions and 165 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
src/components/Scrollbar/src/Scrollbar.vue
View File

@ -1,6 +1,20 @@
<template> <template>
<div class="scrollbar"> <div class="scrollbar">
<div ref="wrap" :class="[wrapClass, 'scrollbar__wrap', native ? '' : 'scrollbar__wrap--hidden-default']" :style="style" @scroll="handleScroll"> <div ref="wrap" :class="[wrapClass, 'scrollbar__wrap', native ? '' : 'scrollbar__wrap--hidden-default']" :style="style" @scroll="handleScroll">
<div style="display: flex; justify-content: center; align-items: center">
<span
style="
font-size: 18px;
font-weight: 700;
transition: all 0.5s;
line-height: normal;
"
>
英语四六级综合管理平台
</span>
</div>
<component :is="tag" ref="resize" :class="['scrollbar__view', viewClass]" :style="viewStyle"> <component :is="tag" ref="resize" :class="['scrollbar__view', viewClass]" :style="viewStyle">
<slot></slot> <slot></slot>
</component> </component>
@ -12,14 +26,14 @@
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { addResizeListener, removeResizeListener } from '/@/utils/event'; import { addResizeListener, removeResizeListener } from '/@/utils/event';
import componentSetting from '/@/settings/componentSetting'; import componentSetting from '/@/settings/componentSetting';
const { scrollbar } = componentSetting; const { scrollbar } = componentSetting;
import { toObject } from './util'; import { toObject } from './util';
import { defineComponent, ref, onMounted, onBeforeUnmount, nextTick, provide, computed, unref } from 'vue'; import { defineComponent, ref, onMounted, onBeforeUnmount, nextTick, provide, computed, unref } from 'vue';
import Bar from './bar'; import Bar from './bar';
export default defineComponent({ export default defineComponent({
name: 'Scrollbar', name: 'Scrollbar',
// inheritAttrs: false, // inheritAttrs: false,
components: { Bar }, components: { Bar },
@ -115,10 +129,10 @@
handleScroll, handleScroll,
}; };
}, },
}); });
</script> </script>
<style lang="less"> <style lang="less">
.scrollbar { .scrollbar {
position: relative; position: relative;
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
@ -182,12 +196,12 @@
} }
} }
} }
} }
.scrollbar:active > .scrollbar__bar, .scrollbar:active > .scrollbar__bar,
.scrollbar:focus > .scrollbar__bar, .scrollbar:focus > .scrollbar__bar,
.scrollbar:hover > .scrollbar__bar { .scrollbar:hover > .scrollbar__bar {
opacity: 1; opacity: 1;
transition: opacity 340ms ease-out; transition: opacity 340ms ease-out;
} }
</style> </style>