示例

基本用法

PCPhonePad

HTMLJAVASCRIPTCSS

<page>
    <popover
        x="popover"
        trigger="click"
        title="popover title"
        subtitle="popover subtitle"
        width="350"
        placement="right"
        bind-hided="handlePopoverHide"
        bind-shown="handlePopoverShow"
    >
        <button text="show popover" slot="reference"></button>
        <main>
            <left width="150px">
                <image width="149px" height="149px" mode="cover" src="https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg" ></image>
            </left>
            <main style="padding: 0 8px;">
                图片说明
            </main>
        </main>
        <actions>
            <button text="取消" bind-click="hidePopover"></button>
            <button text="确定" status="primary" bind-click="showPopover"></button>
        </actions>
    </popover>
</page>

export default XPage({
    
    data: {},
    
    handlePopoverShow(...args) {
        console.info('shown', ...args);
    },
    
    handlePopoverHide(...args) {
        console.info('hided', ...args);
    },
    
    showPopover() {
        debugger;
        this.getComponent('popover').show();
    },
    
    hidePopover() {
        debugger;
        this.getComponent('popover').hide();
    },
});

Attributes

参数	说明	类型	可选值	默认值	端	版本
title	标题	String	--	--	PC/Mobile	--
subtitle	副标题	String	--	--	PC/Mobile	--
width	宽度	String/Number	--	--	PC/Mobile	--
trigger	触发方式	String	click/hover	click	PC/Mobile	--
placement	出现位置(Mobile 只有bottom)	String	top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end	bottom	PC	--

Slot

名称	说明
reference	触发Popover显示元素

Events

名称	说明	回调参数
shown	显示Popover回调	--
hided	隐藏Popover回调	--