de-net/src/view/iframe/tab-group/joined-group-list.vue

<template>
    <div class="group-list-page" ref="pageWrapperDom">
        <div class="title">
            <img class="icon" :src="require('@/assets/svg/icon-joined-group-logo.svg')" >
            NFT Owners Group
        </div>
        <div class="content-wrapper">
            <nft-group-list style="height: 100%" 
                ref="groupListDom"
                :showBadge="true" 
                @clickCallBack="clickHandler"
                @updateList="updateList"></nft-group-list>
        </div>
    </div>
</template>

<script setup>
import { onMounted, ref, nextTick } from "vue";
import NftGroupList from '@/view/components/nft-group-list.vue';

import { sendChromeTabMessage, setChromeStorage } from '@/uilts/chromeExtension.js';

let groupListDom = ref(null);

const clickHandler = (params) => {
    setChromeStorage({ groupTabData: JSON.stringify({
        deTabVal: 'deGroupTab'
    })})
    let url = `https://twitter.com/${params.defaultTwitterAccount}`;
    sendMessageToContent({
        actionType: 'IFRAME_PAGE_JUMP',
        data: {
            url
        }
    })
}

const sendMessageToContent = (params) => {
    let {actionType, data} = params || {};
    chrome.tabs.getCurrent((tab) => {
        chrome.tabs.sendMessage(tab.id, {
        actionType,
        data,
        }, (res) => { console.log(res) });
    })
}

const updateList = (data) => {
    setHeight(data);
};

const setHeight = (data) => {
    const maxHeight = 321;
    nextTick(() => {
        if(!data || !data.length) { 
            sendChromeTabMessage({
                actionType: "IFRAME_JOINED_GROUP_SET_STYLE",
                data: {
                    height: '0px'
                }
            })
            return;
        }
        let listDom = document.querySelector('.list-content');
        if(listDom) {
            const titleDomHeight = 56, marginBottom = 12;
            let height = maxHeight;
            let contentHeight = listDom.offsetHeight + titleDomHeight + marginBottom;

            if(contentHeight < maxHeight) {
                height =  contentHeight;
            } else {
                height = maxHeight;
            }
            sendChromeTabMessage({
                actionType: "IFRAME_JOINED_GROUP_SET_STYLE",
                data: {
                    height: height + 'px'
                }
            })
        }
    })
}

onMounted(() => {
}) 
</script>

<style  lang="scss">
html, body, #app {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

.group-list-page {
    height: 100%;
    overflow-y: auto;
    background: #F7F9F9;

    padding: 0 16px;
    box-sizing: border-box;

    .title {
        font-weight: 800;
        font-size: 18px;
        box-sizing: border-box;
        height: 56px;
        display: flex;
        align-items: center;

        .icon {
            margin-right: 8px;
        }

    }
    .content-wrapper {
        height: calc(100% - 60px);
        overflow-y: auto;
        padding-left: 4px;
        box-sizing: border-box;
    }
}
</style>