Prop弹出面板
引入
在app.json或index.json中引入组件,默认为ES6版本
"usingComponents": {
"vtu-prop": "/miniprogram_npm/vtuweapp/prop/vtu-prop"
}
代码演示
底部弹出
<vtu-prop title="底部弹出" show="{{show1}}" show-cancel cancel-type="primary" cancel-label="完成">
<view class="prop-content">这里是显示内容</view>
</vtu-prop>
固定高度
<vtu-prop title="固定高度" show="{{show2}}" height="300px">
<view class="prop-content">
<view class="prop-content-li" wx:for="{{20}}">这里是显示内容</view>
</view>
</vtu-prop>
设置最大高度
<vtu-prop title="设置最大高度" show="{{show3}}" max-height="300px">
<view class="prop-content auto">
<view class="prop-content-li" wx:for="{{5}}">这里是显示内容</view>
</view>
</vtu-prop>
固定顶端底端
<vtu-prop title="固定顶端底端" show="{{show4}}" max-height="300px">
<view class="prop-header" slot="header"></view>
<view class="prop-content">
<view class="prop-content-li" wx:for="{{20}}">这里是显示内容</view>
</view>
<view class="prop-footer" slot="footer"></view>
</vtu-prop>
组件参数
Props
参数 | 说明 | 类型 | 默认值 | 必填 |
---|
title | 标题 | String | - | 否 |
show | 是否显示 | Boolean | false | 否 |
closeOnClickOverlay | 点击遮罩是否关闭菜单 | Boolean | true | 否 |
width | 宽度 | String | - | 否 |
height | 高度 | String | - | 否 |
maxHeight | 最大高度 | String | 400px | 否 |
showCancel | 显示关闭按钮 | Boolean | false | 否 |
cancelLabel | 关闭按钮文字 | String | 取消 | 否 |
cancelType | 关闭按钮类型 | String | default | 否 |
position | 位置,bottom top left right | String | bottom | 否 |
closeable | 是否显示关闭图标 | Boolean | true | 否 |