元素 UI $confirm 不是函数

Question

我从 VueError in v-on handler: "TypeError: this.$confirm is not a function调用 Element UI 时得到this.$confirm：

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

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

模板：

<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

如果我导入 ElementUI 我会得到这个 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，因为它会破坏包大小的节省。

从 Element 文档中我不太清楚，但似乎 Element 使用 $confirm 扩展了 Vue 组件。

该文档指出，全球$confirm方法只有在当完全导入元素是这样的：

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

鉴于您单独导入元素，您应该confirm在组件中本地导入该方法。也就是说，MessageBox为其confirm方法导入：

// 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"
        })
    }
  }
}

演示