vue element-ui MessageBox按需调用

超、凢脫俗 2023-02-12 15:28 6阅读 0赞

按需引入组件 MessageBox的使用方法

## main.js ##

import { Button,MessageBox  } from 'element-ui';
    import 'element-ui/lib/theme-chalk/index.css';
    
    Vue.use(Button)
    
    Vue.component(MessageBox.name, MessageBox)
    Vue.prototype.$message = MessageBox

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hqeTE3MDMxNA_size_16_color_FFFFFF_t_70]  
在页面使用

## html ##

<el-button type="text" @click="changeLanguage()">切换</el-button>

## js ##

changeLanguage() {
    				this.$message.confirm('是否要切换语言', '提示', {
    					confirmButtonText: '确定',
    					cancelButtonText: '取消',
    					type: 'warning',
    					center: true
    				}).then(() => {
    					
    					this.$message({
    						type: 'success',
    						message: '设置成功!'
    					});
    				}).catch(() => {
    					this.$message({
    						type: 'info',
    						message: '取消设置'
    					});
    				});
    			}

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hqeTE3MDMxNA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200526170346455.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hqeTE3MDMxNA==,size_16,color_FFFFFF,t_70

发表评论取消回复

表情：

评论列表（有 0 条评论，6人围观）

还没有评论，来说两句吧...

相关阅读

相关 VUE+mint-ui按需引入总结

第一步：安装mint-ui（这里不细说）第二步；运行npm install babel-plugin-component （文档写的npm install babel-pl

末蓝、/ 2023年10月11日 13:57/ 0 赞/ 78 阅读

相关 vue 路由按需 keep-alive

[https://juejin.im/post/5cdcbae9e51d454759351d84\comment][https_juejin.im_post_5cdcbae9e

偏执的太偏执、/ 2023年06月16日 07:53/ 0 赞/ 25 阅读

相关 vue element-ui MessageBox按需调用

按需引入组件 MessageBox的使用方法 main.js import { Button,MessageBox } from 'element-ui';

超、凢脫俗/ 2023年02月12日 15:28/ 0 赞/ 7 阅读

相关 elementUI按需加载，ant-design-vue按需加载

ant-design-vue按需加载的方法：首先运行安装 `npm i babel-plugin-import --dev` 在babel.config.j

川长思鸟来/ 2022年12月20日 03:20/ 0 赞/ 417 阅读

相关 ElementUI MessageBox 弹框

一、概述在执行删除操作时，我们一般会添加一个删除确认框，当用户点击确认删除后在执行删除操作，这样能提升用用户体验，那么该如何快速实现呢？element中提供了相应

╰+攻爆jí腚メ/ 2022年11月01日 00:47/ 0 赞/ 227 阅读

相关 vue中按需引入vant和elementui库设置-指南

安装 npm i vant -S npm i element-ui -S 配置按需引入插件 vant npm i babel-plu

青旅半醒/ 2022年10月07日 13:51/ 0 赞/ 267 阅读

相关 vue-cli按需引入element-ui

按照element-ui官方提供的步骤一步一步调整，最后可能会报错，对应不同错误，有如下不同的执行方式：如果报错Module build failed: Error: Co

清疚/ 2022年04月02日 15:52/ 0 赞/ 302 阅读

相关 Antd按需引入【Vue版】

antd给了两种按需导入的，我很想用第一种，但是弄了半天，就是弄不好，就算了。有知道的小伙伴可以在下面留言告诉我 ![在这里插入图片描述][watermark_type_Z

╰+攻爆jí腚メ/ 2022年02月15日 04:43/ 0 赞/ 930 阅读

相关按需导入antd/ant-design-vue,Nuxt按需导入antd/ant-design-vue

> 1、所有文章优先发表在个人博客上： [https://www.xdx97.com][https_www.xdx97.com] > 2、后续如果有修改的话，可能忘记更新到

港控/mmm°/ 2021年12月14日 20:57/ 0 赞/ 809 阅读

相关针对elementUI 中InfiniteScroll按需引入的一点注意事项

大家为了节省空间，常常进行按需引入来节省空间，这里我给大家来介绍一下element中按需引入无限滚动指令注意的事项。针对前面element 按需引入的一些配置这里就不再详细

ゝ一世哀愁。/ 2021年08月13日 17:17/ 0 赞/ 429 阅读