add transition.remove nprogress.

8 years ago · 3719d21eb9
6 changed files with 80 additions and 72 deletions
--- 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;
-	}
+	// 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%;
-	}
+#app {
+	position: absolute;
+	top: 0px;
+	bottom: 0px;
+	width: 100%;
+}

-	.el-submenu [class^=fa] {
-		vertical-align: baseline;
-		margin-right: 10px;
-	}
+.el-submenu [class^=fa] {
+	vertical-align: baseline;
+	margin-right: 10px;
+}

-	.el-menu-item [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;
-		}
+.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>
--- 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
--- 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>
--- 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'
                });
--- 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'
 						});
--- 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();
 				});
 			}
 		},