实现抽屉公共组件，代替TaroUI的抽屉

Tevin

2021-09-23 664d69fbe574bfaf3862d4804390e4b77df9fc19

实现抽屉公共组件，代替TaroUI的抽屉

 layout/drawer/CDrawer.vue

New file
@@ -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>

 layout/drawer/cDrawer.scss

New file
@@ -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%);
        }
    }
}

 layout/drawer/index.js

New file
@@ -0,0 +1,10 @@
/**
 * CDrawer
 * @author Tevin
 */

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

export {
    CDrawer,
}