Element-Plus悬浮窗模板

效果图

参考代码

<!-- 自定义笔记本弹窗 -->
 <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);