Vue TypeError: this.$confirm is not a function

Dear 丶 2022-12-23 06:24 365阅读 0赞

## 错误 ##

在使用element ui，采用局部引入时候，报错`TypeError: this.$confirm is not a function`。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpYW5naGVjYWk1MjE3MTMxNA_size_16_color_FFFFFF_t_70_pic_center]  
因为没有在vue的实例上挂载 c o n f i r m 和 confirm和 confirm和message导致的报错

## 解决方案 ##

修改element.js文件：  
1 引入messageBox 插件

> import \{MessageBox\} from ‘element-ui’

2 在vue 的原型对象上挂载confirm

> Vue.prototype.$confirm = MessageBox.confirm

如下图所示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpYW5naGVjYWk1MjE3MTMxNA_size_16_color_FFFFFF_t_70_pic_center 1] 以后就可以放心的在vue中的任何文件使用this. c o n f i r m 或 者 t h i s . confirm或者this. confirm或者this.message了。比如：你想用MessageBox中的confirm方法，现在可以这样用：

<template>
      <div>
        <el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button>
        <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
          <span>这是一段信息</span>
          <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) { const _this = this _this.$confirm('确认关闭？') .then(_ => { done() }) .catch(_ => { }) } } } </script>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpYW5naGVjYWk1MjE3MTMxNA_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/adc3812f17fa444d96a474372c820cf7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpYW5naGVjYWk1MjE3MTMxNA_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221120/6ee72ec9d0c84f18978066ac2dedc6b2.png