html文件里面怎么使用elementui的Message以及MessageBox

Posted 凯小默

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了html文件里面怎么使用elementui的Message以及MessageBox相关的知识,希望对你有一定的参考价值。

html 页面引入element 脚本之后,在全局会有一个ELEMENT的变量

我们可以通过它去处理,代码如下:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>测试页面</title>
        <!-- 引入样式 -->
        <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
        <!-- vue 需要在 elementui 的前面-->
        <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
        <!-- 引入组件库 -->
        <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    </head>
    <body>
        <div id="app"></div>
        <script>
            new Vue(
                el: "#app",
                data: function () 
                    return 
                        
                    ;
                ,
                components: 

                ,
                mounted() 
                	console.log(ELEMENT)
                    ELEMENT.MessageBox.confirm('8点多了,该下班了', '温馨提示', 
                        confirmButtonText: '继续加班',
                        showClose: false,
                        showCancelButton: false
                    ).then(() => 
                        ELEMENT.Message(
                            message: "顶不住了,撤退",
                            type: 'error'
                        );
                    )
                ,
                methods: 

                ,  
            );
        </script>
    </body>
</html>

效果如下:


点击继续加班:

以上是关于html文件里面怎么使用elementui的Message以及MessageBox的主要内容,如果未能解决你的问题,请参考以下文章

vue里的elementui日期控件怎么将明天改成左上角有标记

elementUi 怎么向已有数据表格添加数据

html MES项目,仪表盘,文件系统

elementui弹窗某些操作会

elementUI提交表单的按钮怎么改变loading状态

Vue:使用elementUI upload组件上传excel文件