3b41cffbc9
All checks were successful
continuous-integration/drone/push Build is passing
- 解压官方默认主题 default_yfMBA.tar.gz 到 clientarea/hgcloud/ - .gitignore 排除压缩包和临时解压目录 - drone 新增步骤: 同步 hgcloud 到 /clientarea/template/pc/
94 lines
2.3 KiB
JavaScript
94 lines
2.3 KiB
JavaScript
const scrollText = {
|
|
template: /* html*/ `
|
|
<div class="scroll-container" ref="container">
|
|
<div
|
|
class="scroll-text"
|
|
ref="text"
|
|
:class="{ 'centered': !isOverflow }"
|
|
:style="textStyle"
|
|
@mouseenter="pause"
|
|
@mouseleave="resume"
|
|
>
|
|
<slot></slot>
|
|
<!-- loop 模式下复制一份实现无缝 -->
|
|
<span v-if="mode === 'loop' && isOverflow" class="clone">
|
|
<slot></slot>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
`,
|
|
data() {
|
|
return {
|
|
duration: 0,
|
|
isOverflow: false,
|
|
paused: false,
|
|
containerWidth: 0,
|
|
textWidth: 0,
|
|
};
|
|
},
|
|
props: {
|
|
speed: {type: Number, default: 50}, // 像素/秒
|
|
pauseTime: {type: Number, default: 2}, // once 模式停顿时间(秒)
|
|
mode: {
|
|
type: String,
|
|
default: "loop", // 可选: loop, once, pause
|
|
},
|
|
},
|
|
|
|
computed: {
|
|
textStyle() {
|
|
// 不超出：静止居中
|
|
if (!this.isOverflow) {
|
|
return {transform: "translateX(0)"};
|
|
}
|
|
|
|
let animation = "";
|
|
if (this.mode === "loop") {
|
|
animation = `scroll-loop ${this.duration}s linear infinite`;
|
|
} else if (this.mode === "once") {
|
|
// 每次滚动结束，停 pauseTime 秒
|
|
const totalTime = this.duration + this.pauseTime;
|
|
animation = `scroll-once ${totalTime}s linear infinite`;
|
|
} else if (this.mode === "pause") {
|
|
animation = `scroll-pause ${this.duration}s linear forwards`;
|
|
}
|
|
|
|
return {
|
|
animation,
|
|
"animation-play-state": this.paused ? "paused" : "running",
|
|
};
|
|
},
|
|
},
|
|
mounted() {
|
|
this.checkOverflow();
|
|
window.addEventListener("resize", this.checkOverflow);
|
|
},
|
|
beforeDestroy() {
|
|
window.removeEventListener("resize", this.checkOverflow);
|
|
},
|
|
methods: {
|
|
checkOverflow() {
|
|
this.$nextTick(() => {
|
|
const container = this.$refs.container;
|
|
const text = this.$refs.text;
|
|
if (!container || !text) return;
|
|
|
|
this.containerWidth = container.clientWidth;
|
|
this.textWidth = text.scrollWidth;
|
|
|
|
this.isOverflow = this.textWidth > this.containerWidth;
|
|
|
|
if (this.isOverflow) {
|
|
this.duration = this.textWidth / this.speed;
|
|
}
|
|
});
|
|
},
|
|
pause() {
|
|
this.paused = true;
|
|
},
|
|
resume() {
|
|
this.paused = false;
|
|
},
|
|
},
|
|
};
|