😎优化noticeBar组件
This commit is contained in:
zuohuaijun
parent
6395bf0ff3
commit
af309a7072
@ -2,7 +2,7 @@
|
||||
"name": "admin.net.pro",
|
||||
"type": "module",
|
||||
"version": "2.4.33",
|
||||
"lastBuildTime": "2024.08.03",
|
||||
"lastBuildTime": "2024.08.04",
|
||||
"description": "Admin.NET 站在巨人肩膀上的 .NET 通用权限开发框架",
|
||||
"author": "zuohuaijun",
|
||||
"license": "MIT",
|
||||
@ -68,7 +68,7 @@
|
||||
"vue-signature-pad": "^3.0.2",
|
||||
"vue3-tree-org": "^4.2.2",
|
||||
"vuedraggable": "4.0.3",
|
||||
"vxe-pc-ui": "^4.0.84",
|
||||
"vxe-pc-ui": "^4.0.86",
|
||||
"vxe-table": "^4.7.59",
|
||||
"vxe-table-plugin-element": "^4.0.4",
|
||||
"vxe-table-plugin-export-xlsx": "^4.0.5",
|
||||
|
||||
@ -1,14 +1,13 @@
|
||||
<template>
|
||||
<div class="notice-bar" :style="{ background, height: `${height}px` }" v-show="!state.isMode">
|
||||
<div class="notice-bar-warp" :style="{ color, fontSize: `${size}px` }">
|
||||
<div class="notice-bar-warp" :style="{ color, fontSize: `${size}px` }" ref="noticeBarWarpRef">
|
||||
<i v-if="leftIcon" class="notice-bar-warp-left-icon" :class="leftIcon"></i>
|
||||
<div class="notice-bar-warp-text-box" ref="noticeBarWarpRef">
|
||||
<div class="notice-bar-warp-text" ref="noticeBarTextRef" v-if="!scrollable">
|
||||
<div class="notice-bar-warp-text-box">
|
||||
<div class="notice-bar-warp-text" ref="noticeBarTextRef">
|
||||
<div v-html="text" data-slate-editor />
|
||||
</div>
|
||||
<div class="notice-bar-warp-slot" v-else><slot /></div>
|
||||
</div>
|
||||
<SvgIcon :name="rightIcon" v-if="rightIcon" class="notice-bar-warp-right-icon" @click="onRightIconClick" />
|
||||
<!-- <SvgIcon :name="rightIcon" v-if="rightIcon" class="notice-bar-warp-right-icon" @click="onRightIconClick" /> -->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -16,117 +15,65 @@
|
||||
<script setup lang="ts" name="noticeBar">
|
||||
import { reactive, ref, onMounted, nextTick } from 'vue';
|
||||
|
||||
// 定义父组件传过来的值
|
||||
const props = defineProps({
|
||||
// 通知栏模式，可选值为 closeable link
|
||||
mode: {
|
||||
type: String,
|
||||
default: () => '',
|
||||
},
|
||||
// 通知文本内容
|
||||
text: {
|
||||
type: String,
|
||||
default: () => '欢迎使用 Admin.NET 通用权限开发框架 <a href="https://gitee.com/zuohuaijun/Admin.NET" target="_blank">https://gitee.com/zuohuaijun/Admin.NET</a>',
|
||||
},
|
||||
// 通知文本颜色
|
||||
color: {
|
||||
type: String,
|
||||
default: () => 'var(--el-color-warning)',
|
||||
},
|
||||
// 通知背景色
|
||||
background: {
|
||||
type: String,
|
||||
default: () => 'var(--el-color-warning-light-9)',
|
||||
},
|
||||
// 字体大小，单位px
|
||||
size: {
|
||||
type: [Number, String],
|
||||
default: () => 14,
|
||||
},
|
||||
// 通知栏高度，单位px
|
||||
height: {
|
||||
type: Number,
|
||||
default: () => 40,
|
||||
},
|
||||
// 动画延迟时间 (s)
|
||||
delay: {
|
||||
type: Number,
|
||||
default: () => 1,
|
||||
},
|
||||
// 滚动速率 (px/s)
|
||||
speed: {
|
||||
type: Number,
|
||||
default: () => 100,
|
||||
},
|
||||
// 是否开启垂直滚动
|
||||
scrollable: {
|
||||
type: Boolean,
|
||||
default: () => false,
|
||||
},
|
||||
// 自定义左侧图标
|
||||
leftIcon: {
|
||||
type: String,
|
||||
default: () => 'iconfont icon-tongzhi2',
|
||||
},
|
||||
// 自定义右侧图标
|
||||
rightIcon: {
|
||||
type: String,
|
||||
default: () => '',
|
||||
},
|
||||
mode: { type: String, default: '' }, // 通知栏模式，可选值为 closeable link
|
||||
text: { type: String, default: '欢迎使用 Admin.NET 通用权限开发框架 <a href="https://gitee.com/zuohuaijun/Admin.NET" target="_blank">https://gitee.com/zuohuaijun/Admin.NET</a>' }, // 通知文本内容
|
||||
color: { type: String, default: 'var(--el-color-warning)' }, // 通知文本颜色
|
||||
background: { type: String, default: 'var(--el-color-warning-light-9)' }, // 通知背景色
|
||||
size: { type: [Number, String], default: 14 }, // 字体大小，单位px
|
||||
height: { type: Number, default: 40 }, // 通知栏高度，单位px
|
||||
delay: { type: Number, default: 1 }, // 动画延迟时间 (s)
|
||||
speed: { type: Number, default: 200 }, // 滚动速率 (px/s)
|
||||
scrollable: { type: Boolean, default: false }, // 是否开启垂直滚动
|
||||
leftIcon: { type: String, default: 'iconfont icon-tongzhi2' }, // 自定义左侧图标
|
||||
rightIcon: { type: String, default: '' }, // 自定义右侧图标
|
||||
});
|
||||
|
||||
// 定义子组件向父组件传值/事件
|
||||
const emit = defineEmits(['close', 'link']);
|
||||
|
||||
// 定义变量内容
|
||||
const noticeBarWarpRef = ref();
|
||||
const noticeBarTextRef = ref();
|
||||
const noticeBarWarpRef = ref<HTMLDivElement | null>(null);
|
||||
const noticeBarTextRef = ref<HTMLDivElement | null>(null);
|
||||
const state = reactive({
|
||||
order: 1,
|
||||
oneTime: 0,
|
||||
twoTime: 0,
|
||||
isMode: false,
|
||||
warpOWidth: 0,
|
||||
textOWidth: 0,
|
||||
isMode: false,
|
||||
animationDuration: 0,
|
||||
});
|
||||
|
||||
// 初始化 animation 各项参数
|
||||
// 页面初始化
|
||||
onMounted(() => {
|
||||
if (!props.scrollable) {
|
||||
initAnimation();
|
||||
}
|
||||
});
|
||||
|
||||
// 初始化动画
|
||||
const initAnimation = () => {
|
||||
nextTick(() => {
|
||||
state.warpOWidth = noticeBarWarpRef.value.offsetWidth;
|
||||
state.textOWidth = noticeBarTextRef.value.offsetWidth;
|
||||
document.styleSheets[0].insertRule(`@keyframes oneAnimation {0% {left: 0px;} 100% {left: -${state.textOWidth}px;}}`);
|
||||
document.styleSheets[0].insertRule(`@keyframes twoAnimation {0% {left: ${state.warpOWidth}px;} 100% {left: -${state.textOWidth}px;}}`);
|
||||
computeAnimationTime();
|
||||
setTimeout(() => {
|
||||
changeAnimation();
|
||||
}, props.delay * 1000);
|
||||
if (noticeBarWarpRef.value && noticeBarTextRef.value) {
|
||||
state.warpOWidth = noticeBarWarpRef.value.offsetWidth;
|
||||
state.textOWidth = noticeBarTextRef.value.scrollWidth;
|
||||
|
||||
state.animationDuration = (state.textOWidth + state.warpOWidth) / props.speed;
|
||||
|
||||
// Clear existing animation styles
|
||||
noticeBarTextRef.value.style.animation = 'none';
|
||||
noticeBarTextRef.value.offsetHeight; // Trigger reflow
|
||||
noticeBarTextRef.value.style.animation = `marquee ${state.animationDuration}s linear infinite`;
|
||||
|
||||
// Define keyframes for marquee animation
|
||||
const keyframes = `
|
||||
@keyframes marquee {
|
||||
0% { transform: translateX(${state.warpOWidth}px); }
|
||||
100% { transform: translateX(-${state.textOWidth}px); }
|
||||
}
|
||||
`;
|
||||
const styleSheet = document.createElement('style');
|
||||
styleSheet.innerText = keyframes;
|
||||
document.head.appendChild(styleSheet);
|
||||
}
|
||||
});
|
||||
};
|
||||
// 计算 animation 滚动时长
|
||||
const computeAnimationTime = () => {
|
||||
state.oneTime = state.textOWidth / props.speed;
|
||||
state.twoTime = (state.textOWidth + state.warpOWidth) / props.speed;
|
||||
};
|
||||
// 改变 animation 动画调用
|
||||
const changeAnimation = () => {
|
||||
if (state.order === 1) {
|
||||
noticeBarTextRef.value.style.cssText = `animation: oneAnimation ${state.oneTime}s linear; opactity: 1;}`;
|
||||
state.order = 2;
|
||||
} else {
|
||||
noticeBarTextRef.value.style.cssText = `animation: twoAnimation ${state.twoTime}s linear infinite; opacity: 1;`;
|
||||
}
|
||||
};
|
||||
// 监听 animation 动画的结束
|
||||
const listenerAnimationend = () => {
|
||||
noticeBarTextRef.value.addEventListener(
|
||||
'animationend',
|
||||
() => {
|
||||
changeAnimation();
|
||||
},
|
||||
false
|
||||
);
|
||||
};
|
||||
|
||||
// 右侧 icon 图标点击
|
||||
const onRightIconClick = () => {
|
||||
if (!props.mode) return false;
|
||||
@ -137,12 +84,6 @@ const onRightIconClick = () => {
|
||||
emit('link');
|
||||
}
|
||||
};
|
||||
// 页面加载时
|
||||
onMounted(() => {
|
||||
if (props.scrollable) return false;
|
||||
initAnimation();
|
||||
listenerAnimationend();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@ -162,19 +103,12 @@ onMounted(() => {
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
.notice-bar-warp-text {
|
||||
white-space: nowrap;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
}
|
||||
.notice-bar-warp-slot {
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
:deep(.el-carousel__item) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
margin-right: 35px;
|
||||
// .notice-bar-warp-text {
|
||||
// white-space: nowrap;
|
||||
// position: absolute;
|
||||
// left: 0;
|
||||
// }
|
||||
}
|
||||
.notice-bar-warp-left-icon {
|
||||
width: 24px;
|
||||
|
||||
5
Web/src/views/system/cache/index.vue
vendored
5
Web/src/views/system/cache/index.vue
vendored
@ -1,6 +1,9 @@
|
||||
<template>
|
||||
<div class="sys-cache-container">
|
||||
<NoticeBar text="系统缓存数据管理，请慎重操作！" style="margin-bottom: 5px" />
|
||||
<div>
|
||||
<NoticeBar text="系统缓存数据管理，请慎重操作！" style="margin: 4px" />
|
||||
</div>
|
||||
|
||||
<splitpanes class="default-theme">
|
||||
<pane size="20">
|
||||
<el-card shadow="hover" header="缓存列表" v-loading="state.loading" style="height: 100%" body-style="height:100%; overflow:auto">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user