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;。 在创建的钩子上添加侦听器，以检测窗口大小并调用方法以根据˙font-size˙计算行数。然后在模板循环中计算 nr 行。（粗略的解决方案）

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>