提交 a6725218 编写于 作者: C cocoli_bk

Thu Aug 29 14:55:24 CST 2024 inscode

上级 79c5bd79
...@@ -8,6 +8,8 @@ ...@@ -8,6 +8,8 @@
}, },
"dependencies": { "dependencies": {
"guess": "^1.0.2", "guess": "^1.0.2",
"less": "^4.2.0",
"less-loader": "^12.2.0",
"vue": "^3.2.37" "vue": "^3.2.37"
}, },
"devDependencies": { "devDependencies": {
......
<script setup> <script setup>
import HelloWorld from './components/HelloWorld.vue' import {ref} from 'vue'
import TheWelcome from './components/TheWelcome.vue' import textScroll from './components/textScroll.vue'
const title = ref('我是很长的标题,可以滚动的标题!我是很长的标题,可以滚动的标题')
</script> </script>
<template> <template>
...@@ -8,40 +9,18 @@ import TheWelcome from './components/TheWelcome.vue' ...@@ -8,40 +9,18 @@ import TheWelcome from './components/TheWelcome.vue'
<img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" /> <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
<div class="wrapper"> <div class="wrapper">
<HelloWorld msg="You did it!" /> <textScroll :parWidth="300" :text="title" :parColor="'#fff'"></textScroll>
</div> </div>
</header> </header>
<main>
<TheWelcome />
</main>
</template> </template>
<style scoped> <style scoped>
header {
line-height: 1.5;
}
.logo {
display: block;
margin: 0 auto 2rem;
}
@media (min-width: 1024px) {
header {
display: flex;
place-items: center;
padding-right: calc(var(--section-gap) / 2);
}
.logo {
margin: 0 2rem 0 0;
}
header .wrapper { header .wrapper {
display: flex; display: flex;
place-items: flex-start; justify-content: center;
flex-wrap: wrap;
} }
.logo {
display: block;
margin: 0 auto 2rem;
} }
</style> </style>
<script setup>
defineProps({
msg: {
type: String,
required: true
}
})
</script>
<template>
<div class="greetings">
<h1 class="green">{{ msg }}</h1>
<h3>
You’ve successfully created a project with
<a target="_blank" href="https://vitejs.dev/">Vite</a> +
<a target="_blank" href="https://vuejs.org/">Vue 3</a>.
</h3>
</div>
</template>
<style scoped>
h1 {
font-weight: 500;
font-size: 2.6rem;
top: -10px;
}
h3 {
font-size: 1.2rem;
}
.greetings h1,
.greetings h3 {
text-align: center;
}
@media (min-width: 1024px) {
.greetings h1,
.greetings h3 {
text-align: left;
}
}
</style>
<script setup>
import WelcomeItem from './WelcomeItem.vue'
import DocumentationIcon from './icons/IconDocumentation.vue'
import ToolingIcon from './icons/IconTooling.vue'
import EcosystemIcon from './icons/IconEcosystem.vue'
import CommunityIcon from './icons/IconCommunity.vue'
import SupportIcon from './icons/IconSupport.vue'
</script>
<template>
<WelcomeItem>
<template #icon>
<DocumentationIcon />
</template>
<template #heading>Documentation</template>
Vue’s
<a target="_blank" href="https://vuejs.org/">official documentation</a>
provides you with all information you need to get started.
</WelcomeItem>
<WelcomeItem>
<template #icon>
<ToolingIcon />
</template>
<template #heading>Tooling</template>
This project is served and bundled with
<a href="https://vitejs.dev/guide/features.html" target="_blank">Vite</a>. The recommended IDE
setup is <a href="https://code.visualstudio.com/" target="_blank">VSCode</a> +
<a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>. If you need to test
your components and web pages, check out
<a href="https://www.cypress.io/" target="_blank">Cypress</a> and
<a href="https://on.cypress.io/component" target="_blank"
>Cypress Component Testing</a
>.
<br />
More instructions are available in <code>README.md</code>.
</WelcomeItem>
<WelcomeItem>
<template #icon>
<EcosystemIcon />
</template>
<template #heading>Ecosystem</template>
Get official tools and libraries for your project:
<a target="_blank" href="https://pinia.vuejs.org/">Pinia</a>,
<a target="_blank" href="https://router.vuejs.org/">Vue Router</a>,
<a target="_blank" href="https://test-utils.vuejs.org/">Vue Test Utils</a>, and
<a target="_blank" href="https://github.com/vuejs/devtools">Vue Dev Tools</a>. If you need more
resources, we suggest paying
<a target="_blank" href="https://github.com/vuejs/awesome-vue">Awesome Vue</a>
a visit.
</WelcomeItem>
<WelcomeItem>
<template #icon>
<CommunityIcon />
</template>
<template #heading>Community</template>
Got stuck? Ask your question on
<a target="_blank" href="https://chat.vuejs.org">Vue Land</a>, our official Discord server, or
<a target="_blank" href="https://stackoverflow.com/questions/tagged/vue.js">StackOverflow</a>.
You should also subscribe to
<a target="_blank" href="https://news.vuejs.org">our mailing list</a> and follow the official
<a target="_blank" href="https://twitter.com/vuejs">@vuejs</a>
twitter account for latest news in the Vue world.
</WelcomeItem>
<WelcomeItem>
<template #icon>
<SupportIcon />
</template>
<template #heading>Support Vue</template>
As an independent project, Vue relies on community backing for its sustainability. You can help
us by
<a target="_blank" href="https://vuejs.org/sponsor/">becoming a sponsor</a>.
</WelcomeItem>
</template>
<template>
<div class="item">
<i>
<slot name="icon"></slot>
</i>
<div class="details">
<h3>
<slot name="heading"></slot>
</h3>
<slot></slot>
</div>
</div>
</template>
<style scoped>
.item {
margin-top: 2rem;
display: flex;
}
.details {
flex: 1;
margin-left: 1rem;
}
i {
display: flex;
place-items: center;
place-content: center;
width: 32px;
height: 32px;
color: var(--color-text);
}
h3 {
font-size: 1.2rem;
font-weight: 500;
margin-bottom: 0.4rem;
color: var(--color-heading);
}
@media (min-width: 1024px) {
.item {
margin-top: 0;
padding: 0.4rem 0 1rem calc(var(--section-gap) / 2);
}
i {
top: calc(50% - 25px);
left: -26px;
position: absolute;
border: 1px solid var(--color-border);
background: var(--color-background);
border-radius: 8px;
width: 50px;
height: 50px;
}
.item:before {
content: ' ';
border-left: 1px solid var(--color-border);
position: absolute;
left: 0;
bottom: calc(50% + 25px);
height: calc(50% - 25px);
}
.item:after {
content: ' ';
border-left: 1px solid var(--color-border);
position: absolute;
left: 0;
top: calc(50% + 25px);
height: calc(50% - 25px);
}
.item:first-of-type:before {
display: none;
}
.item:last-of-type:after {
display: none;
}
}
</style>
<template>
<div class="marquee-wrap" :style="{width:`${parWidth}px`}">
<!-- 滚动内容 -->
<div class="scroll">
<p class="marquee Bold_14_body" :style="{color: parColor}">{{ text }}</p>
<!-- 文字副本 -->
<p class="copy" :style="{color: parColor}"></p>
</div>
<!-- 为了计算总文本宽度,通过css在页面中隐藏 -->
<p class="getWidth">{{ text }}</p>
</div>
</template>
<script setup>
import { defineProps, onMounted, onUnmounted, ref, watchEffect } from 'vue'
const props = defineProps({ text: {type: String, default:''}, parWidth: [String, Number], parColor: {type: String, default: '#333'} })
const timer = ref(null)
watchEffect(() => {
console.log('watchEffect', props)
})
onMounted(() => {
const move = () => {
let maxWidth = document.querySelector('.marquee-wrap').clientWidth
// 获取文字text 的计算后宽度 (由于overflow的存在,直接获取不到,需要独立的node计算)
let width = document.querySelector('.getWidth').scrollWidth
// 如果文本内容的宽度小于页面宽度,则表示文字小于等于一行,则不需要滚动
if (width <= maxWidth) return
let scroll = document.querySelector('.scroll')
let copy = document.querySelector('.copy')
copy.innerText = props.text // 文字副本填充
let distance = 0 // 位移距离
// 设置位移
timer.value = setInterval(() => {
distance -= 1
// 如果位移超过文字宽度,则回到起点
if (-distance >= width) {
distance = 16 // 距离必须与marquee的margin宽度相同
}
scroll.style.transform = 'translateX(' + distance + 'px)'
}, 20)
}
const time2 = setTimeout(() => {
move()
clearTimeout(time2)
}, 1000)
})
onUnmounted(() => {
clearInterval(timer.value)
})
</script>
<style scoped lang="less">
.marquee-wrap {
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
.scroll {
display: flex;
align-items: center;
height: 100%;
p {
word-break: keep-all; // 不换行
white-space: nowrap;
/* 设置前后间隔 */
&.marquee {
margin-right: 16px;
}
}
}
/* 仅为了获取宽度,故隐藏掉 */
.getWidth {
word-break: keep-all; // 不换行
white-space: nowrap;
position: absolute;
opacity: 0;
top: 0;
}
}
</style>
\ No newline at end of file
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册