forked from Leaf/amber-ui
update
This commit is contained in:
parent
a6bc70b6e7
commit
dad993964d
@ -11,6 +11,7 @@
|
||||
"gen": "openapi-generator-cli generate -i ./api/swagger.yaml -g typescript-axios -o ./src/api"
|
||||
},
|
||||
"dependencies": {
|
||||
"@kangc/v-md-editor": "^2.3.18",
|
||||
"axios": "^1.7.7",
|
||||
"highlight.js": "^11.10.0",
|
||||
"js-base64": "^3.7.7",
|
||||
|
1
src/components.d.ts
vendored
1
src/components.d.ts
vendored
@ -12,5 +12,6 @@ declare module 'vue' {
|
||||
Menu: typeof import('./components/Menu.vue')['default']
|
||||
RouterLink: typeof import('vue-router')['RouterLink']
|
||||
RouterView: typeof import('vue-router')['RouterView']
|
||||
Test: typeof import('./components/chat/test.vue')['default']
|
||||
}
|
||||
}
|
||||
|
70
src/pages/test.vue
Normal file
70
src/pages/test.vue
Normal file
@ -0,0 +1,70 @@
|
||||
<template>
|
||||
<div>
|
||||
<p ref="textRef">
|
||||
<span v-for="(part, index) in textParts" :key="index" :style="{ animationDelay: `${index * 0.1}s` }">{{ part }}</span>
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onUnmounted } from 'vue';
|
||||
|
||||
// 生成固定长度的随机文本
|
||||
const generateText = (length: number) => {
|
||||
const characters = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
|
||||
let text = '';
|
||||
for (let i = 0; i < length; i++) {
|
||||
text += characters[Math.floor(Math.random() * characters.length)];
|
||||
}
|
||||
return text;
|
||||
};
|
||||
|
||||
const textLength = 10; // 每次生成的文本长度
|
||||
const text = ref('');
|
||||
const textParts = ref<string[]>([]);
|
||||
|
||||
// 将文本分割成每 10 个字符的部分
|
||||
const updateTextParts = () => {
|
||||
textParts.value = text.value.match(/.{1,10}/g) || [];
|
||||
};
|
||||
|
||||
// 定时追加新文本
|
||||
const updateInterval = 500; // 每 5 秒追加一次
|
||||
let intervalId: any;
|
||||
|
||||
onMounted(() => {
|
||||
intervalId = setInterval(() => {
|
||||
text.value += generateText(textLength);
|
||||
updateTextParts();
|
||||
}, updateInterval);
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
clearInterval(intervalId);
|
||||
});
|
||||
|
||||
// 初始更新文本部分
|
||||
onMounted(() => {
|
||||
updateTextParts();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="css" scoped>
|
||||
p {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
transform: translateY(100%);
|
||||
transition: transform 0.5s ease-in-out;
|
||||
animation: fadeIn 0.5s ease-in-out forwards;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
to {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
</style>
|
60
src/pages/test2.vue
Normal file
60
src/pages/test2.vue
Normal file
@ -0,0 +1,60 @@
|
||||
<template>
|
||||
<div>
|
||||
<p ref="textRef">
|
||||
<span v-for="(part, index) in textParts" :key="index" :style="{ opacity: `${1 - index * 0.1}` }">{{ part }}</span>
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, onMounted, onUnmounted, watch } from 'vue';
|
||||
|
||||
interface Props {
|
||||
text: string;
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
text: ''
|
||||
});
|
||||
|
||||
const textLength = 10; // 每次生成的文本长度
|
||||
const textParts = ref<string[]>([]);
|
||||
|
||||
// 将文本分割成每 10 个字符的部分
|
||||
const updateTextParts = () => {
|
||||
textParts.value = props.text.match(/.{1,10}/g) || [];
|
||||
};
|
||||
|
||||
// 监听 text 变化并更新 textParts
|
||||
watch(computed(() => props.text), (newText) => {
|
||||
updateTextParts();
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
updateTextParts();
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
// 清理资源
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="css" scoped>
|
||||
p {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
white-space: nowrap; /* 保持文本在同一行 */
|
||||
}
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
opacity: 0;
|
||||
transition: opacity 0.5s ease-in-out;
|
||||
animation: fadeIn 0.5s ease-in-out forwards;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
103
src/pages/test3.vue
Normal file
103
src/pages/test3.vue
Normal file
@ -0,0 +1,103 @@
|
||||
<template>
|
||||
<div>
|
||||
<p ref="textRef">
|
||||
<span
|
||||
v-for="(part, index) in textParts"
|
||||
:key="index"
|
||||
:style="{ opacity: `${1 - index * 0.1}` }"
|
||||
>{{ part }}</span
|
||||
>
|
||||
</p>
|
||||
|
||||
<!-- 包裹 v-md-editor 的 div -->
|
||||
<div class="editor-container">
|
||||
<v-md-preview
|
||||
:text="text"
|
||||
@input="handleInput"
|
||||
height="500px"
|
||||
|
||||
></v-md-preview>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, onMounted, onUnmounted, watch } from "vue";
|
||||
|
||||
|
||||
import VMdPreview from '@kangc/v-md-editor/lib/preview';
|
||||
import '@kangc/v-md-editor/lib/style/preview.css';
|
||||
import githubTheme from '@kangc/v-md-editor/lib/theme/github.js';
|
||||
import '@kangc/v-md-editor/lib/theme/style/github.css';
|
||||
|
||||
// highlightjs
|
||||
import hljs from 'highlight.js';
|
||||
|
||||
VMdPreview.use(githubTheme, {
|
||||
Hljs: hljs,
|
||||
});
|
||||
|
||||
|
||||
const text = ref("text");
|
||||
const textLength = 10; // 每次生成的文本长度
|
||||
const textParts = ref<string[]>([]);
|
||||
|
||||
// 将文本分割成每 10 个字符的部分
|
||||
const updateTextParts = () => {
|
||||
textParts.value = text.value.match(/.{1,10}/g) || [];
|
||||
};
|
||||
|
||||
// 监听 text 变化并更新 textParts
|
||||
watch(
|
||||
() => text.value,
|
||||
(newText) => {
|
||||
updateTextParts();
|
||||
}
|
||||
);
|
||||
|
||||
onMounted(() => {
|
||||
updateTextParts();
|
||||
|
||||
// 随机生成字符串到 text.value
|
||||
// setInterval(() => {
|
||||
// const randomString = Math.random().toString(36).substring(2, 2 + textLength);
|
||||
// text.value += randomString;
|
||||
// }, 1000);
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
// 清理资源
|
||||
});
|
||||
|
||||
// 处理输入事件
|
||||
const handleInput = (value: string) => {
|
||||
text.value = value;
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="css" scoped>
|
||||
p {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
white-space: nowrap; /* 保持文本在同一行 */
|
||||
}
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
opacity: 0;
|
||||
transition: opacity 0.5s ease-in-out;
|
||||
animation: fadeIn 0.5s ease-in-out forwards;
|
||||
}
|
||||
|
||||
.editor-container {
|
||||
opacity: 0;
|
||||
transition: opacity 0.5s ease-in-out;
|
||||
animation: fadeIn 0.5s ease-in-out forwards;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
10
src/pages/test4.vue
Normal file
10
src/pages/test4.vue
Normal file
@ -0,0 +1,10 @@
|
||||
<script setup lang="ts">
|
||||
import Test3 from './test3.vue';
|
||||
|
||||
|
||||
const text = ref("some text");
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Test3 :text="text"></Test3>
|
||||
</template>01
|
4
src/typed-router.d.ts
vendored
4
src/typed-router.d.ts
vendored
@ -23,5 +23,9 @@ declare module 'vue-router/auto-routes' {
|
||||
'/auth/continue': RouteRecordInfo<'/auth/continue', '/auth/continue', Record<never, never>, Record<never, never>>,
|
||||
'/auth/login': RouteRecordInfo<'/auth/login', '/auth/login', Record<never, never>, Record<never, never>>,
|
||||
'/guest/': RouteRecordInfo<'/guest/', '/guest', Record<never, never>, Record<never, never>>,
|
||||
'/test': RouteRecordInfo<'/test', '/test', Record<never, never>, Record<never, never>>,
|
||||
'/test2': RouteRecordInfo<'/test2', '/test2', Record<never, never>, Record<never, never>>,
|
||||
'/test3': RouteRecordInfo<'/test3', '/test3', Record<never, never>, Record<never, never>>,
|
||||
'/test4': RouteRecordInfo<'/test4', '/test4', Record<never, never>, Record<never, never>>,
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user