drawer

Drawer 抽屉

组件结构

  1. <template>
  2.     <view class="tui-drawer-class tui-drawer" :class="[visible ? 'tui-drawer-show' : '','tui-drawer-' + mode]">
  3.         <view v-if="mask" class="tui-drawer-mask" @tap="handleMaskClick"></view>
  4.         <view class="tui-drawer-container">
  5.             <slot></slot>
  6.         </view>
  7.     </view>
  8. </template>

组件脚本

  1. <script>
  2.     export default {
  3.         name:"tuiDrawer",
  4.         props: {
  5.             visible: {
  6.                 type: Boolean,
  7.                 default: false
  8.             },
  9.             mask: {
  10.                 type: Boolean,
  11.                 default: true
  12.             },
  13.             maskClosable: {
  14.                 type: Boolean,
  15.                 default: true
  16.             },
  17.             mode: {
  18.                 type: String,
  19.                 default: 'left' // left right
  20.             }
  21.         },
  22.         methods: {
  23.             handleMaskClick() {
  24.                 if (!this.maskClosable) {
  25.                     return;
  26.                 }
  27.                 this.$emit('close', {});
  28.             }
  29.         }
  30.     }
  31. </script>

组件样式

  1. ... 此处省略n行

脚本说明

  1.  props: 
  2.      "visible" : 是否显示抽屉,类型:"Boolean",默认值:false    
  3.      "mask" :是否需要mask， 类型:"Boolean",默认值:true    
  4.      "maskClosable" :遮罩是否可点击,类型:"Boolean",默认值:true
  5.      "mode":左抽屉还是右抽屉，可传入[left right]，类型:"String",默认值:"left"
  7.  methods:
  8.    "handleMaskClick":点击事件，关闭抽屉

示例

  1. ... 此处省略n行,下载源码查看