vue elements popup画面

Vue Element UI是一个基于Vue.js的UI组件库，它提供了一个叫做Popper的轻量级弹出层插件，即`el-popover`或`element-popup`。这个组件可以方便地在页面上创建可定制的浮动信息框，比如显示提示信息、下拉菜单等。使用Element UI的popup，你可以通过以下几个步骤操作：

1. 引入依赖：首先需要安装并引入`element-ui`库，然后导入`Popover`组件。

<template>
  <import("element-ui/lib/components/popup")></import>
</template>

<script>
import Popover from 'element-ui/lib/components/popup';
//...
</script>

2. 创建实例：在你的Vue实例中，配置并创建一个`Popover`组件实例。

data() {
  return {
    showPopover: false,
  };
},
methods: {
  togglePopover() {
    this.showPopover = !this.showPopover;
  },
}
</script>

3. 使用组件：在模板中绑定`v-model`属性到数据的`showPopover`，当状态改变时，显示或隐藏popper。

<template>
  <button @click="togglePopover">点击显示弹出框</button>
  <popover v-model="showPopover">
    <div slot="reference">鼠标悬停在这里</div>
    <p>这是弹出的内容。</p>
  </popover>
</template>