新增模态框

src/components/index.js

@@ -1,7 +1,9 @@
 import bgAnimation from './bgAnimation'
+import modal from './modal'
 
 const components = {
-  bgAnimation
+  bgAnimation,
+  modal
   
 };
 

src/components/modal/index.vue

@@ -0,0 +1,162 @@
+<template>
+  <transition name="fade">
+    <div class="modal-backdrop" v-if="visible">
+      <div class="modal">
+        <div class="modal-header">
+          {{ title }}
+          <i class="iconfont icon-close close" @click="close"></i>
+        </div>
+        <div class="modal-body">
+            {{ content }}
+        </div>
+        <div class="modal-footer">
+          <button type="button" class="btn-close" @click="close" v-if="showCancle">
+            {{cancleText ? cancleText : '取消'}}
+          </button>
+          <button type="button" class="btn-confirm" @click="confirm">
+            {{confirmText ? confirmText : '确定'}}
+          </button>
+        </div>
+      </div>
+    </div>
+  </transition>
+</template>
+ 
+<script>
+
+export default {
+  name: 'Modal',
+  props: {
+    // midal标题
+    title:{
+      type: String,
+      default: '提示'
+    },
+    // modal内容
+    content: {
+      type: String,
+      default: ''
+    },
+    // 是否显示
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    // 是否显示取消按钮
+    showCancle: {
+        type: Boolean,
+        default: true
+    },
+    // 确认按钮文字
+    confirmText: {
+        type: String,
+        default: '确认'
+    },
+    // 取消按钮文字
+    cancleText: {
+        type: String,
+        default: '取消'
+    }
+  },
+  watch:{
+    visible (curVal) {
+      console.log(curVal)
+    }
+  },
+  methods: { 
+    // 关闭按钮事件
+    close() {
+      this.$emit('update:visible', false);
+    },
+    // 确定按钮事件
+    confirm() {
+      this.close();
+      this.$emit('confirm');
+    }   
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+/* 动画效果 淡入淡出 */
+.fade-enter-active, .fade-leave-active{
+  transition: all 0.5s ease;
+}
+.fade-enter, .fade-leave-active{
+  opacity: 0;
+}
+
+.modal-backdrop { 
+  position: fixed; 
+  top: 0; 
+  right: 0; 
+  bottom: 0; 
+  left: 0; 
+  background-color: rgba(0,0,0,.5); 
+  width: 100%;
+  height: 100%;
+  display: flex; 
+  justify-content: center; 
+  align-items: center; 
+  z-index: 99999;
+  .modal {
+    position: relative; 
+    background-color: #fff; 
+    box-shadow: 2px 2px 20px 1px; 
+    overflow-x: auto;
+    border-radius: 16px;
+    width: 400px;
+  } 
+  .modal-header { 
+    position: relative;
+    border-bottom: 1px solid #eee; 
+    color: #313131; 
+    padding: 20px; 
+    font-size: 20px;
+    text-align: center;
+    .close {
+      position: absolute;
+      right: 20px;
+      cursor: pointer;
+      color: #909399;
+      font-size: 18px;
+    } 
+  } 
+  .modal-footer {
+    padding: 10px 20px 20px;
+    text-align: right;
+    .btn-close, .btn-confirm {    
+        border-radius: 8px;
+        cursor: pointer;
+        border: none;
+        font-size: 16px;
+        padding: 12px 20px;
+        outline: none;
+    }
+    .btn-close {
+        color: #606266;
+        background-color: #fff;
+        border: 1px solid #dcdfe6;
+        margin-right: 20px;
+        &:hover {
+          color: #409eff; 
+          background-color: #ecf5ff;
+        }
+    }
+    .btn-confirm {
+        color: #fff; 
+        background-color: #409eff;
+        border-color: #409eff;
+        &:hover {
+          background-color: #66b1ff;
+        }
+    }
+  } 
+  .modal-body { 
+    position: relative; 
+    padding: 30px 20px; 
+    font-size: 16px;
+    line-height: 22px;
+  }
+}
+</style>

src/components/toast/index.vue

@@ -6,7 +6,7 @@
           <i class="iconfont" :class="'icon-' + type"></i>
           <span>{{ content }}</span>
         </div>
-        <!-- <i v-if="hasClose" class="iconfont icon-close close" @click="visible = false"></i> -->
+        <i v-if="hasClose" class="iconfont icon-close close" @click="visible = false"></i>
       </div>
     </div>
   </transition>
@@ -22,7 +22,7 @@ export default {
       time: 3000,
       visible: false,
       type: 'error',  //四种类型：info, success, warning, error
-      hasClose: true,     
+      hasClose: false,     
     }
   },
   mounted() {
@@ -61,7 +61,7 @@ export default {
     width: 340px;
     padding: 20px;
     border-radius: 6px;
-    font-size: 14px;
+    font-size: 16px;
     display: flex;
     justify-content: space-between;
     align-items: center; 

src/main.js

@@ -19,6 +19,13 @@ Vue.config.productionTip = false
 Vue.prototype.$Axios = Axios
 Vue.prototype.$Toast = Toast
 
+$(window).resize(() => {
+  let width = 1920; // 设计图尺寸
+  let vW = document.documentElement.clientWidth; // 窗口宽度
+  let rem = vW * 100 / width; 
+  document.documentElement.style.fontSize = rem + 'px';
+});
+
 new Vue({
   router,
   store,

src/views/Login.vue

@@ -39,7 +39,6 @@
         </div>
     </div>
 
-    <div class="layer">
 	    <vue-particles 
 	      color="#6495ED"
 	      :particleOpacity="0.7"
@@ -58,10 +57,16 @@
 	      clickMode="push"
 	    >
 	    </vue-particles>
-    </div>
 
     <bgAnimation />
 
+    <modal 
+      title="提示" 
+      :content="modalContent"
+      :visible.sync="visible" 
+      @confirm="confirm">
+    </modal>
+
   </div>
 </template>
 
@@ -74,7 +79,8 @@ export default {
   	return {
   		userName: 'admin',
   		userPwd: '123456',
-      showModal: false
+      visible: true,
+      modalContent: '这是一段信息'
   	}
   },
   computed: {
@@ -95,10 +101,15 @@ export default {
       } else {
         this.$Toast({
           content: '请输入正确的用户名和密码',
-          type: 'error'
+          type: 'error',
+          // hasClose: true
         })
       }
-  	}
+  	},
+    confirm () {
+      this.visible = false;
+      console.log('点击确定')
+    }
   }
 }
 </script>