This commit is contained in:
Ling53666
2025-08-18 09:11:51 +08:00
commit 02554225da
2516 changed files with 133155 additions and 0 deletions

View File

@ -0,0 +1 @@
.ant-modal-body{width:280px;background-color:#fff;border-radius:8px;padding-top:20px;display:flex;flex-direction:column}.ant-modal-body-title{font-size:18px;line-height:25px;text-align:center;color:#333;margin:0 12px 8px}.ant-modal-body-content{line-height:21px;font-size:15px;color:#333;text-align:center;margin:0 12px 20px}.ant-modal-body-footer-focus{padding:0 12px 12px}.ant-modal-body-footer-focus-cancel,.ant-modal-body-footer-focus-secondary{color:#1677ff;text-align:center;font-size:18px;margin-top:8px;padding-top:12px}.ant-modal-body-footer-vertical{padding:0 0 12px}.ant-modal-body-footer-vertical-cancel,.ant-modal-body-footer-vertical-primary,.ant-modal-body-footer-vertical-secondary{color:#1677ff;text-align:center;font-size:18px;margin-top:8px;padding-top:12px;position:relative}.ant-modal-body-footer-vertical-cancel::before,.ant-modal-body-footer-vertical-primary::before,.ant-modal-body-footer-vertical-secondary::before{content:'';position:absolute;background-color:#eee;display:block;top:0;right:0;bottom:auto;left:0;height:1px;transform:scaleY(.5)}.ant-modal-body-footer-horizontal{display:flex;flex-direction:row;position:relative}.ant-modal-body-footer-horizontal::before{content:'';position:absolute;background-color:#eee;display:block;top:0;right:0;bottom:auto;left:0;height:1px;transform:scaleY(.5)}.ant-modal-body-footer-horizontal-cancel,.ant-modal-body-footer-horizontal-primary,.ant-modal-body-footer-horizontal-secondary{position:relative;flex:1;color:#1677ff;text-align:center;font-size:18px;padding:12px 0}.ant-modal-body-footer-horizontal-cancel:nth-child(1)::after,.ant-modal-body-footer-horizontal-primary:nth-child(1)::after,.ant-modal-body-footer-horizontal-secondary:nth-child(1)::after{content:'';position:absolute;background-color:#eee;display:block;top:0;right:0;bottom:0;left:auto;width:1px;transform:scaleX(.5)}.ant-modal-close{position:absolute;right:8px;top:6.5px;z-index:3;width:26px;height:29px;display:flex;justify-content:center;align-items:center;font-size:18px;color:#999}.ant-modal .ant-popup-content.ant-popup-center{min-height:0;padding:0}

View File

@ -0,0 +1,137 @@
<import-sjs
from="./index.sjs"
name="utils"
></import-sjs>
<ant-popup
className="ant-modal {{className || ''}}"
style="{{style || ''}}"
maskClassName="{{maskClassName}}"
maskStyle="{{maskStyle}}"
visible="{{visible}}"
duration="{{duration}}"
position="center"
animation="{{animation}}"
zIndex="{{zIndex}}"
destroyOnClose="{{destroyOnClose}}"
onClose="onMaskClose"
>
<slot>
<view
class="ant-modal-body {{bodyClassName || ''}}"
style="{{bodyStyle || ''}}"
>
<slot name="header"></slot>
<slot name="title">
<view
a:if="{{title}}"
class="ant-modal-body-title"
>
{{title}}
</view>
</slot>
<slot name="content">
<view
a:if="{{content}}"
class="ant-modal-body-content"
>
{{content}}
</view>
</slot>
<slot name="footer">
<view
a:if="{{type === 'focus'}}"
class="ant-modal-body-footer-focus"
>
<ant-button
type="primary"
className="ant-modal-body-footer-focus-primary"
style="{{primaryButtonStyle || ''}}"
onTap="onPrimaryButtonTap"
>
{{primaryButtonText}}
</ant-button>
<view
a:if="{{secondaryButtonText}}"
class="ant-modal-body-footer-focus-secondary"
style="{{secondaryButtonStyle || ''}}"
onTap="onSecondaryButtonTap"
>
{{secondaryButtonText}}
</view>
<view
a:if="{{cancelButtonText}}"
class="ant-modal-body-footer-focus-cancel"
style="{{cancelButtonStyle || ''}}"
onTap="onCancelButtonTap"
>
{{cancelButtonText}}
</view>
</view>
<view
a:elif="{{utils.getDirection(primaryButtonText, secondaryButtonText, cancelButtonText, type) === 'horizontal'}}"
class="ant-modal-body-footer-horizontal"
>
<view
a:if="{{cancelButtonText}}"
class="ant-modal-body-footer-horizontal-cancel"
style="{{cancelButtonStyle || ''}}"
onTap="onCancelButtonTap"
>
{{cancelButtonText}}
</view>
<view
a:if="{{secondaryButtonText}}"
class="ant-modal-body-footer-horizontal-secondary"
style="{{secondaryButtonStyle || ''}}"
onTap="onSecondaryButtonTap"
>
{{secondaryButtonText}}
</view>
<view
a:if="{{primaryButtonText}}"
class="ant-modal-body-footer-horizontal-primary"
style="{{primaryButtonStyle || ''}}"
onTap="onPrimaryButtonTap"
>
{{primaryButtonText}}
</view>
</view>
<view
a:elif="{{utils.getDirection(primaryButtonText, secondaryButtonText, cancelButtonText, type) === 'vertical'}}"
class="ant-modal-body-footer-vertical"
>
<view
a:if="{{primaryButtonText}}"
class="ant-modal-body-footer-vertical-primary"
style="{{primaryButtonStyle || ''}}"
onTap="onPrimaryButtonTap"
>
{{primaryButtonText}}
</view>
<view
a:if="{{secondaryButtonText}}"
class="ant-modal-body-footer-vertical-secondary"
style="{{secondaryButtonStyle || ''}}"
onTap="onSecondaryButtonTap"
>
{{secondaryButtonText}}
</view>
<view
a:if="{{cancelButtonText}}"
class="ant-modal-body-footer-vertical-cancel"
style="{{cancelButtonStyle || ''}}"
onTap="onCancelButtonTap"
>
{{cancelButtonText}}
</view>
</view>
</slot>
</view>
</slot>
<ant-icon
a:if="{{type === 'focus' && closable}}"
type="CloseOutline"
onTap="onClose"
className="ant-modal-close"
></ant-icon>
</ant-popup>

View File

@ -0,0 +1 @@
export {};

View File

@ -0,0 +1,21 @@
import { Component, triggerEventOnly } from '../_util/simply';
import { ModalFunctionalProps } from './props';
Component(ModalFunctionalProps, {
onClose: function () {
triggerEventOnly(this, 'close');
},
onMaskClose: function () {
if (this.props.maskClosable) {
triggerEventOnly(this, 'close');
}
},
onPrimaryButtonTap: function () {
triggerEventOnly(this, 'primaryButtonTap');
},
onSecondaryButtonTap: function () {
triggerEventOnly(this, 'secondaryButtonTap');
},
onCancelButtonTap: function () {
triggerEventOnly(this, 'cancelButtonTap');
},
});

View File

@ -0,0 +1,8 @@
{
"component": true,
"usingComponents": {
"ant-button": "../Button/index",
"ant-icon": "../Icon/index",
"ant-popup": "../Popup/index"
}
}

View File

@ -0,0 +1,21 @@
function getDirection(primaryButtonText, secondaryButtonText, cancelButtonText, type) {
// 不显示按钮区域
if (!primaryButtonText && !secondaryButtonText && !cancelButtonText) {
return '';
}
// 1个按钮当纵向处理
if ([primaryButtonText, secondaryButtonText, cancelButtonText].filter(function (v) {
return !!v;
}).length === 1) {
return 'vertical';
}
// 三个按钮,必是纵向
if (primaryButtonText && secondaryButtonText && cancelButtonText) {
return 'vertical';
}
// 两个按钮,在 “标准模式” 是横向;在“强调模式”是纵向
return type === 'focus' ? 'vertical' : 'horizontal';
}
export default {
getDirection: getDirection
};

View File

@ -0,0 +1,107 @@
import { IBaseProps } from '../_util/base';
/**
* @description 对话框,当应用中需要比较明显的对用户当前的操作行为进行警示或提醒时,可以使用对话框。用户需要针对对话框进行操作后方可结束。
*/
export interface IModalProps extends IBaseProps {
/**
* @description Modal body类名
*/
bodyClassName: string;
/**
* @description Modal body样式
*/
bodyStyle: string;
/**
* @description 遮罩层类名
*/
maskClassName: string;
/**
* @description 遮罩层样式
*/
maskStyle: string;
/**
* @description 是否可点击蒙层关闭
* @default true
*/
maskClosable: boolean;
/**
* @description 类型
*/
type: 'default' | 'focus';
/**
* @description 是否显示右上角的关闭按钮。只有在 type 为 focus 生效
*/
closable: boolean;
/**
* @description 过渡动画时长,单位毫秒
*/
duration: number;
/**
* @description 是否开启过渡动画
*/
animation: boolean;
/**
* @description 弹窗层级
*/
zIndex: number;
/**
* @description 标题
*/
title: string;
/**
* @description 内容
*/
content: string;
/**
* @description 是否可见,受控模式
* @default false
*/
visible: boolean;
/**
* @description 是否关闭后销毁内部元素
* @default false
*/
destroyOnClose?: boolean;
/**
* @description 主按钮文本
*/
primaryButtonText: string;
/**
* @description 辅助按钮文本
*/
secondaryButtonText: string;
/**
* @description 取消按钮文案
*/
cancelButtonText: string;
/**
* @description 主按钮样式
*/
primaryButtonStyle: string;
/**
* @description 辅助按钮样式
*/
secondaryButtonStyle: string;
/**
* @description 取消按钮样式
*/
cancelButtonStyle: string;
/**
* @description 触发关闭时回调
*/
onClose: () => void;
/**
* @description 主按钮点击事件
*/
onPrimaryButtonTap: () => void;
/**
* @description 次要按钮点击事件
*/
onSecondaryButtonTap: () => void;
/**
* @description 取消按钮点击事件
*/
onCancelButtonTap: () => void;
}
export declare const ModalDefaultProps: Partial<IModalProps>;
export declare const ModalFunctionalProps: Partial<IModalProps>;

View File

@ -0,0 +1,31 @@
export var ModalDefaultProps = {
visible: false,
maskClosable: true,
closable: true,
type: 'default',
duration: 200,
animation: true,
zIndex: 998,
};
export var ModalFunctionalProps = {
bodyClassName: '',
bodyStyle: '',
maskClassName: '',
maskStyle: '',
maskClosable: true,
type: 'default',
closable: true,
duration: 200,
animation: true,
zIndex: 998,
title: '',
content: '',
visible: false,
destroyOnClose: false,
primaryButtonText: '',
secondaryButtonText: '',
cancelButtonText: '',
primaryButtonStyle: '',
secondaryButtonStyle: '',
cancelButtonStyle: '',
};