<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. mysql 获取系统时间的下一天 年-月-日 时:分:秒

    DAY) as date

  2. 一分钟搭建好webpack通用坏境

    经常忘记一些常用的webpack配置,在这记录一下. webpack能用babel编译es5.能预编译.能加载静态资源(js/css/html).是一个很通用的开发坏境虽然不是很智能但是很好用很方便. ...

  3. Win 无法安装 python 包

    Win 上使用 pip install 安装出错 使用 wheel 安装 pip install wheel 下载 编译包 http://www.lfd.uci.edu/~gohlke/pythonl ...

  4. JAVA JDBC 连接 Oracle

    使用 Junit 测试类编写 public class JdbcTest { private Connection con = null;// 创建一个数据库连接 private PreparedSt ...

  5. 【前端_js】ajax的应用

    1.设置请求头部 function makeRequest() { alert("inside makeRequest()"); var settings = { type: &q ...

  6. 单片机入门学习笔记5：STC下载器

    STC下载器主要集成了, 1.芯片识别,下载/编程 2.端口识别 3.串口助手 4.KEIL仿真设置 5.芯片选型 6.范例程序 (集成了定时器,串口等例程) 7.波特率计算器 8.定时器计算器 9. ...

  7. 用iTerm快速链接远程服务器

    通常情况下,iTerm2访问远程Linux使用ssh ssh <用户名>@<ip> 然后输入访问的密码即可.当然还有的时候需要指定访问端口. ssh -p <端口号> ...

  8. Unidirectional TSP UVA - 116 多段图的最短路

    题目:题目链接 思路:从后往前进行dp,用next数组记录字典序最小的那一条路径 AC代码: #include <iostream> #include <cstdio> #in ...

  9. Linux 用户行为日志记录

    工作中我们常常遇到,有的员工不安于被分配的权限,老是想sudo echo "ziji" /usr/bin/visudo NOPASSWD:ALL来进行提权,造成误删了数据库某条重要 ...

  10. leetcode 【 Search Insert Position 】python 实现

    题目: Given a sorted array and a target value, return the index if the target is found. If not, return ...