123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178 |
- <template>
- <view v-if="visibleSync" :class="{ 'uni-drawer--visible': showDrawer }" class="uni-drawer">
- <view class="uni-drawer__mask" :class="{ 'uni-drawer__mask--visible': showDrawer && mask }" @tap="close" />
- <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>
- </view>
- </template>
- <script>
-
- export default {
- name: 'UniDrawer',
- props: {
-
- visible: {
- type: Boolean,
- default: false
- },
-
- mode: {
- type: String,
- default: ''
- },
-
- mask: {
- type: Boolean,
- default: true
- },
-
- width: {
- type: Number,
- default: 220
- }
- },
- data() {
- return {
- visibleSync: false,
- showDrawer: false,
- rightMode: false,
- watchTimer: null,
- drawerWidth: 220
- }
- },
- watch: {
- visible(val) {
- if (val) {
- this.open()
- } else {
- this.close()
- }
- }
- },
- created() {
-
- this.drawerWidth = this.width
-
- this.visibleSync = this.visible
- setTimeout(() => {
- this.showDrawer = this.visible
- }, 100)
- this.rightMode = this.mode === 'right'
- },
- methods: {
- close() {
- this._change('showDrawer', 'visibleSync', false)
- },
- open() {
- 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(status ? 'open' : 'close')
- }, status ? 50 : 300)
- }
- }
- }
- </script>
- <style lang="scss" scoped>
-
- $drawer-width: 220px;
- .uni-drawer {
-
- display: block;
-
- position: fixed;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- overflow: hidden;
- z-index: 999;
- }
- .uni-drawer__content {
-
- display: block;
-
- position: absolute;
- top: 0;
- width: $drawer-width;
- bottom: 0;
- background-color: $uni-bg-color;
- transition: transform 0.3s ease;
- }
- .uni-drawer--left {
- left: 0;
-
- transform: translateX(-$drawer-width);
-
-
- transform: translateX(-100%);
-
- }
- .uni-drawer--right {
- right: 0;
-
- transform: translateX($drawer-width);
-
-
- transform: translateX(100%);
-
- }
- .uni-drawer__content--visible {
- transform: translateX(0px);
- }
- .uni-drawer__mask {
-
- display: block;
-
- opacity: 0;
- position: absolute;
- top: 0;
- left: 0;
- bottom: 0;
- right: 0;
- background-color: $uni-bg-color-mask;
- transition: opacity 0.3s;
- }
- .uni-drawer__mask--visible {
-
- display: block;
-
- opacity: 1;
- }
- </style>
|