<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. centos 6 安装VMware Tools

    开启虚拟机的centos系统, 在虚拟机工具栏点击 “虚拟机”=>VMwareTools安装,  centos系统内的桌面会有一个VMware Tools的驱动光驱, 双击打开后,有一个tar. ...

  2. 图片url转base64

    var xhr = new XMLHttpRequest() // 配置的代理,解决跨域问题 xhr.open('GET', url.replace('http://xxx.com', '/img') ...

  3. 1048: [HAOI2007]分割矩阵

    Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 1184  Solved: 863[Submit][Status][Discuss] Descripti ...

  4. python字典按照k,v来排序

    按照 k 排序 按照 v 排序

  5. 常用自写函数[更新ing]

    int gcd (int x, int y)//最大公约数 { return y == 0 ? x : gcd( y , x % y ); } int lcm(int x, int y)//最小公倍数 ...

  6. 大道至简读后感——JAVA伪代码

    import.java.Dadaozhijain public class YuGongYiShan { //愚公移山 愚公={项目管理人员}: 原始需求={惩山北之塞,出入之迂也}: 沟通方式={聚 ...

  7. 1 > 2 and 3 < 4 or 4 > 5 and 2 > 1 or 9 < 8

    a,b,c,d,e,f,g=1,2,3,4,5,8,9 m = a > b and c < d or c > e n = b > a or g < f x = m and ...

  8. docker 学习（1）

    Docker与容器和虚拟机 Docker跟虚拟机有什么区别啊?这个问题可以拆成两部分.因为Docker并不是什么完全独创的技术,而是属于很早便有了的容器技术,所以第一个问题就是容器与虚拟机的区别?同属 ...

  9. [USACO]奶牛博览会(DP)

    Description 奶牛想证明他们是聪明而风趣的.为此,贝西筹备了一个奶牛博览会,她已经对N头奶牛进行了面试,确定了每头奶牛的智商和情商. 贝西有权选择让哪些奶牛参加展览.由于负的智商或情商会造成 ...

  10. V4L2学习（一）整体说明

    1.概述 Video4Linux2是Linux内核中关于视频设备的内核驱动框架,为上层的访问底层的视频设备提供了统一的接口.凡是内核中的子系统都有抽象底层硬件的差异,为上层提供统一的接口和提取出公共代 ...