top-dropdown

top-dropdown:顶部下拉弹层

组件结构

  1. <template>
  2. <view>
  3. <view class="tui-top-dropdown tui-dropdown-box" :class="[show?'tui-dropdown-show':'']" :style="{height:height?px(height):'auto', background: bgcolor,paddingBottom: px(paddingbtm),transform: 'translateZ(0) translateY('+(show?px(translatey):'-100%')+')'}">
  4. <slot></slot>
  5. </view>
  6. <view class="tui-dropdown-mask" :class="[mask && show ?'tui-mask-show':'']" @tap="handleClose"></view>
  7. </view>
  8. </template>

组件脚本

  1. <script>
  2. export default {
  3. name: "tuiTopDropdown",
  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: "#f2f2f2"
  19. },
  20. //padding-bottom upx
  21. paddingbtm: {
  22. type: Number,
  23. default: 0
  24. },
  25. //高度 upx
  26. height: {
  27. type: Number,
  28. default: 580
  29. },
  30. //移动距离 需要计算
  31. translatey: {
  32. type: Number,
  33. default: 0
  34. }
  35. },
  36. methods: {
  37. handleClose() {
  38. if (!this.show) {
  39. return;
  40. }
  41. this.$emit('close', {});
  42. },
  43. px(num) {
  44. return uni.upx2px(num) + "px"
  45. }
  46. }
  47. }
  48. </script>

组件样式

... 此处省略n行

脚本说明

 props: 
     "mask":是否需要遮罩,类型:"Boolean",默认值:true
     "show":控制显示,类型:"Boolean",默认值:false
     "bgcolor":弹层背景颜色,类型:"String",默认值:"#f2f2f2"
     "paddingbtm":padding-bottom upx,类型:"Number",默认值:0
     "height":高度 upx,类型:"Number",默认值:580
     "translatey":移动距离,类型:"Number",默认值:0

 methods:
   "handleClose":关闭弹层
   "px":upx转换为px,已经支持rpx,且支持动态绑定

示例

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