From 3b03f87a02458f719e2eb4bf112a13441b427d14 Mon Sep 17 00:00:00 2001
From: ‘chensiAb’ <‘chenchenco03@163.com’>
Date: Tue, 25 Mar 2025 13:54:34 +0800
Subject: [PATCH] Merge branch 'master' of ssh://dev.zhiheiot.com:29418/mob-components
---
_cursor.ai/layout.doc/drawer.doc/CDrawer.doc.md | 199 +++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 199 insertions(+), 0 deletions(-)
diff --git a/_cursor.ai/layout.doc/drawer.doc/CDrawer.doc.md b/_cursor.ai/layout.doc/drawer.doc/CDrawer.doc.md
new file mode 100644
index 0000000..1d8df88
--- /dev/null
+++ b/_cursor.ai/layout.doc/drawer.doc/CDrawer.doc.md
@@ -0,0 +1,199 @@
+# CDrawer 抽屉
+
+## 功能说明
+
+抽屉组件，可从页面不同方向滑出，通常用于展示临时的操作面板或内容区域，支持从顶部、左侧、右侧滑入。点击遮罩层可关闭抽屉。
+
+## 引用方式
+
+```js
+import CDrawer from '@components/layout/drawer';
+```
+
+## 组件参数
+
+- `show` (Boolean，必选)：控制抽屉显示或隐藏，默认值为 false
+- `direction` (String，可选)：抽屉滑出方向，默认值为 'right'
+ - `top`：从顶部滑出
+ - `left`：从左侧滑出
+ - `right`：从右侧滑出
+- `onClose` (Function，必选)：抽屉关闭时的回调函数，通常用于设置 show 为 false
+
+## 使用示例
+
+### 基础用法 - 从右侧滑出
+
+```html
+<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>
+```
+
+### 从左侧滑出的抽屉
+
+```html
+<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>
+```
+
+### 从顶部滑出的抽屉
+
+```html
+<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. 当前版本的组件不支持从底部滑出的抽屉，如有需要可考虑扩展组件
+
+<!-- 作者：Tevin -->
\ No newline at end of file
--
Gitblit v1.9.1