<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. nginx反向代理与正向代理的区别

    http://blog.csdn.net/m13666368773/article/details/8060481

  2. 短短几行css代码实现滚动条效果

    如何实现使用css实现滚动条效果 实现效果,运用线性渐变来实现功能 假设我们的页面被包裹在 <body> 中,可以滚动的是整个 body,给它添加这样一个从左下到到右上角的线性渐变: bo ...

  3. C++ 容器与继承

    如果容器类型定义为基类类型,那么虽然可以把派生类装进容器中,但是不能通过容器访问派生类自己的public成员,派生类将会倍切掉,只保留派生类的基类部分: 如果把容器定义为派生类类型,那么不能把基类类型 ...

  4. MySQL基础 - 1 数据库基础

    一.数据库基础 1.什么是数据库 1.数据库(database)是保存有组织的数据的容器( 通常是一个文件或一组文件 ) 2.数据库是一个以某种有组织的方式存储的数据集合 注意:数据库软件应该称为DB ...

  5. vue 判断是否登录，未登录跳转到登录页

    网页一进入判断是否登录,未登录跳转到登录页面 router.js export default new Router({ routes: [ { path: '/', name: 'HelloWorl ...

  6. Android系统中标准Intent的使用

    Android系统用于Activity的标准Intent 1.根据联系人ID显示联系人信息= Intent intent=new Intent(); intent.setAction(Intent.A ...

  7. Essential C++ 3.1 节的代码练习——指针方式

    // // PointerToValue.cpp // Working // // Created by Hawkins, Dakota Y on 6/3/16. // Copyright 2016 ...

  8. 分数调查 HihoCoder - 1515

    小Hi的学校总共有N名学生,编号1-N.学校刚刚进行了一场全校的古诗文水平测验. 学校没有公布测验的成绩,所以小Hi只能得到一些小道消息,例如X号同学的分数比Y号同学的分数高S分. 小Hi想知道利用这 ...

  9. linux lvm扩容

    1.分区,  查看磁盘使用:fdisk -l 对磁盘分区:fdisk /dev/sdb 2.创建pv pvcreate /dev/sdb1 查看pv: pvdisplay 3.查看vg  vgdisp ...

  10. utf8和utf8mb4区别

    原文链接 一.简介 MySQL在5.5.3之后增加了这个utf8mb4的编码,mb4就是most bytes 4的意思,专门用来兼容四字节的unicode.好在utf8mb4是utf8的超集,除了将编 ...