CDrawer 抽屉

功能说明

抽屉组件，可从页面不同方向滑出，通常用于展示临时的操作面板或内容区域，支持从顶部、左侧、右侧滑入。点击遮罩层可关闭抽屉。

引用方式

import CDrawer from '@components/layout/drawer';

组件参数

• show (Boolean，必选)：控制抽屉显示或隐藏，默认值为 false
• direction (String，可选)：抽屉滑出方向，默认值为 'right'
• top：从顶部滑出
• left：从左侧滑出
• right：从右侧滑出
• onClose (Function，必选)：抽屉关闭时的回调函数，通常用于设置 show 为 false

使用示例

基础用法 - 从右侧滑出

<template>
  <view class="page">
    <button @tap="evt => openDrawer()">打开抽屉</button>
    
    <CDrawer 
      :show="drawerVisible" 
      :onClose="closeDrawer"
    >
      <view class="drawer-content">
        <view class="drawer-title">筛选条件</view>
        <view class="drawer-item">选项1</view>
        <view class="drawer-item">选项2</view>
        <view class="drawer-item">选项3</view>
        <button @tap="evt => applyFilter()">确定</button>
      </view>
    </CDrawer>
  </view>
</template>

<script>
import CDrawer from '@components/layout/drawer';

export default {
  components: {
    CDrawer
  },
  data() {
    return {
      drawerVisible: false
    }
  },
  methods: {
    openDrawer() {
      this.drawerVisible = true;
    },
    closeDrawer() {
      this.drawerVisible = false;
    },
    applyFilter() {
      // 应用筛选逻辑
      this.closeDrawer();
    }
  }
}
</script>

<style>
.drawer-content {
  padding: 20px;
}
.drawer-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 20px;
}
.drawer-item {
  padding: 10px 0;
}
</style>

从左侧滑出的抽屉

<template>
  <view class="page">
    <button @tap="evt => openDrawer()">打开导航菜单</button>
    
    <CDrawer 
      :show="drawerVisible" 
      direction="left"
      :onClose="closeDrawer"
    >
      <view class="menu-content">
        <view class="menu-item" @tap="evt => navigateTo('/pages/home/index')">首页</view>
        <view class="menu-item" @tap="evt => navigateTo('/pages/order/list')">订单管理</view>
        <view class="menu-item" @tap="evt => navigateTo('/pages/user/index')">用户中心</view>
        <view class="menu-item" @tap="evt => navigateTo('/pages/setting/index')">系统设置</view>
      </view>
    </CDrawer>
  </view>
</template>

<script>
import CDrawer from '@components/layout/drawer';
import Taro from '@tarojs/taro';

export default {
  components: {
    CDrawer
  },
  data() {
    return {
      drawerVisible: false
    }
  },
  methods: {
    openDrawer() {
      this.drawerVisible = true;
    },
    closeDrawer() {
      this.drawerVisible = false;
    },
    navigateTo(url) {
      this.closeDrawer();
      Taro.navigateTo({ url });
    }
  }
}
</script>

从顶部滑出的抽屉

<template>
  <view class="page">
    <button @tap="evt => openDrawer()">显示通知</button>
    
    <CDrawer 
      :show="drawerVisible" 
      direction="top"
      :onClose="closeDrawer"
    >
      <view class="notification">
        <view class="notification-title">系统通知</view>
        <view class="notification-content">
          您有3条未读消息，请及时查看处理。
        </view>
        <button @tap="evt => viewMessages()">查看详情</button>
      </view>
    </CDrawer>
  </view>
</template>

<script>
import CDrawer from '@components/layout/drawer';

export default {
  components: {
    CDrawer
  },
  data() {
    return {
      drawerVisible: false
    }
  },
  methods: {
    openDrawer() {
      this.drawerVisible = true;
    },
    closeDrawer() {
      this.drawerVisible = false;
    },
    viewMessages() {
      this.closeDrawer();
      // 跳转到消息页面
    }
  }
}
</script>

注意事项

1. 使用抽屉组件时，必须提供 onClose 回调函数，否则点击遮罩层无法关闭抽屉
2. 抽屉内容通过默认插槽提供，可以根据需要自定义内容和样式
3. 抽屉组件默认占满整个屏幕，内容区域的样式需要自行定义
4. 抽屉打开时会添加遮罩层，防止用户与页面其他部分交互
5. 抽屉内容区宽度固定，左右抽屉为屏幕宽度的80%，顶部抽屉为屏幕高度的40%
6. 当前版本的组件不支持从底部滑出的抽屉，如有需要可考虑扩展组件