vue实现元素周期表，附赠元素周期表静态数据

我即将远走丶或许也能高飞

已于 2022-05-05 11:25:20 修改

阅读量748

点赞数 2

于 2022-01-11 11:24:58 首次发布

本文链接：https://blog.csdn.net/weixin_47756693/article/details/122427209

版权

1、新增一个页面 home.vue, 引入elementsPeriodicTable组件 , 复制以下代码

<template>
   <elements-periodic-table @click="onElementsItem" multiple></elements-periodic-table>     
</template>
<script>
    import ElementsPeriodicTable from "./elementsPeriodicTable.vue"
    export default {
        components:{
            ElementsPeriodicTable
        },
        methods: {
            onElementsItem(list){
                console.log('选中的元素',list)
            }
        }
    }
</script>

2、新增一个组件 elementsPeriodicTable.vue ，复制下面代码


<template>
    <div class="elements-container">
        <div class="elements-main">
            <div class="elements">
                <div v-for="(item,index) in elementsTab" :key="`${item.sort}${index}`" :style="{backgroundColor:item.color}" class="elements-item"
                    @click="onSelectElements(item)">
                    <div class="elements-item-text">
                        {
  {item.name}} {
  {item.chName}}
                    </div>
                    <div class="elements-item-sort">
                        {
  {item.sort}}
                    </div>
                </div>
            </div>

            <div class="la-lu" style="margin-top:20px;">
                <div v-for="(item,index) in La_Lu" :key="`${item.sort}${index}`" :style="{backgroundColor:item.color}" class="elements-item"
                    @click="onSelectElements(item)">
                    <div class="elements-item-text">
                        {
  {item.name}} {
  {item.chName}}
                    </div>
                    <div class="elements-item-sort">
                        {
  {item.sort}}
                    </div>
                </div>
            </div>

            <div class="ac_lr">
                <div v-for="(item,index) in Ac_Lr" :key="`${item.sort}${index}`" :style="{backgroundColor:item.color}" class="elements-item"
                    @click="onSelectElements(item)">
                    <div class="elements-item-text">
                        {
  {item.name}} {
  {item.chName}}
                    </div>
                    <div class="elements-item-sort">
                        {
  {item.sort}}
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import { elementsTab, La_Lu, Ac_Lr } from './data';
    export default {