Element组件浅尝辄止1:抽屉组件

平时开发中涉及弹窗的情景,一般都会选用dialog组件,其内部封装的相当优雅,方便我们使用;

但是当你的文本内容或表单很长, 亦或是你需要临时展示一些图标或文档,Dialog 组件可能并不满足我们的需求,这时可以用抽屉组件Drawer来解决问题。

1.啥是抽屉组件? 

简单理解就是用来弥补当弹窗内容过多,导致dialog组件不太完美 的场景。

2. 如何使用抽屉组件?

  1. 基本的element UI引入
/*需要设置 visible 属性,它的类型是 boolean,当为 true 时显示 Drawer。
Drawer 分为两个部分:title 和 body,title 需要具名为 title 的 slot, 
也可以通过 title 属性来定义,默认值为空。需要注意的是, Drawer 默认是从右往左打开, 
当然可以设置对应的 direction*/<el-button @click="drawer = true" type="primary" style="margin-left: 16px;">点我打开
</el-button><el-drawertitle="我是标题":visible.sync="drawer":direction="direction":before-close="handleClose"><span>我来啦!</span>
</el-drawer><script>export default {data() {return {drawer: false,direction: 'rtl',};},methods: {handleClose(done) {this.$confirm('确认关闭?').then(_ => {done();}).catch(_ => {});}}};
</script>

和 Dialog 组件一样, Drawer 同样可以在其内部嵌套各种丰富的操作,比如显示表格或表单

还可以通过官方文档定制drawer的显示方式 ,具体可查阅抽屉组件

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

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

相关文章

【LangChain学习】基于PDF文档构建问答知识库(二)创建项目

这里我们使用到 fastapi 作为项目的web框架&#xff0c;它是一个快速&#xff08;高性能&#xff09;的 web 框架&#xff0c;上手简单。 一.创建 FastAPI 项目 我们在IDE中&#xff0c;左侧选择 FastAPI &#xff0c;右侧选择创建一个新的虚拟环境。 创建成功&#xff0c;会有…

需要数电发票接口的,先熟悉下数电发票基本常识

最近有一些技术小伙伴来咨询数电发票接口的时候&#xff0c;对数电发票的一些常识不太了解&#xff0c; 导致沟通起来比较困难。比较典型的这三个问题&#xff1a; 一、开具数电票时&#xff0c;如何设置身份认证频次&#xff1f; 请公司的法定代表人或财务负责人登录江苏省电…

json-server的入门

由于前端开发的时候&#xff0c;需要向后端请求数据&#xff0c;有的时候后端还没有准备好&#xff0c;所以需要使用一些简单的静态数据&#xff0c;但是我们更加希望能够模拟请求以及请求回来的过程&#xff0c;这个时候就需要使用json-server Json-Server的介绍 json-server…

第十六章、【Linux】程序管理与SELinux初探

16.1 什么是程序 &#xff08;process&#xff09; 在Linux 系统当中&#xff1a;“触发任何一个事件时&#xff0c;系统都会将他定义成为一个程序&#xff0c;并且给予这个程序一个 ID &#xff0c;称为 PID&#xff0c;同时依据启发这个程序的使用者与相关属性关系&#xff…

二叉树题目:根据二叉树创建字符串

文章目录 题目标题和出处难度题目描述要求示例数据范围 解法一思路和算法代码复杂度分析 解法二思路和算法代码复杂度分析 题目 标题和出处 标题&#xff1a;根据二叉树创建字符串 出处&#xff1a;606. 根据二叉树创建字符串 难度 3 级 题目描述 要求 给你二叉树的根结…

Java的泛型

泛型 泛型又称参数化类型&#xff0c;是Jdk5.0出现的新特性,解决数据类型的安全性问题 在类声明或实例化时只要指定好需要的具体的类型即可 Java泛型可以保证如果程序在编译时没有发出警告&#xff0c;运行时就不会产生ClassCastException异常。同时&#xff0c;代码更加简洁…

基本数据类型c++ 整数型:int, long long等 实数型:float, double等 字符型:char等 布尔型:bool等

整数型&#xff1a;int, long long 实数型&#xff1a;float, double 字符型&#xff1a;char 布尔型&#xff1a;bool 整数型&#xff1a;int, long long 在C编程中&#xff0c;整数型&#xff08;Integer Types&#xff09;是一种基本的数据类型&#xff0c;用于表示整数值…

ubuntu 安装 nvidia 驱动

ubuntu 安装 nvidia 驱动 初环境与设备查询型号查询对应的驱动版本安装驱动验证驱动安装结果 本篇文章将介绍ubuntu 安装 nvidia 驱动 初 希望能写一些简单的教程和案例分享给需要的人 环境与设备 系统&#xff1a;ubuntu 设备&#xff1a;Nvidia GeForce RTX 4090 查询型…

Linux C 语言 mosquitto 方式 MQTT 发布消息

1 说明 采用 mosquitto 库&#xff0c;实现对主题发布消息。 其中服务器有做限制&#xff0c;需要对应的 cilent id &#xff0c;cafile 、certfile 、keyfile 等配置 2 开发环境 采用ubuntu 直接编译调试 安装mosquitto 库 sudo apt install libmosquitto-dev sudo apt-ge…

常见的服务器安全管理漏洞!!!!!

常见的服务器安全管理漏洞&#xff01;&#xff01;&#xff01;&#xff01;&#xff01; 企业信息化技术的应用&#xff0c;以不可逆转。随着文件服务器、ERP管理软件等等在企业中生根发芽&#xff0c;应用服务器也逐渐在企业中普及起来。以前在企业中有一台应用服务器已经是…

PyTorch 微调终极指南:第 2 部分 — 提高模型准确性

一、说明 如今&#xff0c;在训练深度学习模型时&#xff0c;通过在自己的数据上微调预训练模型来迁移学习已成为首选方法。通过微调这些模型&#xff0c;我们可以利用他们的专业知识并使其适应我们的特定任务&#xff0c;从而节省宝贵的时间和计算资源。本文分为四个部分&…

亿欧智库:2023中国宠物行业新趋势洞察报告(附下载)

关于报告的所有内容&#xff0c;公众【营销人星球】获取下载查看 核心观点 户外赛道本质上迎合了全球共性需求的增长&#xff0c;从养宠意愿的转化到养宠生活的需求&#xff0c;多层次的需求推动行业发展新趋势 从需求端进行分析&#xff0c;可以将养宠意愿的转化分为三个层…

OSPF 动态路由协议 路由传递

影响OSPF路由选择的因素&#xff1a; 1.OSPF路由的开销值&#xff1a;宽带参考值默认为100. COST1000/接口带宽。此时接口 带宽的值可更改&#xff0c;更改后只改变参考数值&#xff0c;带宽仍然为初始值。 注意&#xff1a;更改COST需要 在路由的入方向&#xff0c;数据的出方…

3分钟了解别人如何用ChatGPT打造独特个人IP(成为网红)的

​想必你也有所察觉&#xff0c;在当前形势下&#xff0c;打造个人IP非常重要。许多有影响力的CEO和网红都在打造自己IP。如果你还没有建立自己的个人IP&#xff0c;那么现在正是开始的时候。而且&#xff0c;相比以前&#xff0c;你甚至都不需要找专业的个人IP顾问了&#xff…

【数据结构OJ题】轮转数组

原题链接&#xff1a;https://leetcode.cn/problems/rotate-array/ 目录 1. 题目描述 2. 思路分析 3. 代码实现 1. 题目描述 2. 思路分析 1. 方法一&#xff1a;暴力求解&#xff0c;将数组的第一个元素用临时变量tmp存起来&#xff0c;再将数组其他元素往右挪动一步&…

编译iOS系统可用的FFmpeg

在进行编译之前&#xff0c;需要做一些准备工作安装必备文件&#xff1a; 1 安装 gas-preprocessor FFmpeg-iOS-build-script 自动编译脚本需要使用到 gas-preprocessor . 执行 sudo git clone https://github.com/bigsen/gas-preprocessor.git /usr/local/bin/gas sudo c…

ChatGPT会取代搜索引擎吗?BingChat、GoogleBard与ChatGPT区别

目前暂时不会&#xff0c;ChatGPT为代表的聊天机器人很可能会直接集成到搜索中&#xff0c;而不是取代它。微软已经通过Bing Chat和Bing做到了这一点&#xff0c;它将“聊天”选项卡直接放入Bing搜索的菜单中。Google、百度也分别开始尝试通过其AI生成技术将Google Bard、文心一…

创建好的VMware虚拟机如何连接上外网?MobaX和XShell如何连接虚拟机

配置虚拟机网卡 首先点击VMware菜单栏&#xff0c;编辑-虚拟网络编辑器-更改设置 选择VMnet8-NAT设置&#xff0c;并记住子网IP之后有用 记住网关IP 修改实际创建的虚拟机网卡 修改设置&#xff0c;vi /etc/sysconfig/network-scripts/ifcfg-ens32 修改前&#xff1a; 修…

FineBI 人力资源 专题

此处使用FineBI处理人力资源数据&#xff0c;数据来源于HR_database数据文件&#xff0c;将此文件拷贝到安装目录下 然后配置数据库连接 在【公共数据】中新建一个文件夹&#xff0c;并将之前数据库中需要用到的表放入此处&#xff0c;更新数据。显示如下。 这时候首先要建立…

PCI 简易通讯控制器有黄色感叹号

一、问题描述 设备管理器中&#xff0c;其他设备中显示 “PCI 简易通讯控制器”驱动未安装&#xff0c;显示黄色感叹号&#xff1a; 二、原因分析 右键该驱动&#xff0c;查看属性ID&#xff0c;显示为&#xff1a; PCI \ VEN_8086&#xff06;DEV_1C3A&#xff06;SUBSYS…