首先我们先安装element-ui

npm i element-ui -S

然后我们在vue项目的入口文件main.js中单独引入element-ui 的 MessageBox 弹框

import { MessageBox } from 'element-ui';

根据官方文档,单独引用和完整引入在使用方法上有一些区别,如下图:
在这里插入图片描述
tips:其他按需引入的组件在使用的时候,都需要Vue.use('组件名称')进行使用,而根据MessageBox组件文档说明,我们不必对MessageBox组件进行Vue.use();

为了能够在全局调用到MessageBox组件,我们可以将其挂到Vue的prototype原型上,如下:

Vue.prototype.$msgbox = MessageBox

最后,在组件里面这样调用:

this.$msgbox.alert('提示内容', '提示标题', {
	confirmButtonText: '确定',
	callback: action => {

	}
})

在这里插入图片描述

GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45 7 个月前
a07f3a59 * Update transition.md * Update table.md * Update transition.md * Update table.md * Update transition.md * Update table.md * Update table.md * Update transition.md * Update popover.md 7 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐