vue - 自定义吸附窗口

疯狂的妞妞 / 2024-11-17 / 原文

业务需求

以共享单车界面为例，地图上分布着大量的共享单车，鼠标悬浮在单车上，弹出一个吸附弹窗，内容显示单车详细信息。

分析

很明显，因为单车的数量可能非常多，我们不可能用显示隐藏的方式实现；

合理的做法是，所有单车公用一个弹窗面板，悬浮的时候刷新面板上的数据。

方案

看着改吧，element-ui里头现成的组件

<template>
  <!-- 定位元素 -->
  <div class="my-picker">
    <!-- vue-popper组件 -->
    <Popper ref="popper" v-model="showPopper">
    </Popper>
    <el-button @click="click">click</el-button>
    <el-button @click="click">click</el-button>
    <el-button @click="click">click</el-button>
    <el-button @click="click">click</el-button>
    <el-button @click="click">click</el-button>
    <el-button @click="click">click</el-button>
    <!-- 弹出组件 -->
    <div ref="fly-piece" v-show="showPopper" class="my-picker__popper">你看，我弹出来了</div>
  </div>
</template>

<script>
// 引入vue-popper组件
import Popper from 'element-ui/src/utils/vue-popper';

Popper.render = (h) => h(null);

export default {
    components: {
        Popper
    },
    data() {
        return {
            // 双向绑定，控制弹出层是否弹出
            showPopper: false
        }
    },
    methods: {
        click: function (evt) {
			// 切换吸附 dom 元素
            this.$refs.popper.referenceElm = evt.target;
            this.$refs.popper.createPopper();
            this.showPopper = !this.showPopper;
            console.log(this.showPopper);
        }
    },
    mounted() {
        // 弹出层
        this.$refs.popper.popperElm = this.$refs['fly-piece'];
        // 定位层
        this.$refs.popper.referenceElm = this.$el;
    }
}
</script>