element-ui dialog问题:1.dialog的确定取消按钮没有自动靠右

本文解决Element UI中Dialog组件的确定与取消按钮未自动右对齐及遮罩层未能完全覆盖按钮的问题,避免用户误操作,提供代码示例与样式调整方法。
1.dialog的确定取消按钮没有自动靠右
<el-dialog :title="spec_formTitle" :visible.sync="specform_DialogVisible" width="70%">
  <el-form :model="spec_form" label-position="right" ref="spec_form" :rules="sepc_rules" :disabled="specForm_isViewmode" v-loading="myloading">
  <el-form-item label="商品ID:" :label-width="formLabelWidth" style="display:none">
</el-form>
   <!--如果你发现下面的两个按钮没有自动靠右,那么是class="dialog-footer"这个div的位置写错了,请严格按当前这个示例-->
  <div slot="footer" class="dialog-footer">
    <el-button @click="specform_DialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="specform_onSubmit('spec_form')" v-show="!!!specForm_isViewmode">确 定</el-button>
   </div>
</el-dialog>

 

2.dialog的遮罩层没有挡住确定和取消按钮,造成用户可以短时间内多次调用接口,解决方法如下:

/*重设遮罩层的高*/
.el-loading-mask{
  height:2000px!important;
}
你提供的错误信息是典型的 JavaScript 运行时错误,核心错误是: ``` TypeError: Cannot read properties of null (reading 'setAttribute') ``` 这意味着你尝试在一个 `null` 值上调用 `.setAttribute()` 方法,而这个方法只能用于 DOM 元素对象。 --- ### 🔍 错误分析: 从堆栈信息来看: ```plaintext at VueComponent.removeTabindex (webpack-internal:///./node_modules/element-ui/lib/element-ui.common.js:2442:23) at VueComponent.hide (webpack-internal:///./node_modules/element-ui/lib/element-ui.common.js:2368:12) ``` 说明这个错误发生在 **element-ui** 组件库中,比如 `el-select`、`el-dropdown` 或 `el-dialog` 等组件在隐藏或销毁时尝试操作 DOM 元素,但该元素为 `null`,说明它已经被销毁或者未正确初始化。 --- ### 💡 常见原因: 1. **DOM 元素未正确绑定或未渲染完成**: - 在 Vue 生命周期钩子(如 `mounted`)中使用了 `this.$refs.xxx.setAttribute(...)`,但 `this.$refs.xxx` 为 `null`。 - 原因可能是 DOM 尚未渲染完成,或者条件渲染(如 `v-if`)未满足。 2. **组件销毁时仍在操作 DOM**: - 在 `beforeDestroy` 或 `destroyed` 钩子中执行了对 DOM 的操作,但此时 DOM 已被移除。 3. **Element UI 组件内部 bug(极少数)**: - 极少数情况下是 element-ui 自身的 bug,但更常见的是使用不当导致其内部逻辑出错。 --- ### ✅ 解决方案: #### ✅ 1. 确保 DOM 元素存在后再操作: ```vue <template> <img v-if="loaded" ref="slideImage" :data-src="slideImageSrc" /> </template> <script> export default { data() { return { loaded: false, slideImageSrc: '' }; }, mounted() { if (this.isArray(this.settings.slideImage)) { this.slideImageSrc = this.getRandomImg(this.settings.slideImage); } else { this.slideImageSrc = this.settings.slideImage; } this.loaded = true; // DOM 已渲染,确保 this.$refs.slideImage 存在 this.$nextTick(() => { if (this.$refs.slideImage) { this.$refs.slideImage.setAttribute("data-src", this.slideImageSrc); } }); }, methods: { isArray(arr) { return Array.isArray(arr); }, getRandomImg(arr) { return arr[Math.floor(Math.random() * arr.length)]; } } }; </script> ``` #### ✅ 2. 销毁前移除事件监听器或清理引用 ```js beforeDestroy() { if (this.observer) { this.observer.disconnect(); } } ``` #### ✅ 3. 使用 `v-if` 控制组件渲染顺序 ```vue <el-dialog v-if="showDialog" :visible.sync="showDialog"> <img ref="dialogImage" :data-src="dialogImageUrl" /> </el-dialog> ``` --- ### 🧪 排查建议: - 打开浏览器开发者工具,查看报错行的上下文 DOM 是否存在。 - 添加 `console.log(this.$refs.slideImage)` 检查是否为 `null`。 - 如果使用了 `v-if` 或 `v-show`,确保 DOM 元素在使用前已经渲染。 ---
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值