enhance(client): better marquee component

This commit is contained in:
syuilo 2022-07-02 21:28:04 +09:00 committed by Chloe Kudryavtsev
parent 573dd770bf
commit ba6f0cd91d
5 changed files with 100 additions and 17 deletions

View file

@ -74,7 +74,6 @@
"vanilla-tilt": "1.7.2",
"vite": "2.9.10",
"vue": "3.2.37",
"vue-marquee-text-component": "2.0.1",
"vue-prism-editor": "2.0.0-alpha.2",
"vuedraggable": "4.0.1",
"websocket": "1.0.34",

View file

@ -0,0 +1,97 @@
<script lang="ts">
import { h, onMounted, onUnmounted, ref } from 'vue';
export default {
name: 'MarqueeText',
props: {
duration: {
type: Number,
default: 15,
},
repeat: {
type: Number,
default: 2,
},
paused: {
type: Boolean,
default: false,
},
reverse: {
type: Boolean,
default: false,
},
},
setup(props) {
const contentEl = ref();
function calc() {
const eachLength = contentEl.value.offsetWidth / props.repeat;
const factor = 3000;
const duration = props.duration / ((1 / eachLength) * factor);
contentEl.value.style.animationDuration = `${duration}s`;
}
onMounted(() => {
calc();
});
onUnmounted(() => {
});
return {
contentEl,
};
},
render({
$slots, $style, $props: {
duration, repeat, paused, reverse,
},
}) {
return h('div', { class: [$style.wrap] }, [
h('span', {
ref: 'contentEl',
class: [
paused
? $style.paused
: undefined,
$style.content,
],
}, Array(repeat).fill(
h('span', {
class: $style.text,
style: {
animationDirection: reverse
? 'reverse'
: undefined,
},
}, $slots.default()),
)),
]);
},
};
</script>
<style lang="scss" module>
.wrap {
overflow: clip;
}
.content {
display: inline-block;
white-space: nowrap;
}
.text {
display: inline-block;
animation-name: marquee;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-duration: inherit;
}
.paused .text {
animation-play-state: paused;
}
@keyframes marquee {
0% { transform:translateX(0); }
100% { transform:translateX(-100%); }
}
</style>

View file

@ -47,8 +47,8 @@
<script lang="ts" setup>
import { } from 'vue';
import { toUnicode } from 'punycode/';
import MarqueeText from 'vue-marquee-text-component';
import XTimeline from './welcome.timeline.vue';
import MarqueeText from '@/components/marquee.vue';
import XSigninDialog from '@/components/signin-dialog.vue';
import XSignupDialog from '@/components/signup-dialog.vue';
import MkButton from '@/components/ui/button.vue';

View file

@ -18,8 +18,8 @@
<script lang="ts" setup>
import { onMounted, onUnmounted, ref, watch } from 'vue';
import MarqueeText from 'vue-marquee-text-component';
import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
import MarqueeText from '@/components/marquee.vue';
import { GetFormResultType } from '@/scripts/form';
import * as os from '@/os';
import MkContainer from '@/components/ui/container.vue';

View file

@ -1216,11 +1216,6 @@ content-disposition@0.5.4:
dependencies:
safe-buffer "5.2.1"
core-js@^3.18.0:
version "3.23.3"
resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.23.3.tgz#3b977612b15da6da0c9cc4aec487e8d24f371112"
integrity sha512-oAKwkj9xcWNBAvGbT//WiCdOMpb9XQG92/Fe3ABFM/R16BsHgePG00mFOgKf7IsCtfj8tA1kHtf/VwErhriz5Q==
core-util-is@1.0.2:
version "1.0.2"
resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
@ -4210,20 +4205,12 @@ vue-eslint-parser@^9.0.1:
lodash "^4.17.21"
semver "^7.3.6"
vue-marquee-text-component@2.0.1:
version "2.0.1"
resolved "https://registry.yarnpkg.com/vue-marquee-text-component/-/vue-marquee-text-component-2.0.1.tgz#62691df195f755471fa9bdc9b1969f836a922b9a"
integrity sha512-dbeRwDY5neOJcWZrDFU2tJMhPSsxN25ZpNYeZdt0jkseg1MbyGKzrfEH9nrCFZRkEfqhxG+ukyzwVwR9US5sTQ==
dependencies:
core-js "^3.18.0"
vue "^3.2.19"
vue-prism-editor@2.0.0-alpha.2:
version "2.0.0-alpha.2"
resolved "https://registry.yarnpkg.com/vue-prism-editor/-/vue-prism-editor-2.0.0-alpha.2.tgz#aa53a88efaaed628027cbb282c2b1d37fc7c5c69"
integrity sha512-Gu42ba9nosrE+gJpnAEuEkDMqG9zSUysIR8SdXUw8MQKDjBnnNR9lHC18uOr/ICz7yrA/5c7jHJr9lpElODC7w==
vue@3.2.37, vue@^3.2.19:
vue@3.2.37:
version "3.2.37"
resolved "https://registry.yarnpkg.com/vue/-/vue-3.2.37.tgz#da220ccb618d78579d25b06c7c21498ca4e5452e"
integrity sha512-bOKEZxrm8Eh+fveCqS1/NkG/n6aMidsI6hahas7pa0w/l7jkbssJVsRhVDs07IdDq7h9KHswZOgItnwJAgtVtQ==