示例

基本用法

PCPhonePad

HTMLJAVASCRIPTCSS

<page>
    <module title="页面标题">
        <button @click="showCabinXProgress" text="显示cabinx Progress"></button>
        <button @click="showProgress" text="显示Progress"></button>
        <progress x="progress-demo" :percentage="0.3" text="正在解析，请稍等" sub-text="提示文案内容 提示文案内容提示文案内容提示文案内容提示文案内容" />
    </module>
</page>

export default XPage({
    showCabinXProgress() {
        const instance = CabinX.progress({
            percentage: .3,
            // duration: 5000,
            text: '正在解析，请稍等',
            subText: '提示文案内容 提示文案内容提示文案内容提示文案内容提示文案内容'
        });
        instance.$on('confirm', () => {
            console.info('!!!')
        })
        
        let rate = 0.3
        let interval = setInterval(() => {
            rate = rate + 0.01
            CabinX.progressUpdate(rate)
            
            if(rate >= 1) {
                clearInterval(interval)
            }
        }, 100)
    },
    async showProgress() {
        const comp = this.getComponent('progress-demo');
        console.info(comp)
        comp.show();
    }
});

Attributes

参数	说明	类型	可选值	默认值	端	版本
duration	多长时间达到100%，优先级高于percentage	number	--	0	PC/Mobile	--
percentage	百分比进度	number	--	0	PC/Mobile	--
text	主文本	string	--	null	PC/Mobile	--
subText	副文本	string	--	null	PC/Mobile	--
cancelBtnText	取消按钮文案	string	--	取消	PC/Mobile	--
confirmBtnText	确定按钮文案	string	--	确定	PC/Mobile	--

Events

名称	说明	回调参数
show	显示	--
hide	隐藏	--
update	更新进度	--

使用

局部

let thiscomp = this.getComponent('demoProgress');

thiscomp1.show();

全局

CabinX.progress({
percentage: 0.3,
text: '正在解析，请稍等',
subText: '提示文案内容 提示文案内容提示文案内容提示文案内容提示文案内容'
});

CabinX.progressUpdate(0.5);