uni-drawer抽屉组件只有左右两个方向，如何改为从上方滑出

在开发项目时，需要用到抽屉组件，但该组件只给出了从左右两边滑出的效果。我又懒得换别的了，直接在导入的组件文件里改吧。

从uni_modules文件夹中找到该组件的vue文件并打开。

看了一下代码，理清里面的逻辑，然后开始改。

第一步：在HTML中需要修改的内容。

找到类名为 uni-drawer__content 的 view 标签。原为：

<view class="uni-drawer__content" :class="{'uni-drawer--right': rightMode,'uni-drawer--left': !rightMode, 'uni-drawer__content--visible': showDrawer}" :style="{width:drawerWidth+'px'}">
	<slot />
</view>

在动态设置类目的地方修改，新增一个 uni-drawer--up 类名，并修改判断条件。改为：

<view class="uni-drawer__content" :class="{'uni-drawer--right': rightMode,'uni-drawer--left': leftMode,'uni-drawer--up': upMode, 'uni-drawer__content--visible': showDrawer}" :style="{width:drawerWidth}">
	<slot />
</view>

第二步：JS修改

先在这里新增一个：

由于在HTML中我们修改了类名的判断条件，因此在 data 中需要新增两个变量：

并在 created 生命周期内对新变量进行赋值逻辑处理：

第三步，CSS样式修改

根据自己需要添加并修改CSS样式。

添加 类名为 uni-drawer--up 的CSS样式。

.uni-drawer--up {
	top: 0;
	/* #ifdef APP-NVUE */
	transform: translateY(-$drawer-width);
	/* #endif */
	/* #ifndef APP-NVUE */
	transform: translateY(-100%);
	/* #endif */
}

我这里需要宽占满，高度自适应，高度只需要修改类名为 uni-drawer__content 的CSS样式即可。

2024-10-10 补充：这里的 top: 0; 也可以注释掉，我在后续需要用到下侧滑出抽屉，与上侧抽屉滑出同理，但滑出后占满了整个屏幕，就是 top: 0; 造成的，我注释了一下，发现对之前的上侧滑出没有影响，故该行也可以注释掉。

针对宽度，由于宽度是可以传值自己设定的，只需要修改一下逻辑代码即可。

在JS内的 props 中修改 width 的 type 类型，加上 String 类型，因为我需要宽度是占满屏幕，原组件是根据传来的数字并加上‘px’字段进行修改的，使用 px 无法根据不同大小屏幕的手机进行自适应，需要改为使用 vw 单位，即 100vw 。

除此之外，还需要在HTML中将对应的px字段删掉，这里是类名为 uni-drawer__content view 标签。

在上方第一步内，这里已经修改过了，因此我只是在这里做一下说明。

修改完成后，在使用组件时，传入 mode = "up" width = "100vw" 就可以了

最后，需要注意的是，这里目前我只需要从上方滑出的抽屉类型，所以我选择直接在组件的基础上进行修改，如果除了从上方滑出的抽屉类型，还需要左边或者右边滑出的抽屉类型，需要对宽高度这块儿进行一个处理的话，比如两边滑出需要高度占满，宽度不占满，上方滑出需要宽度占满，高度不占满，这种情况还需要判断处理一下。

2024-09-30