Merge pull request #48 from School-of-Website-Engineering/develop

package.json

@@ -3,7 +3,8 @@
   "version": "1.1.5",
   "private": true,
   "scripts": {
-    "serve": "vue-cli-service serve",
+    "serve": "vue-cli-service serve --mode dev",
+    "servepro": "vue-cli-service serve --mode prod",
     "build": "vue-cli-service build",
     "lint": "vue-cli-service lint"
   },

src/components/Toast.vue

@@ -0,0 +1,62 @@
+<template>
+	<!-- 封装提示框组件 -->
+	<!-- 
+  看type的值:
+  success   iconfont icon-toast_chenggong
+  warning  iconfont icon-toast-jinggao 
+  danger   iconfont icon-toast-shibai_huaban
+ -->
+	<div class="toast">
+		<i
+			:class="
+				type == 'success'
+					? 'iconfont icon-toast_chenggong'
+					: type == 'warning'
+					? 'iconfont icon-toast-jinggao'
+					: 'iconfont icon-toast-shibai_huaban'
+			"
+		></i>
+		<span>{{ msg }}</span>
+	</div>
+</template>
+
+<script>
+import { mapState } from "vuex";
+export default {
+	data() {
+		return {};
+	},
+	computed: {
+		...mapState({
+			msg : (state) => state.showToast.msg,
+			type: (state) => state.showToast.type
+		})
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+.toast {
+	background-color: #fff;
+	position: fixed;
+	left: 50%;
+	top: 0;
+	transform: translateX(-50%);
+	padding: 10px 20px;
+	border-radius: 6px;
+	box-shadow: 0 0 10px #fff;
+	i {
+		margin-right: 8px;
+	}
+
+	.icon-toast_chenggong {
+		color: green;
+	}
+	.icon-toast-jinggao {
+		color: orange;
+	}
+	.icon-toast-shibai_huaban {
+		color: red;
+	}
+}
+</style>

src/router/index.js

@@ -1,6 +1,7 @@
 import Vue from "vue";
 import VueRouter from "vue-router";
 import routes from "./routes";
+import store from "@/store";
 
 Vue.use(VueRouter);
 
@@ -38,8 +39,7 @@ VueRouter.prototype.replace = function(location, resolve, reject) {
 	}
 };
 
-
-export default  new VueRouter({
+const router = new VueRouter({
 	routes,
 	scrollBehavior() {
 		return { y: 0 };
@@ -48,3 +48,4 @@ export default  new VueRouter({
 	mode: "hash"
 });
 
+export default router;

src/store/index.js

@@ -3,7 +3,8 @@ import Vuex from "vuex";
 import isShowLoginModal from "@/store/isShowLoginModal";
 import loginStatus from "@/store/loginStatus";
 import userInfo from "@/store/userInfo";
+import showToast from "@/store/showToast";
 
 Vue.use(Vuex);
 
-export default new Vuex.Store({modules: { isShowLoginModal, loginStatus, userInfo }});
+export default new Vuex.Store({modules: { isShowLoginModal, loginStatus, userInfo, showToast }});

src/store/showToast/index.js

@@ -0,0 +1,52 @@
+export default {
+	namespaced: true,
+	state     : {
+		// 显示与否  true 仅仅之决定了一个显示属性
+		// 提示文本  "登录成功"
+		// 提示类型  "sucess"   "warning"  "danger"
+		// 用来表示提示框的显示true或隐藏false
+		isShowToast: false,
+		msg        : "",
+		type       : ""
+	},
+	mutations: {
+		// 修改isShowToast的值
+		chanIsShowToast(state, payload) {
+			state.isShowToast = payload.isShow;
+			state.msg = payload.msg;
+			state.type = payload.type;
+		}
+	},
+	actions: {
+		asyncChanIsShowToast({ commit }, payload) {
+			//  let {commit} = context
+			// 先展示,就是调用原先写的上面的这个方法chanIsShowToast
+			commit("chanIsShowToast", {
+				isShow: true,
+				msg   : payload.msg,
+				type  : payload.type
+			});
+
+			// 关闭的代码
+			setTimeout(() => {
+				commit("chanIsShowToast", {
+					isShow: false,
+					msg   : payload.msg,
+					type  : payload.type
+				});
+			}, 1500);
+		}
+	}
+};
+
+// 封装Toast组件总结:
+// 样式结构
+// 显示隐藏变量存在Vuex中
+// 过渡效果(进场离场)
+// msg和type属性处理
+// 定时器,关闭Toast组件
+// 抽取定时器到actions的方法中
+
+// 如何使用这个组件???
+
+//this.xxx({msg:"xxx", type:"success"})   展示提示组件