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

news2024/10/7 16:21:55

效果图:

 上图是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.coloradmin.cn/o/848377.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

mysql_docker主从复制_实战_binlog混合模式_天座著

步骤1&#xff1a;拉取镜像 docker pull mariadb:latest 步骤2.1&#xff1a;创建两个文件夹用于放置挂载mysql的my.cnf /tianzuomysqlconf/master /tianzuomysqlconf/slave mkdir /tianzuomysqlconf cd /tianzuomysqlconf mkdir master mkdir slave 步骤2.2&#xff1a;创…

ssh 连接断开,正在执行的shell脚本也被中断了

背景 最近在训练chatGLM&#xff0c;一次训练经常要花掉近2个小时&#xff0c;但是由于网络不稳定&#xff0c;经常ssh莫名的断开&#xff0c;导致训练不得不重新开启&#xff0c;这就很浪费时间了 解决方案 下面教大家一种在后台执行命令的方案&#xff0c;即使你ssh连接断…

层状介质一维大地电磁数值模拟

层状介质一维大地电磁数值模拟 前言 大地电磁测深法&#xff08; MT&#xff09;是根据电磁感应原理研究天然场源在地下激励产生的交变电场或者磁场&#xff0c;通过地表观测到的电磁场或者通过电磁场计算出视电阻率或者相位等量来进行地下构造研究的一种电磁方法。由于它不需…

★动态规划(DP算法)详解

什么是动态规划&#xff1a;动态规划_百度百科 内容太多了不作介绍&#xff0c;重点部分是无后效性&#xff0c;重叠子问题&#xff0c;最优子结构。 问S->P1和S->P2有多少种路径数&#xff0c;毫无疑问可以先从S开始深搜两次&#xff0c;S->P1和S->P2找出所有路…

【Linux】深入理解进程概念

个人主页&#xff1a;&#x1f35d;在肯德基吃麻辣烫 我的gitee&#xff1a;Linux仓库 个人专栏&#xff1a;Linux专栏 分享一句喜欢的话&#xff1a;热烈的火焰&#xff0c;冰封在最沉默的火山深处 文章目录 前言浅谈进程概念1. 进程和操作系统的联系2.描述进程的对象——PCB …

MongoDB:Linux环境全套安装指南

&#x1f60a; 作者&#xff1a; 一恍过去 &#x1f496; 主页&#xff1a; https://blog.csdn.net/zhuocailing3390 &#x1f38a; 社区&#xff1a; Java技术栈交流 &#x1f389; 主题&#xff1a; MongoDB&#xff1a;Linux环境全套安装指南 ⏱️ 创作时间&#xff1a…

Hybrid App 可以从哪些技术路径实现性能优化

说到 Hybrid App&#xff08;混合应用&#xff09;大家都不陌生&#xff0c;因为这种开发模式大行其道发展的这些年取代了很多原生和 Web 应用&#xff0c;为什么大家对这种「Native HTML5」的开发模式额外偏爱呢&#xff1f; 因为一方面在一定程度上兼顾了原生应用的优质体验…

compile_and_runtime_not_namespaced_r_class_jar\debug\R.jar: 另一个程序正在使用

问题情况&#xff1a; run App的时候&#xff0c;提示该文件被占用 想要clean Project&#xff0c;还是提示该文件被占用&#xff0c;这个文件和连带的文件夹都无法被删除。 方法1&#xff1a; AndroidStudio下方的terminal&#xff08;没有这个窗口的话&#xff0c;从上面的…

Java源码-Context源码解析

您好&#xff0c;我们来一起了解一下Java源码中的Context源码解析。 Context是Android中的一个重要的概念&#xff0c;在Android开发中可以用来获取应用程序的各种信息&#xff0c;如Activity、Service、Application等等。在Android中&#xff0c;Context是一个抽象类&#xf…

虚拟机centos7配置网络

虚拟机centos7配置网络 centos7克隆之后需要配置网络才能联网。 实验环境&#xff1a; VMware Workstation Pro 16CentOS 7系统虚拟机主机Windows 11系统 1.VMware网络模式设置为NAT模式 虚拟机–设置–网络适配器– ​​ ‍ 2.查看虚拟机 子网IP和网关IP 编辑–虚拟网…

AcWing 129:火车进栈 ← DFS

【题目来源】https://www.acwing.com/problem/content/131/【题目描述】 这里有 n 列火车将要进站再出站&#xff0c;但是&#xff0c;每列火车只有 1 节&#xff0c;那就是车头。 这 n 列火车按 1 到 n 的顺序从东方左转进站&#xff0c;这个车站是南北方向的&#xff0c;它虽…

【vue3】基础知识点-组合式api-recative和ref函数

学习vue3&#xff0c;都会从基础知识点学起。了解setup函数&#xff0c;ref&#xff0c;recative&#xff0c;watch、computed、pinia等如何使用 今天说vue3组合式api&#xff0c;响应式函数recative和ref函数 recative函数&#xff1a;接收对象类型数据的参数传入&#xff0…

激光雷达测距和摄像头联合棋盘格反射率标定板

目前&#xff0c;激光雷达不仅在军事上起到了重要的作用&#xff0c;而且发挥其测程大、精度高、反应速度快、可靠性高等优点&#xff0c;在商业领域应用越来越广&#xff0c;发展越来越迅速&#xff0c;具有较高的实用价值和商业价值。车载三维成像激光雷达采用脉冲式测量原理…

【PCL-6】PCL基于凹凸型的分割算法

凹凸型分割算法适用于颜色类似、棱角分明的物体场景分割。 算法流程&#xff1a; 1、基于超体聚类的过分割&#xff1b; 2、在超体聚类的基础上再聚类。 示例代码&#xff1a; //超体聚类LCCP //#include "stdafx.h"#include <stdlib.h> #include <cm…

Linux 安装软件的几种方式

哈喽大家好&#xff0c;我是咸鱼 相信小伙伴们都知道在 Linux 中&#xff0c;安装软件一般有三种方式 yum 安装rpm 安装源码编译安装 咸鱼平时三种安装方式都会用&#xff0c;但是具体原理和区别却没有去深入了解过 结果上周部门刚来的新人问我这几种安装方式的时候&#x…

连续四年入选!三项荣耀!博云科技强势上榜Gartner ICT技术成熟度曲线

日&#xff0c;全球知名咨询公司Gartner发布了2023年度的《中国ICT技术成熟度曲线》&#xff08;《Hype Cycle for ICT in China, 2023》&#xff0c;以下简称“报告”&#xff09;。令人瞩目的是&#xff0c;博云科技在报告中荣获三项殊荣&#xff0c;入选云原生计算&#xff…

【linux-keepalive】keepalive避免单点故障,高可用配置

keepalive: [rootproxy ~]# yum install -y keepalived [rootproxy ~]# vim /etc/keepalived/keepalived.conf global_defs {router_id proxy1 //设置路由ID号vrrp_iptables //不添加任何防火墙规则 } vrrp_instance V…

HTTP Status 404 – 未找到

这HTTP Status 404 – 未找到 我的问题就是啥呢 这里已经提示了原因有两个&#xff1a; ①&#xff1a;找不到 ②&#xff1a;资源被占用 我的问题就是找不到&#xff0c;找不到的问题也就说可能是文件路径不对&#xff0c;也可能是文件名不对&#xff0c;仔细检查两遍 apac…

Visual Studio实用调试技巧---让你成为高端的程序员

​ &#x1f341; 博客主页:江池俊的博客 &#x1f4a1;代码仓库&#xff1a;江池俊的代码仓库 &#x1f3aa; 社区&#xff1a;GeekHub &#x1f341; 如果觉得博主的文章还不错的话&#xff0c;请点赞&#x1f44d;收藏&#x1f31f; 三连支持一下博主&#x1f49e; 文章目录…

链式二叉树统计结点个数的方法和bug

方法一&#xff1a; 分治&#xff1a;分而治之 int BTreeSize1(BTNode* root) {if (root NULL) return 0;else return BTreeSize(root->left)BTreeSize(root->right)1; } 方法二&#xff1a; 遍历计数&#xff1a;设置一个计数器&#xff0c;对二叉树正常访问&#…