示例

移动端pop组件的展示效果同drawer。

基础用法

pop支持设置标题title，副标题subtitle，多个无语义的标签tag，提示tips等。

PCPhonePad

HTMLJAVASCRIPTCSS

<page>
    <module title="pop的基础使用">
        <actions>
            <button bind-click="showPop" 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>
    
    <pop
          x='demoPop'
          title="我是标题"
          subtitle="我是副标题"
          tips="我是提示信息"      
          tag="{{tag}}"
          
          bind-shown="handleShown"
          bind-hided="handleHided"
      >
          <form x="demoForm" clear-button="{{false}}" confirm-button="{{false}}" bindconfirm="submitForm">
              <item node="input" name="name" label="姓名" required/>
              <item node="input" name="class" label="班级"/>
          </form>
          <actions>             
              <button bindclick="hidePop" text="取消"></button>
              <button target="demoForm.confirm" text="确定" status="primary"></button>
          </actions>
      </pop>
  
</page>

export default XPage({
   data: {
       formData: {
               class: '',
               name: ''
           },
        tag:[
            {label:'无语义tag',status:'red'},
            {label:'无语义tag',status:'blue'},
            {label:'无语义tag',status:'orange'},        
        ],
   },
   show() {},
   showPop() {
       this.getComponent('demoPop').show();
   },

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

尺寸

抽屉的宽度/高度可以通过设置width和height自行调整。默认宽高分别为496px和自动撑高auto。宽度最小不能低于448px,最大不能超过屏幕的70%。高度的最大不能超过600px和屏幕70%中的小者。

PCPhonePad

HTMLJAVASCRIPTCSS

<page>
    <module title="尺寸设置">
        <actions>
            <button text="显示弹框" bind-click="showPop"></button>
        </actions>
    </module>
    <pop x="demoPop" title="我是标题" width="500px" >
        
    </pop>
</page>

export default XPage({
   data: {
        
   },
   show() {},   
   showPop(){
       this.getComponent('demoPop').show();
   },
});

点击蒙层关闭Pop

默认点击蒙层不能关闭 Pop，可配置wrapperClosable允许点击蒙层关闭。

PCPhonePad

HTMLJAVASCRIPTCSS

<page>
    <module title="点击蒙层关闭弹框">
        <actions>
            <button text="显示弹框" bind-click="showPop"></button>
        </actions>
    </module>
    <pop x="demoPop" title="我是标题" height="60%" wrapperClosable>
        
    </pop>
</page>

export default XPage({
   data: {
        
   },
   show() {},   
   showPop(){
       this.getComponent('demoPop').show();
   },
});

切换全屏

设置fullScreen可开启全屏切换功能。

PCPhonePad

HTMLJAVASCRIPTCSS

<page>
    <module title="全屏切换">
        <actions>
            <button text="显示弹框" bind-click="showPop"></button>
        </actions>
    </module>
    <pop x="demoPop" title="我是标题" height="60%" fullScreen>
        
    </pop>
</page>

export default XPage({
   data: {
        
   },
   show() {},   
   showPop(){
       this.getComponent('demoPop').show();
   },
});

提示信息notice

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

PCPhonePad

HTMLJAVASCRIPTCSS

<page>
    <module title="pop展示notice提示">
        <actions>
            <button bind-click="showPop" text="显示弹框"></button>
        </actions>
    </module>
    
    <pop
          x='demoPop'
          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>
      </pop>
  
</page>

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

       pop.notice(noticeConfig);
   },
   hideNotice(){
       this.getComponent('demoPop').hideNotice();
   },
});

Attributes

属性	说明	类型	可选值	默认值	端	版本
title	标题	String	--	--	PC/Mobile	--
subtitle	副标题	String	--	--	PC	--
tag	无语义标签，可通过配置数组展示多个，其中label为展示文案,status为标签颜色，取值参考基础组件Tag类型为normal时的可选项	String/Array[{lable:String,status:String}}]	--	--	PC	--
isStay	关闭弹框时不销毁组件实例	Boolean	--	--	Mobile	--
fullScreen	全屏切换功能	Boolean	--	false	PC	--
width	宽度	String	px/String	--	PC	--
height	高度	String	px/String	--	PC	--
wrapperClosable	点击蒙层是否允许关闭	Boolean	false	true	PC/Mobile	--
beforeHide	隐藏前hook函数，返回false可阻止隐藏。(source) => Boolean，source为触发来源： mask close undefined	Function	--	--	PC	--
cancelButton	取消按钮	Boolean/String/Object<{show:Boolean,text:String}>	--	--	PC/Mobile	--
tips	提示	String	--	--	PC	--

Events

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

Methods

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

this.getComponent('myPop').notice({text: '我是提示信息', closable: true, status}

名称	说明	入参	返回	端	版本
notice	显示容器提示信息，支持最多两个操作按钮，入参参考下表	--	--	PC/Mobile	--
hideNotice	关闭提示	--	--	PC/Mobile	--
show	显示pop	--	--	PC/Mobile	--
hide	关闭pop	--	--	PC/Mobile	--

Methods - notice

notice函数支持的入参如下

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