跳到主要内容
Drawer
从页面边缘滑出来的浮动面板，当需要一个附加的面板来控制父窗体内容，这个面板在需要时呼出。比如，当需要在当前任务流中插入临时任务，创建或预览附加内容。
用法
样式
可访问性

示例​

注意

drawer组件会依次遍历parent组件，寻找第一个page组件作为自己的容器，如果没有找到，会使用document.body作为容器。 x-component组件内部使用drawer的时候，可以使用main作为根节点，这样drawer组件会找x-component外部的x-page作为容器。

基础用法​

drawer支持设置标题title，副标题subtitle等。

PCPhonePad
<page>
    <module title="drawer的基础使用">
        <actions>
            <button bind-click="showDrawer" text="使用自定义按钮显示抽屉编辑"></button>
            <button bind-click="showDrawer2" text="使用自带关闭按钮"></button>
        </actions>
         <form type="info" clear-button="{{false}}" confirm-button="{{false}}">
             <item label="班级" name="class" value="{{formData.class}}"></item>
             <item label="姓名" name='name' value="{{formData.name}}"></item>
         </form>
    </module>
    <drawer
        x='demoDrawer2'
        title="我是标题"
        subtitle="我是副标题"
        bind-shown="handleShown"
        bind-hided="handleHided"
    >
        drawer内容
    </drawer>
    <drawer
          x='demoDrawer'
          title="我是标题"
          subtitle="我是副标题"          
          bind-shown="handleShown"
          bind-hided="handleHided"
      >
          <form x="demoForm" clearButton="{{false}}" confirmButton="{{false}}" bindconfirm="submitForm">
              <item node="input" name="name" label="姓名" required/>
              <item node="input" name="class" label="班级"/>
          </form>
          <actions>             
              <button bindclick="hideDrawer" text="取消"></button>
              <button target="demoForm.confirm" text="确定" status="primary"></button>
          </actions>
      </drawer>
  
</page>

export default XPage({
   data: {
       formData: {
               class: '',
               name: ''
           },        
   },
   show() {},
   showDrawer() {
       this.getComponent('demoDrawer').show();
   },
    showDrawer2() {
       this.getComponent('demoDrawer2').show();
   },

   hideDrawer() {
       this.getComponent('demoDrawer').hide();
   },
   handleShown() {
      console.info('drawer打开了');
   },
   handleHided() {
       console.info('drawer关闭了');
   },  
   submitForm() {
       this.getComponent('demoForm').validate((error, formData) => {
           console.info('formData', formData);
           this.setData({
               formData,
           })
           this.hideDrawer();
       });
   },
});


方向​

drawer``Pc端支持从 4 个方向弹出：top、left、bottom、right。移动端只能从底部弹出。

PCPhonePad
<page>
    <module title="drawer的基础使用">
        <actions>
            <button bind-click="showDrawer('t')" text="Top"></button>
            <button bind-click="showDrawer('l')" text="Left"></button>
            <button bind-click="showDrawer('b')" text="Bottom"></button>
            <button bind-click="showDrawer('r')" text="Right"></button>
        </actions>
    </module>
    
    <drawer
          x='demoDrawer'
          title="{{title}}"
          direction="{{direction}}"         
      > 
      <actions>
          <button text="关闭" bind-click="hideDrawer"></button>
       </actions>      
      </drawer>
  
</page>

export default XPage({
   data: {
       title:'',
       direction:'b',
   },
   show() {},
   showDrawer(direction) {
       let title='';
       
       switch (direction) {
         case 't':
             title='从上弹出';
             break;
         case 'l':
             title='从左弹出';
             break;
         case 'b':
             title='从底弹出';
             break;
         case 'r':
             title='从右弹出';
             break;
       }
       
       this.setData({
            title,
            direction,
       });
      
       setTimeout(()=>{
           this.getComponent('demoDrawer').show();
       },0);       
   },
   hideDrawer(){
       this.getComponent('demoDrawer').hide();
   },
});


蒙层​

drawer默认点击蒙层会关闭抽屉，支持配置wrapperClosable禁止点击蒙层关闭。

PCPhonePad
<page>
    <module title="点击蒙层不能关闭弹框">
        <actions>
            <button text="显示弹框" bind-click="showDrawer"></button>
        </actions>
    </module>
    <drawer x="demoDrawer" title="我是标题" wrapperClosable="{{false}}">
          <actions>
             <button text="关闭" bind-click="hideDrawer"></button>
          </actions>    
    </drawer>
</page>

export default XPage({
   data: {
        
   },
   show() {},   
   showDrawer(){
       this.getComponent('demoDrawer').show();
   },
   hideDrawer(){
       this.getComponent('demoDrawer').hide();
   },
});


尺寸​

drawer支持Pc端设置size设置抽屉的大小，direction为t/b时表示设置height，为b/r时表示设置宽度。size边界：30% <= size <= 80%。 移动端为固定尺寸，不支持自定义。

PCPhonePad
<page>
    <module title="drawer的size设置">
        <actions>
            <button bind-click="showDrawer('t','0')" text="Top：高400px"></button>
            <button bind-click="showDrawer('l','1900px')" text="Left：宽400px"></button>
            <button bind-click="showDrawer('b','90%')" text="Bottom：高60%"></button>
            <button bind-click="showDrawer('r','20%')" text="Right：宽60%"></button>
        </actions>
    </module>
    
    <drawer
          x='demoDrawer'
          title="{{title}}"
          direction="{{direction}}"         
          size="{{size}}"         
      > 
      <actions>
          <button text="关闭" bind-click="hideDrawer"></button>
       </actions>      
      </drawer>
  
</page>

export default XPage({
   data: {
       title:'',
       direction:'b',
       size:undefined,
   },
   show() {},
   showDrawer(direction,size) {
       let title='';
       
       switch (direction) {
         case 't':
             title=`从上弹出，高：${size}`;
             break;
         case 'l':
             title=`从左弹出，宽：${size}`;
             break;
         case 'b':
             title=`从底弹出，高：${size}`;
             break;
         case 'r':
             title=`从右弹出，宽：${size}`;
             break;
       }
       
       this.setData({
            title,
            direction,
            size,
       });
      
       setTimeout(()=>{
           this.getComponent('demoDrawer').show();
       },0);       
   },
   hideDrawer(){
       this.getComponent('demoDrawer').hide();
   },
});


提示信息notice​

drawer支持固定展示提示信息。可在XPage中调用this.getComponent('myDrawer').notice(...) 实现，其中myDrawer为DML中drawer的x属性值。具体notice配置参考下表Methods。

PCPhonePad
<page>
    <module title="drawer展示notice提示">
        <actions>
            <button bind-click="showDrawer" text="显示弹框"></button>
        </actions>
    </module>
    
    <drawer
          x='demoDrawer'
          title="我是标题"
          subtitle="我是副标题"
          height="300px"          
      >
          <actions>
              <button bindclick="showNotice('info')" text="默认notice"></button>
              <button bindclick="showNotice('warning')" text="警告notice"></button>
              <button bindclick="showNotice('error')" text="错误notice"></button>
              <button bindclick="showNotice('success')" text="成功notice"></button>
              <button bindclick="hideNotice" text="关闭notice"></button>              
          </actions>
      </drawer>
  
</page>

export default XPage({
   data: {       
        noticeConfig: {
            text: '提示文案',
            closable: true,
            buttonOptions: [
                {
                    text: '按钮',
                    click: () => {
                        console.info('notice的按钮点击了')
                    },
                },
            ],
        }
   },
   show() {},
   showDrawer() {
       this.getComponent('demoDrawer').show();
   },   
   showNotice(type) {
       const drawer = this.getComponent('demoDrawer');
       const noticeConfig = Object.assign(this.data.noticeConfig, {status: type});

       drawer.notice(noticeConfig);
   },
   hideNotice(){
       this.getComponent('demoDrawer').hideNotice();
   },
});


Attributes​

属性说明类型可选值默认值端版本
title标题string----PC/Mobile--
subtitle副标题string----PC--
directiondrawer显示的方位stringt(top)/l(left)/b(bottom)/r(right)'bPC--
sizedirection为t/b时表示height，为b/r时表示宽度stringpx/string70%PC--
wrapperClosable点击蒙层是否允许关闭BooleantruePC/Mobile--
cancelButton取消按钮Boolean/string/Object<{show:Boolean,text:String}>----PC/Mobile--
isStay关闭弹框时不销毁组件实例Boolean----Mobile--

Events​

名称说明回调参数端版本
shown显示drawer后触发--PC/Mobile--
hided隐藏drawer（如：主动触发comps.hide()、或点击drawer右上角的x、或点击蒙层时）后触发--PC/Mobile--

Methods​

通过getComponent函数获取x属性定义的drawer后调用其对应Methods。

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