<slot>元素是一个内容分发API,使用多个内容插槽时可指定name属性

<!DOCTYPE html>

<html>

  <head>

    <meta charset="UTF-8">

    <title></title>

    <!-- <link rel="stylesheet" href="fonts/iconfont.css" /> -->

    <style>

      * {

        font-family: simhei, Helvetica, Arial, sans-serif;

      }

      #dialog-template{

        display: none;

      }   

      button {

        display: inline-block;

        border: 0;

        box-sizing: border-box;

        color: #fff;

        font-size: 1em;

        border-radius: .1em;

        line-height: 2em;

        padding: 0 1em;

        transition: .4s ease-out;

        outline: 0;

        text-decoration: none;

      }

      button:hover,

      button:focus {

        opacity: 0.5;

        cursor: pointer;

        transition: .15s ease-in;

      }

      .btn-group{

        margin: 200px auto;

        width: 640px;

      }

      .btn-info{

        background: blue;

      }

      .btn-success{

        background: gray;

      }

      .btn-warning{

        background: green;

      }

      .btn-error{

        background: coral;

      }

      .dialog {

        width: 480px;

        position: fixed;

        left: 50%;

        top: 2em;

        transform: translateX(-50%);

        z-index: 2000;

        visibility: hidden;

        backface-visibility: hidden;

        perspective: 1300px;

      }

      .dialog-active {

        visibility: visible;

      }

      .dialog-active .dialog-content {

        position: relative;

        opacity: 1;

        transform: rotateY(0);

      }

      .dialog-active ~ .dialog-overlay {

        opacity: 1;

        visibility: visible;

      }

      .dialog-content {

        border-radius: 3px;

        background: #fff;

        overflow: hidden;

        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);

        transition: .5s ease-in-out;

        opacity: 0;

        transform-style: preserve-3d;

        transform: rotateY(-70deg);

      }

      .dialog-header {

        color: #fff;

      }

      .dialog-title {

        margin: 0;

        font-size: 2em;

        text-align: center;

        font-weight: 200;

        line-height: 2em;

      }

      .dialog-body {

        padding: 2em;

      }

      .dialog-footer {

        margin: 0 2em;

        padding: 2em 0;

        text-align: right;

        border-top: 1px solid rgba(0, 0, 0, 0.1);

      }

      .dialog-overlay {

        content: "";

        position: fixed;

        visibility: hidden;

        top: 0;

        left: 0;

        right: 0;

        bottom: 0;

        z-index: 1000;

        opacity: 0;

        background: rgba(0, 0, 0, 0.5);

        transition: all .6s;

      }

      .dialog-info .dialog-header,.dialog-info button {

        background-color: lightblue;

      }

      .dialog-success .dialog-header,.dialog-success button {

        background-color: lightgray;

      }

      .dialog-warning .dialog-header,.dialog-warning button {

        background-color: lightgreen;

      }

      .dialog-error .dialog-header,.dialog-error button {

        background-color: lightcoral;

      }

      .close {

        display: inline-block;

        width: 2rem;

        height: 2rem;

        position: absolute;

        top: .5rem;

        right: .5rem;

        transition: .8s ease all;

        -moz-transition: .8s ease all;

        -webkit-transition: .8s ease all;

        border: none;

        border-radius: 3px;

        color: #333;

        text-decoration: none;

        box-sizing: border-box;

        -webkit-box-sizing: border-box;

      }

      .close:hover {

        transition: .8s ease all;

        -moz-transition: .8s ease all;

        -webkit-transition: .8s ease all;

      }

      .close .iconfont {

        font-size: 2rem;

        color: #fff;

      }

      .rotate {

        cursor: pointer;

      }

      .rotate:hover {

        transform: rotate(360deg);

        -moz-transform: rotate(360deg);

        -webkit-transform: rotate(360deg);

        transition: transform 1.0s ease all;

        -moz-transition: -moz-transform 1.0s ease all;

        -webkit-transition: -webkit-transform 1.0s ease all;

      }

    </style>

  </head>

  <body>

    <div id="app">

      <modal-dialog v-bind:show.sync="show" v-bind:class="dialogClass">

        <header class="dialog-header" slot="header">

          <h1 class="dialog-title">infomation</h1>

        </header>

        <div class="dialog-body" slot="body">

          <p>contents of dialog box</p>

          <p>para ,forms ,or pics</p>

        </div>

        <footer class="dialog-footer" slot="footer">

          <button @click="closeDialog">close</button>

        </footer>

      </modal-dialog>

      <div class="btn-group">

        <button class="btn-info" @click="openDialog('dialog-info')">Info dialog</button>

        <button class="btn-success" @click="openDialog('dialog-success')">Success dialog</button>

        <button class="btn-warning" @click="openDialog('dialog-warning')">warning dialog</button>

        <button class="btn-error" @click="openDialog('dialog-error')">error dialog</button>

      </div>

    </div>

    <template id="dialog-template">

      <div class="dialogs">

        <div class="dialog" v-bind:class="{ 'dialog-active': show }">

          <div class="dialog-content">

            <div class="close rotate">

              <span class="iconfont icon-close" @click="close"></span>

            </div>

            <slot name="header"></slot>

            <slot name="body"></slot>

            <slot name="footer"></slot>

          </div>

        </div>

        <div class="dialog-overlay"></div>

      </div>

    </template>

    <script src="js/vue.js"></script>

    <script>

      Vue.component('modal-dialog', {

        template: '#dialog-template',

        props: ['show'],

        methods: {

          close: function() {

            this.show = false

          }

        }

      })

      new Vue({

        el: '#app',

        data: {

          show: false,

          dialogClass: 'dialog-info'

        },

        methods: {

          openDialog: function(dialogClass) {

            this.show = true

            this.dialogClass = dialogClass

          },

          closeDialog: function() {

            this.show = false

          }

        }

      })

    </script>

  </body>

</html>

Vue中slot内容分发的更多相关文章

  1. 使用slot-scope复制vue中slot内容

    有时候我们的vue组件需要复制使用者传递的内容. 比如我们工程里面的轮播组件需要使用复制的slot来达到循环滚动的效果 使用者关注轮播内容的静态效果,组件负责让其滚动起来 组件: <div cl ...

  2. 玩转vue的slot内容分发

    vue的内容分发非常适合"固定部分+动态部分"的组件的场景,固定部分可以是结构固定,也可以是逻辑固定,比如下拉loading,下拉loading只是中间内容是动态的,而拉到底部都会 ...

  3. vue slot内容分发

    当需要让组件组合使用,混合父组件的内容和子组件的模板的时候,就会用到slot.这个过程就叫内容分发. 最为常用的是两种slot:一种是匿名slot, 一种是具名slot. 匿名 很好理解: 就是默认, ...

  4. vue中slot插槽

    插槽就是vue实现的一套内容分发的API,将插槽元素作为承载分发内容的出口. 也就是说在组件模板中默认占用一个位置,当使用组件标签时候,组件标签的内容就会自动替换掉内容 slot中可以设置一些默认的内 ...

  5. slot内容分发

    vue实现了一套内容分发的API,这套API基于当前的web components规范草案,将<slot>元素作为承载分发内容的出口. 在前面的父子组件中,我们提到过,在vue中,组件实例 ...

  6. vue 中slot 的具体用法

    子组件 <template> <div class="slotcontent"> <ul> <!--<slot></sl ...

  7. 浅谈Vue中Slot以及slot-scope

    vue中关于插槽的文档说明很短,语言又写的很凝练,再加上其和methods,data,computed等常用选项使用频率.使用先后上的差别,这就有可能造成初次接触插槽的开发者容易产生“算了吧,回头再学 ...

  8. vue2.0 之 slot 内容分发

    前提:父组件模板的内容在父组件作用域内编译:子组件模板的内容在子组件作用域内编译.被分发的内容会在父作用域内编译. 一.单个插槽 // 子组件模板 child-component <div> ...

  9. Vue中的slot内容分发

    ①概述: 简单来说,假如父组件需要在子组件内放一些DOM,那么这些DOM是显示.不显示.在哪个地方显示.如何显示,就是slot分发负责的活. ②默认情况下 父组件在子组件内套的内容,是不显示的. 例如 ...

随机推荐

  1. python模块;opencv安装

    http://www.lfd.uci.edu/~gohlke/pythonlibs/ 1. 步骤1. 下载Python2.73, 安装, 并配置Python环境变量:".\Program F ...

  2. HTML第四章：初始css

    CSS样式:                 一.为什么要使用CSS;可以让页面更美观.有利于开发速度.                 二.什么是CSS:全称cascading style shee ...

  3. Mysql占用内存过高的优化过程

    一.环境说明: 操作系统:CentOS 6.5 x86_64 数据库:Mysql 5.6.22 服务器:阿里云VPS,32G Mem,0 swap 二.问题情况: 1.某日发现公司线上系统的Mysql ...

  4. 【前端_js】前端跨网络异步获取资源——fetch()

    Fetch API 提供了一个 JavaScript接口,用于访问和操纵HTTP管道的部分,例如请求和响应.它还提供了一个全局 fetch()方法,该方法提供了一种简单,合理的方式来跨网络异步获取资源 ...

  5. shell基础及变量符号

    kernel主要的功能: 1.内存的管理 2.设备驱动程序 3.文件系统的管理 4.进程的管理 5.网络系统   vim /etc/profile.d/ profile(主配置文件) .d(子配置文件 ...

  6. 初学Docker

    1.基本概念Docker 包括三个基本概念镜像( Image )容器( Container )仓库( Repository )理解了这三个概念,就理解了 Docker 的整个生命周期. 2.Docke ...

  7. tp5依赖注入（自动实例化）：解决了像类中的方法传对象的问题

    app\index\Demo1.php namespace app\index\controller; /* 容器与依赖注入的原理 ----------------------------- 1.任何 ...

  8. Linux 服务器用户权限管理改造方案与实施项目

    Linux 服务器用户权限管理改造方案与实施项目 在了解公司业务流程后,提出权限整改方案改进公司超级权限root泛滥的现状. 我首先撰写方案后,给boss看,取得boss的支持后,召集大家开会讨论. ...

  9. 5分钟带你快速理解Http协议

    HTTP协议 什么是HTTP协议 HTTP(Hyper Text Transfer Protocol)协议又叫超文本传输协议,是建立在TCP/IP协议之上的用来传递数据的协议.它不涉及数据包的传递,主 ...

  10. 《鸟哥的Linux私房菜》学习笔记（9）——条件判断

    一.条件判断表达式                                                          条件测试类型: 整数测试 字符测试 文件测试 条件测试的表达式 [ ...