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"
  6. methods:
  7. "handleMaskClick":点击事件,关闭抽屉

示例

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

card dropdown-list