做一个vue模态弹出框如何

Posted 2020-11-09 风流倜傥任潇洒， 不负青春好年华。

运用的知识点包括：

路由的配置

插槽

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 class="danger" name="danger"  @click="modalStatus=false">确定</button>
       <button class="default" name="default" @click="modalStatus=false">取消</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: "我是首页的内容",
    };
  },
  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 class="default" name="default"  @click="modalStatus=false">取消</button>
      </slot>
         </v-modal>
       </transition>
    </div>
</template>
<script>
import Modal from "@/components/modal.vue";
export default {
  data() {
    return {
      modalStatus: false,
      aboutmsg: "我是关于页面",
      title: "我是关于页面的title",
      content: "我是关于页面的内容",
    };
  },
   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>