运用的知识点包括:
路由的配置
插槽
vue的过渡动画
路由重定向
router/index.js里面配置路由
import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/home'
import About from '@/components/about'
Vue.use(Router)
export default new Router({
mode:'history',
routes: [
{
path: '/home',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
component: About
},
{ path: '/', redirect:'/home' }
]
})
app.vue
<template>
<div id="app">
<router-link :to="{path:'/home'}">home</router-link>
<router-link :to="{path:'/about'}">about</router-link>
<router-view/>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
home.vue
<template>
<div class="home">
<p>{{msg}}</p>
<transition name="slide-fade">
<v-modal v-show="modalStatus" :title="title" :content="content" :btnType="btnType">
<slot>
<button v-for="item in btnType" :class="item.class" @click="modalStatus=false">
{{item.vlaue}}
</button>
</slot>
</v-modal>
</transition>
<button @click="openHomeModal()">打开modal</button>
</div>
</template>
<script>
import Modal from "@/components/modal.vue";
export default {
name: "HelloWorld",
data() {
return {
msg: "我是首页信息",
modalStatus: false,
title: "我是首页,我骄傲",
content: "我是首页的内容",
btnType: [{"value":"确定","class":"danger"},{"value": "取消","class":"defalut"}]
};
},
components: {
"v-modal": Modal
},
methods: {
openHomeModal() {
this.modalStatus = true;
}
}
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
/* 可以设置不同的进入和离开动画 */
/* 设置持续时间和动画函数 */
.slide-fade-enter-active {
transition: all .3s ease;
}
.slide-fade-leave-active {
transition: all .2s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active for below version 2.1.8 */ {
transform: translateY(-10px);
opacity: 0;
}
</style>
about.vue
<template>
<div class="about">
<p>{{aboutmsg}}</p>
<button @click="openHomeModal()">打开about里面的modal</button>
<transition name="slide-fade">
<v-modal v-show="modalStatus" :title="title" :content="content">
<slot>
<button v-for="item in btnType" :class="item.class" @click="modalStatus=false">
{{item.vlaue}}
</button>
</slot>
</v-modal>
</transition>
</div>
</template>
<script>
import Modal from "@/components/modal.vue";
export default {
data() {
return {
modalStatus: false,
aboutmsg: "我是关于页面",
title: "我是关于页面的title",
content: "我是关于页面的内容",
btnType:["value":"确定","class":"default"]
};
},
methods: {
openHomeModal() {
this.modalStatus = true;
}
},
components: {
"v-modal": Modal
}
};
</script>
<style lang="scss">
/* 可以设置不同的进入和离开动画 */
/* 设置持续时间和动画函数 */
.slide-fade-enter-active {
transition: all .3s ease;
}
.slide-fade-leave-active {
transition: all .2s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active for below version 2.1.8 */ {
transform: translateY(-10px); //从上面下移,逐渐出现
opacity: 0;
}
</style>
modal.vue
<template>
<div class="modal">
<div class="header">{{title}}</div>
<div class="content">{{content}}</div>
<div class="footer">
<slot></slot>
</div>
</div>
</template>
<script>
export default{
data(){
return {}
},
props:['title','content'],
}
</script>
<style lang="scss">
.modal {
width:500px;
height:400px;
position: absolute;
top:50%;
left:50%;
margin-toP:-250px;
margin-left:-200px;
border:1px solid #666;
.header {
height:60px;
line-height:60px;
text-align: center;
background:#666;
border-bottom: 1px solid #000;
box-sizing: border-box;
}
.content {
background:orange;
height:290px;
}
.footer {
height:50px;
line-height: 50px;
button {
vertical-align: middle;
display: inline-block;
width:80px;
height:40px;
line-height: 40px;
color:#fff;
&.danger{
background:red;
}
&.default{
background:#ddd;
}
}
}
}
</style>