avalon：提示信息公用弹层，在页面居中位置显示vip-alert

最新推荐文章于 2024-09-14 11:48:26 发布

原创最新推荐文章于 2024-09-14 11:48:26 发布 · 215 阅读

CC 4.0 BY-SA版权

本文介绍了一个VIP确认框组件的设计与实现，该组件使用了ModalDelegate和Modal进行弹窗管理，通过avalon框架进行数据绑定，提供了默认配置选项，如标题、内容、按钮文本等，同时支持自定义回调函数。

<div class="vip-confirm" ms-controller="ConfirmCtrl">
    <i ms-click="@close()">×</i>
    <h3 class="modal-title">{{@title}}</h3> 
    <div class="modal-content">
        {{@content}}
    </div>
    <div class="modal-bottom">
        <a class="confirm" ms-click="@confirmClick()">{{@confirmButton}}</a>
        <a class="cancel" ms-click="@cancelClick()">{{@cancelButton}}</a>
    </div>
</div>

import {} from './vip-confirm.scss';
import template from './vip-confirm.html';
import {ModalDelegate,Modal} from 'cmui-modal';


let vipConfirmDelegate =  new ModalDelegate();
const CONFIRM_DEFAULT_OPTIONS = {
    mask: {
        dismissOnClick: false,
        animationDuration: 300
    },
    confirm: {
        vmName: 'ConfirmCtrl',
        title: '系统提示',
        content: '系统繁忙，请稍后重试',
        confirmButton: '确定',
        cancelButton: '取消',
        onConfirm: '',
        onCancel: ''
    }
};

vipConfirmDelegate.defaults.template = template;

vipConfirmDelegate.create = (options) => {

	let $this = vipConfirmDelegate;
    
	
    if ($this.current) {
        $this.current.$hide();
        $this.modalStack.push(this.current);
    }
    options = $.extend(true, CONFIRM_DEFAULT_OPTIONS, options);
    let _confirmOptions = options.confirm;

    //处理VM
    let vm = avalon.define({
        $id: _confirmOptions.vmName,
        title: _confirmOptions.title,
        content: _confirmOptions.content,
        confirmButton: _confirmOptions.confirmButton,
        cancelButton: _confirmOptions.cancelButton,
        onConfirm: _confirmOptions.onConfirm,
        onCancel: _confirmOptions.onCancel,
        close: () => {
            $this.current.dismiss();
        },
        confirmClick: () => {
            if (vm.onConfirm){
                vm.onConfirm.call($this.current.$element[0], vm);
                $this.current.dismiss();
            } else{
                $this.current.dismiss();
            }
        },
        cancelClick: () => {
            if (vm.onCancel) vm.onCancel.call($this.current.$element[0], vm);
            $this.current.dismiss();
        }

    });
    

    options.onReady = (element) => {
        $(element).find('.vip-confirm').attr('ms-controller',_confirmOptions.vmName);
        element.className += " vip-modal";
        avalon.scan(element, vm);
    };

    let _options = $.extend({}, $this.defaults, options);

    $this.current = new Modal(_options, $this).show();

    if (_options.onReady) {
        _options.onReady($this.current.$element[0]);
    }
    $this.current.vm = vm;
    return $this.current;
};

avalon.component('vip-confirm', vipConfirmDelegate);

export{
	vipConfirmDelegate
};