详细分析Element中的Drawer（附Demo）

news2024/12/26 0:28:32

目录

  • 前言
  • 1. 基本知识
  • 2. Demo
    • 2.1 基本用法
    • 2.2 不同方向
    • 2.3 自定义大小
    • 2.4 嵌入表单
    • 2.5 嵌套抽屉
  • 3. 实战
  • 4. Element Plus（Drawer）

前言

对于该组件针对Vue2比较多，而Element Plus中的Drawer针对Vue3比较多

此处的Demo主要偏向Vue2
后续的Element Plus 偏向Vue3

1. 基本知识

Drawer 组件可以用于从屏幕的边缘滑入一个面板，用来显示额外的内容而不会离开当前页面视图

主要属性如下：

  • visible：是否显示抽屉，Boolean 类型，默认值为 false
  • direction：抽屉滑出的方向，可以是 ‘ltr’（左侧滑出）、‘rtl’（右侧滑出）、‘ttb’（顶部滑出）、‘btt’（底部滑出），默认值为 ‘rtl’
  • size：抽屉的大小，可以是具体的像素值或者百分比，默认值为 ‘30%’
  • title：抽屉的标题，String 类型
  • append-to-body：是否将 Drawer 添加到 body 元素上，Boolean 类型，默认值为 false

事件：

  • open：抽屉打开时触发的事件
  • close：抽屉关闭时触发的事件

2. Demo

更多的Demo如下：

2.1 基本用法

<template>
  <div>
    <el-button type="primary" @click="drawerVisible = true">打开抽屉</el-button>
    <el-drawer
      title="基本抽屉"
      :visible.sync="drawerVisible"
      @close="handleClose">
      <span>这是一个基本的抽屉内容。</span>
    </el-drawer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      drawerVisible: false
    };
  },
  methods: {
    handleClose() {
      console.log('抽屉已关闭');
    }
  }
};
</script>

2.2 不同方向

<template>
  <div>
    <el-button type="primary" @click="leftDrawer = true">左侧滑出</el-button>
    <el-button type="primary" @click="rightDrawer = true">右侧滑出</el-button>
    <el-button type="primary" @click="topDrawer = true">顶部滑出</el-button>
    <el-button type="primary" @click="bottomDrawer = true">底部滑出</el-button>

    <el-drawer
      title="左侧抽屉"
      :visible.sync="leftDrawer"
      direction="ltr"
      @close="handleClose('leftDrawer')">
      <span>左侧滑出的抽屉内容。</span>
    </el-drawer>

    <el-drawer
      title="右侧抽屉"
      :visible.sync="rightDrawer"
      direction="rtl"
      @close="handleClose('rightDrawer')">
      <span>右侧滑出的抽屉内容。</span>
    </el-drawer>

    <el-drawer
      title="顶部抽屉"
      :visible.sync="topDrawer"
      direction="ttb"
      @close="handleClose('topDrawer')">
      <span>顶部滑出的抽屉内容。</span>
    </el-drawer>

    <el-drawer
      title="底部抽屉"
      :visible.sync="bottomDrawer"
      direction="btt"
      @close="handleClose('bottomDrawer')">
      <span>底部滑出的抽屉内容。</span>
    </el-drawer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      leftDrawer: false,
      rightDrawer: false,
      topDrawer: false,
      bottomDrawer: false
    };
  },
  methods: {
    handleClose(drawer) {
      this[drawer] = false;
      console.log(`${drawer} 抽屉已关闭`);
    }
  }
};
</script>

2.3 自定义大小

<template>
  <div>
    <el-button type="primary" @click="smallDrawer = true">小抽屉</el-button>
    <el-button type="primary" @click="largeDrawer = true">大抽屉</el-button>

    <el-drawer
      title="小抽屉"
      :visible.sync="smallDrawer"
      size="20%"
      @close="handleClose('smallDrawer')">
      <span>这是一个小抽屉。</span>
    </el-drawer>

    <el-drawer
      title="大抽屉"
      :visible.sync="largeDrawer"
      size="70%"
      @close="handleClose('largeDrawer')">
      <span>这是一个大抽屉。</span>
    </el-drawer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      smallDrawer: false,
      largeDrawer: false
    };
  },
  methods: {
    handleClose(drawer) {
      this[drawer] = false;
      console.log(`${drawer} 抽屉已关闭`);
    }
  }
};
</script>

2.4 嵌入表单

<template>
  <div>
    <el-button type="primary" @click="drawerVisible = true">打开表单抽屉</el-button>
    <el-drawer
      title="表单抽屉"
      :visible.sync="drawerVisible"
      size="50%"
      @close="handleClose">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="用户名">
          <el-input v-model="form.username"></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="form.email"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm">提交</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      drawerVisible: false,
      form: {
        username: '',
        email: ''
      }
    };
  },
  methods: {
    handleClose() {
      console.log('表单抽屉已关闭');
    },
    submitForm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          console.log('提交成功', this.form);
          this.drawerVisible = false;
        } else {
          console.error('表单验证失败');
        }
      });
    }
  }
};
</script>

2.5 嵌套抽屉

<template>
  <div>
    <el-button type="primary" @click="outerDrawer = true">打开外层抽屉</el-button>

    <el-drawer
      title="外层抽屉"
      :visible.sync="outerDrawer"
      size="50%"
      @close="handleClose('outerDrawer')">
      <span>这是外层抽屉的内容。</span>
      <el-button type="primary" @click="innerDrawer = true">打开内层抽屉</el-button>
      
      <el-drawer
        title="内层抽屉"
        :visible.sync="innerDrawer"
        size="30%"
        @close="handleClose('innerDrawer')">
        <span>这是内层抽屉的内容。</span>
      </el-drawer>
    </el-drawer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      outerDrawer: false,
      innerDrawer: false
    };
  },
  methods: {
    handleClose(drawer) {
      this[drawer] = false;
      console.log(`${drawer} 抽屉已关闭`);
    }
  }
};
</script>

3. 实战

对于实战中的Demo（部分）

<template>
  <basic-container>
    <avue-crud :option="option"
               :table-loading="loading"
               :data="data"
               ref="crud"
               v-model="form"
               :permission="permissionList"
               :before-open="beforeOpen"
               @row-del="rowDel"
               @row-update="rowUpdate"
               @row-save="rowSave"
               @search-change="searchChange"
               @search-reset="searchReset"
               @selection-change="selectionChange"
               @current-change="currentChange"
               @size-change="sizeChange"
               @refresh-change="refreshChange"
               @on-load="onLoad"
               @tree-load="treeLoad">
      <template slot-scope="{row}" slot="menu">
        <el-button type="text"
                   icon="el-icon-setting"
                   size="small"
                   v-if="permission.api_scope_setting"
                   plain
                   style="border: 0;background-color: transparent !important;"
                   @click.stop="handleDataScope(row)">权限配置
        </el-button>
      </template>
      <template slot-scope="{row}" slot="source">
        <div style="text-align:center">
          <i :class="row.source"/>
        </div>
      </template>
    </avue-crud>
    <el-drawer :title="`[${scopeMenuName}] 接口权限配置`" :visible.sync="drawerVisible" :direction="direction"
               append-to-body
               :before-close="handleDrawerClose" size="1000px">
      <basic-container>
        <avue-crud :option="optionScope"
                   :data="dataScope"
                   :page="pageScope"
                   v-model="formScope"
                   :table-loading="scopeLoading"
                   ref="crudScope"
                   @row-del="rowDelScope"
                   @row-update="rowUpdateScope"
                   @row-save="rowSaveScope"
                   :before-open="beforeOpenScope"
                   @search-change="searchChangeScope"
                   @search-reset="searchResetScope"
                   @selection-change="selectionChangeScope"
                   @current-change="currentChangeScope"
                   @size-change="sizeChangeScope"
                   @on-load="onLoadScope">
          <template slot="menuLeft">
            <el-button type="danger"
                       size="small"
                       icon="el-icon-delete"
                       plain
                       @click="handleDeleteScope">删 除
            </el-button>
          </template>
          <template slot-scope="{row}"
                    slot="scopeType">
            <el-tag>{{row.scopeTypeName}}</el-tag>
          </template>
        </avue-crud>
      </basic-container>
    </el-drawer>
  </basic-container>
</template>

截图如下：

在这里插入图片描述

对应的弹窗风格如下：

4. Element Plus（Drawer）

既然阐述到Element 的Drawer，那么看看Element Plus中的有啥差异

基本用法的对比：

<template>
  <div>
    <el-button type="primary" @click="drawerVisible = true">打开抽屉</el-button>
    <el-drawer
      title="基本抽屉"
      :visible.sync="drawerVisible"
      @close="handleClose">
      <span>这是一个基本的抽屉内容。</span>
    </el-drawer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      drawerVisible: false
    };
  },
  methods: {
    handleClose() {
      console.log('抽屉已关闭');
    }
  }
};
</script>

Element Plus：

<template>
  <div>
    <el-button type="primary" @click="drawerVisible = true">打开抽屉</el-button>
    <el-drawer
      title="基本抽屉"
      :model-value="drawerVisible"
      @close="handleClose">
      <span>这是一个基本的抽屉内容。</span>
    </el-drawer>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const drawerVisible = ref(false);

    const handleClose = () => {
      console.log('抽屉已关闭');
    };

    return {
      drawerVisible,
      handleClose
    };
  }
};
</script>

差异如下：

绑定可见性：

  • Element 使用 :visible.sync 来绑定可见性状态。
  • Element Plus 使用 :model-value 来绑定可见性状态。

API 设计：

  • Element 是基于 Vue 2 的选项式 API。
  • Element Plus 是基于 Vue 3 的组合式 API

更多的差异推荐如下：

  1. 详细分析Vue3中组合式API（附Demo）
  2. 详细分析Vue3中的props用法（父传子）
  3. 详细分析Vue3中的emit用法（子传父）
  4. 详细分析Vue3中的defineEmits基本知识（子传父）

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

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

相关文章

五一期间吉祥桥再创新高，抢占宴席酒市场高位

五一期间吉祥桥再创新高，抢占宴席酒市场高位

“人生过三桥&#xff0c;必喝吉祥桥”“古韵吉祥桥&#xff0c;今喜结良缘”“吉祥桥下酒香飘&#xff0c;东方韵味醉心田”…… 这个五一&#xff0c;吉祥桥酒商的朋友圈热闹起来了&#xff0c;一边刷屏式宣传自家主打的宴席产品&#xff0c;一边炫耀式的发布每天的宴席成绩…
阅读更多...
08.CNN

08.CNN

文章目录 Observation 1Pooling - Max PoolingFlattenApplication&#xff1a;Playing Go使用验证集选择模型食物分类 Observation 1 Pooling - Max Pooling Pooling主要为了降低运算量&#xff0c;现在一般不用了&#xff0c;全convolution Flatten Application&#xff1a;P…
阅读更多...
一文了解安卓内存抖动

一文了解安卓内存抖动

目录 目录一、什么是内存抖动&#xff1f;1.1 Android里的内存抖动1.2 如何直观查看这种现象1.3 内存抖动带来的风险 二、如何避免内存抖动 目录 一、什么是内存抖动&#xff1f; 在程序里&#xff0c;每创建一个对象&#xff0c;就会有一块内存分配给它&#xff0c;每分配一…
阅读更多...
使用 RisingWave 和 Redash 处理和可视化实时数据

使用 RisingWave 和 Redash 处理和可视化实时数据

在创建流处理管道时&#xff0c;需要两个关键组件&#xff1a;一个用于处理和转换数据&#xff0c;一个用于数据可视化。RisingWave 和 Redash 就提供了一个优秀的解决方案。 RisingWave 是一个支持实时数据处理的分布式 SQL 流数据库。它提供增量更新的物化视图&#xff0c;使…
阅读更多...
【MySQL精通之路】MySQL8.0新增功能-原子DDL语句支持

【MySQL精通之路】MySQL8.0新增功能-原子DDL语句支持

太长不看系列&#xff1a; 本文一句话总结&#xff0c;MySQL8.0支持多条DDL语句执行时的原子性了&#xff08;仅限Innodb&#xff09; 本文属于下面这篇博客的子博客&#xff1a; 【MySQL精通之路】MySQL8.0官方文档-新增功能 1.意义描述 MySQL 8.0支持原子数据定义语言&…
阅读更多...
实用的TypeScript开发工具

实用的TypeScript开发工具

1、根据接口数据自动定义类型变量&#xff1a;https://wulunyi.github.io/typeof-sjsonc-web/build/index.html ……&#xff08;持续更新中&#xff09;
阅读更多...
Vue 离线地图实现

Vue 离线地图实现

效果图&#xff1a; 一、获取市的地图数据 DataV.geoAtlas 获取市地图数据 点击地图缩放至想要的市区域&#xff0c;通过右侧的链接打开网址&#xff0c;复制json数据。 二、获取镇地图数据 选择你想要的镇数据&#xff0c;点击下载 选择级别&#xff08;清晰度&#xff09…
阅读更多...
关闭以及启动ubuntu图形界面

关闭以及启动ubuntu图形界面

关闭以及启动ubuntu图形界面 文章目录 关闭以及启动ubuntu图形界面1. 关闭图形界面2. 打开图形界面 如果你误杀了Xorg进程&#xff0c;需要重新启动图形界面&#xff0c;可以按照以下步骤操作&#xff1a; 1. 关闭图形界面 查看当前启动的图形界面&#xff1a; 使用下面命令…
阅读更多...
【linux系统学习教程 Day03】网络安全之Linux系统学习教程，用户和用户组管理，创建用户，删除用户，创建组，删除组....

【linux系统学习教程 Day03】网络安全之Linux系统学习教程，用户和用户组管理，创建用户，删除用户，创建组，删除组....

1.7 用户和用户组管理 1.7.1 用户管理 1-1 创建用户 #创建用户 useradd #创建一个用户 例子1&#xff1a;useradd test1 #创建用户 useradd #创建一个用户 例子1&#xff1a;useradd dilnur 1-2 设置密码 passwd 例子1&#xff1a;passwd dilnur #用root用户给…
阅读更多...
9.1 Go语言入门(环境篇)

9.1 Go语言入门(环境篇)

Go语言入门&#xff08;环境篇&#xff09; 目录一、什么是Go语言二、下载安装配置Go语言开发环境1. 下载2. 安装3. 配置环境变量4. 安装环境验证 三、 开发工具1. 下载2. 安装3. 激活4. 配置SDK 四、 创建go工程文件并运行1. 创建go工程2. 示例代码3. 运行代码 目录 一、什么…
阅读更多...
操作系统 c语言简单模仿进程创建和时间片轮转调度算法中的进程调度

操作系统 c语言简单模仿进程创建和时间片轮转调度算法中的进程调度

1&#xff0e;实验目的 加深对进程概念的理解&#xff0c;明确进程和程序的区别&#xff1b; 深入了解系统如何组织进程、创建进程&#xff1b; 进一步认识如何实现处理器调度。 2&#xff0e;实验预备知识 进程的概念&#xff1b; 进程的组织方式&#xff1b; 进程的创建…
阅读更多...
CCF20220601——归一化处理

CCF20220601——归一化处理

CCF20220601——归一化处理 代码如下&#xff1a; #include<bits/stdc.h> using namespace std; int main() {int n,a[1000],sum0;scanf("%d",&n);for(int i1;i<n;i){scanf("%d",&a[i]);suma[i];}double aver1.0,b0.0,d1.0;aversum/(n*1…
阅读更多...
深度学习之基于Django+Tensorflow卷积神经网络实时口罩检测系统

深度学习之基于Django+Tensorflow卷积神经网络实时口罩检测系统

欢迎大家点赞、收藏、关注、评论啦 &#xff0c;由于篇幅有限&#xff0c;只展示了部分核心代码。 文章目录 一项目简介 二、功能三、系统四. 总结 一项目简介 一、项目背景 随着全球疫情的持续&#xff0c;佩戴口罩成为了公众日常生活中不可或缺的一部分。特别是在人员密集的…
阅读更多...
佛山远程抄表电表是什么？

佛山远程抄表电表是什么？

1.佛山远程抄表电表&#xff1a;简述 佛山远程抄表电表&#xff0c;是一种利用通信网技术完成智能电表系统软件&#xff0c;它改变了传统的人工抄水表方式&#xff0c;提升了电力管理的效率和精确性。这类电表不但可以实时检测电力应用情况&#xff0c;还可以实现远程操作、全…
阅读更多...
第二证券今日投资参考：5月国产游戏版号发放 猪价加速上涨

第二证券今日投资参考：5月国产游戏版号发放 猪价加速上涨

昨日&#xff0c;两市股指盘中震荡上扬&#xff0c;沪指盘中续创年内新高&#xff0c;创业板指一度涨超1%。到收盘&#xff0c;沪指涨0.54%报3171.15点&#xff0c;深证成指涨0.43%报9750.82点&#xff0c;创业板指涨0.59%报1875.93点&#xff0c;上证50指数涨0.34%&#xff1b…
阅读更多...
Vue学习穿梭框Transfer组件

Vue学习穿梭框Transfer组件

Vue学习Transfer组件 一、前言1、案例一2、案例二 一、前言 在 Vue 3 中使用 el-transfer 组件可以帮助你实现数据的穿梭功能&#xff0c;让用户可以将数据从一个列表转移到另一个列表。下面是一个简单示例&#xff0c;演示如何在 Vue 3 中使用 el-transfer 组件&#xff1a; …
阅读更多...
C语言 数组——向函数传递数组

C语言 数组——向函数传递数组

目录 把数组传给函数&#xff08;Passing Arrays to Functions&#xff09; 向函数传递一维数组 向函数传递二维数组 数组在学生成绩管理中的应用 例&#xff1a;计算每个学生的平均分 把数组传给函数&#xff08;Passing Arrays to Functions&#xff09; 向函数传递一维…
阅读更多...
Harbor 使用中出现的问题

Harbor 使用中出现的问题

安装 使用宝塔安装 安装成功的标志&#xff0c;见下图。初始的默认用户是admin&#xff0c;密码是Harbor12345&#xff0c;登录成功&#xff1a; 错误现象 # docker login 192.168.1.50:8005 Username: admin Password: Error response from daemon: Get "https://1…
阅读更多...
民国漫画杂志《时代漫画》第18期.PDF

民国漫画杂志《时代漫画》第18期.PDF

时代漫画18.PDF: https://url03.ctfile.com/f/1779803-1248612707-27e56b?p9586 (访问密码: 9586) 《时代漫画》的杂志在1934年诞生了&#xff0c;截止1937年6月战争来临被迫停刊共发行了39期。 ps:资源来源网络&#xff01;
阅读更多...
./scripts/Makefile.clean 文件分析

./scripts/Makefile.clean 文件分析

文章目录 目标 $(subdir-ymn)目标__clean $(clean-dirs):     make -f ./scripts/Makefile.clean obj$(patsubst _clean_%,%,$) $(clean-dirs)$(patsubst _clean_%,%,$)_clean_api _clean_cmd _clean_common _clean_disk _clean_drivers _clean_drivers/ddr/altera _clean_d…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023