From fed0a1edd770e01db125d9ab0c12e73640b15cd4 Mon Sep 17 00:00:00 2001
From: whycq <913841844@qq.com>
Date: 星期五, 10 五月 2024 19:18:23 +0800
Subject: [PATCH] #
---
uni_modules/uni-drawer/components/uni-drawer/uni-drawer.vue | 183 +++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 183 insertions(+), 0 deletions(-)
diff --git a/uni_modules/uni-drawer/components/uni-drawer/uni-drawer.vue b/uni_modules/uni-drawer/components/uni-drawer/uni-drawer.vue
new file mode 100644
index 0000000..2471521
--- /dev/null
+++ b/uni_modules/uni-drawer/components/uni-drawer/uni-drawer.vue
@@ -0,0 +1,183 @@
+<template>
+ <view v-if="visibleSync" :class="{ 'uni-drawer--visible': showDrawer }" class="uni-drawer" @touchmove.stop.prevent="clear">
+ <view class="uni-drawer__mask" :class="{ 'uni-drawer__mask--visible': showDrawer && mask }" @tap="close('mask')" />
+ <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>
+ <!-- #ifdef H5 -->
+ <keypress @esc="close('mask')" />
+ <!-- #endif -->
+ </view>
+</template>
+
+<script>
+ // #ifdef H5
+ import keypress from './keypress.js'
+ // #endif
+ /**
+ * Drawer 鎶藉眽
+ * @description 鎶藉眽渚ф粦鑿滃崟
+ * @tutorial https://ext.dcloud.net.cn/plugin?id=26
+ * @property {Boolean} mask = [true | false] 鏄惁鏄剧ず閬僵
+ * @property {Boolean} maskClick = [true | false] 鐐瑰嚮閬僵鏄惁鍏抽棴
+ * @property {Boolean} mode = [left | right] Drawer 婊戝嚭浣嶇疆
+ * @value left 浠庡乏渚ф粦鍑�
+ * @value right 浠庡彸渚т晶婊戝嚭
+ * @property {Number} width 鎶藉眽鐨勫搴� 锛屼粎 vue 椤甸潰鐢熸晥
+ * @event {Function} close 缁勪欢鍏抽棴鏃惰Е鍙戜簨浠�
+ */
+ export default {
+ name: 'UniDrawer',
+ components: {
+ // #ifdef H5
+ keypress
+ // #endif
+ },
+ emits:['change'],
+ props: {
+ /**
+ * 鏄剧ず妯″紡锛堝乏銆佸彸锛夛紝鍙湪鍒濆鍖栫敓鏁�
+ */
+ mode: {
+ type: String,
+ default: ''
+ },
+ /**
+ * 钂欏眰鏄剧ず鐘舵��
+ */
+ mask: {
+ type: Boolean,
+ default: true
+ },
+ /**
+ * 閬僵鏄惁鍙偣鍑诲叧闂�
+ */
+ maskClick:{
+ type: Boolean,
+ default: true
+ },
+ /**
+ * 鎶藉眽瀹藉害
+ */
+ width: {
+ type: Number,
+ default: 220
+ }
+ },
+ data() {
+ return {
+ visibleSync: false,
+ showDrawer: false,
+ rightMode: false,
+ watchTimer: null,
+ drawerWidth: 220
+ }
+ },
+ created() {
+ // #ifndef APP-NVUE
+ this.drawerWidth = this.width
+ // #endif
+ this.rightMode = this.mode === 'right'
+ },
+ methods: {
+ clear(){},
+ close(type) {
+ // fixed by mehaotian 鎶藉眽灏氭湭瀹屽叏鍏抽棴鎴栭伄缃╃姝㈢偣鍑绘椂涓嶈Е鍙戜互涓嬮�昏緫
+ if((type === 'mask' && !this.maskClick) || !this.visibleSync) return
+ this._change('showDrawer', 'visibleSync', false)
+ },
+ open() {
+ // fixed by mehaotian 澶勭悊閲嶅鐐瑰嚮鎵撳紑鐨勪簨浠�
+ if(this.visibleSync) return
+ this._change('visibleSync', 'showDrawer', true)
+ },
+ _change(param1, param2, status) {
+ this[param1] = status
+ if (this.watchTimer) {
+ clearTimeout(this.watchTimer)
+ }
+ this.watchTimer = setTimeout(() => {
+ this[param2] = status
+ this.$emit('change',status)
+ }, status ? 50 : 300)
+ }
+ }
+ }
+</script>
+
+<style lang="scss" scoped>
+ $uni-mask: rgba($color: #000000, $alpha: 0.4) ;
+ // 鎶藉眽瀹藉害
+ $drawer-width: 220px;
+
+ .uni-drawer {
+ /* #ifndef APP-NVUE */
+ display: block;
+ /* #endif */
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ overflow: hidden;
+ z-index: 999;
+ }
+
+ .uni-drawer__content {
+ /* #ifndef APP-NVUE */
+ display: block;
+ /* #endif */
+ position: absolute;
+ top: 0;
+ width: $drawer-width;
+ bottom: 0;
+ background-color: $uni-bg-color;
+ transition: transform 0.3s ease;
+ }
+
+ .uni-drawer--left {
+ left: 0;
+ /* #ifdef APP-NVUE */
+ transform: translateX(-$drawer-width);
+ /* #endif */
+ /* #ifndef APP-NVUE */
+ transform: translateX(-100%);
+ /* #endif */
+ }
+
+ .uni-drawer--right {
+ right: 0;
+ /* #ifdef APP-NVUE */
+ transform: translateX($drawer-width);
+ /* #endif */
+ /* #ifndef APP-NVUE */
+ transform: translateX(100%);
+ /* #endif */
+ }
+
+ .uni-drawer__content--visible {
+ transform: translateX(0px);
+ }
+
+
+ .uni-drawer__mask {
+ /* #ifndef APP-NVUE */
+ display: block;
+ /* #endif */
+ opacity: 0;
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ right: 0;
+ background-color: $uni-mask;
+ transition: opacity 0.3s;
+ }
+
+ .uni-drawer__mask--visible {
+ /* #ifndef APP-NVUE */
+ display: block;
+ /* #endif */
+ opacity: 1;
+ }
+</style>
--
Gitblit v1.9.1