From 664d69fbe574bfaf3862d4804390e4b77df9fc19 Mon Sep 17 00:00:00 2001
From: Tevin <tingquanren@163.com>
Date: Thu, 23 Sep 2021 17:32:27 +0800
Subject: [PATCH] 实现抽屉公共组件，代替TaroUI的抽屉
---
layout/drawer/CDrawer.vue | 47 +++++++++++++++
layout/drawer/cDrawer.scss | 76 +++++++++++++++++++++++++
layout/drawer/index.js | 10 +++
3 files changed, 133 insertions(+), 0 deletions(-)
diff --git a/layout/drawer/CDrawer.vue b/layout/drawer/CDrawer.vue
new file mode 100644
index 0000000..d84adc2
--- /dev/null
+++ b/layout/drawer/CDrawer.vue
@@ -0,0 +1,47 @@
+/**
+ * CDrawer - 抽屉
+ * @author Tevin
+ */
+
+<template>
+ <view
+ class="c-drawer"
+ :class="[show?'c-drawer-show':'', 'c-drawer-' + direction]"
+ >
+ <view
+ class="c-drawer-mask"
+ @tap="evt => handleClose()"
+ ></view>
+ <view class="c-drawer-container">
+ <slot />
+ </view>
+ </view>
+</template>
+
+<script>
+import Taro from '@tarojs/taro';
+import {} from 'taro-ui-vue';
+import './cDrawer.scss';
+
+export default {
+ name: 'CDrawer',
+ components: {},
+ props: {
+ // 显示隐藏
+ show: { type: Boolean, default: false },
+ // 从哪个方向滑出，支持 top、left、right
+ direction: { type: String, default: 'right' },
+ // 关闭回调
+ onClose: Function,
+ },
+ data() {
+ return {};
+ },
+ methods: {
+ handleClose() {
+ this.onClose();
+ },
+ },
+ mounted() {},
+};
+</script>
diff --git a/layout/drawer/cDrawer.scss b/layout/drawer/cDrawer.scss
new file mode 100644
index 0000000..152c574
--- /dev/null
+++ b/layout/drawer/cDrawer.scss
@@ -0,0 +1,76 @@
+/**
+ * drawer
+ * @author Tevin
+ */
+
+@import "../../common/sassMixin";
+
+.c-drawer {
+ @include position(fixed, 0 0 0 0, 9000);
+ pointer-events: none;
+ &.c-drawer-show {
+ pointer-events: all;
+ .c-drawer-mask {
+ display: block;
+ opacity: 1;
+ }
+ .c-drawer-container {
+ opacity: 1;
+ }
+ }
+ .c-drawer-mask {
+ display: none;
+ @include position(absolute, 0 0 0 0);
+ background-color: rgba(0, 0, 0, 0.3);
+ opacity: 0;
+ transition: opacity 300ms cubic-bezier(0.36, 0.66, 0.04, 1);
+ &:active {
+ background-color: rgba(0, 0, 0, 0.25);
+ }
+ }
+ .c-drawer-container {
+ @include position(absolute, 0 n 0 0, 1);
+ width: 550px;
+ text-align: left;
+ opacity: 0;
+ background-color: #FFF;
+ overflow-y: auto;
+ -webkit-overflow-scrolling: touch;
+ transition: all 225ms cubic-bezier(0, 0, 0.2, 1);
+ }
+ &.c-drawer-left {
+ &.c-drawer-show {
+ .c-drawer-container {
+ transform: translateX(0%);
+ }
+ }
+ .c-drawer-container {
+ left: 0;
+ transform: translateX(-100%);
+ }
+ }
+ &.c-drawer-right {
+ &.c-drawer-show {
+ .c-drawer-container {
+ transform: translateX(0%);
+ }
+ }
+ .c-drawer-container {
+ right: 0;
+ transform: translateX(100%);
+ }
+ }
+ &.c-drawer-top {
+ &.c-drawer-show {
+ .c-drawer-container {
+ transform: translateY(0%);
+ }
+ }
+ .c-drawer-container {
+ width: 100%;
+ min-height: 200px;
+ bottom: auto;
+ transform: translateY(-100%);
+ }
+ }
+}
\ No newline at end of file
diff --git a/layout/drawer/index.js b/layout/drawer/index.js
new file mode 100644
index 0000000..cf7ddcf
--- /dev/null
+++ b/layout/drawer/index.js
@@ -0,0 +1,10 @@
+/**
+ * CDrawer
+ * @author Tevin
+ */
+
+import CDrawer from '@components/layout/drawer/CDrawer.vue';
+
+export {
+ CDrawer,
+}
\ No newline at end of file
--
Gitblit v1.9.1