vue作用域插槽的应用
问题场景:
存在一个列表,然后当鼠标放入列表中的名称上的时候,自动弹出简介,类似这种效果,
我们当然可以使用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作用域插槽的应用的更多相关文章
- 细说Vue作用域插槽,匹配应用场景。
最近在官方文档中看到,vue新增了一种插槽机制,叫做作用域插槽.要求的版本是2.1.0+. 首先来说一下:顾名思义,所谓作用域插槽,主要就在作用域,需要注意的是(以下几点看不懂不要紧,配合下面的例子, ...
- vue 开发系列(十) VUE 作用域插槽
使用场景 官方解释,有时让插槽内容能够访问子组件中才有的数据是很有用的.比如我们在使用ant-design-vue 的表格控件时. <a-table-column title="注释& ...
- Vue作用域插槽:用作循环结构的模版
一 项目结构 二 App组件 <template> <div id="app"> <!-- 子组件 --> <todos :list=&q ...
- Vue作用域插槽:基本用法
一 项目结构 二 App组件 <template> <div id="app"> <!-- 子组件 --> <user v-slot:de ...
- vue作用域插槽
简而言之,作用域插槽就是让插槽内容能够访问子组件中的数据. 案例如下:有CurUser组件 <template> <span> <!-- 在slot 元素上绑定user, ...
- 新版vue作用域插槽的使用
2.6开始,作用域插槽的使用有了不同的地方: 作用域插槽的个人理解就是让子组件的数据可以在父组件中使用: 也是一个数据传递的方式了: 不多说,上代码 子组件定义一个插槽,并且定义一个需要传递到父组件 ...
- Vue 作用域插槽
使用场景:复用子组件的slot,又可以使slot的内容不一样. <!DOCTYPE html> <html lang="zh"> <head> ...
- vue作用域插槽实践
引言 我在练手的时候发现后端返回的数据可以通过两种方式渲染 (自己遇到的 可能你都会 哈哈哈) 后端传过来的数据函数 from django.http import JsonResponse def ...
- Vue的作用域插槽
一.通常情况下都是父组件传递数据给子组件进行展示的(无法改变子组件的展示方式):而作用域插槽允许子组件通过slot向父组件传递数据,类似React中的“以函数为子组件”,由父组件决定渲染的内容(包含绑 ...
随机推荐
- mongodb非关系型数据库
mongodb非关系型数据库(对象型数据库): 优势:易扩展:灵活的数据模型:大数据量,高性能(读写) 关系型:(一对多.多对多.一对一)扩展性差,大数据下压力大,表结构更改困难(数据小时使用Mysq ...
- 旧调重弹Hibernate与Ibatis区别——深入架构设计
对于一个粗学者而言一言概况就是:ibatis非常简单易学,hibernate相对较复杂,门槛较高. 但是,hibernate对数据库结构提供了较为完整的封装,hibernate的o/r mappin ...
- CentOS 7下 部署Redis-cluster集群
redis集群是一个无中心的分布式redis存储架构,可以在多个节点之间进行数据共享,解决了redis高可用.可扩展等问题,redis集群提供了以下两个好处:1)将数据自动切分(split)到多个节点 ...
- MacBook Pro App Store无法下载和更新软件解决方案
环境:MacBook Pro 2017 系统:MacOS 10.14 问题:在App Store中无法下载和更新软件,输入App Store密码后,弹出如下对话框 咨询苹果官方技术支持电话:400-6 ...
- Mysql千万级大数据量查询优化
来源于:https://blog.csdn.net/A350204530/article/details/79040277 1.对查询进行优化,应尽量避免全表扫描,首先应考虑在 where 及 ord ...
- window xshell 连接本地ubuntu虚拟机
先设置VMware 虚拟机的连接属性 1.桥接,利用真实网卡 设置和window 同一个网段就可以直接通信 2.hostnoly是通过vm8(查看你的所有网络连接) 只能和主机联系 设置和vm8同一 ...
- Qt QML 2D shader
--------------------------------------------------- Qt quick 2d shader effect ---------------------- ...
- [Atcoder SoundHound Contest 2018]E.+ Graph
题面 Time limit : 2sec / Memory limit : 1024MB Score : 600 points Problem Statement-题目描述 Kenkoooo foun ...
- 读取FTP 图片文件,并显示,非下载
关于FTP,先从怎么创建开始说起,很简单,步骤就两个 ① 电脑-右键管理--本地用户组--添加用户名,密码(用于FTP的用户名.密码) ② IIS 新建FTP站点,命名,指定端口号.FTP文件路径 接 ...
- 小容量的byteBuffer 读取大文本
利用死循环和判断是否 读到0个字节,便能判断是否读取完成,但它存在如下问题,如果输入是中文的话,可能没有读取完中文的全部3个字节,导致乱码.如果数据足够随机,这样的情况肯定会出现的 @Test pub ...