元素 UI $confirm 不是函数

Question

从 Vue 调用元素 UI 的 this.$confirm 时，我得到 Error in v-on handler: "TypeError: this.$confirm is not a function：

也许我没有导入我应该导入的东西（文档和示例表明不需要额外的导入）？

我正在尝试使用 Element UI 构建 Vue 应用程序。它有一个 table，每行都有一个删除按钮。单击处理程序调用 this.$confirm 为用户显示确认对话框。从 Element 文档中我不太清楚，但似乎 Element 扩展了开箱即用的 $confirm 的 Vue 组件。

模板：

<el-table-column label="" width="180">
  <template slot-scope="scope">
    <el-button circle type="danger" @click="beginRemove(scope.row)">
      X
    </el-button>
  </template>
</el-table-column>

脚本：

<script>
import * as API from '../../services/data.js'
import { ElementUI, MessageBox } from 'element-ui'; // ???
export default {
  ...
  methods: {
    beginRemove(item) {            
      this.$confirm(`Do you really want to delete ${ item.fullName } ?`,
        'Confirmation', 
        {
          confirmButtonText: 'OK',
          cancelButtonText: 'Cancel',
          type: 'warning'
        })
      ...
    }
  }
}
</script>

依赖关系（package.json）：

"dependencies": {
  "element-ui": "^2.6.3",
  "lodash": "^4.17.11",
  "moment": "^2.24.0",
  "regenerator": "^0.13.3",
  "vue": "^2.6.10",
  "vue-moment": "^4.0.0"
},

我是这样引导 Vue 的：

import Vue from 'vue/dist/vue.js';

import {
  ElementUI, // Element is undefined when imported 
  Table, 
  TableColumn,
  Form,
  FormItem,
  Input,
  Button,
  DatePicker,
  Row,
  Col,
  Select,
  Option,
  Pagination
} from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(require('vue-moment'));
Vue.use(ElementUI);

Vue.component(Table.name, Table)
Vue.component(TableColumn.name, TableColumn)
Vue.component(Form.name, Form)
Vue.component(FormItem.name, FormItem)
Vue.component(Input.name, Input)
Vue.component(Button.name, Button)
Vue.component(DatePicker.name, DatePicker);
Vue.component(Row.name, Row);
Vue.component(Col.name, Col);
Vue.component(Select.name, Select);
Vue.component(Option.name, Option);
Vue.component(Pagination.name, Pagination);

import * as NewItem from './components/new-item/new-item.vue';
import * as NamesList from './components/names-list/names-list.vue';
import * as NamesFilter from './components/names-filter/names-filter.vue';
import * as FilterableList from './components/filterable-list/filterable-list.vue';

（发生故障的处理程序位于 names-list 组件中...）

Answer 1

if I import ElementUI I get this TypeError: Cannot read property 'install' of undefined

您的代码错误地将 ElementUI 作为命名导入导入。 element-ui 包没有 ElementUI 的命名导出，因此它将是 undefined。默认导入是您在那里使用的（但这不是您实际需要的）：

//import { ElementUI } from 'element-ui' // DON'T DO THIS
import ElementUI from 'element-ui'
Vue.use(ElementUI)

由于您是单独导入元素（以节省包大小），因此您应该避免像这样全局导入 ElementUI，因为它会破坏包大小节省。

It is not quite clear for me from Element documentation, but seems like Element extends Vue components with $confirm out of the box.

docs 声明全局 $confirm 方法仅在完全导入元素时可用，如下所示：

import ElementUI from 'element-ui'
Vue.use(ElementUI)

鉴于您要单独导入元素，您应该改为在组件中本地导入 confirm 方法。即，为其 confirm 方法导入 MessageBox：

// MyComponent.vue
import { MessageBox } from 'element-ui'

export default {
  methods: {
    handleDelete(row) {
      MessageBox.confirm(`Do you really want to delete ${row.name} ?`,
        "Confirmation",
        {
          confirmButtonText: "OK",
          cancelButtonText: "Cancel",
          type: "warning"
        })
    }
  }
}

demo

Answer 2

试试这样的代码：

 import { Dialog, Table, TableColumn, MessageBox } from 'element-ui'
 Vue.prototype.$confirm = MessageBox.confirm

元素 UI $confirm 不是函数

Element UI $confirm is not a function

javascript

vue.js

vuejs2

element-ui