Panel面板

    引入

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

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

    代码演示

    基础用法

    1. <vtu-panel title="标题内容">
    2.   <view>内容</view>
    3. </vtu-panel>
    5. <vtu-panel>
    6.     <vtu-cell slot="header" title="开关" icon="iconfont icon-kefu" icon-color="#1989fa" border value="{{switch}}" type="switch"></vtu-cell>
    7.     <view>内容</view>
    8. </vtu-panel>
    10. <vtu-panel>
    11.   <vtu-cell slot="header" title="标题显示" value="状态" valueColor="#f44" border content="详细的描述信息"></vtu-cell>
    12.   <view>内容</view>
    13. </vtu-panel>
    14.

    高级用法

    1. <vtu-panel round l_show="{{loading}}" l_label="加载中.." use-footer-slot>
    2.   <vtu-radio-group model="{{1}}">
    3.     <vtu-radio value="1" label="北京" icon="iconfont icon-biaoxing" ></vtu-radio>
    4.     <vtu-radio value="2" label="上海" icon="iconfont icon-xihuan" ></vtu-radio>
    5.     <vtu-radio value="3" label="深圳" icon="iconfont icon-sousuo"></vtu-radio>
    6.     <vtu-radio value="4" label="南京" icon="iconfont icon-shangchuan"></vtu-radio>
    7.   </vtu-radio-group>
    8.   <vtu-btn slot="footer" type="primary" size="small" bind:click="startLoading">点击加载</vtu-btn>
    9. </vtu-panel>
    11. <vtu-panel round l_show="{{loading}}" l_img="/assets/image/wait.gif" l_label="加载中.." use-footer-slot>
    12.   <vtu-radio-group model="{{1}}">
    13.     <vtu-radio value="1" label="北京" icon="iconfont icon-biaoxing" ></vtu-radio>
    14.     <vtu-radio value="2" label="上海" icon="iconfont icon-xihuan" ></vtu-radio>
    15.     <vtu-radio value="3" label="深圳" icon="iconfont icon-sousuo"></vtu-radio>
    16.     <vtu-radio value="4" label="南京" icon="iconfont icon-shangchuan"></vtu-radio>
    17.   </vtu-radio-group>
    18.   <vtu-btn slot="footer" type="primary" size="small" bind:click="startLoading">点击加载</vtu-btn>
    19. </vtu-panel>
    21. <vtu-panel use-footer-slot="true" round>
    22.   <vtu-cell slot="header" title="普通信息" value="状态" valueColor="#f44" border round></vtu-cell>
    23.   <view>内容</view>
    24.   <view slot="footer" class="footBtn">
    25.     <vtu-btn type="primary" size="small" inline-block="true">确定</vtu-btn>
    26.     <vtu-btn size="small" inline-block="true">取消</vtu-btn>
    27.   </view>
    28. </vtu-panel>
    29.

    组件参数

    Props

    参数说明类型默认值必填
    title面板标题String-否
    bg-color面板背景色String#fff否
    use-footer-slot是否使用底部插槽Booleanfalse否
    shadow阴影Booleanfalse否
    card卡片样式Booleanfalse否

    Slot插槽

    名称说明必填
    header标题插槽否
    footer底部插槽否

    外部样式类

    外部样式类名说明
    v-class组件外部样式类

    Panel 面板 - 图1