问题场景:

  存在一个列表,然后当鼠标放入列表中的名称上的时候,自动弹出简介,类似这种效果,

  

我们当然可以使用positon relative和absolute搭配达到这样的效果,但是现在有一个奇葩的问题,即名称那一列是overflow:hidden的(因为某些特殊原因),这个时候就不可能使用子元素的方式来达到悬浮的效果,这就只有一种实现方式,悬浮框单独做一个 定位未fixed,然后再鼠标放入名称上时候,监听鼠标位置,然后将悬浮框移动到置顶位置,而实现这个组件让我对vue的作用域插槽又有了一些理解:

组件下载:https://pan.baidu.com/s/1RNH7IbO_yCc1v_lNjoXuqQ

文件中含有两个文件,一个是组件,一个是指令,

使用方式:

  1:引入组件和指令

  2:绑定指令:

v-hover="{ref:$refs.popover1,data:scope.row.teaId}"

  指令接收两个参数,ref表示我们将要使用的组件的ref,data表示我们显示悬浮框时候的数据,

  3:使用组件

<zm-hover
            ref="popover1">
            <template  scope="props">
                <template v-if="!props.data">
                    <el-row style="text-align: center;color: black;line-height: 50px;">
                        <i class="el-icon-loading"></i>
                    </el-row>
                </template>
                <template v-else>
                  <el-row>
                    <el-col class="pd5" :span="12">性别:-----</el-col>
                    <el-col class="pd5" :span="12">学历:-----</el-col>
                  </el-row>
                  <el-row>
                    <el-col class="pd5" :span="12">毕业时间:-----</el-col>
                    <el-col class="pd5" :span="12">是否调剂:-----</el-col>
                  </el-row>
                </template>
               <!-- {{ !!props.data ? props.data.subject : '' }} -->
            </template>
        </zm-hover>

我们可以看到zm-hover是我们的组件,里面的html代码我们可以任意组织,其中数据是通过peops.data从zm-hover组件中拿到的,我们可以看看组件源码

<template>
    <transition name="fade">
        <div @mouseenter="Menter" @mouseleave="Mleave" class="zm-hover" v-bind:style="{ left: leftPX, top: topPX, bottom: bottomPX }" v-show="visible">
            <i :class="vertureP" class="triangleRight"></i>
            <i :class="vertureP" class="triangleRightBlock"></i>
            <slot :data="contentData"></slot>
        </div>
    </transition>
</template>

我们再<slot>中传递数据给将要替换slot中的内容,所以这个地方我理解的是作用域插槽就是把数据传递给未来将要使用的组件中需要替换<slot>部分的内容,其中替换的html代码 通过props.data获取到数据,其中获取数据使用<template scope="props">。

												

vue作用域插槽的应用的更多相关文章

  1. 细说Vue作用域插槽,匹配应用场景。

    最近在官方文档中看到,vue新增了一种插槽机制,叫做作用域插槽.要求的版本是2.1.0+. 首先来说一下:顾名思义,所谓作用域插槽,主要就在作用域,需要注意的是(以下几点看不懂不要紧,配合下面的例子, ...

  2. vue 开发系列(十) VUE 作用域插槽

    使用场景 官方解释,有时让插槽内容能够访问子组件中才有的数据是很有用的.比如我们在使用ant-design-vue 的表格控件时. <a-table-column title="注释& ...

  3. Vue作用域插槽:用作循环结构的模版

    一 项目结构 二 App组件 <template> <div id="app"> <!-- 子组件 --> <todos :list=&q ...

  4. Vue作用域插槽:基本用法

    一 项目结构 二 App组件 <template> <div id="app"> <!-- 子组件 --> <user v-slot:de ...

  5. vue作用域插槽

    简而言之,作用域插槽就是让插槽内容能够访问子组件中的数据. 案例如下:有CurUser组件 <template> <span> <!-- 在slot 元素上绑定user, ...

  6. 新版vue作用域插槽的使用

    2.6开始,作用域插槽的使用有了不同的地方: 作用域插槽的个人理解就是让子组件的数据可以在父组件中使用:  也是一个数据传递的方式了: 不多说,上代码 子组件定义一个插槽,并且定义一个需要传递到父组件 ...

  7. Vue 作用域插槽

    使用场景:复用子组件的slot,又可以使slot的内容不一样. <!DOCTYPE html> <html lang="zh"> <head> ...

  8. vue作用域插槽实践

    引言 我在练手的时候发现后端返回的数据可以通过两种方式渲染 (自己遇到的 可能你都会 哈哈哈) 后端传过来的数据函数 from django.http import JsonResponse def ...

  9. Vue的作用域插槽

    一.通常情况下都是父组件传递数据给子组件进行展示的(无法改变子组件的展示方式):而作用域插槽允许子组件通过slot向父组件传递数据,类似React中的“以函数为子组件”,由父组件决定渲染的内容(包含绑 ...

随机推荐

  1. Mybatis的bind动态SQL

    bind标签用于在SQL执行的上下文中绑定一个变量,方便在后续中直接使用:下面的例子中将name参数拼接成模糊查询需要的字符串然后和bindName绑定,在后面的使用中可以直接使用bindName变量 ...

  2. 详解UML中的6大关系(关联、依赖、聚合、组合、泛化、实现)

      UML中的6大关系相关英文及音标: 依赖关系 dependency --------> 关联关系 association ______> 聚合关系 aggregation ______ ...

  3. centos7安装gcc7.2.0

    1.有时候安装某些工具时,会提示gcc版本过低,需要安装更高版本. 进入/usr/src目录 cd usr/src 2.下载gcc7.2.0 wget 'http://mirrors-usa.go-p ...

  4. ok6410如何从sdram中启动uboot 调试 这是一个猜想还没有验证

    1\在smdk6410.h中定义宏 //#define CONFIG_SKIP_LOWLEVEL_INIT 1 //#define CONFIG_SKIP_RELOCATE_UBOOT 12\将编译的 ...

  5. Saiku资源帖

    一.精选 1.李秋 随笔分类 - pentaho 二.概述 1.Saiku + Kylin 多维分析平台探索 三.Saiku+Kylin 1.使用Saiku+Kylin构建多维分析OLAP平台 2.使 ...

  6. war包安装jenkins

    转自:https://blog.51cto.com/bigboss/2129358 系统环境: CentOS 7.5 1804 IP:192.168.1.3 关闭selinux.firewalld j ...

  7. 51nod1268 和为K的组合(DFS)

    1268 和为K的组合  基准时间限制:1 秒 空间限制:131072 KB 分值: 20 难度:3级算法题  收藏  关注 给出N个正整数组成的数组A,求能否从中选出若干个,使他们的和为K.如果可以 ...

  8. python list用法

    a = ['张三','李四','赵六','王五'] #打印列表 print(a) #增 a.apppend('徐七') print(a) a.insert(1,'张六') print(a) #删 a. ...

  9. ES6 let const学习

    1.let命令:用法类似于var,但是所声明的变量,只在let命令所在的代码块有效. 例:var a = [ ]; for(var i=0;i<10;i++){ a[ i ] = functio ...

  10. Bootstrap3基础 栅格系统 1行最多12列

      内容 参数   OS   Windows 10 x64   browser   Firefox 65.0.2   framework     Bootstrap 3.3.7   editor    ...