鍍金池/ 問答/HTML/ vue中，使用計算屬性計算clientHeight不刷新問題

vue中，使用計算屬性計算clientHeight不刷新問題

頁面中有以下幾個模塊，點(diǎn)擊右側(cè)按鈕可以展開與收縮：

<div class="ware-publish-floor" ref="warePublishModule">
    <sub-products-setting title="Sub Product" v-if="pSubProductInfoVO.isShow"></sub-products-setting>
    <basic-info title="Basic Info" v-if="pBasicInfoVO.isShow"></basic-info>
    <sku-info title="Sku Info" v-if="pSkuInfoListVO.isShow"></sku-info>
    <product-imgs title="Product Img" v-if="pProductImgInfoVO.isShow"></product-imgs>
    <delivery-info title="Delivery Info" v-if="pDeliveryInfoVO.isShow"></delivery-info>
    <ware-house title="Warehouse Info" v-if="pWarehouseInfoVO.isShow"></ware-house>
    <description-info title="Description Info" v-if="pDescriptionsInfoVO.isShow"></description-info>
    <account-info title="Account Info" v-if="pManAccountVO.isShow"></account-info>
    <ordiary-info title="Ordiary Info" v-if="pOrdinaryAttrInfoVO.isShow"></ordiary-info>
    <business-relate title="Business relate" v-if="pBusinessRelateInfoVO.isShow && !isVirtualSuitWare"></business-relate>
    <div class="alignright">
        <floor-nav :floor-data="floorData"></floor-nav>
    </div>
</div>

clipboard.png

然后使用計算屬性計算每個模塊的高度：
// 模塊高度數(shù)據(jù)

        floorHeightList() {
            let _self = this
            let heightArr = []
            let height = 0
            this.$nextTick(() => {
                let floorList = Array.from(_self.$refs.warePublishModule.children)
                for(let i = 0, len = floorList.length - 1; i < len; i++) {
                    height += floorList[i].clientHeight
                    heightArr.push(height)
                }
            })
            return heightArr
        },

當(dāng)我切換上面展開與隱藏的時候，高度數(shù)組并沒有刷新，請問是什么問題？

回答
編輯回答
尐飯團(tuán)

在mounted中添加監(jiān)聽窗口大小的變化

mounted(){
    this.$nextTick(() => {
        window.addEventListener('onresize',() => {
            ....
        })
    })
}
2017年10月8日 09:18
編輯回答
懶洋洋

監(jiān)聽不了 dom 屬性的，不會算出來的值是不會變的。

2017年5月25日 14:54