效果图

参考代码

<!-- 自定义笔记本弹窗 --><el-dialog v-model="dialogVisible" title="新建笔记本" width="400px"><el-form :model="newNotebook" label-width="80px"><el-form-item label="名称"><el-input v-model="newNotebook.name" placeholder="请输入笔记本名称" /></el-form-item></el-form><template #footer><el-button @click="dialogVisible = false">取消</el-button><el-button type="primary" @click="createNotebook">确定</el-button></template></el-dialog>

用elm写悬浮窗，可以用el-dialog,其中

1. v-model 绑定一个逻辑值 表示 悬浮窗是否展示
2. 如果不想点击背景时，自动隐藏悬浮窗，可以添加这个设置 :close-on-click-modal="false"。
3. 在<template #footer>里可以添加上取消和确定按钮。点击取消、确定的时候，需要手动在相应的方法里添加上隐藏掉悬浮窗的逻辑。
4. 记着写个方法在外边改掉dialogVisible的值，让悬浮窗显示出来，模板里没写。

const dialogVisible = ref(false);