使用vue3+Element plus开发移动端Dialog打不开问题_el-dialog不显示

一、问题产生

做项目的时候使用vue3+Element plus开发移动端程序，需要弹出一个信息新增对话框，我在el-dialog中放入了el-form实现，打包之后发现使用的el-dialog无法正常弹出。

二、寻找解决方案

由于el-dialog不能弹出，于是将el-dialog换成div，保留el-form，使用原生css写模态框，这里试过v-if和v-show两种来控制模态框的显示、隐藏。

• v-show：使用v-show控制模态框显隐，无法正常打开模态框所在的页面，当页呈现空白
• v-if：使用v-show控制模态框显隐，模态框所在页正常展示信息，但是仍旧不能打开模态框

        之后测试v-show可以在移动端正常使用。

然后我把模态框中的el-form删除，来测试模态框是否实现，打包后发现模态框正常，于是问题在于其中的el-form，之后使用input标签和button标签，打包后发现原生H5标签不影响模态框，于是就将el-form换成了form，打包测试发现使用form仍无法解决问题，但是不用<form>包裹的input标签和button标签可以显示，于是删除外层的<form>标签，问题解决。

之后发现可以在模态框中使用<el-button>，推测使用vue3开发移动端时，模态框的实现控制不了多层复杂标签。

三、解决

在模态框中直接使用input等标签，不需要使用form标签包裹。

（可能在最初的版本中将<el-form></el-form>删除，直接使用el-element-item，也能解决问题，暂未测试）

四、查找解决方案时发现的比较有用的文章

关于Vue3中，element-plus的el-dialog对话框无法显示的可能原因。_el-dialog不显示_怠惰の于的博客-CSDN博客

vue3+vant 引入Dialog Toast都会失败报错not defined - 奔跑的前端猿 - 博客园 (cnblogs.com)