Vue 中使用 element 的 messageBox 的弹框

我在项目中使用了 element ui， 引用代码:

import Vue from 'vue'
import { MessageBox } from 'element-ui'
Vue.prototype.$message = MessageBox
Vue.prototype.$prompt = MessageBox.prompt

在项目中使用代码如下：

this.$prompt('请输入内容：', '提示', {
  confirmButtonText: '确定',
  cancelButtonText: '取消',
  type: 'warning',
  center: true
}).then(({ value }) => {
  // code...
}).catch(() => {
  this.$message({
    type: 'info',
    showClose: true,
    message: '已取消操作'
  })
})

当某个操作后弹出了如下截图

图片.png

我觉得这个文本框也太高了点点？

改一下，简单

<style lang="stylus" scoped>
.el-message-box__wrapper .el-input__inner
  height: 24px
</style>

en en en... 好像没变化，可能要样式穿透

<style lang="stylus" scoped>
>>> .el-message-box__wrapper .el-input__inner
  height: 24px
</style>

还是没变化，有毒吧

然后我注意到了 scoped 这玩意，去掉试试

<style lang="stylus">
.el-message-box__wrapper .el-input__inner
  height: 24px
</style>

生效了，但是这样的话，那么其他页面的这个玩意岂不是也被我改掉了？？
然后我去了 element 的官网找了一番文档，发现了一个有用的属性 customClass： MessageBox 的自定义类名，

// 用法
this.$prompt('请输入内容：', '提示', {
  confirmButtonText: '确定',
  cancelButtonText: '取消',
  type: 'warning',
  customClass: 'messageBox-prompt-test', //在这里在这里
  center: true
}).then(({ value }) => {
  // code...
}).catch(() => {
  this.$message({
    type: 'info',
    showClose: true,
    message: '已取消操作'
  })
})

作用就是我给这个弹框起了一个和别的不一样的名字，这样就不会和其他弹框冲突了，
但是建议不要去掉 scoped，可以把这一块样式写在全局样式里面，给 messageBox 自定义类名就好了

我的主页
http://liguoyou.gitee.io/your