封装cofirm遮罩层

Author: labnize

build/webpack.config.js

@@ -75,7 +75,7 @@ const webpackConfig = {
     }),
     new HtmlWebpackPlugin({
       filename: 'index.html',
-      template: path.resolve(__dirname, '../src/index.html'),
+      template: path.resolve(__dirname, '../index.html'),
       inject: true
     })
   ]

build/webpack.dist.config.js

@@ -121,7 +121,7 @@ const webpackConfig = {
     }),
     new HtmlWebpackPlugin({
       filename: 'index.html',
-      template: path.resolve(__dirname, '../src/index.html'),
+      template: path.resolve(__dirname, '../index.html'),
       inject: true,
       minify: {
         removeAttributeQuotes: true,

src/index.html renamed to index.html

@@ -1 +1 @@
-.axios-loading{  font-size: 35px;  .el-loading-spinner .el-loading-text{    font-size: 18px;  }}.axios-error{  width: 25%;  .el-message-box__message p{    font-size: 18px;    color: #000000;  }  .el-message-box__status.el-icon-error{    font-size: 40px !important;  }}
+.axios-loading{  font-size: 35px;  .el-loading-spinner .el-loading-text{    font-size: 18px;  }}.axios-error{  width: 25%;  .el-message-box__message p{    font-size: 18px;    color: #000000;  }  .el-message-box__status.el-icon-error{    font-size: 40px !important;  }}.confirm-dialog{  padding-bottom: 0;  border: 0;  width: 25%;  .el-message-box__message p{    font-size: 18px;    color: #000000;  }  .el-message-box__status.el-icon-warning{    font-size: 40px !important;  }  .el-message-box__btns{    padding: 0;    button:nth-child(2){  //第二个按钮，即'确定'按钮      width: 100%;      margin-left: 0;      padding: 20px;      margin-top: 40px;      font-size: 18px;      color: rgb(51, 51, 51);      background-color: rgb(209, 218, 231);      border-color: rgb(209, 218, 231);    }  }}

src/components/common.scss

@@ -103,7 +103,7 @@
   };
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
   .logo{
 
   }

src/components/layout.vue

@@ -0,0 +1,28 @@
+import { MessageBox, Message } from 'element-ui';
+import 'components/common.scss';
+
+const Modal = {
+  confirmModal(data, ok) {
+    MessageBox.confirm(data, {
+      confirmButtonText: '确定',
+      customClass: 'confirm-dialog',
+      center: true,
+      type: 'warning',
+      showCancelButton: false
+    }).then(() => {
+      // ok确认回调可放到调用的地方，单独定义
+      Message({
+        type: 'success',
+        message: '全部开启成功!'
+      });
+    }).catch(() => {
+      Message({
+        type: 'info',
+        message: '已取消开启操作'
+      });
+    });
+  }
+};
+
+export default Modal;
+

src/components/modal.js

@@ -2,27 +2,28 @@
   <Layout>
     <div slot="content" class="item1">
       <div class="text">
-        item1
+        <el-button type="primary" @click="handleOpen">全部打开</el-button>
       </div>
     </div>
   </Layout>
 </template>
 
 <script>
   import Layout from 'components/layout';
-  // import './item1.scss';
+  import Modal from 'components/modal';
 
   export default {
     components: {
       Layout
+    },
+    methods: {
+      handleOpen() {
+        Modal.confirmModal('确定打开所有设备吗?');
+      }
     }
   };
 </script>
 
-<style lang="scss">
-  .item1{
-    .text{
-      color: red;
-    }
-  }
+<style lang="scss" scoped>
+
 </style>