<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. kernel

    http://sebastianraschka.com/Articles/2014_kernel_pca.html

  2. ipynb-->pdf

    ipython nbconvert notebookname.ipynb --to latex --post pdf

  3. SQL数据库查询出一张表中重复的数据，按某个字段来查找。

    例如表名为Course 需要查询出name重复的有那些??? 解答如下: 补充: 如:查询每个姓名出现大于2次,SQL如下 SELECT COUNT(NAME) as '出现次数',  NAME FR ...

  4. Sass和gulp的简单了解

        一.sass  less    css预处理器        sass里面有2种语法  第一种语法是sass  后缀名必须是sass   第二种语法是scss  后缀名必须是scss      ...

  5. WebSocket 详解

    WebSocket 出现前 构建网络应用的过程中,我们经常需要与服务器进行持续的通讯以保持双方信息的同步.通常这种持久通讯在不刷新页面的情况下进行,消耗一定的内存资源常驻后台,并且对于用户不可见.在 ...

  6. python3 包的发布

    发布流程大概如下 1. 首先需要有一个python包,就是一个文件夹,但是此文件夹下面有__init__.py文件,里面内容是 现在要发布包TestMsg,这就是一个python包.在同级目录下新建s ...

  7. requests.exceptions.SSLError……Max retries exceeded with url错误求助！！！

    import requests head = {"User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) Appl ...

  8. Special Segments of Permutation - CodeForces - 1156E （笛卡尔树上的启发式合并）

    题意 给定一个全排列\(a\). 定义子区间\([l,r]\),当且仅当\(a_l + a_r = Max[l,r]\). 求\(a\)序列中子区间的个数. 题解 笛卡尔树上的启发式合并. \(200 ...

  9. 笔记-python-lib-re

    笔记-python-lib-re 1.      re模块简介 re模块提供了与perl类似的正则匹配功能. 要搜索的模式和字符串都可以是Unicode字符串(str)以及8位字符串(bytes).但 ...

  10. java中如何判断一个字符串是否包含另外一个字符串的方法

    indexOf(String s)的使用,如果包含,返回的值是包含该子字符串在父类字符串中起始位置: 如果不包含必定全部返回值为-1 package my_automation; public cla ...