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