Vue ElementUI 修改消息提示框样式—messageBox 的大小

在窄屏模式下(移动端或pda),提示框的宽度太宽,会出现显示不完全的问题。 应当如何修改 ElementUI 的样式呢?

javascript 复制代码
  open() {
      this.$confirm(
        window.vm.$i18n.t("tips.conLogOut"),
        window.vm.$i18n.t("tips.tip"),
        {
          confirmButtonText: window.vm.$i18n.t("backTips.confirm"),
          cancelButtonText: window.vm.$i18n.t("backTips.cancel"),
          type: "warning",
        }
      ).then(() => {
        this.logout();
      });
    },
css 复制代码
 <style scoped>
  .el-message-box {
    width: 235px;
}
</style>


此时在scoped的style中写是无效的,因为ElementUI组件不可以给样式添加scoped,因此必须去掉scoped;但是去掉scoped后不满足单组件的CSS。

解决方案

1、附加在没有scoped的style中

css 复制代码
<style scoped>
  ...
</style>
<style>
  ...
  .el-message-box {
    width: 235px;
  }
</style>


2、给消息提示框加类名(荐)
更加推荐这个messageBox添加一个类名,比较好用并且不会影响到其他页面的弹框样式。

javascript 复制代码
this.$confirm('确认注销吗?', '提示', {
  customClass: 'elmessageWidth'
}).then(() => {
  this.$message({
    message: '已成功注销',
    type: 'success'
  })
}).catch(() => {  })
css 复制代码
<style scoped>
  ...
</style>
<style>
 .elmessageWidth {
    width: 350px;
  }
</style>

或者直接important

css 复制代码
@media (max-width: 730px) {
  .elmessageWidth{
    width: 350px !important;
  }
 }
相关推荐
华仔啊3 小时前
前端必看!12个JS神级简写技巧,代码效率直接飙升80%,告别加班!
前端·javascript
excel3 小时前
dep.ts 逐行解读
前端·javascript·vue.js
爱上妖精的尾巴3 小时前
5-20 WPS JS宏 every与some数组的[与或]迭代(数组的逻辑判断)
开发语言·前端·javascript·wps·js宏·jsa
excel3 小时前
Vue3 响应式核心源码全解析:Dep、Link 与 track/trigger 完整执行机制详解
前端
前端大卫4 小时前
一个关于时区的线上问题
前端·javascript·vue.js
whltaoin4 小时前
中秋赏月互动页面:用前端技术演绎传统节日之美
前端·javascript·html·css3·中秋主题前端
IT派同学5 小时前
TableWiz诞生记:一个被表格合并逼疯的程序员如何自救
前端·vue.js
西洼工作室7 小时前
CSS高效开发三大方向
前端·css
昔人'7 小时前
css`font-variant-numeric: tabular-nums` 用来控制数字的样式。
前端·css
铅笔侠_小龙虾7 小时前
动手实现简单Vue.js ,探索Vue原理
前端·javascript·vue.js