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行,下载源码查看