uni-app nvue页面 设置 uni-drawer 抽屉宽度

uni-app nvue页面 设置 uni-drawer 抽屉宽度

类别 信息
产品分类 uniapp/App
PC开发环境 Windows
PC开发环境版本 win10
HBuilderX类型 正式
HBuilderX版本 4.64
手机系统 Android
手机系统版本 Android 15
手机厂商 小米
手机机型 note8
页面类型 nvue
Vue版本 vue3
打包方式 云端
项目创建方式 HBuilderX

示例代码：

<uni-drawer :style="{width: '280px', backgroundColor: 'red'}" ref="menu" mode="left" :mask-click="true" @maskClick="closeDrawer">  
    <view class="drawer-content" :style="{width: '280px', backgroundColor: 'green'}">  

    </view>  
</uni-drawer>

操作步骤：

<uni-drawer :style="{width: '280px', backgroundColor: 'red'}" ref="menu" mode="left" :mask-click="true" @maskClick="closeDrawer">  
    <view class="drawer-content" :style="{width: '280px', backgroundColor: 'green'}">  

    </view>  
</uni-drawer>

设置

预期结果：

上面的代码，只可以设置 uni-drawer 的宽度，但是内部 view class=“drawer-content” 的宽度设置，没有效果。

实际结果：

上面的代码，只可以设置 uni-drawer 的宽度，但是内部 view class=“drawer-content” 的宽度设置，没有效果。

bug描述：

nvue页面，设置 uni-drawer 抽屉宽度 没有效果


更多关于uni-app nvue页面 设置 uni-drawer 抽屉宽度的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

不支持 但是直接源码中的宽度可以生效

更多关于uni-app nvue页面 设置 uni-drawer 抽屉宽度的实战教程也可以访问 https://www.itying.com/category-93-b0.html


谢谢解答，试了一下已经成功了

在nvue页面中，uni-drawer的宽度设置确实需要特别注意。对于您的问题，建议采用以下解决方案：

  1. 对于nvue页面，推荐使用width属性直接设置抽屉宽度，而不是通过style：
<uni-drawer width="280px" ref="menu" mode="left" :mask-click="true" @maskClick="closeDrawer">
  1. 内部内容的宽度控制需要使用flex布局：
<view class="drawer-content" style="flex:1;width:280px;background-color:green">
  1. 如果仍然无效，可以尝试在onReady生命周期中通过ref动态设置宽度：
onReady() {
    this.$refs.menu.width = '280px'
}
回到顶部