环境

nuxt3 + vu3 + element-plus-2.3.3

复现原因

假设有5条内容，打开一项内容通过el-dialog进行展示，当出现滚动条后，往下滑动，紧接着通过esc或遮罩进行关闭，打开另一项内容，这时候滚动条并未进行置顶。

解决方法

参考就行了。

js部分

const data = reactive({
  newsDialog: {
    show: false,
    currentNews: null,
  }
})

const refNewsDialog = ref(null);
watchEffect( ()=> {
  if(data.newsDialog.currentNews !== null){
    console.log("打开对话框", data.newsDialog.currentNews)
    data.newsDialog.show = true;
    nextTick(() => {
      // 滚动条重置
      ==refNewsDialog.value.dialogContentRef.$el.parentElement.scroll(0,0);==
    })
  }
})

模板部分

    <client-only>
      <el-dialog
          destroy-on-close ref="refNewsDialog" v-model="data.newsDialog.show" :show-close="true" @closed="data.newsDialog.currentNews = null" width="80%" class="news-dialog">
        <template #header="{ close, titleId, titleClass }">
          <div class="header">
            <h4 :id="titleId" :class="titleClass" v-text="data.newsDialog.currentNews.title"></h4>
          </div>
        </template>
        <div class="news-content" v-html="data.newsDialog.currentNews.content"></div>
      </el-dialog>
    </client-only>

总结

vue3因为对组件有更精细的控制暴露出的对象信息，这导致了element-plus2版本暴露出的有用对象太少了。真是太难了。