Skip to content

Commit d2851b3

Browse files
bai3bai3
committed
🚧 增加路由切换效果
1 parent c71a79a commit d2851b3

File tree

4 files changed

+130
-67
lines changed

4 files changed

+130
-67
lines changed

‎README.md‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,16 @@
11
# message
22

33
> A Vue.js project
4-
5-
This is my first Vue's project
6-
thought the project is so easy,....sorry my english so bad,so I
7-
don't konw to say.
8-
用中文讲，就是没啥可说的。
4+
第一个个人的vue项目+独自完成的前后端分离项目
5+
总结一下，因为django rest framework并不是很熟练，实习的时候都是别人写好接口直接给我，自己用python写接口真的有点困难。前端方面还是比较简单，有些新的知识多看文档还是能解决的。接下来为这个项目做得工作，无非是移动端路由切换和表单提交信息的补充，作为第一个自己完整搭建的项目，我还是会好好维护的。
96
## 项目地址 [www.bai3.xyz/comment](http://www.bai3.xyz/comment)
107
> 线上版本因为前后端图片路由问题导致图片不显示，所以线上没更新。可以自行下载github库自行安装运行
8+
更新说明
9+
- 2017/12/18
10+
丰富了用户留言列表的大头贴
11+
- 2017/12/19
12+
添加了路由切换是动画效果(实际是想做移动端侧拉切换路由，没成功)
13+
1114
### 技术栈
1215
#### 前端
1316
- vue

‎src/App.vue‎

Lines changed: 33 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
</el-menu-item>
1010
</el-menu>
1111
<transition :name="transitionName">
12-
<router-view>
12+
<router-view class="child-view">
1313
</router-view>
1414
</transition>
1515
</div>
@@ -22,14 +22,21 @@ export default {
2222
/* eslint-disable */
2323
data() {
2424
return {
25-
transitionName: 'slide-right'
25+
transitionName,
2626
}
2727
},
28-
2928
name: 'app',
3029
components: {
3130
Message,
3231
MessageList,
32+
},
33+
updated: function(){
34+
let a = this.$route.path;
35+
if(a == '/Message'){
36+
this.transitionName = 'slide-left'
37+
}else{
38+
this.transitionName = 'slide-right'
39+
}
3340
}
3441
}
3542
</script>
@@ -38,11 +45,11 @@ export default {
3845
body{
3946
margin: 0
4047
}
41-
@media screen and (min-width: 1080px){
42-
#app{
43-
margin: 0 350px
44-
}
45-
}
48+
// @media screen and (min-width: 1080px){
49+
// #app{
50+
// margin: 0 350px
51+
// }
52+
// }
4653
#app {
4754
font-family: "Helvetica Neue",Helvetica,Arial,"Microsoft Yahei","Hiragino Sans GB","Heiti SC","WenQuanYi Micro Hei",sans-serif;
4855
-webkit-font-smoothing: antialiased;
@@ -55,6 +62,24 @@ body{
5562
}
5663
}
5764
}
65+
.child-view {
66+
position: absolute;
67+
width: 100%;
68+
transition: all .8s cubic-bezier(.55, 0, .1, 1);
69+
}
70+
71+
.slide-left-enter,
72+
.slide-right-leave-active {
73+
opacity: 0;
74+
-webkit-transform: translate(500px, 0);
75+
transform: translate(500px, 0);
76+
}
5877
78+
.slide-left-leave-active,
79+
.slide-right-enter {
80+
opacity: 0;
81+
-webkit-transform: translate(-500px, 0);
82+
transform: translate(-500px, 0);
83+
}
5984
6085
</style>

‎src/components/MessageList.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@ export default {
6868
6969
}
7070
},
71-
beforeMount: function () {
71+
created: function () {
7272
this.$http("http://www.bai3.xyz/api/getlist/?format=json")
7373
.then(response => {this.comments = response.data});
7474
},

‎test.html‎

Lines changed: 88 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,68 +1,103 @@
11
<!DOCTYPE html>
22
<html lang="en">
3+
34
<head>
45
<meta charset="UTF-8">
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7-
<title>Document</title>
8-
<script src="https://unpkg.com/vue"></script>
9-
<script src="https://unpkg.com/marked@0.3.6"></script>
10-
<script src="https://unpkg.com/lodash@4.16.0"></script>
11-
<style>
12-
html, body, #editor {
13-
margin: 0;
14-
height: 100%;
15-
font-family: 'Helvetica Neue', Arial, sans-serif;
16-
color: #333;
17-
}
18-
19-
textarea, #editor div {
20-
display: inline-block;
21-
width: 49%;
22-
height: 100%;
23-
vertical-align: top;
24-
box-sizing: border-box;
25-
padding: 0 20px;
6+
<title>hello world</title>
7+
<style type="text/css" media="screen">
8+
.child-view {
9+
position: absolute;
10+
width: 100%;
11+
transition: all .8s cubic-bezier(.55, 0, .1, 1);
2612
}
2713

28-
textarea {
29-
border: none;
30-
border-right: 1px solid #ccc;
31-
resize: none;
32-
outline: none;
33-
background-color: #f6f6f6;
34-
font-size: 14px;
35-
font-family: 'Monaco', courier, monospace;
36-
padding: 20px;
14+
.slide-left-enter,
15+
.slide-right-leave-active {
16+
opacity: 0;
17+
-webkit-transform: translate(500px, 0);
18+
transform: translate(500px, 0);
3719
}
3820

39-
code {
40-
color: #f66;
21+
.slide-left-leave-active,
22+
.slide-right-enter {
23+
opacity: 0;
24+
-webkit-transform: translate(-500px, 0);
25+
transform: translate(-500px, 0);
4126
}
4227
</style>
4328
</head>
29+
4430
<body>
45-
<div id="editor">
46-
<textarea :value="input" @input="update"></textarea>
47-
<div v-html="compiledMarkdown"></div>
31+
<div id="app">
32+
<div>
33+
<!-- 4、<router-link>默认会被渲染成一个 `<a>` 标签 ,to指令跳转到指定路径 -->
34+
<router-link to="/home">Go to Home</router-link>
35+
<router-link to="/about">Go to About</router-link>
36+
</div>
37+
<!-- 5、在页面上使用<router-view></router-view>标签，用于渲染匹配的组件 -->
38+
<transition :name="transitionName">
39+
<router-view class="child-view"></router-view>
40+
</transition>
4841
</div>
42+
<!-- 组件 -->
43+
<template id="Home">
44+
<div>
45+
<h1> {{msg}}</h1>
46+
</div>
47+
</template>
48+
<template id="About">
49+
<div>
50+
<h1> {{msg}}</h1>
51+
</div>
52+
</template>
53+
<!-- 0、引入依赖库 -->
54+
<script src="https://cdn.bootcss.com/vue/2.3.4/vue.min.js"></script>
55+
<script src="https://cdn.bootcss.com/vue-router/2.7.0/vue-router.min.js"></script>
56+
<script type="text/javascript">
57+
/* 1、创建组件 */
58+
var Home = Vue.extend({
59+
template: '#Home',
60+
data: function() {
61+
return {
62+
msg: 'Hello, vue router!'
63+
}
64+
}
65+
});
66+
var About = Vue.extend({
67+
template: '#About',
68+
data: function() {
69+
return {
70+
msg: 'This is the tutorial about vue-router.'
71+
}
72+
}
73+
});
74+
75+
// 2. 创建 router 实例，然后传 `routes`路由映射 配置
76+
var router = new VueRouter({
77+
routes: [{
78+
path: '/home',
79+
component: Home
80+
}, {
81+
path: '/about',
82+
component: About
83+
}, {
84+
path: '/',
85+
component: Home
86+
} //设置默认路径
87+
]
88+
});
89+
90+
// 3. 创建和挂载根实例。记得要通过 router 配置参数注入路由，从而让整个应用都有路由功能
91+
var vm = new Vue({
92+
data: {
93+
transitionName: 'slide-left'
94+
},
95+
router: router
96+
97+
}).$mount('#app');
98+
99+
// 现在，应用已经启动了！
100+
</script>
49101
</body>
50-
<script>
51-
new Vue({
52-
el: '#editor',
53-
data: {
54-
input: '# hello'
55-
},
56-
computed: {
57-
compiledMarkdown: function () {
58-
return marked(this.input, { sanitize: true })
59-
}
60-
},
61-
methods: {
62-
update: _.debounce(function (e) {
63-
this.input = e.target.value
64-
}, 300)
65-
}
66-
})
67-
</script>
102+
68103
</html>

0 commit comments

Comments
 (0)