Vue3简单实现元素周期表

Jimsare

已于 2022-08-26 10:28:58 修改

阅读量535

点赞数

文章标签： vue.js 前端 javascript

于 2022-08-25 10:08:10 首次发布

本文链接：https://blog.csdn.net/weixin_44326492/article/details/126518674

版权

浏览器上效果：元素周期表

布局思路如下

根据族来划分元素，纵向排列各族内元素，然后在横向上排列各个族

<div class="wrapper">
      <div class="e-con">
        <div class="period-index">
          <div class="pi-des des-bg"></div>
          <div class="pi-con fdisxy" v-for="index in 7">{
  {index}}</div>
        </div>
        <div class="elements fdisc" v-for="clans,key in tableData" :class="[key=='VIIIa'?'special-width':'']">
          <div class="des-bg des-a fdisc" v-if="key=='IA'">
            <div class="clans-name">I<span class="text-red">A</span></div>
            <div class="r-text">1</div>
          </div>
          <div class="des-bg des-b fdisc" v-else-if="key=='IIA'">
            <div>II<span class="text-red">A</span></div>
            <div class="r-text">2</div>
          </div>
          <div class="des-bg des-c fdisc" v-else-if="key=='IIIB'">
            <div>III<span class="text-red">B</span></div>
            <div class="r-text">3</div>
          </div>
          <div class="des-bg des-c fdisc" v-else-if="key=='IVB'">
            <div>IV<span class="text-red">B</span></div>
            <div class="r-text">4</div>
          </div>
          <div class="des-bg des-c fdisc" v-else-if="key=='VB'">
            <div>V<span class="text-red">B</span></div>
            <div class="r-text">5</div>
          </div>
          <div class="des-bg des-c fdisc" v-else-if="key=='VIB'">
            <div>VI<span class="text-red">B</span></div>
            <div class="r-text">6</div>
          </div>
          <div class="des-bg des-c fdisc" v-else-if="key=='VIIB'">
            <div>VII<span class="text-red">B</span></div>
            <div class="r-text">7</div>
          </div>
          <div class="des-bg des-d fdisr" v-else-if="key=='VIIIa'" v-once>
            <div class="index-head">VIII</div>
            <div class="i-text">8</div>
            <div class="i-text">9</div>
            <div class="i-text">10</div>
          </div>
          <div v-else-if="key=='VIIIb'"></div>
          <div v-else-if="key=='VIIIc'"></div>
          <div class="des-bg des-c fdisc" v-else-if="key=='IB'">
            <div>I<span class="text-red">B</span></div>
            <div class="r-text">11</div>
          </div>
          <div class="des-bg des-c fdisc" v-else-if="key=='IIB'">
            <div>II<span class="text-red">B</span></div>
            <div class="r-text">12</div>
          </div>
          <div class="des-bg des-b fdisc bdl-normal" v-else-if="key=='IIIA'">
            <div>III<span class="text-red">A</span></div>
            <div class="r-text">13</div>
          </div>
          <div class="des-bg des-b fdisc" v-else-if="key=='IVA'">
            <div>IV