跳到主要内容
Page
Page 必须是 CabinX 中页面的根节点，一个页面 DML 文件中有且仅有一个 Page 组件，在系统中 Page 会默认撑满容器。
用法
样式
可访问性

示例​

基础用法​

page支持设置回退按钮backspace，标题title，副标题subtitle，一个有语义的标签status，多个无语义的标签tag。

PCPhonePad
<page title="标题"
      subtitle="副标题"
      backspace
      tips="{{listTips}}"
      beforeBack="{{beforeBackAsync}}"
      tag="{{tag}}"
      status="{{label:'语义tag',status:'success'}}">
    <actions>
       <button text="页面级按钮1"></button>
       <button text="页面级按钮2"></button>
       <button text="页面级按钮3"></button>
    </actions>    
</page>

export default XPage({
   data: {
        tag:[
            {label:'无语义tag',status:'red'},
            {label:'无语义tag',status:'blue'},
            {label:'无语义tag',status:'orange'},
            {label:'无语义tag',status:'yellow'},
            {label:'无语义tag',status:'green'},
        ],
        listTips: {
            title: '列表类型tips',
            list: [
                '文案类型1',
                {type: 'string', value: '文案类型2'},
                {type: 'image', src: 'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg'},
                {type: 'link', text: '链接类型', link: 'http://www.baidu.com'}
            ]
        }
   },
   show() {},
   beforeBackAsync() {
       return new Promise((resolve) => {
           CabinX.confirm({
               title: '系统提示',
               text: '是否返回'
           }, resolve);
       });
   },
});


提示信息notice​

page支持固定展示提示信息。可在XPage中调用this.notice(...)实现。具体配置参考下表Methods。

PCPhonePad
<page title="标题"
      subtitle="副标题"
      backspace
      tips="提示信息"
      tag="{{tag}}"
      status="{{label:'语义tag',status:'success'}}">
    <actions>
       <button text="默认notice" @click="openNotice()"></button>
       <button text="警告notice" @click="openNotice('warning')"></button>
       <button text="错误notice" @click="openNotice('error')"></button>
       <button text="成功notice" @click="openNotice('success')"></button>
       <button text="关闭notice" @click="closeNotice"></button>
    </actions>    
</page>

export default XPage({
   data: {
        tag:[
            {label:'无语义tag',status:'red'},
            {label:'无语义tag',status:'blue'},
            {label:'无语义tag',status:'orange'},
            {label:'无语义tag',status:'yellow'},
            {label:'无语义tag',status:'green'},
        ]
   },
   show() {}, 
   openNotice(status) {
       let text='';
       switch(status){
           case 'warning':
               text='我是警告的提示信息!';
               break;               
           case 'error':
               text='我是错误的提示信息!';
               break;               
           case 'success':
               text='我是成功的提示信息!';
               break;
           default:
               text='我是默认的提示信息!';
               break;
       }
       const buttonOptions=[
           {text:'按钮',click:()=>{console.info('点击按钮')}}
       ];
       this.notice({text,status,buttonOptions,closable: true});
   },
   closeNotice() {
       this.hideNotice();
   },
});


多种模式​

page支持多种展示模式，通过设置mode实现。摘要模式digest时需要在page下第一层指定一个module为摘要模块。默认为通用模式。

PCPhonePad
<x-page
    title="{{pageTitle}}"
    subtitle='副标题'
    tips='提示'
    backspace
    mode="{{mode}}"
>
    <x-actions>
        <x-select bind-changed="handleSelectMode" data="{{modeList}}" value="{{mode}}"></x-select>
        <x-button text='TR button'></x-button>
        <x-button text='TR button'></x-button>
        <x-button text='TR button'></x-button>
        <x-button text='TR button'></x-button>
    </x-actions>
    
    <x-head height="100px">head</x-head>
    <x-left>left</x-left>
    <x-bottom height="100px">bottom</x-bottom>
    
    <!--内容-->
    
    <!--摘要模块-->
    <x-module title="Module Title" v-if="mode === 'digest'" digest subtitle="摘要">
        <x-form layout="horizontal" confirm-button="{{false}}" clear-button="{{false}}">
            <x-item label="Label" :colspan="{span:6}" value="placeholder"></x-item>
            <x-item label="Label" :colspan="{span:6}" value="placeholder"></x-item>
            <x-item label="Label" :colspan="{span:6}" value="placeholder"></x-item>
            <x-item label="Label" :colspan="{span:6}" value="placeholder"></x-item>
            <x-item label="Label" :colspan="{span:6}" value="placeholder"></x-item>
            <x-item label="Label" :colspan="{span:6}" value="placeholder"></x-item>
            <x-item label="Label" :colspan="{span:6}" value="placeholder"></x-item>
            <x-item label="Label" :colspan="{span:6}" value="placeholder"></x-item>
            <x-item label="Label" :colspan="{span:6}" value="placeholder"></x-item>
            <x-item label="Label" :colspan="{span:6}" value="placeholder"></x-item>
        </x-form>
    </x-module>
    <!--摘要模块 end-->
    
    <x-module title="Module Title">
        <x-form layout="horizontal" confirm-button="{{false}}" clear-button="{{false}}">
            <x-item label="Label" :colspan="{span:2}" node="input" placeholder="placeholder"></x-item>
            <x-item label="Label" :colspan="{span:2}" node="input" placeholder="placeholder"></x-item>
            <x-item label="Label" :colspan="{span:2}" node="input" placeholder="placeholder"></x-item>
            <x-item label="Label" :colspan="{span:3}" node="input" placeholder="placeholder"></x-item>
            <x-item label="Label" :colspan="{span:3}" node="input" placeholder="placeholder"></x-item>
            <x-item label="Label" :colspan="{span:6}" node="input" placeholder="placeholder"></x-item>
            <x-item label="Label" node="radio" layout="vertical" default-value='{{1}}' :data="[{label: 'Label', value: 1},{label: 'Label', value: 2},{label: 'Label', value: 3}]"></x-item>
        </x-form>
    </x-module>
    <x-module title="Module Title">
        <x-form layout="horizontal" confirm-button="{{false}}" clear-button="{{false}}">
            <x-item label="Label" :colspan="{span:2}" node="input" placeholder="placeholder"></x-item>
            <x-item label="Label" :colspan="{span:2}" node="input" placeholder="placeholder"></x-item>
            <x-item label="Label" :colspan="{span:2}" node="input" placeholder="placeholder"></x-item>
            <x-item label="Label" :colspan="{span:3}" node="input" placeholder="placeholder"></x-item>
            <x-item label="Label" :colspan="{span:3}" node="input" placeholder="placeholder"></x-item>
            <x-item label="Label" :colspan="{span:6}" node="input" placeholder="placeholder"></x-item>
            <x-item label="Label" node="radio" layout="vertical" default-value='{{1}}' :data="[{label: 'Label', value: 1},{label: 'Label', value: 2},{label: 'Label', value: 3}]"></x-item>
        </x-form>
    </x-module>
    <x-module title="Module Title">
        <x-form layout="horizontal" confirm-button="{{false}}" clear-button="{{false}}">
            <x-item label="Label" :colspan="{span:2}" node="input" placeholder="placeholder"></x-item>
            <x-item label="Label" :colspan="{span:2}" node="input" placeholder="placeholder"></x-item>
            <x-item label="Label" :colspan="{span:2}" node="input" placeholder="placeholder"></x-item>
            <x-item label="Label" :colspan="{span:3}" node="input" placeholder="placeholder"></x-item>
            <x-item label="Label" :colspan="{span:3}" node="input" placeholder="placeholder"></x-item>
            <x-item label="Label" :colspan="{span:6}" node="input" placeholder="placeholder"></x-item>
            <x-item label="Label" node="radio" layout="vertical" default-value='{{1}}' :data="[{label: 'Label', value: 1},{label: 'Label', value: 2},{label: 'Label', value: 3}]"></x-item>
        </x-form>
    </x-module>
    <x-module title="Module Title">
        <x-form layout="horizontal" confirm-button="{{false}}" clear-button="{{false}}">
            <x-item label="Label" :colspan="{span:2}" node="input" placeholder="placeholder"></x-item>
            <x-item label="Label" :colspan="{span:2}" node="input" placeholder="placeholder"></x-item>
            <x-item label="Label" :colspan="{span:2}" node="input" placeholder="placeholder"></x-item>
            <x-item label="Label" :colspan="{span:3}" node="input" placeholder="placeholder"></x-item>
            <x-item label="Label" :colspan="{span:3}" node="input" placeholder="placeholder"></x-item>
            <x-item label="Label" :colspan="{span:6}" node="input" placeholder="placeholder"></x-item>
            <x-item label="Label" node="radio" layout="vertical" default-value='{{1}}' :data="[{label: 'Label', value: 1},{label: 'Label', value: 2},{label: 'Label', value: 3}]"></x-item>
        </x-form>
    </x-module>
    <x-module title="Module Title">
        <x-form layout="horizontal" confirm-button="{{false}}" clear-button="{{false}}">
            <x-item label="Label" :colspan="{span:2}" node="input" placeholder="placeholder"></x-item>
            <x-item label="Label" :colspan="{span:2}" node="input" placeholder="placeholder"></x-item>
            <x-item label="Label" :colspan="{span:2}" node="input" placeholder="placeholder"></x-item>
            <x-item label="Label" :colspan="{span:3}" node="input" placeholder="placeholder"></x-item>
            <x-item label="Label" :colspan="{span:3}" node="input" placeholder="placeholder"></x-item>
            <x-item label="Label" :colspan="{span:6}" node="input" placeholder="placeholder"></x-item>
            <x-item label="Label" node="radio" layout="vertical" default-value='{{1}}' :data="[{label: 'Label', value: 1},{label: 'Label', value: 2},{label: 'Label', value: 3}]"></x-item>
        </x-form>
    </x-module>
    
    <!--内容 end-->
</x-page>


const ModeMap = {
    digest: "摘要模式",
    focus: "聚焦模式",
    normal: "通用模式",
}
const DefaultMode = 'digest';

export default XPage({
    data: {
        mode: DefaultMode,
        pageTitle: ModeMap[DefaultMode],
        modeList: Object.keys(ModeMap).map((key)=> {
            return {
                label: ModeMap[key],
                value: key,
            }
        }),
    },
    handleSelectMode(value){
        this.setData({
            mode: value,
            pageTitle: ModeMap[value]
        });
    },
    show() {
        
    },
});



Attributes​

属性说明类型可选值默认值端版本
title页面标题String----PC/Mobile--
subtitle页面副标题String----PC--
backspace页面返回按钮，点击默认返回上一个页面，值为hash字符串时，点击跳转到对应链接地址String/Boolean----PC--
beforeBack执行返回按钮点击事件前的函数，返回false可阻止返回Function----PC--
tips悬浮提示信息String/TipsObject----PC--
tag无语义标签，可通过配置数组展示多个，其中label为展示文案,status为标签颜色，取值参考基础组件Tag类型为normal时的可选项String/Array[{lable:String,status:String}}]----PC--
status有语义的标签，只能展示一个。可通过对象配置，其中label为展示文案，status为标签语义，取值参考基础组件Tag类型为status时的可选项String/Object<{lable:String,status:String}>----PC--
mode模式，当为digest摘要模式时，需要在page下第一层为module的子元素中指定一个为摘要模块（即在module组件上设置属性digest）Stringdigest:摘要/focus:聚焦/normal:通用--PC--

Attributes - TipsObject​

参数说明类型可选值默认值
titletips的标题string
listtips的标题内容的数据array
list[i].typetips的标题每个数据项的展示类型stringstring/image/link
list[i].valuelist[i].type为string的展示的文案string
list[i].srclist[i].type为image图片的urlstring
list[i].linklist[i].type为link链接的urlstring
list[i].textlist[i].type为link链接的urlstring

Methods​

不同于pop等容器组件，page的对外函数调用需要通过XPage的this对象，如下示例

this.notice({text: '我是提示信息', closable: true, status}
名称说明入参返回端版本
notice显示容器提示信息，支持最多两个操作按钮，入参参考下表----PC/Mobile--
hideNotice关闭提示----PC/Mobile--

Methods - notice​

notice函数支持的入参如下

属性说明类型可选值默认值端版本
text通知信息String----PC/Mobile--
status状态Stringinfo/success/worning/errorinfoPC/Mobile--
buttonOptions操作按钮，最多支持两个按钮Array[{text:String<按钮文案>,click:Function<点击回调>}]----PC/Mobile--
closable是否可关闭Boolean--falsePC/Mobile--