运用的知识点包括:

路由的配置

插槽

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>

做一个vue模态弹出框如何的更多相关文章

  1. 做一个iframe的弹出框

    群里有个人想在微信页面里面加弹出框.作为前端的我,想着不可能这样做.后来一个人说了: A:如果对方没有防盗链的话,你可以建个页面,内置iframe 到他的页面,然后把url 的参数也传入你的ifram ...

  2. Bootstrap模态弹出框

    前面的话 在 Bootstrap 框架中把模态弹出框统一称为 Modal.这种弹出框效果在大多数 Web 网站的交互中都可见.比如点击一个按钮弹出一个框,弹出的框可能是一段文件描述,也可能带有按钮操作 ...

  3. UIPresentationController - iOS自定义模态弹出框

    参考: https://developer.apple.com/library/archive/featuredarticles/ViewControllerPGforiPhoneOS/Definin ...

  4. 玩转Bootstrap(JS插件篇)-第1章 模态弹出框 :1-4 模态弹出框--结构分析

    模态弹出框--结构分析 Bootstrap框架中的模态弹出框,分别运用了“modal”.“modal-dialog”和“modal-content”样式,而弹出窗真正的内容都放置在“modal-con ...

  5. 玩转Bootstrap(JS插件篇)-第1章 模态弹出框 :1-3 模态弹出框

    模态弹出框(Modals) 这一小节我们先来讲解一个“模态弹出框”,插件的源文件:modal.js. 右侧代码编辑器(30行)就是单独引入 bootstrap 中发布出的“modal.js”文件. 样 ...

  6. 代码录播:jQueryMobile 实现一个简单的弹出框效果

    今天给大家带来的是 jQueryMobile 实现一个简单的弹出框效果,有兴趣的童鞋可以试试哦~ ^_^ 阅读原文:www.gbtags.com  

  7. bootstrap中的modal 模态弹出框不能放在 form_for里面,一弹出modal会自动submit掉form

    bootstrap中的modal 模态弹出框不能放在 form_for里面,一弹出modal会自动submit掉form

  8. html、css和js原生写一个模态弹出框,顺便解决父元素半透明子元素不透明效果

    模态框: html部分: <!-- 按钮 --> <button id="box" onclick="pop_box()">弹出框< ...

  9. 玩转Bootstrap(JS插件篇)-第1章 模态弹出框 :1-1导入JavaScript插件

    导入JavaScript插件 Bootstrap除了包含丰富的Web组件之外,如前面介绍的下拉菜单.按钮组.导航.分页等.他还包括一些JavaScript的插件. Bootstrap的JavaScri ...

随机推荐

  1. Flask06 地址约定、利用falsk提供的方法渲染模板

    1 访问地址约定 在访问路径的末尾是否需要加 / -> 可以加,也可以不加 前端的访问路径必须和后端的路径完全匹配才能够访问成功,如果我们在后台的路径都是以 / 结尾,但是我们的访问路径是没有以 ...

  2. 树莓派 Learning 003 --- GPIO 001 --- 点亮LED

    树莓派 Learning 003 - GPIO 001 - 点亮LED 我的树莓派型号:Raspberry Pi 2 Model B V1.1 装机系统:NOOBS v1.9.2 树莓派 Learni ...

  3. Jmeter分布式测试需要注意事项

    Jmeter分布式测试需要注意事项: 1. 如果脚本中有用到CSV Data Set Config,则所有的模拟机都必须在相应的目录下存在该文件.如下图,则必须所有模拟机的F盘下都有user.txt文 ...

  4. sublime text 侧边栏样式修改

    安装PackageResourceViewer 插件.快捷键 CTRL+SHIFT+P 打开 命令面板,输入 Package Control:Install Package (直接输入PCIP,四个单 ...

  5. Umbraco 的template使用的默认Model问题

    Umbraco中的Template默认都继承自 Umbraco.Web.Mvc.UmbracoTemplatePage @inherits Umbraco.Web.Mvc.UmbracoTemplat ...

  6. 3.Windows应急响应:蠕虫病毒

    0x00 前言 蠕虫病毒是一种十分古老的计算机病毒,它是一种自包含的程序(或是一套程序),通常通过网络途径传播, 每入侵到一台新的计算机,它就在这台计算机上复制自己,并自动执行它自身的程序.常见的蠕虫 ...

  7. jquery事件之事件

    事件名 说明 语法 (events 事件类型,data数据,handler 事件处理函数,selector 选择器) blur() 获得失去鼠标光标焦点事件 jQueryObject.blur( [ ...

  8. 关于pacemaker监控mysql修复的方法

    对工作中,涉及到数据库修复的一个简单汇总 1.在所有的控制节点上,执行pcs resource命令行,查看控制节点上pacemaker的状态是否异常,如果异常,通过crm_resource -P命令行 ...

  9. [Xcode 实际操作]四、常用控件-(9)普通警告窗口的使用

    目录:[Swift]Xcode实际操作 本文将演示警告窗口的使用方法. 警告窗口不仅可以给用户展现提示信息,还可以提供若干选项供用户选择. 在项目导航区,打开视图控制器的代码文件[ViewContro ...

  10. ios开发 xcode6以上安装Alcatraz管理插件

    在终端上输入如下命令即可完成安装: curl -fsSL https://raw.github.com/supermarin/Alcatraz/master/Scripts/install.sh |  ...