项目初始化

gaoluyang

3 天以前 92230c9a97dc9ce9df3313d11d26999c04bb6b26

 src/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" >
   $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>