bottom-popup

bottom-popup 底部弹出层

组件结构

  1. <template>
  2. <view>
  3. <view class="tui-popup-class tui-bottom-popup" :class="{'tui-popup-show':show}" :style="{background:bgcolor,height:height?px(height):'auto'}">
  4. <slot></slot>
  5. </view>
  6. <view class="tui-popup-mask" :class="[show?'tui-mask-show':'']" v-if="mask" @tap="handleClose"></view>
  7. </view>
  8. </template>

组件脚本

  1. <script>
  2. export default {
  3. name:"tuiBottomPopup",
  4. props: {
  5. //是否需要mask
  6. mask: {
  7. type: Boolean,
  8. default: true
  9. },
  10. //控制显示
  11. show: {
  12. type: Boolean,
  13. default: false
  14. },
  15. //背景颜色
  16. bgcolor: {
  17. type: String,
  18. default: "#fff"
  19. },
  20. //高度 upx
  21. height: {
  22. type: Number,
  23. default: 0
  24. }
  25. },
  26. methods: {
  27. handleClose() {
  28. if (!this.show) {
  29. return;
  30. }
  31. this.$emit('close', {});
  32. },
  33. px(num){
  34. return uni.upx2px(num) + 'px'
  35. }
  36. }
  37. }
  38. </script>

组件样式

... 此处省略n行

脚本说明

 props: 
     "mask" : 是否需要mask, 类型:"Boolean",默认值:true    
     "show" :控制显示, 类型:"Boolean",默认值:false
     "bgcolor" :背景颜色,类型:"String",默认值:"#fff"
     "height":高度 upx,类型:"Number",默认值:0(0表示auto)

 methods:
   "handleClose":隐藏关闭bottom-popup
   "px":upx转换为px,现在支持动态绑定rpx,后续会去掉

示例

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

badge button