vue3项目中引入dialog插件,支持最大最小化、还原、拖拽

效果图:

 上图是layui-vue组件库中的layer插件,我的项目使用的是element-plus组件库,在用不上layui组件库的情况下,就单独引入@layui/layer-vue这个弹层插件就可以了

npm地址:@layui/layer-vue - npm

layui-vue组件库地址:Layui - Vue 前端 UI 框架

 使用方式:

1.按照npm地址的Readme操作,在mainjs中引入插件并全局注册

import layer from '@layui/layer-vue';
import '@layui/layer-vue/lib/index.css'
app.use(layer)

2.在需要展示弹层的位置引入弹层组件或函数(layer弹层支持以函数/标签的形式使用)

    具体的API见上方layui-vue组件库地址

<template><el-button @click="openSuccess">提示消息</el-button>
</template><script setup>
import { layer, LayLayer } from "@layui/layer-vue";
const openSuccess = function () {layer.open({title: "biaoti",icon: 1,shadeClose: false,maxmin: true,area: ['900px', '600px'],  // 这里可以是百分比type: 2, // 0: dialog 1: page 2: iframe 3: loading 4: drawer content:'/index'  // type为iframe时,代表路径});
};
</script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/88649.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

推荐几款流行的项目管理系统,助力高效团队协作!

项目式管理是目前非常流行的企业管理方法&#xff0c;这种方法让是如何在确保时间、技术、经费和性能指标的条件下&#xff0c;以尽可能高的效率完成预定目标&#xff0c;让所有与企业相关方满意。在这种模式下&#xff0c;团队的层次关系不再那么重要&#xff0c;大家以项目结…

【对于一维信号的匹配】对一个一维(时间)信号y使用自定义基B执行匹配追踪(MP)研究(Matlab代码实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…

Android Https

本质&#xff1a;在客户端和服务端使用非对称加密协商出一套对称密钥&#xff0c;每次发送数据前加密&#xff0c;收到后解密&#xff0c;达到加密传输 http ssl 在http之下增加了安全层&#xff0c;用于保障http的加密传输 HTTPS连接 TLS连接步骤 1.客户端发送 client h…

Profibus DP主站转Modbus TCP网关profibus主站模拟软件

捷米JM-DPM-TCP网关。这款产品在Profibus总线侧实现了主站功能&#xff0c;在以太网侧实现了ModbusTcp服务器功能&#xff0c;为我们的工业自动化网络带来了全新的可能。 捷米JM-DPM-TCP网关是如何实现这些功能的呢&#xff1f;首先&#xff0c;让我们来看看它的Profibus总线侧…

HCIP学习--BGP3

目录 前置内容 BGP下一跳的修改问题 BGP的属性 配置 PrefVal权重属性 负载分担 LocPrf 负载分担 NextHop AS-PATH Ogn 配置 MED 配置 BGP选路规则 BGP的社团属性 配置及解释 前置内容 HCIP学习--BGP1_板栗妖怪的博客-CSDN博客 HCIP学习--BGP2_板栗妖怪的博客…

Linux 终端命令之文件浏览(4) head, tail

Linux 文件浏览命令 cat, more, less, head, tail&#xff0c;此五个文件浏览类的命令皆为外部命令。 hannHannYang:~$ which cat /usr/bin/cat hannHannYang:~$ which more /usr/bin/more hannHannYang:~$ which less /usr/bin/less hannHannYang:~$ which head /usr/bin/he…

Baumer工业相机堡盟工业相机如何通过BGAPISDK设置相机的固定帧率(C#)

Baumer工业相机堡盟工业相机如何通过BGAPI SDK设置相机的固定帧率&#xff08;C#&#xff09; Baumer工业相机Baumer工业相机的固定帧率功能的技术背景CameraExplorer如何查看相机固定帧率功能在BGAPI SDK里通过函数设置相机固定帧率 Baumer工业相机通过BGAPI SDK设置相机固定帧…

剑指 Offer 32 - II. 从上到下打印二叉树 II

题目描述 从上到下按层打印二叉树&#xff0c;同一层的节点按从左到右的顺序打印&#xff0c;每一层打印到一行。 示例 思路 采用队列存储二叉树&#xff0c;利用BFS算法对树进行从上到下的层次遍历 如何存储每一层的元素&#xff1f;——利用for循环把当前队列的元素存储进…

计算机基础概论

一、计算机的组成 1.计算机组成的五大部件 &#xff08;1&#xff09;运算器&#xff1a;也叫算术逻辑单元&#xff0c;完成对数据的各种常规运算&#xff0c;如加减乘除&#xff0c;也包括逻辑运算&#xff0c;位移&#xff0c;比较等。 &#xff08;2&#xff09;控制器&a…

Linux 共享内存mmap,进程通信

文章目录 前言一、存储映射 I/O二、mmap&#xff0c; munmap三、父子进程间 mmap 通信四、非血缘关系进程间 mmap 提通信五、mmap 匿名映射区总结 前言 进程间通信是操作系统中重要的概念之一&#xff0c;使得不同的进程可以相互交换数据和进行协作。其中&#xff0c;共享内存…

.bit域名调研

.bit域名研究 问题&#xff1a; .bit域名和ENS域名的相同点&#xff1f;不同点&#xff1f;有什么关系&#xff1f; .bit的定义 .bit 是基于区块链的&#xff0c;开源的&#xff0c;跨链去中心化账户系统.bit 提供了以 .bit 为后缀的全局唯一的命名体系&#xff0c;可用于加密…

SpringBoot复习:(36)国际化

一、Resources目录下建立一个目录&#xff08;比如international)来存储资源文件 message.properties 空的&#xff0c;但不能没有 message_zh_CN.properties hello您好message_en_us.properties hellohello world二、自动配置类MessageSourceAutoConfiguration 常量MESSAGE…

学习笔记整理-JS-02-基本类型

文章目录 一、数据类型简介和检测1. JavaScript中两大数据类型 二、基本数据类型1. 数字类型2. 字符串类型3. 布尔类型4. undefined类型5. null 三、数据类型的转换1. 数据类型的转换 四、重点内容 一、数据类型简介和检测 1. JavaScript中两大数据类型 基本数据类型 Number S…

【Linux 网络】 数据链路层协议

数据链路层协议 数据链路层解决的问题以太网协议认识以太网以太网帧格式 认识MAC地址对比理解MAC地址和IP地址认识MTUMTU对IP协议的影响MTU对UDP协议的影响MTU对于TCP协议的影响ARP协议ARP协议的作用ARP协议的工作流程ARP数据报的格式 总结 数据链路层解决的问题 IP拥有将数据跨…

认识 spring 中的事务 与 事务的传播机制

前言 本篇介绍spring中事务的实现方式&#xff0c;如何实现声明式事务&#xff0c;对事物进行参数的设置&#xff0c;了解事务的隔离级别和事务的传播机制&#xff1b;如有错误&#xff0c;请在评论区指正&#xff0c;让我们一起交流&#xff0c;共同进步&#xff01; 文章目录…

python环境下载安装教程,python运行环境怎么下载

本篇文章给大家谈谈python安装步骤以及环境变量配置&#xff0c;以及下载python需要设置环境变量吗&#xff0c;希望对各位有所帮助&#xff0c;不要忘了收藏本站喔。 1.https://www.python.org/downloads/windows/ 下载适合自己电脑的python安装包 2.下载后安装即可 3.配置环…

FastAPI和Flask:构建RESTful API的比较分析

Python 是一种功能强大的编程语言&#xff0c;广泛应用于 Web 开发领域。FastAPI 和 Flask 是 Python Web 开发中最受欢迎的两个框架。本文将对 FastAPI 和 Flask 进行综合对比&#xff0c;探讨它们在语法和表达能力、生态系统和社区支持、性能和扩展性、开发工具和调试支持、安…

LVS集群和nginx负载均衡

目录 1、基于 CentOS 7 构建 LVS-DR 群集。 2、配置nginx负载均衡。 1、基于 CentOS 7 构建 LVS-DR 群集。 1.部署LVS负载调度器 1>安装配置工具 [rootnode6 ~]# yum install -y ipvsadm 2>配置LVS虚拟IP&#xff08;VIP地址&#xff09; [rootnode6 ~]# ifconfig ens…

测试开发探索:“WeTalk“网页聊天室的测试流程与自动化

目录 引言&#xff1a; 测试开发目标&#xff1a; "WeTalk"项目背景 关于登录测试用例的设计 测试开发策略与流程 集成测试&#xff1a;Selenium JUnit 接口测试&#xff1a;Postman 测试用例的设计与实现 自动化测试演示&#xff1a; 用例一&#xff1a;登…

vulnhub靶机Deathnote

难度&#xff1a;easy 下载地址&#xff1a;https://download.vulnhub.com/deathnote/Deathnote.ova 主机发现 arp-scan -l 端口扫描 nmap --min-rate 10000 -p- 192.168.21.140 进一步查看目标的端口的服务和版本 nmap -sV -sT -O -p22,80 192.168.21.140 扫描端口的漏洞…