Prop弹出面板

    引入

    在app.json或index.json中引入组件,默认为ES6版本

    1. "usingComponents": {
    2. "vtu-prop": "/miniprogram_npm/vtuweapp/prop/vtu-prop"
    3. }

    代码演示

    底部弹出

    1. <vtu-prop title="底部弹出" show="{{show1}}" show-cancel cancel-type="primary" cancel-label="完成">
    2. <view class="prop-content">这里是显示内容</view>
    3. </vtu-prop>

    固定高度

    1. <vtu-prop title="固定高度" show="{{show2}}" height="300px">
    2. <view class="prop-content">
    3. <view class="prop-content-li" wx:for="{{20}}">这里是显示内容</view>
    4. </view>
    5. </vtu-prop>

    设置最大高度

    1. <vtu-prop title="设置最大高度" show="{{show3}}" max-height="300px">
    2. <view class="prop-content auto">
    3. <view class="prop-content-li" wx:for="{{5}}">这里是显示内容</view>
    4. </view>
    5. </vtu-prop>

    固定顶端底端

    1. <vtu-prop title="固定顶端底端" show="{{show4}}" max-height="300px">
    2. <view class="prop-header" slot="header"></view>
    3. <view class="prop-content">
    4. <view class="prop-content-li" wx:for="{{20}}">这里是显示内容</view>
    5. </view>
    6. <view class="prop-footer" slot="footer"></view>
    7. </vtu-prop>

    组件参数

    Props

    参数说明类型默认值必填
    title标题String-
    show是否显示Booleanfalse
    closeOnClickOverlay点击遮罩是否关闭菜单Booleantrue
    width宽度String-
    height高度String-
    maxHeight最大高度String400px
    showCancel显示关闭按钮Booleanfalse
    cancelLabel关闭按钮文字String取消
    cancelType关闭按钮类型Stringdefault
    position位置,bottomtopleftrightStringbottom
    closeable是否显示关闭图标Booleantrue

    Prop 弹出面板 - 图1