vue作用域插槽的应用

时间：2022-04-08 10:12:51

问题场景：

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

　　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">。

相关文章