Browse Source

add transition.remove nprogress.

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

93
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>

6
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

4
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;

9
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'
});

34
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'
});

6
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();
});
}
},

Loading…
Cancel
Save