Vue Mazeletter 背景

Question

我正在尝试使用 Mazeletter 为我正在构建的应用程序的每个页面创建背景。但是，我以前没有做过这样的事情，我希望得到一些帮助。我有一个用作背景的基本测试组件，我可以成功地将元素放置在它上面。

不过，我想让它更有活力一点。一个文本应该是动态的（即通过道具传递）并且应该有足够的文本来为页面上出现的尽可能多的内容提供背景（这也是动态的）。

这是我目前正在使用的测试组件：

<template>
  <div id="mz-background">
    <p class="mz-text">ThisIsATestThisIsATestThisIsATestThisIsATest</p>
    <p class="mz-text">ThisIsATestThisIsATestThisIsATestThisIsATest</p>
    <p class="mz-text">ThisIsATestThisIsATestThisIsATestThisIsATest</p>
    <p class="mz-text">ThisIsATestThisIsATestThisIsATestThisIsATest</p>
    <p class="mz-text">ThisIsATestThisIsATestThisIsATestThisIsATest</p>
    <p class="mz-text">ThisIsATestThisIsATestThisIsATestThisIsATest</p>
    <p class="mz-text">ThisIsATestThisIsATestThisIsATestThisIsATest</p>
    <p class="mz-text">ThisIsATestThisIsATestThisIsATestThisIsATest</p>
    <p class="mz-text">ThisIsATestThisIsATestThisIsATestThisIsATest</p>
    <p class="mz-text">ThisIsATestThisIsATestThisIsATestThisIsATest</p>
    <p class="mz-text">ThisIsATestThisIsATestThisIsATestThisIsATest</p>
    <p class="mz-text">ThisIsATestThisIsATestThisIsATestThisIsATest</p>
    <p class="mz-text">ThisIsATestThisIsATestThisIsATestThisIsATest</p>
    <p class="mz-text">ThisIsATestThisIsATestThisIsATestThisIsATest</p>
  </div>
</template>

<script>
export default {
  name: "UnderworldPattern",
};
</script>

<style scoped>
#mz-background {
  z-index: 0;
  position: fixed;
  overflow: hidden;
  width: 100vw;
  height: 100vh;
}

.mz-text {
  line-height: 89.5px;
  font-family: "mazeletter-underworld"; // imported in project css
  font-size: 90px;
  z-index: 1;
  color: #000000;
  user-select: none;
  text-align: left;
  letter-spacing: -0.409091px;
}
</style>

如果有人可以帮助我使它更有活力，我将不胜感激

感谢您的宝贵时间

Answer 1

可能如下所示：定义长字符集并在 #mz-background 上设置 overflow: hidden;。在创建的钩子上添加侦听器，以检测 window 调整大小并调用方法根据 ˙font-size˙ 计算行数。然后在模板循环中计算出的行数。（粗略的解决方案）

export default {
  name: "UnderworldPattern",
  data() {
    return {
      textToShow: 'ThisIsATestThisIsATestThisIsATestThisIsATestThisIsATestThisIsATestThisIsATestThisIsATest',
      nrOfLines: 0
    }
  },
  methods: {
    getNrOfLines() {
      this.nrOfLines = parseInt(document.documentElement.clientHeight / 90)
    }
  },
  mounted() {
    this.getNrOfLines()
  },
  created() {
    window.addEventListener("resize", this.getNrOfLines);
  },
  unmounted() {
    window.removeEventListener("resize", this.getNrOfLines);
  },
};


#mz-background {
  z-index: 0;
  position: fixed;
  overflow: hidden;
  width: 100vw;
  height: 100vh;
}

.mz-text {
  line-height: 89.5px;
  font-family: "mazeletter-underworld"; // imported in project css
  font-size: 90px;
  z-index: 1;
  color: black;
  user-select: none;
  text-align: left;
  letter-spacing: -0.409091px;
  overflow: hidden;
  margin: 0;
}


<div id="app">
  <template>
    <div id="mz-background">
      <p class="mz-text" v-for="index in nrOfLines" :key="index">{{ textToShow }}</p>
    </div>
  </template>
</div>

Vue Mazeletter 背景

Vue Mazeletter background

css

background

dynamic

vue.js

vuejs2