做一個vue模態彈出框如何

運用的知識點包括：

路由的配置

插槽

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>