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

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

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

a5bc615c34cc4d16ba410b0984843a9d.png


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

<!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>


效果如下:


423fe0d8d9b44c00a6391ca70e8b4bff.png



点击继续加班:


723cc5eb3df442b991077ec01a11c534.png









目录
相关文章
|
7月前
|
Java
有关Java发送邮件信息(支持附件、html文件模板发送)
有关Java发送邮件信息(支持附件、html文件模板发送)
464 1
|
7月前
|
前端开发
【HTML专栏2】VSCode的使用(新建HTML文件)
【HTML专栏2】VSCode的使用(新建HTML文件)
567 0
N..
|
7月前
|
移动开发 前端开发 JavaScript
HTML文件
HTML文件
N..
59 1
|
2月前
|
Web App开发 前端开发 搜索推荐
创建HTML文件
【10月更文挑战第14天】创建HTML文件
64 4
|
2月前
|
JSON 数据格式
LangChain-20 Document Loader 文件加载 加载MD DOCX EXCEL PPT PDF HTML JSON 等多种文件格式 后续可通过FAISS向量化 增强检索
LangChain-20 Document Loader 文件加载 加载MD DOCX EXCEL PPT PDF HTML JSON 等多种文件格式 后续可通过FAISS向量化 增强检索
139 2
|
7月前
|
XML 前端开发 数据格式
BeautifulSoup 是一个 Python 库,用于从 HTML 和 XML 文件中提取数据
【5月更文挑战第10天】BeautifulSoup 是 Python 的一个库,用于解析 HTML 和 XML 文件,即使在格式不规范的情况下也能有效工作。通过创建 BeautifulSoup 对象并使用方法如 find_all 和 get,可以方便地提取和查找文档中的信息。以下是一段示例代码,展示如何安装库、解析 HTML 数据以及打印段落、链接和特定类名的元素。BeautifulSoup 还支持更复杂的查询和文档修改功能。
145 1
|
2月前
|
JavaScript 前端开发 容器
Vue生成PDF文件攻略:html2canvas与jspdf联手,中文乱码与自动换行难题攻克
Vue生成PDF文件攻略:html2canvas与jspdf联手,中文乱码与自动换行难题攻克
233 0
|
4月前
写一个HTML文件
【8月更文挑战第27天】写一个HTML文件。
47 1
|
4月前
【Azure 应用服务】部署Azure Web App时,是否可以替换hostingstart.html文件呢?
【Azure 应用服务】部署Azure Web App时,是否可以替换hostingstart.html文件呢?
|
5月前
|
前端开发 JavaScript
文本,wangEditor5展示HTML无样式,wangEditor5如何看源码,Ctrl + U看CSS文件,代码高亮,Prism.js可以实现,解决方法,参考网页源代码的写法
文本,wangEditor5展示HTML无样式,wangEditor5如何看源码,Ctrl + U看CSS文件,代码高亮,Prism.js可以实现,解决方法,参考网页源代码的写法