slot的说明就看vue的官方文档  但是有点模糊

理解：

是对组件的扩展，通过slot插槽向组件内部指定位置传递内容，通过slot可以父子传参；
 

解决什么问题：
正常情况下,<Child><span style=”color:red;”>hello world</span></Child>在组件标签Child中的span标签会被组件模板template内容替换掉，当想让组件标签Child中内容传递给组件时需要使用slot插槽；

通俗的讲：

是“占坑”，在组件模板中占好了位置，当使用该组件标签时候，组件标签里面的内容就会自动填坑（替换组件模板中<slot>位置），当插槽也就是坑<slot name=”mySlot”>有命名时，组件标签中使用属性slot=”mySlot”的元素就会替换该对应位置内容；

例如下面使用的例子

第一次使用slot  练习的一个小例子有问题大家指正

最先编码的时候没有做到上下收缩，只能是列表式的，如下图

代码:

  1.         <p class="title" style="text-align:left;font-weight:bold">特有属性</p>
  2.         <div class="param-gap">
  3.             <label class="left" for="">圆角&nbsp;:</label>
  4.             <div class="right">
  5.                 <input class="data-value" :keep-selected="true" placeholder="请输入（上，右，下，左）" @input="updateData"/>
  6.             </div>
  7.         </div>

但是后面实际需要的效果是可以进行上下伸缩的，如下图

所以这样就得每一个 p元素上写成一个组件，组件里面写点击弹出下面的div，这种方式肯定可以实现，但是这里我就使用了插槽，讲需要下拉的内容通过一个参数传过去，放到对应的slot坑中

首先：

用一个组件讲下方的元素进行包裹起来  collapse-item  组件里面的内容就可以当做一个插槽

  1. <collapse-item title="点击我进行收缩的" :isShow="true">
  2.     <div class="param-gap">
  3.         <label class="left" for="" title="线型">线型:</label>
  4.         <div class="right">
  5.             <select class="data-value"  name="" id="">
  6.                 <option value="1">线型一</option>
  7.                 <option value="2">线型二</option>
  8.                 <option value="3">线型三</option>
  9.                 <option value="4">线型四</option>
  10.                 <option value="5">线型五</option>
  11.             </select>
  12.         </div>
  13.     </div>
  14. </collapse-item>

CollapseItem.vue进行正常引入

  1. import CollapseItem from './CollapseItem'

CollapseItem.vue里面的代码

  1. <template>
  2.     <div style="width:100%" class="testbox" :class="{'collapsed': !isActive }">
  3.         <p class="click" @click="handleHeaderClick">
  4.             <span>{{title}}</span>
  5.             <i class="arrow icon iconfont icon_down"></i>
  6.         </p>
  7.         <div v-show="isActive">
  8.             <slot></slot>
  9.         </div>
  10.     </div>
  11. </template>

slot里面的最终解析出来的html就是上面collapse-item标签里面包裹的元素

效果图（点击可以上下收缩，图标切换）

最后还使用了一个动画效果，讲小图标进行旋转

注意：

下面的css  如果直接切换class  为 collapsed 的时候，会导致点击的时候图标会有动画的效果，但是再点击一下会瞬间回到初始位置，不会出现动画

  1.     .collapsed .arrow {
  2.         transition: transform 0.18s ease 0s;
  3.         transform: rotate(-180deg) scale(1, 0.9);
  4.     }

解决办法，就是让初始的位置就进行旋转180度，把图片icon原本是down换成up，这样初始的时候看起来就和原来一样，然后再在点击的时候切换 collapsed   具体看代码

CollapseItem.vue

  1. <template>
  2.     <div style="width:100%" class="testbox" :class="{'collapsed': !isActive }">
  3.         <p class="click" @click="handleHeaderClick">
  4.             <span>{{title}}</span>
  5.             <i class="arrow icon iconfont icon_up"></i>
  6.         </p>
  7.         <div v-show="isActive">
  8.             <slot></slot>
  9.         </div>
  10.     </div>
  11. </template>
  12. <script>
  13.  
  14. export default {
  15.     name: 'CollapseItem',
  16.     props:{
  17.         title:String,//指定title为string类型的
  18.         isShow: {
  19.             type: Boolean,
  20.             default() {
  21.                 return true
  22.             }
  23.         }
  24.     },
  25.     data(){
  26.       return {
  27.         isActive : true
  28.       }
  29.     },
  30.     methods: {
  31.         handleHeaderClick(){
  32.             this.isActive = !this.isActive
  33.         }
  34.     }
  35. }
  36. </script>
  37. <style lang="scss" scoped >
  38.  
  39.     .click {
  40.         display: flex;
  41.         justify-content: space-between;
  42.     }
  43.     .arrow{
  44.         transition: transform 0.18s ease 0s;
  45.         transform: rotate(-180deg) scale(1, 0.9);
  46.     }
  47.     .collapsed .arrow {
  49.         transform: rotate(0deg) scale(1, 0.9);
  50.     }
  51.  
  52. </style>

hutest

  1. <template>
  2.     <div class="one">
  3.         <div class="box">
  4.             <p class="box-head">这是标题</p>
  5.             <div class="box-content">
  6.             <collapse-item title="点击我进行收缩的" :isShow="true">
  7.                 <div class="param-gap">
  8.                     <label class="left" for="" title="线型">线型:</label>
  9.                     <div class="right">
  10.                         <select class="data-value"  name="" id="">
  11.                             <option value="1">线型一</option>
  12.                             <option value="2">线型二</option>
  13.                             <option value="3">线型三</option>
  14.                             <option value="4">线型四</option>
  15.                             <option value="5">线型五</option>
  16.                         </select>
  17.                     </div>
  18.                 </div>
  19.             </collapse-item>
  20.             </div>
  21.         </div>
  22.     </div>
  23. </template>
  24. <script>
  25. import CollapseItem from './CollapseItem'
  26. export default {
  27.     name:'hutest',
  28.     components: { CollapseItem },
  29.     data() {
  30.         return {
  31.  
  32.         }
  33.     },
  34.     methods: {
  35.  
  36.     }
  37. }
  38. </script>
  39. <style lang="scss" scoped >
  40.     .param-pannel input,.param-pannel select{
  41.         border:1px solid #ddd;
  42.         width:100%
  43.     }
  44.     .param-pannel input[type=color]{
  45.         padding:0
  46.     }
  47.     .one{
  48.         position: fixed;
  49.         width:100%;
  50.         height:100%;
  51.         display: flex;
  52.         justify-content: center;
  53.         align-items: center;
  54.     }
  55.     .box{
  56.         width:400px;
  57.         height: 400px;
  58.         border: 1px solid #ddd;
  59.         display: flex;
  60.         flex-direction: column;
  61.         .box-head{
  62.             flex: 0 0 auto;
  63.             background-color: pink;
  64.         }
  65.         .box-content{
  66.             flex:1 1 0px;
  67.             background-color: #eee;
  68.             display: flex;
  69.         }
  70.     }
  71. </style>

注意图标使用的是element ui 所以需要引入，，如果不想引入，也可以直接写字体，或者键盘的尖括号，或者小于号旋转一下，然后将选装的样式进行调一下也可以达到类似的效果

尖括号举例

  1.     .collapsed .arrow {
  2.         transform: translateX(-25%) translateY(25%) rotate(0deg) scale(1, 0.9);
  3.     }

效果同上图

上面所使用的插槽是默认插槽，如果没有给插槽命名，那么默认就是拿组件中的第一个子元素进行填充

需求二：如果如下图，在特有属性中需要添加一个文本内容，这个时候为了方便就需要再添加了一个插槽

代码：

Hutest.vue

  1. <template>
  2.     <div class="one">
  3.         <div class="box">
  4.             <p class="box-head">这是标题</p>
  5.             <div class="box-content">
  6.             <collapse-item title="样式" :isShow="true">
  7.                 <div class="param-gap">
  8.                     <label class="left" for="" title="线型">线型:</label>
  9.                     <div class="right">
  10.                         <select class="data-value"  name="" id="">
  11.                             <option value="1">线型一</option>
  12.                             <option value="2">线型二</option>
  13.                             <option value="3">线型三</option>
  14.                             <option value="4">线型四</option>
  15.                             <option value="5">线型五</option>
  16.                         </select>
  17.                     </div>
  18.                 </div>
  19.             </collapse-item>
  20.             <collapse-item title="特有属性" :isShow="true">
  21.  
  22.                 <div class="param-gap" slot="before">
  23.                     <label for="" class="left">文本内容&nbsp;:</label>
  24.                     <div class="right">
  25.                         <input class="data-value" placeholder="我是特有属性自己独有的 "/>
  26.                     </div>
  27.                 </div>
  28.  
  29.                 <div class="param-gap">
  30.                     <label class="left" for=""  title="线型">线型:</label>
  31.                     <div class="right">
  32.                         <select class="data-value"  name="" id="">
  33.                             <option value="1">线型一</option>
  34.                             <option value="2">线型二</option>
  35.                             <option value="3">线型三</option>
  36.                             <option value="4">线型四</option>
  37.                             <option value="5">线型五</option>
  38.                         </select>
  39.                     </div>
  40.                 </div>
  41.             </collapse-item>
  42.             </div>
  43.         </div>
  44.     </div>
  45. </template>
  46. <script>
  47. import CollapseItem from './CollapseItem'
  48. export default {
  49.     name:'hutest',
  50.     components: { CollapseItem },
  51.     data() {
  52.         return {
  53.  
  54.         }
  55.     },
  56.     methods: {
  57.  
  58.     }
  59. }
  60. </script>
  61. <style lang="scss" scoped >
  62.     .param-pannel input,.param-pannel select{
  63.         border:1px solid #ddd;
  64.         width:100%
  65.     }
  66.     .param-pannel input[type=color]{
  67.         padding:0
  68.     }
  69.     .one{
  70.         position: fixed;
  71.         width:100%;
  72.         height:100%;
  73.         display: flex;
  74.         justify-content: center;
  75.         align-items: center;
  76.     }
  77.     .box{
  78.         width:400px;
  79.         height: 400px;
  80.         border: 1px solid #ddd;
  81.         display: flex;
  82.         flex-direction: column;
  83.         .box-head{
  84.             flex: 0 0 auto;
  85.             background-color: pink;
  86.         }
  87.         .box-content{
  88.             flex:1 1 0px;
  89.             background-color: #eee;
  90.             display: flex;
  91.             flex-direction: column
  92.         }
  93.     }
  94. </style>

CollapseItem.vue

  1. <template>
  2.     <div style="width:100%" class="testbox" :class="{'collapsed': !isActive }">
  3.         <p class="click" @click="handleHeaderClick">
  4.             <span >{{title}}</span>
  5.             <i class="arrow icon iconfont icon_up"></i>
  6.         </p>
  7.         <div v-show="isActive">
  8.             <slot name="before"></slot>
  9.             <slot></slot>
  10.         </div>
  11.     </div>
  12. </template>
  13. <script>
  14.  
  15. export default {
  16.     name: 'CollapseItem',
  17.     props:{
  18.         title:String,//指定title为string类型的
  19.         isShow: {
  20.             type: Boolean,
  21.             default() {
  22.                 return true
  23.             }
  24.         }
  25.     },
  26.     data(){
  27.       return {
  28.         isActive : true
  29.       }
  30.     },
  31.     methods: {
  32.         handleHeaderClick(){
  33.             this.isActive = !this.isActive
  34.         }
  35.     }
  36. }
  37. </script>
  38. <style lang="scss" scoped >
  39.  
  40.     .click {
  41.         display: flex;
  42.         justify-content: space-between;
  43.     }
  44.     .arrow{
  45.         transition: transform 0.18s ease 0s;
  46.         transform: rotate(-180deg) scale(1, 0.9);
  47.     }
  48.     .collapsed .arrow {
  49.  
  50.         transform: rotate(0deg) scale(1, 0.9);
  51.     }
  52.  
  53. </style>

vue slot的使用（transform动画）的更多相关文章

  1. Vue使用过渡类名实现动画和自定义前缀

    Vue使用过渡类名实现动画和自定义前缀 1.效果演示 2.相关代码 <!DOCTYPE html> <html lang="en"> <head> ...

  2. 黑马vue---46、vue使用过渡类名实现动画

    黑马vue---46.vue使用过渡类名实现动画 一.总结 一句话总结: vue动画的过渡类名的时间点中没有设置样式的话就是默认的样式 使用 transition 元素,把 需要被动画控制的元素,包裹 ...

  3. vue移动端转场动画

    vue移动端转场动画 1.介绍:使用vue移动端做项目的时候,为了用户的体验良好,我们需要页面有一种进入和转出的效果 // 在App.vue根组件中 <template> <div ...

  4. Vue.js 相关知识（动画）

    1. 简介 Vue 在插入.更新或移除 DOM 时,提供多种不同方式的过渡效果,并提供 transition 组件来实现动画效果(用 transition 组件将需执行过渡效果的元素包裹) 语法:&l ...

  5. transform动画效果

     transform动画效果 transform :移动,旋转.倾斜.缩放.     transform:translate(0,300px); x代表的是水平的偏移距离,y代表垂直的.      t ...

  6. vue自学入门-4（vue slot）

    vue自学入门-1(Windows下搭建vue环境) vue自学入门-2(vue创建项目) vue自学入门-3(vue第一个例子) vue自学入门-4(vue slot) vue自学入门-5(vuex ...

  7. vue slot nested bug

    vue slot nested bug slot name bug Error <slot name="global-system-guide-slot"></s ...

  8. Vue slot 插槽用法：自定义列表组件

    Vue 框架的插槽(slot)功能相对于常用的 v-for, v-if 等指令使用频率少得多,但在实现可复用的自定义组件时十分有用.例如,如果经常使用前端组件库的话,就会经常看到类似的用法: < ...

  9. Vue一个案例引发「动画」的使用总结

    项目开发中动画有着很重要的作用,而且也是用到的地方非常多,例如:鼠标的进入离开,弹窗效果,组件的显示隐藏,列表的切换等等,可以说我们网页上的动画无处不在,也有人说了,这些东西也可以不使用动画. 对,你 ...

随机推荐

  1. JSP页面中如何注入Spring容器中的bean

    第一步在JSP页面中导入下面的包: <%@page import="org.springframework.web.context.support.WebApplicationCont ...

  2. TweenJS----前端常用的js动画库，缓动画和复制动画的制作，效果非常好。

    TweenJS类库主要用来调整和动画HTML5和Javascript属性,提供了简单并且强大的tweening接口. http://www.createjs.cc/tweenjs/ http://ww ...

  3. 32Flutter仿京东商城项目 用户中心页面布局

    import 'package:flutter/material.dart'; import 'package:flutter_jdshop/services/ScreenAdapter.dart'; ...

  4. 23 Flutter官方推荐的状态管理库provider的使用

    加群452892873 下载对应21可文件,运行方法,建好项目,直接替换lib目录,在往pubspec.yaml添加上一下扩展. cupertino_icons: ^ flutter_swiper: ...

  5. SpringCloud学习成长之十二 断路器监控

    在我的第四篇文章断路器讲述了如何使用断路器,并简单的介绍了下Hystrix Dashboard组件,这篇文章更加详细的介绍Hystrix Dashboard. 一.Hystrix Dashboard简 ...

  6. python 基础之确认文件是否存在

    def check_exist_bills(): file_dir=os.listdir('../db') bills_db_list=[] for item in file_dir: if item ...

  7. 腾讯ios内部视频，什么垃圾视频

    前几天朋友在网上花钱买了个,腾讯ios内部视频,我也跟着下载了, 看着这列表,我感觉没什么东西,一看就是基础的东西,完全没有实战的内容,就像培训机构骗学生的东西啊,讲些毛理论,结果一到实战了,问个Sc ...

  8. Tools - 笔记记录方法Markdown

    Markdown 简介 轻量级标记语言,使用易读易写的纯文本格式和类似HTML的标记语法来编写具有一定的格式的文档. 语法简洁直观,易学易用,可以使用任何喜爱的文本编辑器来阅读和写作. 可精- 确控制 ...

  9. 01.轮播图之一 ：scrollView 轮播

    接触的每个项目,都会用到轮播图的部分,轮播图都写了好多次,用过各种各样的方式写: 这篇总结的博客,我将分为几个篇幅写,希望写完这几篇博客之后,我能总结出自己写这个轮播的优缺和不同之处 scrollvi ...

  10. python：一行代码实现局域网共享文件

    其实就是使用python内置的一个模块http server 在python2中是下面这样的 python -m SimpleHTTPServer 80 解释下上面的参数,-m表示让python使用一 ...