使一个元素的高度 = 当前浏览器可视区域高度 - 当前元素的 top - marginBottom，并添加 overflow:auto

基本用法

标题

<template>
    <div>
        <el-button @click="openDemo">查看demo</el-button>
        <el-drawer
            :visible.sync="drawer"
            size="94%"
            append-to-body
            custom-class="app-body"
        >
            <template v-slot:title>
                <span style="margin-left: 10px">标题</span>
            </template>
            <div
                v-fixed-in-scroller="{marginBottom:20}"
                style="width:600px;background-color:white;padding:20px;"
            >
                <div style="height:2000px;">
                    白色区域是使用了v-fixed-in-scroller的元素
                </div>
            </div>
        </el-drawer>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                drawer: false,
            };
        },
        methods: {
            openDemo() {
                this.drawer = true;
            },
        },
    };
</script>
<style>
    .app-body {
        background-color: #f2f2f2;
    }
</style>

显示 复制 复制

使用在组件上

标题

<template>
    <div>
        <el-button @click="openDemo">查看demo</el-button>
        <el-drawer
            :visible.sync="drawer"
            size="94%"
            append-to-body
            custom-class="app-body"
        >
            <template v-slot:title>
                <span style="margin-left: 10px">标题</span>
            </template>
            <el-card
                v-fixed-in-scroller="{marginBottom:60,selector:'.el-card__body'}"
            >
                <div slot="header">
                    <span>卡片名称</span>
                </div>
                <div style="height:2000px;">
                    el-card__body是使用了v-fixed-in-scroller的元素
                </div>
            </el-card>
        </el-drawer>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                drawer: false,
            };
        },
        methods: {
            openDemo() {
                this.drawer = true;
            },
        },
    };
</script>
<style>
    .app-body {
        background-color: #f2f2f2;
    }
</style>

显示 复制 复制

options

参数	说明	类型	可选值	默认值
selector	子选择器，指令作用对象是默认是当前元素，如果是组件，默认是当前组件的根元素，如果想把当前元素的某个子元素作为作用对象，可以使用此参数	string	-	-
marginBottom	距离底部的位置	number	-	20
heightProp	给元素设置高度值的属性，可以是"height"、"max-height"、"min-height"	string	"height"	-
delay	延迟获取 dom 的时间(ms)	number	-	300