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>
效果如下:
点击继续加班: