element-ui 的el-Popover 自定义控制弹出和关闭

最新推荐文章于 2025-03-07 15:06:52 发布

原创最新推荐文章于 2025-03-07 15:06:52 发布 · 5.2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #elementui

前台问题专栏收录该内容

5 篇文章

订阅专栏

这篇博客讨论了一个前端开发中的问题，即如何实现一个自定义的浮窗并确保其能根据父页面的状态正确关闭。内容涉及到el-popover组件的使用，包括手动触发、宽度设置和表格数据绑定。作者指出，当父页面关闭时，浮窗不会自动关闭，解决方法是对父页面的显示控制变量添加监控，以实现同步关闭。示例代码展示了如何初始化表格数据、显示浮窗以及处理输入验证和保存操作。

部署运行你感兴趣的模型镜像

 <el-popover
                          placement="right"
                          width="400"   v-model="dialogVisible"
                          trigger="manual">
                          <p>请录入5个手机号</p>
                          <el-table ref="tableMoble" :data="tableMoble.tableData"
                                    tooltip-effect="dark" stripe  border :show-header="false">
                            <el-table-column prop="serialNumber">
                              <template slot-scope="scope">
                                <el-input v-model="scope.row.serialNumber"
                                          :maxlength="16"
                                          :disabled="isMobleCanRead"
                                          onKeyUp="value=value.replace(/[\W]/g,'')"
                                          placeholder="请输入手机号，例如13545874455"
                                          @blur="test(scope.row)"
                                ></el-input>
                              </template>
                            </el-table-column>
                          </el-table>
                          <div style="text-align: right; margin: 0">
                            <el-button type="primary" size="mini" @click="ok" v-if="!isDisabled" >保存</el-button>
                            <el-button size="mini" type="text" @click="close">取消</el-button>
                          </div>
                          <el-button type="primary" slot="reference" :disabled="isShowAttach" @click="showDialog">备用手机号</el-button>
                        </el-popover>

 

dialogVisible:false ,  //是否显示浮窗
tableMoble:[], //表格数据

showDialog(){
//准备 tableMoble.tableData数据
dialogVisible=true
}

这个浮窗是自定义控制住了，但是发现有个问题，父页面关闭了的话，这个浮窗不会自动关闭，这时候需要对父页面的显示控制变量添加监控

您可能感兴趣的与本文相关的镜像