drawer

Drawer 抽屉

组件结构

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

组件脚本

  1. <script>
  2. exportdefault{
  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