Browse Source

add transition.remove nprogress.

master
taylor 8 years ago
parent
commit
3719d21eb9
  1. 85
      src/App.vue
  2. 6
      src/main.js
  3. 2
      src/views/Home.vue
  4. 9
      src/views/Login.vue
  5. 34
      src/views/nav1/Table.vue
  6. 6
      src/views/nav1/user.vue

85
src/App.vue

@ -1,54 +1,67 @@
<template> <template>
<div id="app"> <div id="app">
<router-view></router-view>
<transition name="fade"
mode="out-in">
<router-view></router-view>
</transition>
</div> </div>
</template> </template>
<script> <script>
export default {
name: 'app',
components: {
}
export default {
name: 'app',
components: {
} }
}
</script> </script>
<style lang="scss"> <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-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> </style>

6
src/main.js

@ -7,8 +7,8 @@ import 'element-ui/lib/theme-default/index.css'
import VueRouter from 'vue-router' import VueRouter from 'vue-router'
import store from './vuex/store' import store from './vuex/store'
import Vuex from 'vuex' 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 routes from './routes'
import Mock from './mock' import Mock from './mock'
Mock.bootstrap(); Mock.bootstrap();
@ -18,7 +18,7 @@ Vue.use(ElementUI)
Vue.use(VueRouter) Vue.use(VueRouter)
Vue.use(Vuex) Vue.use(Vuex)
NProgress.configure({ showSpinner: false });
//NProgress.configure({ showSpinner: false });
const router = new VueRouter({ const router = new VueRouter({
routes routes

2
src/views/Home.vue

@ -61,7 +61,7 @@
</el-breadcrumb> </el-breadcrumb>
</el-col> </el-col>
<el-col :span="24" class="content-wrapper"> <el-col :span="24" class="content-wrapper">
<transition>
<transition name="fade" mode="out-in">
<router-view></router-view> <router-view></router-view>
</transition> </transition>
</el-col> </el-col>

9
src/views/Login.vue

@ -17,7 +17,7 @@
<script> <script>
import { requestLogin } from '../api/api'; import { requestLogin } from '../api/api';
import NProgress from 'nprogress'
//import NProgress from 'nprogress'
export default { export default {
data() { data() {
return { return {
@ -49,15 +49,14 @@
if (valid) { if (valid) {
//_this.$router.replace('/table'); //_this.$router.replace('/table');
this.logining = true; this.logining = true;
NProgress.start();
//NProgress.start();
var loginParams = { username: this.ruleForm2.account, password: this.ruleForm2.checkPass }; var loginParams = { username: this.ruleForm2.account, password: this.ruleForm2.checkPass };
requestLogin(loginParams).then(data => { requestLogin(loginParams).then(data => {
this.logining = false; this.logining = false;
NProgress.done();
//NProgress.done();
let { msg, code, user } = data; let { msg, code, user } = data;
if (code !== 200) { if (code !== 200) {
this.$notify({
title: '错误',
this.$message({
message: msg, message: msg,
type: 'error' type: 'error'
}); });

34
src/views/nav1/Table.vue

@ -106,7 +106,7 @@
<script> <script>
import util from '../../common/js/util' import util from '../../common/js/util'
import NProgress from 'nprogress'
//import NProgress from 'nprogress'
import { getUserListPage, removeUser, batchRemoveUser, editUser, addUser } from '../../api/api'; import { getUserListPage, removeUser, batchRemoveUser, editUser, addUser } from '../../api/api';
export default { export default {
@ -172,12 +172,12 @@
name: this.filters.name name: this.filters.name
}; };
this.listLoading = true; this.listLoading = true;
NProgress.start();
//NProgress.start();
getUserListPage(para).then((res) => { getUserListPage(para).then((res) => {
this.total = res.data.total; this.total = res.data.total;
this.users = res.data.users; this.users = res.data.users;
this.listLoading = false; this.listLoading = false;
NProgress.done();
//NProgress.done();
}); });
}, },
// //
@ -186,13 +186,12 @@
type: 'warning' type: 'warning'
}).then(() => { }).then(() => {
this.listLoading = true; this.listLoading = true;
NProgress.start();
//NProgress.start();
let para = { id: row.id }; let para = { id: row.id };
removeUser(para).then((res) => { removeUser(para).then((res) => {
this.listLoading = false; this.listLoading = false;
NProgress.done();
this.$notify({
title: '成功',
//NProgress.done();
this.$message({
message: '删除成功', message: '删除成功',
type: 'success' type: 'success'
}); });
@ -224,14 +223,13 @@
if (valid) { if (valid) {
this.$confirm('确认提交吗?', '提示', {}).then(() => { this.$confirm('确认提交吗?', '提示', {}).then(() => {
this.editLoading = true; this.editLoading = true;
NProgress.start();
//NProgress.start();
let para = Object.assign({}, this.editForm); let para = Object.assign({}, this.editForm);
para.birth = (!para.birth || para.birth == '') ? '' : util.formatDate.format(new Date(para.birth), 'yyyy-MM-dd'); para.birth = (!para.birth || para.birth == '') ? '' : util.formatDate.format(new Date(para.birth), 'yyyy-MM-dd');
editUser(para).then((res) => { editUser(para).then((res) => {
this.editLoading = false; this.editLoading = false;
NProgress.done();
this.$notify({
title: '成功',
//NProgress.done();
this.$message({
message: '提交成功', message: '提交成功',
type: 'success' type: 'success'
}); });
@ -249,14 +247,13 @@
if (valid) { if (valid) {
this.$confirm('确认提交吗?', '提示', {}).then(() => { this.$confirm('确认提交吗?', '提示', {}).then(() => {
this.addLoading = true; this.addLoading = true;
NProgress.start();
//NProgress.start();
let para = Object.assign({}, this.addForm); let para = Object.assign({}, this.addForm);
para.birth = (!para.birth || para.birth == '') ? '' : util.formatDate.format(new Date(para.birth), 'yyyy-MM-dd'); para.birth = (!para.birth || para.birth == '') ? '' : util.formatDate.format(new Date(para.birth), 'yyyy-MM-dd');
addUser(para).then((res) => { addUser(para).then((res) => {
this.addLoading = false; this.addLoading = false;
NProgress.done();
this.$notify({
title: '成功',
//NProgress.done();
this.$message({
message: '提交成功', message: '提交成功',
type: 'success' type: 'success'
}); });
@ -278,13 +275,12 @@
type: 'warning' type: 'warning'
}).then(() => { }).then(() => {
this.listLoading = true; this.listLoading = true;
NProgress.start();
//NProgress.start();
let para = { ids: ids }; let para = { ids: ids };
batchRemoveUser(para).then((res) => { batchRemoveUser(para).then((res) => {
this.listLoading = false; this.listLoading = false;
NProgress.done();
this.$notify({
title: '成功',
//NProgress.done();
this.$message({
message: '删除成功', message: '删除成功',
type: 'success' type: 'success'
}); });

6
src/views/nav1/user.vue

@ -34,7 +34,7 @@
</template> </template>
<script> <script>
import { getUserList } from '../../api/api'; import { getUserList } from '../../api/api';
import NProgress from 'nprogress'
//import NProgress from 'nprogress'
export default { export default {
data() { data() {
return { return {
@ -57,11 +57,11 @@
name: this.filters.name name: this.filters.name
}; };
this.loading = true; this.loading = true;
NProgress.start();
//NProgress.start();
getUserList(para).then((res) => { getUserList(para).then((res) => {
this.users = res.data.users; this.users = res.data.users;
this.loading = false; this.loading = false;
NProgress.done();
//NProgress.done();
}); });
} }
}, },

Loading…
Cancel
Save