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

这篇具有很好参考价值的文章主要介绍了vue3项目中引入dialog插件,支持最大最小化、还原、拖拽。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

效果图:vue3项目中引入dialog插件,支持最大最小化、还原、拖拽,vue.js,前端,javascript,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组件库地址文章来源地址https://www.toymoban.com/news/detail-634072.html

<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>

到了这里,关于vue3项目中引入dialog插件,支持最大最小化、还原、拖拽的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue3项目中引入html页面

    Vue3项目中引入html页面,通常是需要实现 跳转 加载html页面的功能。之前为了实现需求查找解决方法时多数推荐使用iframe标签实现,尝试后发现iframe是将html页面嵌入到vue中,不符合自身的需求。总结方法如下: 1.导入文件 将需要导入的文件(单个文件或是项目)放置于publi

    2024年02月15日
    浏览(35)
  • Vue3项目中引入ElementUI使用详解

    ElementUI 是一个强大的PC端UI组件框架,它不依赖于vue,但是却是当前和vue配合做项目开发的一个比较好的ui框架,其包含了布局( layout ),容器( container )等各类组件,基本上能满足日常网站的搭建开发。针对vue2和vue3都有对应的组件版本,本文主要介绍在vue3中如何引入使用

    2024年02月10日
    浏览(51)
  • Vue3 项目引入阿里 iconfont 图标和字体

    需求: 将 iconfont 阿里图标库的图标与字体引入到我们的 Vue3 + vite + TS 项目中来! 我们使用图标的方式有很多种,比如说直接使用 png、jpg 等图片格式,这是最原始的方式,所以我们这里不过多阐述,它们的优缺点相信大家也知道。 这里我们主要对比阿里图标库提供 3 种图标

    2024年02月03日
    浏览(48)
  • Vite+Vue3项目全局引入scss文件

    Sass 是世界上最成熟、最稳定、最强大的专业级CSS扩展语言!在日常项目开发过程中使用非常广泛,今天主要讲一下 Vite+Vue3 项目中该如何全局引入 scss 文件,引入混合 mixin 文件的不同配置。捎带说一下 Vue2 中的引入方式做一下简单的对比。 1.1 安装 vite 已经将 sass 预处理器的

    2024年02月06日
    浏览(64)
  • 小白详解Vue3项目中怎么引入 SVG 图标

    今天一淘模板给大家来详解Vue3项目中怎么引入 SVG 图标具体流程 SVG 图标 既然是页面,肯定离不开一些图标 icon ,所以肯定要去最全的 阿里图标库 来寻找 这里讲解下如何将 阿里图标库 里面的东西,放到我们的页面上 阿里图标库 进入页面,找到 资源管理 下面的 我的

    2024年02月09日
    浏览(42)
  • VUE3+vite项目中动态引入组件和异步组件

    1. 把项目中所有vue文件注册成异步组件。 2. 获取组件 在setup函数获取组件 3. 参考如下 Glob 导入 Vite 支持使用特殊的 import.meta.glob 函数从文件系统导入多个模块: 以上将会被转译为下面的样子: 你可以遍历 modules 对象的 key 值来访问相应的模块: 匹配到的文件默认是懒加载的

    2024年02月10日
    浏览(105)
  • vue3项目引入本地js文件,实现一个音频播放按钮

    目前有一个需求就是在网页上放置一个音乐控制按钮,并且是在vue3项目里面。于是小白的我遇到了2个问题,第一个问题是如何实现没有进度条的播放按钮,这个网上有现成的代码,可以通过js代码切换不同的图片或者是别的样式,并不算难;第二个问题是如何在vue3项目中引

    2024年02月19日
    浏览(57)
  • vue3 vite直接创建项目 添加 element-ui 按需引入和全部引入

     创建home 工程 yran dev就可以看到一个网址 点进去就可以看到效果了 添加element-ui 之前的main.js 修改后的 element-plus 在vue3中的按需引入。要比2简介很多 。自动导入也是推荐的一种写法 我们注释掉全局引用  然后改为按需引入 源文件  修改后 首先安装两款插件 修改后

    2024年02月17日
    浏览(62)
  • 搭建vue3项目+按需引入element-ui框架组件

    场景 :使用vue create脚手架快速搭建vue的项目 前提 :需要安装node.js和cnpm以及yarn 并且cnpm需要设置为淘宝镜像,cnpm和yarn安装教程网上很多可以自行搜索 查看安装的版本(显示版本号说明安装成功) 1.cmd窗口跳到需要新建项目的文件夹下,使用vue create 2.我这里选择第三个Ma

    2024年02月16日
    浏览(64)
  • uni-app(Vue3/Vite) + vant UI(Vue3版本)+ js 按需引入的项目搭建

            因为要完成软件工程的项目,要做一个nativeApp,看了很多的技术文档以后决定使用多端兼容的uni-app来开发。组件方面的话最后决定使用目前比较火的Vant UI。但是看了CSDN和掘金上面的很多文章,似乎没有一篇是关于uni-app中使用Vite对vant组件进行按需引入(可能这个

    2023年04月09日
    浏览(68)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包