element的dialog框过高展示问题

<el-dialog

ref="editDialog"

title="社区矛盾调解处理"

width="950px"

:top='top'

class="selfdialog"

:close-on-click-modal="false"

:visible.sync="visible"

v-if="visible"

/>

dialog的内容太高且超出屏幕高度,解决问题第一次滚动到底部,第二次打开仍然在底部;使用v-if="visible"每次关闭直接销毁dialog

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Element Dialog 是一个弹出框组件,用于在页面中展示一个模态窗口,通常用于提示用户或者展示详细信息。 使用 Element Dialog 的步骤如下: 1. 在 HTML 文件中引入 Element UI 的样式文件和 JavaScript 文件。 2. 在需要使用 Dialog 的组件中,引入 Dialog 组件并注册。 ```javascript import { Dialog } from 'element-ui'; export default { components: { Dialog }, ... } ``` 3. 在组件中使用 Dialog 组件,可以通过 v-model 控制 Dialog 的显示和隐藏。 ```html <template> <div> <el-button type="primary" @click="dialogVisible = true">打开 Dialog</el-button> <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose" > <p>这是一个 Dialog 弹出框。</p> <span slot="footer" class="dialog-footer"> <el-button @click="dialogVisible = false">取消</el-button> <el-button type="primary" @click="dialogVisible = false">确定</el-button> </span> </el-dialog> </div> </template> <script> export default { data() { return { dialogVisible: false } }, methods: { handleClose(done) { this.$confirm('确定关闭?') .then(_ => { done(); }) .catch(_ => {}); } } } </script> ``` 4. 在 Dialog 组件中可以添加各种组件和数据,比如标题、内容、底部按钮等,可以通过 slot 来实现。 ```html <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose" > <p>这是一个 Dialog 弹出框。</p> <span slot="footer" class="dialog-footer"> <el-button @click="dialogVisible = false">取消</el-button> <el-button type="primary" @click="dialogVisible = false">确定</el-button> </span> </el-dialog> ``` 以上就是 Element Dialog 的用法。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值