【区分vue2和vue3下的element UI Drawer 抽屉组件，分别详细介绍属性，事件，方法如何使用，并举例】

在 Vue 2 中，Element UI 提供了 Drawer 抽屉组件，而在 Vue 3 中，相应的库是 Element Plus，它也提供了类似的 Drawer 组件。虽然它们的功能相似，但在属性、事件和方法的命名上可能会有所不同，以符合 Vue 3 的新特性和改进。

Vue 2 + Element UI Drawer

属性（Props）

• visible.sync 或 v-model: 控制抽屉是否显示，支持 .sync 修饰符或 v-model 双向绑定。
• title: 抽屉的标题。
• size: 抽屉的宽度或高度，当抽屉是垂直方向时。
• placement: 抽屉的放置位置，可以是 right、left、top、bottom。
• closable: 是否显示关闭按钮。
• destroy-on-close: 控制关闭抽屉时是否销毁 Drawer 中的子元素。
• modal: 是否显示遮罩层。
• modal-class: 遮罩层的自定义类名。
• lock-scroll: 是否锁定背景滚动。
• before-close: 关闭前的回调，执行且返回 false 时可阻止关闭。

事件

• open: Drawer 打开时触发。
• close: Drawer 关闭时触发。
• visible-change: Drawer 显示状态变化时触发。

方法

Element UI 的 Drawer 组件通常不直接提供方法，但你可以通过改变 visible 或 v-model 绑定的值来控制抽屉的显示和隐藏。

示例

<template>
  <el-button @click="drawer = true">点击打开抽屉</el-button>
  <el-drawer
    title="提示"
    :visible.sync="drawer"
    @close="handleClose">
    <!-- 抽屉内容 -->
    这里是一些信息
  </el-drawer>
</template>

<script>
export default {
  data() {
    return {
      drawer: false,
    };
  },
  methods: {
    handleClose(done) {
      console.log('Drawer will be closed');
      // 如果需要阻止关闭，可以调用 done(false)
      done();
    },
  },
};
</script>

Vue 3 + Element Plus Drawer

在 Vue 3 和 Element Plus 中，Drawer 组件的使用方式与 Vue 2 和 Element UI 非常相似，但有一些细微的差别。

属性（Props）

• model-value 或 v-model: 控制抽屉是否显示，使用 v-model 进行双向绑定。
• 其他属性（如 title、size、placement 等）与 Vue 2 中的类似，但请注意检查 Element Plus 的官方文档以获取最新信息。

事件

• update:model-value: 当抽屉的显示状态变化时触发，与 Vue 2 的 visible-change 类似，但符合 Vue 3 的事件命名规范。
• open 和 close 事件仍然存在，但最好查看 Element Plus 的文档以确认。

方法

与 Vue 2 类似，Element Plus 的 Drawer 组件通常不直接提供方法，但你可以通过改变 v-model 绑定的值来控制抽屉的显示和隐藏。

示例

<template>
  <el-button @click="isOpen = true">点击打开抽屉</el-button>
  <el-drawer
    title="提示"
    v-model="isOpen"
    @close="handleClose">
    <!-- 抽屉内容 -->
    这里是一些信息
  </el-drawer>
</template>

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

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

    const handleClose = (done) => {
      console.log('Drawer will be closed');
      done(); // 调用 done 方法以关闭抽屉
    };

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

请注意，Element Plus 的 API 可能会随着版本更新而变化，因此建议查阅最新的官方文档以获取准确的信息。

原文地址：https://blog.csdn.net/xiejunlan/article/details/140511665

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！