前言
本篇教程将介绍如何使用 npm 包 @mcw/drawer 实现一个带有抽屉的 web 应用程序。本教程的目标读者是拥有一定前端开发基础的开发者，需要了解 npm、Vue.js 等相关技术。
什么是 @mcw/drawer？
@mcw/drawer 是 Material Components for Web（以下简称 MDC）JavaScript库的一部分，提供了一个具有抽屉（drawer）功能的组件，MDC 是 Google 的设计语言 Material Design 在 Web 端的实现。使用 MDC 可以快速开发 Web 应用程序并具有良好的用户体验。
如何使用 @mcw/drawer？
安装
@mcw/drawer 是一个 Node.js 模块，可以使用 npm 或 yarn 安装。通过以下命令进行安装：
npm install @mcw/drawer
或者
yarn add @mcw/drawer
引入
在 Vue.js 项目中，可以通过 import 语句引入 @mcw/drawer：
import { MDCDrawer } from "@mcw/drawer";编写 HTML 结构
首先在 HTML 中编写控制抽屉显示的按钮和抽屉的 HTML 结构：
-- -------------------- ---- -------
------- ------------------ - ---------- ---------------
---- -------------------------- --------------------
---- -------------------
---- ----------------------------
--- -------------------------------- ----------
---- --------------------------------------
-- ----------------------------------- ------------- -----
-- ----------------------------------- ------------- -----
-- ----------------------------------- ------------- -----
------
------
------
------初始化 MDCDrawer
在 Vue.js 项目的 mounted 钩子函数中初始化 MDCDrawer，并将其绑定到 HTML 中的 DOM 元素上：
mounted() {
const drawerEl = this.$el.querySelector('.mdc-drawer');
const drawer = new MDCDrawer(drawerEl);
drawerEl.addEventListener('MDCDrawer:closed', () => {
this.showDrawer = false;
});
}完整代码
最终的 Vue.js 代码应该如下所示：
-- -------------------- ---- -------
----------
-----
------- ------------------ - ---------- ---------------
---- -------------------------- --------------------
---- -------------------
---- ----------------------------
--- -------------------------------- ----------
---- --------------------------------------
-- ----------------------------------- ------------- -----
-- ----------------------------------- ------------- -----
-- ----------------------------------- ------------- -----
------
------
------
------
------
-----------
--------
------ - --------- - ---- --------------
------ ------- -
------ -
------ -
----------- ------
--
--
--------- -
----- -------- - --------------------------------------
----- ------ - --- --------------------
--------------------------------------------- -- -- -
--------------- - ------
---
--
--
---------总结
本文介绍了如何使用 @mcw/drawer 实现一个具有抽屉的 web 应用程序。通过本教程，你可以了解到如何使用 MDC 提供的组件来提升 web 应用程序的用户体验。同时，你也可以了解到如何在 Vue.js 项目中引入和使用 npm 包。
示例代码
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600560b181e8991b448def4a