From 3719d21eb9d8cddf9327d1b4f95bde8b54ae8e16 Mon Sep 17 00:00:00 2001
From: taylor <709161610@qq.com>
Date: Sat, 18 Mar 2017 23:24:05 +0800
Subject: [PATCH] add transition.remove nprogress.

---
 src/App.vue              | 93 +++++++++++++++++++++++-----------------
 src/main.js              |  6 +--
 src/views/Home.vue       |  4 +-
 src/views/Login.vue      |  9 ++--
 src/views/nav1/Table.vue | 34 +++++++--------
 src/views/nav1/user.vue  |  6 +--
 6 files changed, 80 insertions(+), 72 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 518dd99..8d57db8 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,54 +1,67 @@
 <template>
 	<div id="app">
-		<router-view></router-view>
+		<transition name="fade"
+		            mode="out-in">
+			<router-view></router-view>
+		</transition>
 	</div>
 </template>
 
 <script>
-	export default {
-		name: 'app',
-		components: {
-		}
+export default {
+	name: 'app',
+	components: {
 	}
+}
 
 </script>
 
 <style lang="scss">
-	body {
-		margin: 0px;
-		padding: 0px;
-		/*background: url(assets/bg1.jpg) center !important;
+body {
+	margin: 0px;
+	padding: 0px;
+	/*background: url(assets/bg1.jpg) center !important;
 		background-size: cover;*/
-		// background: #1F2D3D;
-		font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
-		font-size: 14px;
-		-webkit-font-smoothing: antialiased;
-	}
-	
-	#app {
-		position: absolute;
-		top: 0px;
-		bottom: 0px;
-		width: 100%;
-	}
-	
-	.el-submenu [class^=fa] {
-		vertical-align: baseline;
-		margin-right: 10px;
-	}
-	
-	.el-menu-item [class^=fa] {
-		vertical-align: baseline;
-		margin-right: 10px;
-	}
-	
-	.toolbar {
-		background: #f2f2f2;
-		padding: 10px;
-		//border:1px solid #dfe6ec;
-		margin:10px 0px;
-		.el-form-item {
-			margin-bottom: 10px;
-		}
+	// background: #1F2D3D;
+	font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
+	font-size: 14px;
+	-webkit-font-smoothing: antialiased;
+}
+
+#app {
+	position: absolute;
+	top: 0px;
+	bottom: 0px;
+	width: 100%;
+}
+
+.el-submenu [class^=fa] {
+	vertical-align: baseline;
+	margin-right: 10px;
+}
+
+.el-menu-item [class^=fa] {
+	vertical-align: baseline;
+	margin-right: 10px;
+}
+
+.toolbar {
+	background: #f2f2f2;
+	padding: 10px;
+	//border:1px solid #dfe6ec;
+	margin: 10px 0px;
+	.el-form-item {
+		margin-bottom: 10px;
 	}
+}
+
+.fade-enter-active,
+.fade-leave-active {
+	transition: all .2s ease;
+}
+
+.fade-enter,
+.fade-leave-active {
+	opacity: 0;
+}
 </style>
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index 37dde0d..ad998a9 100644
--- a/src/main.js
+++ b/src/main.js
@@ -7,8 +7,8 @@ import 'element-ui/lib/theme-default/index.css'
 import VueRouter from 'vue-router'
 import store from './vuex/store'
 import Vuex from 'vuex'
-import NProgress from 'nprogress'
-import 'nprogress/nprogress.css'
+//import NProgress from 'nprogress'
+//import 'nprogress/nprogress.css'
 import routes from './routes'
 import Mock from './mock'
 Mock.bootstrap();
@@ -18,7 +18,7 @@ Vue.use(ElementUI)
 Vue.use(VueRouter)
 Vue.use(Vuex)
 
-NProgress.configure({ showSpinner: false });
+//NProgress.configure({ showSpinner: false });
 
 const router = new VueRouter({
   routes
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 9809441..5e2ce42 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -61,7 +61,7 @@
 						</el-breadcrumb>
 					</el-col>
 					<el-col :span="24" class="content-wrapper">
-						<transition>
+						<transition name="fade" mode="out-in">
 							<router-view></router-view>
 						</transition>
 					</el-col>
@@ -140,7 +140,7 @@
 
 <style scoped lang="scss">
 	@import '~scss_vars';
-
+	
 	.container {
 		position: absolute;
 		top: 0px;
diff --git a/src/views/Login.vue b/src/views/Login.vue
index 3808748..1eebb68 100644
--- a/src/views/Login.vue
+++ b/src/views/Login.vue
@@ -17,7 +17,7 @@
 
 <script>
   import { requestLogin } from '../api/api';
-  import NProgress from 'nprogress'
+  //import NProgress from 'nprogress'
   export default {
     data() {
       return {
@@ -49,15 +49,14 @@
           if (valid) {
             //_this.$router.replace('/table');
             this.logining = true;
-            NProgress.start();
+            //NProgress.start();
             var loginParams = { username: this.ruleForm2.account, password: this.ruleForm2.checkPass };
             requestLogin(loginParams).then(data => {
               this.logining = false;
-              NProgress.done();
+              //NProgress.done();
               let { msg, code, user } = data;
               if (code !== 200) {
-                this.$notify({
-                  title: '错误',
+                this.$message({
                   message: msg,
                   type: 'error'
                 });
diff --git a/src/views/nav1/Table.vue b/src/views/nav1/Table.vue
index 66b7bde..d175d0f 100644
--- a/src/views/nav1/Table.vue
+++ b/src/views/nav1/Table.vue
@@ -106,7 +106,7 @@
 
 <script>
 	import util from '../../common/js/util'
-	import NProgress from 'nprogress'
+	//import NProgress from 'nprogress'
 	import { getUserListPage, removeUser, batchRemoveUser, editUser, addUser } from '../../api/api';
 
 	export default {
@@ -172,12 +172,12 @@
 					name: this.filters.name
 				};
 				this.listLoading = true;
-				NProgress.start();
+				//NProgress.start();
 				getUserListPage(para).then((res) => {
 					this.total = res.data.total;
 					this.users = res.data.users;
 					this.listLoading = false;
-					NProgress.done();
+					//NProgress.done();
 				});
 			},
 			//删除
@@ -186,13 +186,12 @@
 					type: 'warning'
 				}).then(() => {
 					this.listLoading = true;
-					NProgress.start();
+					//NProgress.start();
 					let para = { id: row.id };
 					removeUser(para).then((res) => {
 						this.listLoading = false;
-						NProgress.done();
-						this.$notify({
-							title: '成功',
+						//NProgress.done();
+						this.$message({
 							message: '删除成功',
 							type: 'success'
 						});
@@ -224,14 +223,13 @@
 					if (valid) {
 						this.$confirm('确认提交吗？', '提示', {}).then(() => {
 							this.editLoading = true;
-							NProgress.start();
+							//NProgress.start();
 							let para = Object.assign({}, this.editForm);
 							para.birth = (!para.birth || para.birth == '') ? '' : util.formatDate.format(new Date(para.birth), 'yyyy-MM-dd');
 							editUser(para).then((res) => {
 								this.editLoading = false;
-								NProgress.done();
-								this.$notify({
-									title: '成功',
+								//NProgress.done();
+								this.$message({
 									message: '提交成功',
 									type: 'success'
 								});
@@ -249,14 +247,13 @@
 					if (valid) {
 						this.$confirm('确认提交吗？', '提示', {}).then(() => {
 							this.addLoading = true;
-							NProgress.start();
+							//NProgress.start();
 							let para = Object.assign({}, this.addForm);
 							para.birth = (!para.birth || para.birth == '') ? '' : util.formatDate.format(new Date(para.birth), 'yyyy-MM-dd');
 							addUser(para).then((res) => {
 								this.addLoading = false;
-								NProgress.done();
-								this.$notify({
-									title: '成功',
+								//NProgress.done();
+								this.$message({
 									message: '提交成功',
 									type: 'success'
 								});
@@ -278,13 +275,12 @@
 					type: 'warning'
 				}).then(() => {
 					this.listLoading = true;
-					NProgress.start();
+					//NProgress.start();
 					let para = { ids: ids };
 					batchRemoveUser(para).then((res) => {
 						this.listLoading = false;
-						NProgress.done();
-						this.$notify({
-							title: '成功',
+						//NProgress.done();
+						this.$message({
 							message: '删除成功',
 							type: 'success'
 						});
diff --git a/src/views/nav1/user.vue b/src/views/nav1/user.vue
index 9e705c0..7744163 100644
--- a/src/views/nav1/user.vue
+++ b/src/views/nav1/user.vue
@@ -34,7 +34,7 @@
 </template>
 <script>
 	import { getUserList } from '../../api/api';
-	import NProgress from 'nprogress'
+	//import NProgress from 'nprogress'
 	export default {
 		data() {
 			return {
@@ -57,11 +57,11 @@
 					name: this.filters.name
 				};
 				this.loading = true;
-				NProgress.start();
+				//NProgress.start();
 				getUserList(para).then((res) => {
 					this.users = res.data.users;
 					this.loading = false;
-					NProgress.done();
+					//NProgress.done();
 				});
 			}
 		},