Vue3有哪些新特性和优势？

本文共计455个文字，预计阅读时间需要2分钟。

目录 + Vue3 + 获取元素高度不准确 + 页面获取元素高度和 $el 的问题 + Vue3 + 获取元素高度不准确 + HTML：+ transition name=slide-width + a-col class=fixed-small v-show=isShow :style={height: `${ztreeHeight}px`}

目录

• vue3 获取元素高度不准
• 页面获取元素高度和$el问题

vue3 获取元素高度不准

html：

<transition name="slide-width">     <a-col class="fixed-small" v-show="isShow" :style="{height: `${ztreeHeight}px`}">          <div style="height: 500px; ">              555          </div>     </a-col> </transition> <a-col class="auto-small-full" :class="{ 'auto-small': isShow }" ref="rightBox">     <a-table         :size="state.tableSize"         :loading="state.loading"         :columns="dynamicColumns"         :data-source="state.dataSource"         :scroll="{ x: 1800 }"         :pagination="{         current: state.current,         pageSize: state.pageSize,         total: state.total,         size: 'middle',         showTotal: total => `共 ${total} 条`,     }"         @change="handleTableChange"     >         <template #statusOther="{ text }">             <a-tag :color="statusMap[text].status">                 {{ statusMap[text].text }}             </a-tag>         </template>         <template #action="{ text, record }">             <a :title="text" @click="detailFuns(record)">查看详情</a>         </template>     </a-table> </a-col>

const rightBox = ref(); let ztreeHeight = ref<number>(0);   onMounted(() => {     watch(         () => state.dataSource,         () => {             nextTick(()=>{                $(document).ready(()=>{                    ztreeHeight.value = rightBox.value.$el.scrollHeight;                })             })           },     ); });

主要是动态数据请求回来之后获取元素的高度。

页面获取元素高度和$el问题

1.最近遇到一个需求就是vue中遇到 this.refs.elForm.offsetHeight，获取不到该高度

<el-form :model="addOrEditForm" class="el-form-dialog" label-width="120px" ref="elForm" > </el-form>

2.然后通过了解才知道，该元素事elementui分装的元素，需要再获取的前提加一个$el(如果是html标签就不用加)

this.refs.elForm.$el.offsetHeight

就可以获取到其高度。

以上为个人经验，希望能给大家一个参考，也希望大家多多支持易盾网络。