Merge pull request #193 from LostElkByte/master
refactor(index.html、demo、components、package.json): ♻️ 新增滚动公告组件、拖动demo、首屏加载样式优化
This commit is contained in:
Ray Hao
73
index.html
73
index.html
@@ -17,7 +17,13 @@
|
||||
|
||||
<body>
|
||||
<div id="app">
|
||||
<div class="loader"></div>
|
||||
<div class="loading-container">
|
||||
<div class="loading-spinner">
|
||||
<div class="loading-bar"></div>
|
||||
<div class="loading-bar"></div>
|
||||
<div class="loading-bar"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<script type="module" src="/src/main.ts"></script>
|
||||
@@ -34,27 +40,56 @@
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.loader {
|
||||
--d: 22px;
|
||||
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
color: #25b09b;
|
||||
border-radius: 50%;
|
||||
box-shadow:
|
||||
calc(1 * var(--d)) calc(0 * var(--d)) 0 0,
|
||||
calc(0.707 * var(--d)) calc(0.707 * var(--d)) 0 1px,
|
||||
calc(0 * var(--d)) calc(1 * var(--d)) 0 2px,
|
||||
calc(-0.707 * var(--d)) calc(0.707 * var(--d)) 0 3px,
|
||||
calc(-1 * var(--d)) calc(0 * var(--d)) 0 4px,
|
||||
calc(-0.707 * var(--d)) calc(-0.707 * var(--d)) 0 5px,
|
||||
calc(0 * var(--d)) calc(-1 * var(--d)) 0 6px;
|
||||
animation: l27 1s infinite steps(8);
|
||||
.loading-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
@keyframes l27 {
|
||||
.loading-spinner {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.loading-bar {
|
||||
width: 4px;
|
||||
height: 24px;
|
||||
background-color: #498cff;
|
||||
border-radius: 2px;
|
||||
animation: loading-animation 1.2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.loading-bar:nth-child(1) {
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
||||
.loading-bar:nth-child(2) {
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
|
||||
.loading-bar:nth-child(3) {
|
||||
animation-delay: 0.4s;
|
||||
}
|
||||
|
||||
@keyframes loading-animation {
|
||||
0% {
|
||||
opacity: 0.3;
|
||||
transform: scaleY(0.5);
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: 1;
|
||||
transform: scaleY(1.2);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotate(1turn);
|
||||
opacity: 0.3;
|
||||
transform: scaleY(0.5);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -65,6 +65,7 @@
|
||||
"qs": "^6.14.0",
|
||||
"sortablejs": "^1.15.6",
|
||||
"vue": "^3.5.13",
|
||||
"vue-draggable-plus": "^0.6.0",
|
||||
"vue-i18n": "^11.1.2",
|
||||
"vue-router": "^4.5.0"
|
||||
},
|
||||
|
||||
412
src/components/TextScroll/index.vue
Normal file
412
src/components/TextScroll/index.vue
Normal file
@@ -0,0 +1,412 @@
|
||||
<!--
|
||||
TextScroll 组件 - 文本滚动公告
|
||||
|
||||
功能：
|
||||
- 支持水平方向文本滚动
|
||||
- 提供多种预设样式（默认、成功、警告、危险、信息）
|
||||
- 支持自定义滚动速度和方向
|
||||
- 可选的打字机输入效果
|
||||
- 鼠标悬停时暂停滚动
|
||||
- 可选的关闭按钮
|
||||
-->
|
||||
<template>
|
||||
<div
|
||||
ref="containerRef"
|
||||
class="text-scroll-container"
|
||||
:class="[`text-scroll--${props.type}`]"
|
||||
:typewriter="props.typewriter ? 'true' : undefined"
|
||||
>
|
||||
<!-- 左侧图标 -->
|
||||
<div class="left-icon">
|
||||
<el-icon><Bell /></el-icon>
|
||||
</div>
|
||||
<!-- 滚动内容包装器 -->
|
||||
<div class="scroll-wrapper">
|
||||
<div
|
||||
ref="scrollContent"
|
||||
class="text-scroll-content"
|
||||
:class="{ scrolling: shouldScroll }"
|
||||
:style="scrollStyle"
|
||||
>
|
||||
<!-- 滚动内容，复制两份以实现无缝滚动 -->
|
||||
<div class="scroll-item" v-html="sanitizedContent" />
|
||||
<div class="scroll-item" v-html="sanitizedContent" />
|
||||
</div>
|
||||
</div>
|
||||
<!-- 可选的关闭按钮 -->
|
||||
<div v-if="showClose" class="right-icon" @click="handleRightIconClick">
|
||||
<el-icon><Close /></el-icon>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useElementHover } from "@vueuse/core";
|
||||
|
||||
const emit = defineEmits(["close"]);
|
||||
|
||||
interface Props {
|
||||
/** 滚动文本内容（必填） */
|
||||
text: string;
|
||||
/** 滚动速度，数值越小滚动越慢 */
|
||||
speed?: number;
|
||||
/** 滚动方向：左侧或右侧 */
|
||||
direction?: "left" | "right";
|
||||
/** 样式类型 */
|
||||
type?: "default" | "success" | "warning" | "danger" | "info";
|
||||
/** 是否显示关闭按钮 */
|
||||
showClose?: boolean;
|
||||
/** 是否启用打字机效果 */
|
||||
typewriter?: boolean;
|
||||
/** 打字机效果的速度，数值越小打字越快 */
|
||||
typewriterSpeed?: number;
|
||||
}
|
||||
|
||||
// 定义组件属性及默认值
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
speed: 70,
|
||||
direction: "left",
|
||||
type: "default",
|
||||
showClose: false,
|
||||
typewriter: false,
|
||||
typewriterSpeed: 100,
|
||||
});
|
||||
|
||||
// 容器元素引用
|
||||
const containerRef = ref<HTMLElement | null>(null);
|
||||
// 使用 vueuse 的 useElementHover 检测鼠标悬停状态
|
||||
const isHovered = useElementHover(containerRef);
|
||||
// 滚动内容元素引用
|
||||
const scrollContent = ref<HTMLElement | null>(null);
|
||||
// 动画持续时间（秒）
|
||||
const animationDuration = ref(0);
|
||||
|
||||
/**
|
||||
* 打字机效果相关状态
|
||||
*/
|
||||
// 当前已显示的文本内容
|
||||
const currentText = ref("");
|
||||
// 打字机定时器引用，用于清理
|
||||
let typewriterTimer: ReturnType<typeof setTimeout> | null = null;
|
||||
// 打字机效果是否已完成
|
||||
const isTypewriterComplete = ref(false);
|
||||
|
||||
/**
|
||||
* 计算是否应该滚动
|
||||
* 条件：
|
||||
* 1. 鼠标未悬停在组件上
|
||||
* 2. 如果启用了打字机效果，则需要等待打字效果完成
|
||||
*/
|
||||
const shouldScroll = computed(() => {
|
||||
if (props.typewriter) {
|
||||
return !isHovered.value && isTypewriterComplete.value;
|
||||
}
|
||||
return !isHovered.value;
|
||||
});
|
||||
|
||||
/**
|
||||
* 计算最终显示的内容
|
||||
* 如果启用了打字机效果，则显示当前已打出的文本
|
||||
* 否则直接显示完整文本
|
||||
* 注意：内容支持 HTML，使用时需注意 XSS 风险
|
||||
*/
|
||||
const sanitizedContent = computed(() => (props.typewriter ? currentText.value : props.text));
|
||||
|
||||
/**
|
||||
* 计算滚动样式
|
||||
* 包括动画持续时间、播放状态和方向
|
||||
* 这些值通过 CSS 变量传递给样式
|
||||
*/
|
||||
const scrollStyle = computed(() => ({
|
||||
"--animation-duration": `${animationDuration.value}s`,
|
||||
"--animation-play-state": shouldScroll.value ? "running" : "paused",
|
||||
"--animation-direction": props.direction === "left" ? "normal" : "reverse",
|
||||
}));
|
||||
|
||||
/**
|
||||
* 计算动画持续时间
|
||||
* 根据内容宽度和设定的速度计算出合适的动画持续时间
|
||||
* 内容越长或速度值越小，动画持续时间越长
|
||||
*/
|
||||
const calculateDuration = () => {
|
||||
if (scrollContent.value) {
|
||||
const contentWidth = scrollContent.value.scrollWidth / 2;
|
||||
animationDuration.value = contentWidth / props.speed;
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 处理关闭按钮点击事件
|
||||
* 触发 close 事件，并直接销毁当前组件
|
||||
*/
|
||||
const handleRightIconClick = () => {
|
||||
emit("close");
|
||||
// 获取当前组件的DOM元素
|
||||
if (containerRef.value) {
|
||||
// 从DOM中移除元素
|
||||
containerRef.value.remove();
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 启动打字机效果
|
||||
* 逐字显示文本内容，完成后设置状态以开始滚动
|
||||
*/
|
||||
const startTypewriter = () => {
|
||||
let index = 0;
|
||||
currentText.value = "";
|
||||
isTypewriterComplete.value = false; // 重置状态
|
||||
|
||||
// 递归函数，逐字添加文本
|
||||
const type = () => {
|
||||
if (index < props.text.length) {
|
||||
// 添加一个字符
|
||||
currentText.value += props.text[index];
|
||||
index++;
|
||||
// 设置下一个字符的延迟
|
||||
typewriterTimer = setTimeout(type, props.typewriterSpeed);
|
||||
} else {
|
||||
// 所有字符都已添加，设置完成状态
|
||||
isTypewriterComplete.value = true;
|
||||
}
|
||||
};
|
||||
|
||||
// 开始打字过程
|
||||
type();
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
// 计算初始动画持续时间
|
||||
calculateDuration();
|
||||
// 监听窗口大小变化，重新计算动画持续时间
|
||||
window.addEventListener("resize", calculateDuration);
|
||||
|
||||
// 如果启用了打字机效果，开始打字
|
||||
if (props.typewriter) {
|
||||
startTypewriter();
|
||||
}
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
// 移除事件监听
|
||||
window.removeEventListener("resize", calculateDuration);
|
||||
// 清除打字机定时器
|
||||
if (typewriterTimer) {
|
||||
clearTimeout(typewriterTimer);
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* 监听文本内容变化
|
||||
* 当文本内容变化时，如果启用了打字机效果，重新开始打字
|
||||
*/
|
||||
watch(
|
||||
() => props.text,
|
||||
() => {
|
||||
if (props.typewriter) {
|
||||
// 清除现有定时器
|
||||
if (typewriterTimer) {
|
||||
clearTimeout(typewriterTimer);
|
||||
}
|
||||
// 重新开始打字效果
|
||||
startTypewriter();
|
||||
}
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.text-scroll-container {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
padding-right: 16px;
|
||||
overflow: hidden;
|
||||
background-color: var(--el-color-primary-light-9) !important;
|
||||
border: 1px solid var(--main-color);
|
||||
border-radius: calc(var(--custom-radius) / 2 + 2px) !important;
|
||||
|
||||
.left-icon,
|
||||
.right-icon {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
z-index: 2;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 40px;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
background-color: var(--el-color-primary-light-9) !important;
|
||||
}
|
||||
|
||||
.left-icon {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.right-icon {
|
||||
right: 0;
|
||||
cursor: pointer;
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.scroll-wrapper {
|
||||
flex: 1;
|
||||
margin-left: 34px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.text-scroll-content {
|
||||
display: flex;
|
||||
height: 34px;
|
||||
line-height: 34px;
|
||||
white-space: nowrap;
|
||||
animation: scroll linear infinite;
|
||||
animation-duration: var(--animation-duration);
|
||||
animation-direction: var(--animation-direction);
|
||||
animation-play-state: var(--animation-play-state);
|
||||
|
||||
.scroll-item {
|
||||
display: inline-block;
|
||||
min-width: 100%;
|
||||
padding: 0 10px;
|
||||
font-size: 14px;
|
||||
color: var(--el-color-primary-light-2) !important;
|
||||
text-align: left;
|
||||
text-align: center;
|
||||
|
||||
:deep(a) {
|
||||
color: #fd4e4e !important;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes scroll {
|
||||
0% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
}
|
||||
|
||||
// 添加类型样式
|
||||
&.text-scroll--default {
|
||||
background-color: var(--el-color-primary-light-9) !important;
|
||||
border-color: var(--el-color-primary);
|
||||
|
||||
.right-icon,
|
||||
.left-icon i {
|
||||
color: var(--el-color-primary) !important;
|
||||
}
|
||||
|
||||
.scroll-item {
|
||||
color: var(--el-color-primary) !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.text-scroll--success {
|
||||
background-color: var(--el-color-success-light-9) !important;
|
||||
border-color: var(--el-color-success);
|
||||
|
||||
.left-icon {
|
||||
background-color: var(--el-color-success-light-9) !important;
|
||||
|
||||
i {
|
||||
color: var(--el-color-success);
|
||||
}
|
||||
}
|
||||
|
||||
.scroll-item {
|
||||
color: var(--el-color-success) !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.text-scroll--warning {
|
||||
background-color: var(--el-color-warning-light-9) !important;
|
||||
border-color: var(--el-color-warning);
|
||||
|
||||
.left-icon {
|
||||
background-color: var(--el-color-warning-light-9) !important;
|
||||
|
||||
i {
|
||||
color: var(--el-color-warning);
|
||||
}
|
||||
}
|
||||
|
||||
.scroll-item {
|
||||
color: var(--el-color-warning) !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.text-scroll--danger {
|
||||
background-color: var(--el-color-danger-light-9) !important;
|
||||
border-color: var(--el-color-danger);
|
||||
|
||||
.left-icon {
|
||||
background-color: var(--el-color-danger-light-9) !important;
|
||||
|
||||
i {
|
||||
color: var(--el-color-danger);
|
||||
}
|
||||
}
|
||||
|
||||
.scroll-item {
|
||||
color: var(--el-color-danger) !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.text-scroll--info {
|
||||
background-color: var(--el-color-info-light-9) !important;
|
||||
border-color: var(--el-color-info);
|
||||
|
||||
.left-icon {
|
||||
background-color: var(--el-color-info-light-9) !important;
|
||||
|
||||
i {
|
||||
color: var(--el-color-info);
|
||||
}
|
||||
}
|
||||
|
||||
.scroll-item {
|
||||
color: var(--el-color-info) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 添加打字机效果的光标样式
|
||||
.text-scroll-content .scroll-item {
|
||||
&::after {
|
||||
content: "";
|
||||
opacity: 0;
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
|
||||
// 仅在启用打字机效果时显示光标
|
||||
.text-scroll-container[typewriter] .text-scroll-content .scroll-item::after {
|
||||
content: "|";
|
||||
opacity: 0;
|
||||
animation: cursor 1s infinite;
|
||||
}
|
||||
|
||||
@keyframes cursor {
|
||||
0%,
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
123
src/views/demo/drag.vue
Normal file
123
src/views/demo/drag.vue
Normal file
@@ -0,0 +1,123 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="12">
|
||||
<el-card shadow="never">
|
||||
<template #header><span class="card-header">基础示例</span></template>
|
||||
<VueDraggable ref="el" v-model="userList" class="drag-container">
|
||||
<div v-for="item in userList" :key="item.name" class="drag-item">
|
||||
{{ item.name }}
|
||||
</div>
|
||||
</VueDraggable>
|
||||
</el-card>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="12">
|
||||
<el-card shadow="never">
|
||||
<template #header><span class="card-header">过渡动画</span></template>
|
||||
<VueDraggable
|
||||
v-model="userList"
|
||||
target=".sort-target"
|
||||
:scroll="true"
|
||||
class="drag-container"
|
||||
>
|
||||
<TransitionGroup type="transition" tag="ul" name="fade" class="sort-target">
|
||||
<li v-for="item in userList" :key="item.name" class="drag-item">
|
||||
{{ item.name }}
|
||||
</li>
|
||||
</TransitionGroup>
|
||||
</VueDraggable>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-card shadow="never">
|
||||
<template #header><span class="card-header">表格拖拽排序</span></template>
|
||||
<VueDraggable v-model="userList" target="tbody" :animation="150">
|
||||
<el-table :data="userList" row-key="name">
|
||||
<el-table-column label="姓名" prop="name" />
|
||||
<el-table-column label="角色" prop="roles" />
|
||||
</el-table>
|
||||
</VueDraggable>
|
||||
</el-card>
|
||||
|
||||
<el-card shadow="never">
|
||||
<template #header><span class="card-header">指定元素拖拽排序</span></template>
|
||||
<VueDraggable v-model="userList" target="tbody" handle=".handle" :animation="150">
|
||||
<el-table :data="userList" row-key="name">
|
||||
<el-table-column label="姓名" prop="name" />
|
||||
<el-table-column label="角色" prop="roles" />
|
||||
<el-table-column label="操作" width="100">
|
||||
<template #default>
|
||||
<el-button size="default" class="handle">移动</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</VueDraggable>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { VueDraggable } from "vue-draggable-plus";
|
||||
|
||||
const userList = ref([
|
||||
{ name: "路飞", roles: "船长·格斗家·D之一族" },
|
||||
{ name: "索隆", roles: "剑豪·战斗员·三刀流大师" },
|
||||
{ name: "娜美", roles: "航海士·气象学家·财务官" },
|
||||
{ name: "山治", roles: "厨师·格斗家·黑足" },
|
||||
{ name: "罗宾", roles: "考古学家·历史正文解读者" },
|
||||
]);
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.app-container {
|
||||
padding: 20px;
|
||||
|
||||
.el-card {
|
||||
margin-bottom: 20px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.drag-container {
|
||||
min-height: 200px;
|
||||
}
|
||||
|
||||
.drag-item {
|
||||
padding: 12px;
|
||||
margin-bottom: 8px;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
cursor: grab;
|
||||
border-radius: 6px;
|
||||
transition: transform 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.drag-item:active {
|
||||
cursor: grabbing;
|
||||
transform: scale(1.05);
|
||||
}
|
||||
}
|
||||
|
||||
/* 过渡动画 */
|
||||
.fade-move,
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
|
||||
}
|
||||
|
||||
.fade-enter-from,
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
transform: scaleY(0.01) translate(20px, 0);
|
||||
}
|
||||
|
||||
.fade-leave-active {
|
||||
position: absolute;
|
||||
}
|
||||
</style>
|
||||
30
src/views/demo/text-scroll.vue
Normal file
30
src/views/demo/text-scroll.vue
Normal file
@@ -0,0 +1,30 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<!-- 基础用法 -->
|
||||
<TextScroll text="这是一条基础的滚动公告，默认向左滚动。" typewriter />
|
||||
|
||||
<!-- 使用不同的类型 -->
|
||||
<TextScroll type="success" text="这是一条成功类型的滚动公告" typewriter />
|
||||
|
||||
<TextScroll type="warning" text="这是一条警告类型的滚动公告" />
|
||||
|
||||
<TextScroll type="danger" text="这是一条危险类型的滚动公告" />
|
||||
|
||||
<TextScroll type="info" text="这是一条信息类型的滚动公告" />
|
||||
|
||||
<!-- 自定义速度和方向 -->
|
||||
<TextScroll text="这是一条速度较慢、向右滚动的公告" :speed="30" direction="right" showClose />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import TextScroll from "@/components/TextScroll/index.vue";
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.app-container {
|
||||
:deep(.text-scroll-container) {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user