nutui-uniapp
Version:
京东风格的轻量级移动端 Uniapp、Vue3 组件库(支持小程序开发)
2,001 lines (1,964 loc) • 248 kB
text/typescript
import * as vue from 'vue';
import { ExtractPropTypes, PropType, CSSProperties, SetupContext, ComputedRef, VNode, RendererNode, RendererElement, StyleValue, Ref, VNodeChild } from 'vue';
import { ButtonOpenType, ButtonLang, ButtonOnGetphonenumberEvent, ButtonOnErrorEvent, ButtonOnOpensettingEvent, ButtonOnLaunchappEvent, ButtonOnChooseavatarEvent, ButtonOnAgreeprivacyauthorizationEvent, ButtonOnAddgroupappEvent, ButtonOnChooseaddressEvent, ButtonOnChooseinvoicetitleEvent, ButtonOnSubscribeEvent, ButtonOnLoginEvent, BaseEvent, InputOnBlurEvent, InputOnFocusEvent, InputOnConfirmEvent, InputOnInputEvent, TextareaOnBlurEvent, TextareaOnFocusEvent, TextareaOnConfirmEvent, TextareaOnInputEvent } from '@uni-helper/uni-app-types';
import { ComponentResolver } from '@uni-helper/vite-plugin-uni-components';
/**
* prop type helpers
* help us to write less code and reduce bundle size
* copy from https://github.com/youzan/vant/blob/main/packages/vant/src/utils/props.ts
*/
type ClassType = string | object | Array<ClassType>;
type Interceptor = (...args: any[]) => Promise<boolean> | boolean | undefined | void;
interface ActionSheetOption {
disable?: boolean;
loading?: boolean;
color?: string;
name: string;
subname?: string;
}
declare const actionsheetProps: {
/**
* @description 取消文案
*/
cancelTxt: {
type: vue.PropType<string>;
default: string;
};
/**
* @description 设置列表项标题展示使用参数
*/
optionTag: {
type: vue.PropType<keyof ActionSheetOption>;
default: keyof ActionSheetOption;
};
/**
* @description 设置列表项二级标题展示使用参数
*/
optionSubTag: {
type: vue.PropType<keyof ActionSheetOption>;
default: keyof ActionSheetOption;
};
/**
* @description 设置选中项的值,和 'option-tag' 的值对应
*/
chooseTagValue: {
type: vue.PropType<string>;
default: string;
};
/**
* @description 设置列表项标题
*/
title: {
type: vue.PropType<string>;
default: string;
};
/**
* @description 选中项颜色,当 choose-tag-value == option-tag 的值 生效
*/
customColor: {
type: vue.PropType<string>;
default: string;
};
/**
* @description 设置列表项副标题/描述
*/
description: {
type: vue.PropType<string>;
default: string;
};
/**
* @description 列表项
*/
menuItems: {
type: vue.PropType<ActionSheetOption[]>;
default: () => ActionSheetOption[];
};
/**
* @description 遮罩层是否可关闭
*/
closeAbled: {
type: BooleanConstructor;
default: true;
};
customClass: {
type: vue.PropType<ClassType>;
default: string;
};
customStyle: {
type: vue.PropType<vue.StyleValue>;
default: string;
};
position: {
type: vue.PropType<"left" | "right" | "center" | "bottom" | "top">;
default: "left" | "right" | "center" | "bottom" | "top";
};
transition: {
type: vue.PropType<"none" | "zoom" | "fade" | "slide-down" | "slide-up" | "slide-left" | "slide-right" | "fade-up" | "fade-down" | "fade-left" | "fade-right">;
default: string;
};
popClass: {
type: vue.PropType<string>;
default: string;
};
closeable: BooleanConstructor;
closeIconPosition: {
type: vue.PropType<"top-right" | "bottom-right" | "bottom-left" | "top-left">;
default: "top-right" | "bottom-right" | "bottom-left" | "top-left";
};
closeIcon: {
type: vue.PropType<string>;
default: string;
};
destroyOnClose: {
type: BooleanConstructor;
default: true;
};
overlay: {
type: BooleanConstructor;
default: true;
};
round: BooleanConstructor;
safeAreaInsetBottom: BooleanConstructor;
safeAreaInsetTop: {
type: BooleanConstructor;
default: true;
};
visible: BooleanConstructor;
zIndex: {
type: (NumberConstructor | StringConstructor)[];
default: number;
};
duration: {
type: (NumberConstructor | StringConstructor)[];
default: number;
};
overlayClass: {
type: vue.PropType<string>;
default: string;
};
overlayStyle: vue.PropType<vue.CSSProperties>;
lockScroll: BooleanConstructor;
closeOnClickOverlay: {
type: BooleanConstructor;
default: true;
};
};
type ActionsheetProps = ExtractPropTypes<typeof actionsheetProps>;
declare const actionsheetEmits: {
close: () => boolean;
"update:visible": (val: boolean) => boolean;
cancel: () => boolean;
choose: (item: ActionSheetOption, index: number) => boolean;
};
type ActionsheetEmits = typeof actionsheetEmits;
declare const buttonType: readonly ["default", "primary", "info", "success", "warning", "danger"];
type ButtonType = (typeof buttonType)[number];
declare const buttonSize: readonly ["large", "normal", "small", "mini"];
type ButtonSize = (typeof buttonSize)[number];
declare const buttonShape: readonly ["square", "round"];
type ButtonShape = (typeof buttonShape)[number];
declare const buttonFormType: readonly ["button", "submit", "reset"];
type ButtonFormType = (typeof buttonFormType)[number];
declare const buttonProps: {
/**
* @description 指定按钮按下去的样式类
*/
readonly hoverClass: {
type: PropType<string>;
default: string;
};
/**
* @description 按住后多久出现点击态,单位毫秒
*/
readonly hoverStartTime: {
type: NumberConstructor;
default: number;
};
/**
* @description 手指松开后点击态保留时间,单位毫秒
*/
readonly hoverStayTime: {
type: NumberConstructor;
default: number;
};
/**
* @description 按钮颜色,支持传入 `linear-gradient` 渐变色
*/
readonly customColor: StringConstructor;
/**
* @description 形状,可选值为 `square` `round`
*/
readonly shape: {
type: PropType<"round" | "square">;
default: "round" | "square";
};
/**
* @description 是否为朴素按钮
*/
readonly plain: BooleanConstructor;
/**
* @description 按钮 `loading` 状态
*/
readonly loading: BooleanConstructor;
/**
* @description 是否禁用按钮
*/
readonly disabled: BooleanConstructor;
/**
* @description 按钮类型,可选值为 `primary` `info` `warning` `danger` `success` `default`
*/
readonly type: {
type: PropType<"default" | "primary" | "info" | "success" | "warning" | "danger">;
default: "default" | "primary" | "info" | "success" | "warning" | "danger";
};
/**
* @description 表单类型,可选值 `button` `submit` `reset`
*/
readonly formType: {
type: PropType<"button" | "reset" | "submit">;
default: "button" | "reset" | "submit";
};
/**
* @description 尺寸,可选值为 `large` `small` `mini` `normal`
*/
readonly size: {
type: PropType<"small" | "normal" | "large" | "mini">;
default: "small" | "normal" | "large" | "mini";
};
/**
* @description 是否为块级元素
*/
readonly block: BooleanConstructor;
/**
* @description 小程序开放能力
*/
readonly openType: PropType<ButtonOpenType>;
/**
* @description 指定返回用户信息的语言,zh_CN 简体中文,zh_TW 繁体中文,en 英文
*/
readonly lang: {
type: PropType<ButtonLang>;
default: ButtonLang;
};
/**
* @description 会话来源,openType="contact"时有效
*/
readonly sessionFrom: StringConstructor;
/**
* @description 会话内消息卡片标题,openType="contact"时有效
*/
readonly sendMessageTitle: StringConstructor;
/**
* @description 会话内消息卡片点击跳转小程序路径,openType="contact"时有效
*/
readonly sendMessagePath: StringConstructor;
/**
* @description 会话内消息卡片图片,openType="contact"时有效
*/
readonly sendMessageImg: StringConstructor;
/**
* @description 是否显示会话内消息卡片,设置此参数为 true,用户进入客服会话会在右下角显示"可能要发送的小程序"提示,用户点击后可以快速发送小程序消息,openType="contact"时有效
*/
readonly showMessageCard: BooleanConstructor;
/**
* @description 打开群资料卡时,传递的群号,openType="openGroupProfile"时有效
*/
readonly groupId: StringConstructor;
/**
* @description 打开频道页面时,传递的频道号 openType="openGuildProfile"时有效
*/
readonly guildId: {
type: PropType<string>;
default: string;
};
/**
* @description 打开公众号资料卡时,传递的号码 openType="openPublicProfile"时有效
*/
readonly publicId: StringConstructor;
/**
* @description 客服的抖音号,openType="im"时有效
*/
readonly dataImId: StringConstructor;
/**
* @description IM卡片类型,openType="im"时有效
*/
readonly dataImType: StringConstructor;
/**
* @description 商品的id,仅支持泛知识课程库和生活服务商品库中的商品,openType="im"时有效
*/
readonly dataGoodsId: StringConstructor;
/**
* @description 订单的id,仅支持交易2.0订单, openType="im"时有效
*/
readonly dataOrderId: StringConstructor;
/**
* @description 商品类型,“1”代表生活服务,“2”代表泛知识。openType="im"时有效
*/
readonly dataBizLine: StringConstructor;
readonly customClass: {
type: PropType<ClassType>;
default: string;
};
readonly customStyle: {
type: PropType<vue.StyleValue>;
default: string;
};
};
type ButtonProps = ExtractPropTypes<typeof buttonProps>;
declare const buttonEmits: {
click: (evt: MouseEvent) => boolean;
getphonenumber: (evt: ButtonOnGetphonenumberEvent) => boolean;
getuserinfo: (evt: any) => boolean;
error: (evt: ButtonOnErrorEvent) => boolean;
opensetting: (evt: ButtonOnOpensettingEvent) => boolean;
launchapp: (evt: ButtonOnLaunchappEvent) => boolean;
contact: (evt: any) => boolean;
chooseavatar: (evt: ButtonOnChooseavatarEvent) => boolean;
agreeprivacyauthorization: (evt: ButtonOnAgreeprivacyauthorizationEvent) => boolean;
addgroupapp: (evt: ButtonOnAddgroupappEvent) => boolean;
chooseaddress: (evt: ButtonOnChooseaddressEvent) => boolean;
chooseinvoicetitle: (evt: ButtonOnChooseinvoicetitleEvent) => boolean;
subscribe: (evt: ButtonOnSubscribeEvent) => boolean;
login: (evt: ButtonOnLoginEvent) => boolean;
im: (evt: any) => boolean;
};
type ButtonEmits = typeof buttonEmits;
declare const cellProps: {
/**
* @description 标题名称
*/
title: {
type: vue.PropType<string>;
default: string;
};
/**
* @description 左侧副标题
*/
subTitle: {
type: vue.PropType<string>;
default: string;
};
/**
* @description 右侧描述
*/
desc: {
type: vue.PropType<string>;
default: string;
};
/**
* @description 右侧描述文本对齐方式 [text-align](https://www.w3school.com.cn/cssref/pr_text_text-align.asp)
*/
descTextAlign: {
type: vue.PropType<"left" | "right" | "inherit" | "center" | "justify">;
default: "left" | "right" | "inherit" | "center" | "justify";
};
/**
* @description 是否展示右侧箭头并开启点击反馈
*/
isLink: BooleanConstructor;
/**
* @description 点击后跳转的目标路由对象,
*/
to: {
type: vue.PropType<string>;
default: string;
};
/**
* @description 圆角半径
*/
roundRadius: {
type: (NumberConstructor | StringConstructor)[];
default: string;
};
/**
* @description 是否使内容垂直居中
*/
center: BooleanConstructor;
/**
* @description 单元格大小,可选值为 `large`
*/
size: {
type: vue.PropType<string>;
default: string;
};
customClass: {
type: vue.PropType<ClassType>;
default: string;
};
customStyle: {
type: vue.PropType<vue.StyleValue>;
default: string;
};
};
type CellProps = ExtractPropTypes<typeof cellProps>;
declare const cellEmits: {
click: (event: Event) => boolean;
};
type CellEmits = typeof cellEmits;
declare const cellgroupProps: {
/**
* @description 标题名称
*/
title: {
type: vue.PropType<string>;
default: string;
};
/**
* @description 右侧描述
*/
desc: {
type: vue.PropType<string>;
default: string;
};
customClass: {
type: vue.PropType<ClassType>;
default: string;
};
customStyle: {
type: vue.PropType<vue.StyleValue>;
default: string;
};
};
type CellGroupProps = ExtractPropTypes<typeof cellgroupProps>;
declare const configProviderProps: {
/**
* @description 主题风格,设置为 `dark` 来开启深色模式,全局生效
*/
theme: {
type: vue.PropType<string>;
default: string;
};
/**
* @description 自定义主题变量
*/
themeVars: {
type: ObjectConstructor;
default: {};
};
};
type ConfigProviderProps = ExtractPropTypes<typeof configProviderProps>;
declare const countdownProps: {
/**
* @description 当前时间,自定义展示内容时生效
*/
modelValue: {
type: vue.PropType<{}>;
default: () => {};
};
/**
* @description 开始时间
*/
startTime: {
type: (NumberConstructor | StringConstructor)[];
validator(v: Date): boolean;
};
/**
* @description 结束时间
*/
endTime: {
type: (NumberConstructor | StringConstructor)[];
validator(v: Date): boolean;
};
/**
* @description 是否开启毫秒级渲染
*/
millisecond: BooleanConstructor;
/**
* @description 时间格式
*/
format: {
type: vue.PropType<string>;
default: string;
};
/**
* @description 是否自动开始倒计时
*/
autoStart: {
type: BooleanConstructor;
default: true;
};
/**
* @description 倒计时显示时间,单位是毫秒。`auto-start` 为 `false` 时生效
*/
time: {
type: (NumberConstructor | StringConstructor)[];
default: number;
};
/**
* @description 是否暂停
*/
paused: BooleanConstructor;
customClass: {
type: vue.PropType<ClassType>;
default: string;
};
customStyle: {
type: vue.PropType<vue.StyleValue>;
default: string;
};
};
declare const countdownEmits: {
input: (val: string | {
d: number;
h: number;
m: number;
s: number;
ms: number;
}) => boolean;
"update:modelValue": (val: string | {
d: number;
h: number;
m: number;
s: number;
ms: number;
}) => boolean;
onEnd: () => boolean;
onRestart: (val: number) => boolean;
onPaused: (val: number) => boolean;
};
type CountdownEmits = typeof countdownEmits;
interface CountdownInst {
/**
* @description 开始倒计时
*/
start: () => void;
/**
* @description 暂停倒计时
*/
pause: () => void;
/**
* @description 重设倒计时,若 `auto-start` 为 `true`,重设后会自动开始倒计时
*/
reset: () => void;
}
type CountDownPropsProps = ExtractPropTypes<typeof countdownProps>;
declare const dialogProps: {
/**
* @description 点击蒙层是否关闭对话框
*/
closeOnClickOverlay: {
type: BooleanConstructor;
default: true;
};
/**
* @description 标题
*/
title: {
type: PropType<string>;
default: string;
};
/**
* @description 内容,支持 HTML
*/
content: {
type: PropType<string>;
default: string;
};
/**
* @description 是否隐藏底部按钮栏
*/
noFooter: BooleanConstructor;
/**
* @description 是否隐藏确定按钮
*/
noOkBtn: BooleanConstructor;
/**
* @description 是否隐藏取消按钮
*/
noCancelBtn: BooleanConstructor;
/**
* @description 取消按钮文案
*/
cancelText: {
type: PropType<string>;
default: string;
};
/**
* @description 确定按钮文案
*/
okText: {
type: PropType<string>;
default: string;
};
/**
* @description 确认按钮是否默认关闭弹窗
*/
okAutoClose: {
type: BooleanConstructor;
default: true;
};
/**
* @description 取消按钮是否默认关闭弹窗
*/
cancelAutoClose: {
type: BooleanConstructor;
default: true;
};
/**
* @description 文字对齐方向,可选值同 css 的 text-align
*/
textAlign: {
type: PropType<"left" | "right" | "center" | "top">;
default: "left" | "right" | "center" | "top";
};
/**
* @description 是否在页面回退时自动关闭
*/
closeOnPopstate: BooleanConstructor;
/**
* @description 使用横纵方向,可选值`horizontal`、`vertical`
*/
footerDirection: {
type: PropType<"horizontal" | "vertical">;
default: "horizontal" | "vertical";
};
/**
* @description 自定义类名
*/
customClass: {
type: PropType<string>;
default: string;
};
/**
* @description 自定义 popup 弹框样式
*/
popStyle: {
type: PropType<CSSProperties>;
};
/**
* @description 是否在页面回退时自动关闭
*/
beforeClose: PropType<Interceptor>;
customStyle: {
type: PropType<vue.StyleValue>;
default: string;
};
position: {
type: PropType<"left" | "right" | "center" | "bottom" | "top">;
default: "left" | "right" | "center" | "bottom" | "top";
};
transition: {
type: PropType<"none" | "zoom" | "fade" | "slide-down" | "slide-up" | "slide-left" | "slide-right" | "fade-up" | "fade-down" | "fade-left" | "fade-right">;
default: string;
}; /**
* @description 是否隐藏确定按钮
*/
popClass: {
type: PropType<string>;
default: string;
};
closeable: BooleanConstructor;
closeIconPosition: {
type: PropType<"top-right" | "bottom-right" | "bottom-left" | "top-left">;
default: "top-right" | "bottom-right" | "bottom-left" | "top-left";
};
closeIcon: {
type: PropType<string>;
default: string;
};
destroyOnClose: {
type: BooleanConstructor;
default: true;
};
overlay: {
type: BooleanConstructor;
default: true;
};
round: BooleanConstructor; /**
* @description 使用横纵方向,可选值`horizontal`、`vertical`
*/
safeAreaInsetBottom: BooleanConstructor;
safeAreaInsetTop: {
type: BooleanConstructor;
default: true;
};
visible: BooleanConstructor;
zIndex: {
type: (NumberConstructor | StringConstructor)[];
default: number;
};
duration: {
type: (NumberConstructor | StringConstructor)[];
default: number;
};
overlayClass: {
type: PropType<string>;
default: string;
};
/**
* @description 内容,支持 HTML
*/
overlayStyle: PropType<CSSProperties>;
lockScroll: BooleanConstructor;
};
type DialogProps = ExtractPropTypes<typeof dialogProps>;
declare const dialogEmits: {
update: (val: boolean) => boolean;
"update:visible": (val: boolean) => boolean;
ok: () => boolean;
cancel: () => boolean;
opened: () => boolean;
closed: () => boolean;
};
type DialogEmits = typeof dialogEmits;
declare const transitionProps: {
/**
* @description 内置动画名称,可选值为 `fade` `fade-up` `fade-down` f`ade-left` `fade-right` `slide-up` `slide-down` `slide-left` `slide-right`
*/
name: {
type: vue.PropType<"none" | "zoom" | "fade" | "slide-down" | "slide-up" | "slide-left" | "slide-right" | "fade-up" | "fade-down" | "fade-left" | "fade-right">;
default: "none" | "zoom" | "fade" | "slide-down" | "slide-up" | "slide-left" | "slide-right" | "fade-up" | "fade-down" | "fade-left" | "fade-right";
};
/**
* @description 是否展示过渡动画级
*/
show: BooleanConstructor;
/**
* @description 动画时长,单位为毫秒
*/
duration: {
type: NumberConstructor;
default: number;
};
/**
* @description 动画函数
*/
timingFunction: {
type: vue.PropType<"ease" | "ease-in" | "ease-in-out" | "ease-out" | "step-end" | "step-start" | "linear">;
default: "ease" | "ease-in" | "ease-in-out" | "ease-out" | "step-end" | "step-start" | "linear";
};
destroyOnClose: BooleanConstructor;
/**
* @description 进入动画前的类名
*/
enterFromClass: StringConstructor;
/**
* @description 进入动画时的类名
*/
enterActiveClass: StringConstructor;
/**
* @description 进入动画后的类名
*/
enterToClass: StringConstructor;
/**
* @description 离开动画前的类名
*/
leaveFromClass: StringConstructor;
/**
* @description 离开动画时的类名
*/
leaveActiveClass: StringConstructor;
/**
* @description 离开动画后的类名
*/
leaveToClass: StringConstructor;
customClass: {
type: vue.PropType<ClassType>;
default: string;
};
customStyle: {
type: vue.PropType<vue.StyleValue>;
default: string;
};
};
declare const transitionEmits: {
beforeEnter: () => boolean;
enter: () => boolean;
afterEnter: () => boolean;
beforeLeave: () => boolean;
leave: () => boolean;
afterLeave: () => boolean;
click: (evt: MouseEvent) => boolean;
};
type TransitionProps = ExtractPropTypes<typeof transitionProps>;
type TransitionEmits = typeof transitionEmits;
type TransitionName = keyof typeof defaultAnimations;
interface NutAnimation {
enter: string;
leave: string;
}
declare const nutAnimationName: readonly ["fade", "fade-up", "fade-down", "fade-left", "fade-right", "slide-up", "slide-down", "slide-left", "slide-right", "zoom", "none"];
type NutAnimationName = (typeof nutAnimationName)[number];
declare const nutAnimationtimingFunction: readonly ["linear", "ease", "ease-in", "ease-in-out", "ease-out", "step-start", "step-end"];
type NutAnimationtimingFunction = (typeof nutAnimationtimingFunction)[number];
interface NutAnimations {
[key: string]: NutAnimation;
}
declare const defaultAnimations: NutAnimations;
declare function isKeyOfAnimations(value: string): boolean;
interface IClassNames {
enter: string;
enterActive: string;
enterTo: string;
leave: string;
leaveActive: string;
leaveTo: string;
}
interface IClassNameProps {
enterClass?: string;
enterActiveClass?: string;
enterToClass?: string;
leaveClass?: string;
leaveActiveClass?: string;
leaveToClass?: string;
}
declare function getClassNames(name: string, { enterClass, enterActiveClass, enterToClass, leaveClass, leaveActiveClass, leaveToClass, }: IClassNameProps): IClassNames;
declare function useTransition(props: TransitionProps, emit: SetupContext<TransitionEmits>['emit']): {
display: vue.Ref<boolean>;
classes: vue.ComputedRef<string>;
styles: vue.ComputedRef<string>;
clickHandler: (evt: any) => void;
};
declare const textAlign: readonly ["left", "center", "right", "top"];
type TextAlign = (typeof textAlign)[number];
declare const footerDirection: readonly ["horizontal", "vertical"];
type FooterDirection = (typeof footerDirection)[number];
interface DialogOptions {
/**
* @description 标题
*/
title?: string;
/**
* @description 内容,支持 HTML
*/
content?: string;
/**
* @description 是否隐藏底部按钮栏
*/
noFooter?: boolean;
/**
* @description 是否隐藏确定按钮
*/
noOkBtn?: boolean;
/**
* @description 是否隐藏取消按钮
*/
noCancelBtn?: boolean;
/**
* @description 取消按钮文案
*/
cancelText?: string;
/**
* @description 确定按钮文案
*/
okText?: string;
/**
* @description 文字对齐方向,可选值同 css 的 text-align
*/
textAlign?: TextAlign;
/**
* @description 使用横纵方向 可选值 horizontal、vertical
*/
footerDirection?: FooterDirection;
/**
* @description 弹出动画类型
*/
transition?: NutAnimationName;
/**
* @description 点击蒙层是否关闭对话框
*/
closeOnClickOverlay?: boolean;
/**
* @description 确认按钮是否默认关闭弹窗
*/
okAutoClose?: boolean;
}
interface DialogInst {
/**
* @description 弹出对话框
*/
showDialog: (options: DialogOptions) => void;
/**
* @description 点击确定
*/
onOk: () => void;
/**
* @description 点击取消
*/
onCancel: () => void;
}
declare function useDialog(props: DialogProps, emit: SetupContext<DialogEmits>['emit']): {
contentStyle: vue.ComputedRef<CSSProperties>;
showPopup: vue.Ref<boolean>;
onClickOverlay: () => void;
onCancel: () => void;
onOk: () => void;
closed: (action?: string) => void;
classes: vue.ComputedRef<string>;
showDialog: (options: DialogOptions) => void;
dialogStatus: vue.Ref<{
title?: string | undefined;
content?: string | undefined;
noFooter?: boolean | undefined;
noOkBtn?: boolean | undefined;
noCancelBtn?: boolean | undefined;
cancelText?: string | undefined;
okText?: string | undefined;
textAlign?: "left" | "right" | "center" | "top" | undefined;
footerDirection?: "horizontal" | "vertical" | undefined;
transition?: "none" | "zoom" | "fade" | "slide-down" | "slide-up" | "slide-left" | "slide-right" | "fade-up" | "fade-down" | "fade-left" | "fade-right" | undefined;
closeOnClickOverlay?: boolean | undefined;
okAutoClose?: boolean | undefined;
}>;
};
declare const iconProps: {
popClass: {
type: StringConstructor;
default: string;
};
/**
* @description 图标宽度
*/
width: {
type: (NumberConstructor | StringConstructor)[];
default: string;
};
/**
* @description 图标高度
*/
height: {
type: (NumberConstructor | StringConstructor)[];
default: string;
};
/**
* @description 图标名称
*/
name: {
type: vue.PropType<string>;
default: string;
};
/**
* @description 图标大小
*/
size: {
type: (NumberConstructor | StringConstructor)[];
default: string;
};
/**
* @description 自定义 `icon` 类名前缀,用于使用自定义图标
*/
classPrefix: {
type: StringConstructor;
default: string;
};
/**
* @description 自定义 `icon` 字体基础类名
*/
fontClassName: {
type: StringConstructor;
default: string;
};
/**
* @description 图标颜色
*/
customColor: {
type: StringConstructor;
default: string;
};
customClass: {
type: vue.PropType<ClassType>;
default: string;
};
customStyle: {
type: vue.PropType<vue.StyleValue>;
default: string;
};
};
type IconProps = ExtractPropTypes<typeof iconProps>;
declare const iconEmits: {
click: (evt: Event) => boolean;
};
type IconEmits = typeof iconEmits;
declare const overlayProps: {
/**
* @description 控制遮罩的显示/隐藏
*/
visible: BooleanConstructor;
/**
* @description 自定义遮罩层级
*/
zIndex: {
type: (NumberConstructor | StringConstructor)[];
default: number;
};
/**
* @description 显示/隐藏的动画时长,单位毫秒
*/
duration: {
type: (NumberConstructor | StringConstructor)[];
default: number;
};
/**
* @description 自定义遮罩类名
*/
overlayClass: {
type: PropType<string>;
default: string;
};
/**
* @description 自定义遮罩样式
*/
overlayStyle: PropType<CSSProperties>;
/**
* @description 遮罩显示时的背景是否锁定
*/
lockScroll: BooleanConstructor;
/**
* @description 点击遮罩时是否关闭
*/
closeOnClickOverlay: {
type: BooleanConstructor;
default: true;
};
/**
* @description 是否保留遮罩关闭后的内容
*/
destroyOnClose: BooleanConstructor;
customClass: {
type: PropType<ClassType>;
default: string;
};
customStyle: {
type: PropType<vue.StyleValue>;
default: string;
};
};
type OverlayProps = ExtractPropTypes<typeof overlayProps>;
declare const overlayEmits: {
"update:visible": (visible: boolean) => boolean;
click: (evt: any) => boolean;
};
type OverlayEmits = typeof overlayEmits;
declare const toastType: readonly ["text", "success", "error", "warning", "loading"];
type ToastType = (typeof toastType)[number];
declare const toastSize: readonly ["small", "base", "large"];
type ToastSize = (typeof toastSize)[number];
interface ToastOptions {
/**
* @description 是否显示
*/
visible?: boolean;
/**
* @description 弹框类型,可选值(text、success、error、warning、loading)
*/
type?: ToastType;
/**
* @description 标题
*/
title?: string;
/**
* @description 消息文本内容,支持传入HTML
*/
msg?: string;
/**
* @description 展示时长(单位:ms)
* - 值为0时toast不会自动关闭
* - 组合式函数用法/Ref用法中,loading类型默认为0
*/
duration?: number;
/**
* @description 文案尺寸,可选值(small、base、large)
*/
size?: ToastSize;
/**
* @description 组件z-index
*/
zIndex?: number;
/**
* @description 自定义图标
*/
icon?: string;
/**
* @description 图标大小
*/
iconSize?: string | number;
/**
* @description 背景颜色
*/
bgColor?: string;
/**
* @description 是否显示遮罩层
* - 组合式函数用法/Ref用法中,loading类型默认为true
*/
cover?: boolean;
/**
* @description 遮罩层颜色,默认透明
*/
coverColor?: string;
/**
* @description 是否展示在页面中部(为false时展示在底部)
*/
center?: boolean;
/**
* @description 距页面底部的距离(center为false时生效)
*/
bottom?: string | number;
/**
* @description 文案是否居中
*/
textAlignCenter?: boolean;
/**
* @description loading图标是否旋转(仅对loading类型生效)
*/
loadingRotate?: boolean;
/**
* @description 是否在点击遮罩层后关闭提示
*/
closeOnClickOverlay?: boolean;
/**
* @description 关闭时触发的事件
*/
onClose?: Function;
/**
* @description 关闭动画完成时触发的事件
*/
onClosed?: Function;
}
interface ToastInst {
/**
* @deprecated 使用`text`、`success`、`error`、`warning`、`loading`代替
* @description 显示提示
*/
showToast: {
text(msg: string, options?: ToastOptions): void;
success(msg: string, options?: ToastOptions): void;
fail(msg: string, options?: ToastOptions): void;
warn(msg: string, options?: ToastOptions): void;
loading(msg: string, options?: ToastOptions): void;
};
/**
* @deprecated 使用`hide`代替
* @description 隐藏提示
*/
hideToast: () => void;
/**
* @description 文字提示
*/
text(msg: string, options?: ToastOptions): void;
/**
* @description 成功提示
*/
success(msg: string, options?: ToastOptions): void;
/**
* @description 错误提示
*/
error(msg: string, options?: ToastOptions): void;
/**
* @description 警告提示
*/
warning(msg: string, options?: ToastOptions): void;
/**
* @description 加载提示
*/
loading(msg: string, options?: ToastOptions): void;
/**
* @description 隐藏提示
*/
hide(): void;
}
declare const toastDefaultOptionsKey = "__TOAST_OPTIONS__";
declare const toastDefaultOptions: Required<Pick<ToastOptions, 'visible' | 'type' | 'msg' | 'duration' | 'size' | 'zIndex' | 'iconSize' | 'center' | 'bottom' | 'textAlignCenter' | 'loadingRotate'>>;
declare const toastProps: {
/**
* @description 是否显示
*/
visible: {
type: BooleanConstructor;
default: boolean;
};
/**
* @description 配置注入的key
*/
selector: StringConstructor;
/**
* @description 弹框类型,可选值(text、success、error、warning、loading)
*/
type: {
type: vue.PropType<"text" | "loading" | "success" | "warning" | "error">;
default: "text" | "loading" | "success" | "warning" | "error";
};
/**
* @description 标题
*/
title: StringConstructor;
/**
* @description 消息文本内容,支持传入HTML
*/
msg: {
type: vue.PropType<string>;
default: string;
};
/**
* @description 展示时长(单位:ms)
* - 值为0时toast不会自动关闭
* - 组合式函数用法/Ref用法中,loading类型默认为0
*/
duration: {
type: NumberConstructor;
default: number;
};
/**
* @description 文案尺寸,可选值(small、base、large)
*/
size: {
type: vue.PropType<"small" | "large" | "base">;
default: "small" | "large" | "base";
};
/**
* @description 组件z-index
*/
zIndex: {
type: NumberConstructor;
default: number;
};
/**
* @description 自定义图标
*/
icon: StringConstructor;
/**
* @description 图标大小
*/
iconSize: {
type: (NumberConstructor | StringConstructor)[];
default: string | number;
};
/**
* @description 背景颜色
*/
bgColor: StringConstructor;
/**
* @description 是否显示遮罩层
* - 组合式函数用法/Ref用法中,loading类型默认为true
*/
cover: BooleanConstructor;
/**
* @description 遮罩层颜色,默认透明
*/
coverColor: StringConstructor;
/**
* @description 是否展示在页面中部(为false时展示在底部)
*/
center: {
type: BooleanConstructor;
default: boolean;
};
/**
* @description 距页面底部的距离(center为false时生效)
*/
bottom: {
type: (NumberConstructor | StringConstructor)[];
default: string | number;
};
/**
* @description 文案是否居中
*/
textAlignCenter: {
type: BooleanConstructor;
default: boolean;
};
/**
* @description loading图标是否旋转(仅对loading类型生效)
*/
loadingRotate: {
type: BooleanConstructor;
default: boolean;
};
/**
* @description 是否在点击遮罩层后关闭提示
*/
closeOnClickOverlay: BooleanConstructor;
/**
* @description 关闭时触发的事件
*/
onClose: FunctionConstructor;
/**
* @description 关闭动画完成时触发的事件
*/
onClosed: FunctionConstructor;
customClass: {
type: vue.PropType<ClassType>;
default: string;
};
customStyle: {
type: vue.PropType<vue.StyleValue>;
default: string;
};
};
type ToastProps = ExtractPropTypes<typeof toastProps>;
declare const toastEmits: {
"update:visible": (visible: boolean) => boolean;
close: () => boolean;
closed: () => boolean;
};
type ToastEmits = typeof toastEmits;
declare const popupProps: {
/**
* @description 弹出位置(top,bottom,left,right,center)
*/
position: {
type: PropType<"left" | "right" | "center" | "bottom" | "top">;
default: "left" | "right" | "center" | "bottom" | "top";
};
/**
* @description 动画名
*/
transition: {
type: PropType<"none" | "zoom" | "fade" | "slide-down" | "slide-up" | "slide-left" | "slide-right" | "fade-up" | "fade-down" | "fade-left" | "fade-right">;
default: string;
};
/**
* @description 自定义弹框类名
*/
popClass: {
type: PropType<string>;
default: string;
};
/**
* @description 是否显示关闭按钮
*/
closeable: BooleanConstructor;
/**
* @description 关闭按钮位置(top-left,top-right,bottom-left,bottom-right)
*/
closeIconPosition: {
type: PropType<"top-right" | "bottom-right" | "bottom-left" | "top-left">;
default: "top-right" | "bottom-right" | "bottom-left" | "top-left";
};
/**
* @description 关闭按钮图标
*/
closeIcon: {
type: PropType<string>;
default: string;
};
/**
* @description 是否保留弹层关闭后的内容
*/
destroyOnClose: {
type: BooleanConstructor;
default: true;
};
/**
* @description 是否显示遮罩层
*/
overlay: {
type: BooleanConstructor;
default: true;
};
/**
* @description 是否显示圆角
*/
round: BooleanConstructor;
/**
* @description 是否开启 iPhone 系列全面屏底部安全区适配,仅当 `position` 为 `bottom` 时有效
*/
safeAreaInsetBottom: BooleanConstructor;
/**
* @description 是否开启 iPhone 顶部安全区适配
*/
safeAreaInsetTop: {
type: BooleanConstructor;
default: true;
};
customClass: {
type: PropType<ClassType>;
default: string;
};
customStyle: {
type: PropType<vue.StyleValue>;
default: string;
};
visible: BooleanConstructor;
zIndex: {
type: (NumberConstructor | StringConstructor)[];
default: number;
};
duration: {
type: (NumberConstructor | StringConstructor)[];
default: number;
};
overlayClass: {
type: PropType<string>;
default: string;
};
overlayStyle: PropType<vue.CSSProperties>;
lockScroll: BooleanConstructor;
closeOnClickOverlay: {
type: BooleanConstructor;
default: true;
};
};
type PopupProps = ExtractPropTypes<typeof popupProps>;
declare const popupEmits: {
"update:visible": (visible: boolean) => boolean;
'click-pop': (evt?: any) => boolean;
'click-close-icon': () => boolean;
open: () => boolean;
close: () => boolean;
opened: () => boolean;
/**
* @deprecated
*/
opend: () => boolean;
closed: () => boolean;
'click-overlay': () => boolean;
};
type PopupEmits = typeof popupEmits;
declare function usePopup(props: PopupProps, emit: SetupContext<PopupEmits>['emit']): {
popStyle: ComputedRef<any>;
transitionName: ComputedRef<any>;
classes: ComputedRef<string>;
onClick: (e: Event) => void;
onClickCloseIcon: (e: Event) => void;
onClickOverlay: () => void;
onOpened: () => void;
onClosed: () => void;
zIndex: vue.Ref<string | number>;
showSlot: vue.Ref<boolean>;
closed: vue.Ref<boolean>;
};
declare const notifyProps: {
/**
* @description 字体颜色
*/
customColor: {
type: vue.PropType<string>;
default: string;
};
/**
* @description 展示文案,支持通过`\n`换行
*/
msg: {
type: vue.PropType<string>;
default: string;
};
/**
* @description 展示时长(ms),值为 0 时,notify 不会消失
*/
duration: {
type: NumberConstructor;
default: number;
};
/**
* @description 自定义类名
*/
className: {
type: vue.PropType<string>;
default: string;
};
/**
* @description 背景颜色
*/
background: {
type: vue.PropType<string>;
default: string;
};
/**
* @description 提示的信息类型,可选值为`primary` `success` `danger` `warning`
*/
type: {
type: vue.PropType<"primary" | "success" | "warning" | "danger">;
default: "primary" | "success" | "warning" | "danger";
};
/**
* @description 显示与否
*/
visible: BooleanConstructor;
/**
* @description 自定义位置,可选值为 `top` `bottom` `left` `right` `center`
*/
position: {
type: vue.PropType<"left" | "right" | "center" | "bottom" | "top">;
default: "left" | "right" | "center" | "bottom" | "top";
};
/**
* @description 是否留出顶部安全距离(默认为状态栏高度)
*/
safeAreaInsetTop: BooleanConstructor;
/**
* @description 顶部安全高度(默认为状态栏高度)
*/
safeHeight: NumberConstructor;
/**
* @description 关闭时的回调函数
*/
onClose: FunctionConstructor;
/**
* @description 点击时的回调函数
*/
onClick: FunctionConstructor;
customClass: {
type: vue.PropType<ClassType>;
default: string;
};
customStyle: {
type: vue.PropType<vue.StyleValue>;
default: string;
};
};
type NotifyProps = ExtractPropTypes<typeof notifyProps>;
declare const notifyEmits: {
"update:visible": (val: boolean) => boolean;
};
type NotifyEmits = typeof notifyEmits;
declare const animationName: {
center: string;
top: string;
bottom: string;
left: string;
right: string;
};
type Position = (keyof typeof animationName);
declare const notifyType: readonly ["primary", "success", "danger", "warning"];
type NotifyType = (typeof notifyType)[number];
interface NotifyOptions {
/**
* @description 提示的信息类型,可选值为`primary` `success` `danger` `warning`
*/
type?: NotifyType;
/**
* @description 展示文案,支持通过`\n`换行
*/
msg: string;
/**
* @description 字体颜色
*/
customColor?: string;
/**
* @description 背景颜色
*/
background?: string;
/**
* @description 展示时长(ms),值为 0 时,notify 不会消失
*/
duration?: number;
/**
* @description 自定义位置,可选值为 `top` `bottom` `left` `right` `center`
*/
position?: Position;
/**
* @description 是否留出顶部安全距离(默认为状态栏高度)
*/
safeAreaInsetTop?: boolean;
}
interface NotifyInst {
showNotify: (options: NotifyOptions) => void;
hideNotify: () => void;
}
declare function useNotify(props: NotifyProps, emit: SetupContext<NotifyEmits>['emit']): {
clickCover: () => void;
showNotify: (option: NotifyOptions) => void;
hideNotify: () => void;
notifyStatus: vue.Ref<{
type?: "primary" | "success" | "warning" | "danger" | undefined;
msg: string;
customColor?: string | undefined;
background?: string | undefined;
duration?: number | undefined;
position?: "left" | "right" | "center" | "bottom" | "top" | undefined;
safeAreaInsetTop?: boolean | undefined;
}>;
isShowPopup: vue.Ref<boolean>;
};
declare const dragProps: {
/**
* @description 是否开启自动吸边(根据 screenWidth 进行吸边)
*/
attract: BooleanConstructor;
/**
* @description 拖拽元素的拖拽方向限制,'x'/'y'/'all'三选一
*/
direction: {
type: vue.PropType<"all" | "x" | "y">;
default: "all" | "x" | "y";
};
/**
* @description 拖拽元素的拖拽边界
*/
boundary: {
type: ObjectConstructor;
default: () => {
top: number;
left: number;
right: number;
bottom: number;
};
};
customClass: {
type: vue.PropType<ClassType>;
default: string;
};
customStyle: {
type: vue.PropType<vue.StyleValue>;
default: string;
};
};
type DragProps = ExtractPropTypes<typeof dragProps>;
declare const swipeDirection: readonly ["left", "right", ""];
type SwipeDirection = (typeof swipeDirection)[number];
declare const swipePosition: readonly ["left", "content", "right"];
type SwipePosition = (typeof swipePosition)[number];
interface SwipeToggleEvent {
/**
* swipe名称
*/
name: string;
/**
* 滑动方向
*/
direction: SwipeDirection;
/**
* @deprecated 使用 `direction` 代替
* 滑动方向
*/
position: SwipeDirection;
}
interface SwipeInst {
/**
* 滑动单元格侧边栏,left 指向左滑,right 指向右滑
* @param position
*/
open: (direction?: SwipeDirection) => void;
/**
* 收起单元格侧边栏,同上
*/
close: () => void;
}
declare const swipeProps: {
/**
* @description 唯一标识
*/
name: StringConstructor;
/**
* @description 是否阻止滑动事件冒泡
*/
touchMoveStopPropagation: BooleanConstructor;
/**
* @description 是否阻止滑动事件行为
*/
touchMovePreventDefault: BooleanConstructor;
/**
* @description 是否禁用滑动
*/
disabled: BooleanConstructor;
/**
* @description 点击自动关闭的部分
*/
closeOnClick: {
type: vue.PropType<("left" | "right" | "content")[]>;
default: () => ("left" | "right" | "content")[];
};
customClass: {
type: vue.PropType<ClassType>;
default: string;
};
customStyle: {
type: vue.PropType<vue.StyleValue>;
default: string;
};
};
type SwipeProps = ExtractPropTypes<typeof swipeProps>;
declare const swipeEmits: {
open: (event: SwipeToggleEvent) => boolean;
close: (event: SwipeToggleEvent) => boolean;
click: (val: string) => boolean;
};
type SwipeEmits = typeof swipeEmits;
declare const swipegroupProps: {
/**
* @description 控制内部 Swipe 互斥,即滑动打开某一个 Swipe 时,触发其余 Swipe 的 close 方法
*/
lock: BooleanConstructor;
customClass: {
type: vue.PropType<ClassType>;
default: string;
};
customStyle: {
type: vue.PropType<vue.StyleValue>;
default: string;
};
};
type SwipeGroupProps = ExtractPropTypes<typeof swipegroupProps>;
declare const switchProps: {
/**
* @description 开关状态
*/
modelValue: {
type: (NumberConstructor | StringConstructor | BooleanConstructor)[];
default: boolean;
};
/**
* @description 禁用状态
* @deprecated 即将弃用,请使用`disabled`
*/
disable: BooleanConstructor;
/**
* @description 禁用状态
*/
disabled: BooleanConstructor;
/**
* @description 打开时的背景颜色
*/
activeColor: StringConstructor;
/**
* @description 关闭时的背景颜色
*/
inactiveColor: StringConstructor;
/**
* @description 打开时文字描述
*/
activeText: StringConstructor;
/**
* @description 关闭时文字描述
*/
inactiveText: StringConstructor;
/**
* @description 打开时组件的值
*/
activeValue: {
type: (NumberConstructor | StringConstructor | BooleanConstructor)[];
default: boolean;
};
/**
* @description 关闭组件的值
*/
inactiveValue: {
type: (NumberConstructor | StringConstructor | BooleanConstructor)[];
default: boolean;
};
/**
* @description 加载状态
*/
loading: BooleanConstructor;
customClass: {
type: vue.PropType<ClassType>;
default: string;
};
customStyle: {
type: vue.PropType<vue.StyleValue>;
default: string;
};
};
type SwitchProps = ExtractPropTypes<typeof switchProps>;
declare const switchEmits: {
"update:modelValue": (val: any) => boolean;
change: (val: any, evt?: Event) => boolean;
};
type SwitchEmits = typeof switchEmits;
declare const backtopProps: {
/**
* @description 滚动区域的高度
*/
height: {
type: vue.PropType<string>;
default: string;
};
/**
* @description 距离页面底部距离
*/
bottom: {
type: NumberConstructor;
default: number;
};
/**
* @description 距离页面右侧距离
*/
right: {
type: NumberConstructor;
default: number;
};
/**
* @description 页面垂直滚动多高后出现
*/
distance: {
type: NumberConstructor;
default: number;
};
/**
* @description 设置组件页面层级
*/
zIndex: {
type: NumberConstructor;
default: number;
};
/**
* @description 自定义图标颜色
*/
customColor: StringConstructor;
customClass: {
type: vue.PropType<ClassType>;
default: string;
};
customStyle: {
type: vue.PropType<vue.StyleValue>;
default: string;
};
};
type BacktopProps = ExtractPropTypes<typeof backtopProps>;
declare const backtopEmits: {
click: (evt: MouseEvent) => boolean;
};
type BacktopEmits = typeof backtopEmits;
declare const infiniteloadingProps: {
hasMore: {
type: BooleanConstructor;
default: boolean;
};
threshold: {
type: NumberConstructor;
default: number;
};
upperThreshold: {
type: NumberConstructor;
default: number;
};
pullIcon: {
type: StringConstructor;
default: string;
};
pullTxt: {
type: StringConstructor;
default: string;
};
loadIcon: {
type: StringConstructor;
default: string;
};
loadTxt: {
type: StringConstructor;
default: string;
};
loadMoreTxt: {
type: StringConstructor;
default: string;
};
useWindow: {
type: BooleanConstructor;
default: boolean;
};
containerId: {
type: StringConstructor;
default: string;
};
useCapture: {
type: BooleanConstructor;
default: boolean;
};
isOpenRefresh: {
type: BooleanConstructor;
default: boolean;
};
};
type InfiniteLoadingProps = ExtractPropTypes<typeof infiniteloadingProps>;
declare const infiniteloadingEmits: {
scrollChange: (val: number) => boolean;
loadMore: (fun: () => void) => boolean;
refresh: (fun: () => void) => boolean;
};
type InfiniteLoadingEmits = typeof infiniteloadingEmits;
declare const dividerProps: {
/**
* @description 内容位置,可选值为 `left`、`right`、`center`
*/
contentPosition: {
type: vue.PropType<"left" | "right" | "center">;
default: "left" | "right" | "center";
};
/**
* @description 是否使用虚线
*/
dashed: BooleanConstructor;
/**
* @description 是否使用 `0.5px` 线
*/
hairline: {
type: BooleanConstructor;
default: true;
};
/**
* @description 水平还是垂直类型,可选值 `vertical`和`horizontal`
*/
direction: {
type: vue.PropType<"horizontal" | "vertical">;
default: "horizontal" | "vertical";
};
customClass: {
type: vue.PropType<ClassType>;
default: string;
};
customStyle: {
type: vue.PropType<vue.StyleValue>;
default: string;
};
};
type DividerProps = ExtractPropTypes<typeof dividerProps>;
declare const GRID_KEY: unique symbol;
declare const gridProps: {
/**
* @description 列数
*/
columnNum: {
type: (NumberConstructor | StringConstructor)[];
default: number;
};
/**
* @description 是否显示边框
*/
border: {
type: BooleanConstructor;
default: true;
};
/**
* @description 格子之间的间距,默认单位为 `px`
*/
gutter: {
type: (NumberConstructor | StringConstructor)[];
default: number;
};
/**
* @description 是否将格子内容居中显示
*/
center: {
type: BooleanConstructor;
default: true;
};
/**
* @description 是否将格子固定为正方形
*/
square: BooleanConstructor;
/**
* @description 内容翻转
*/
reverse: BooleanConstructor;
/**
* @description 格子内容排列的方向,可选值为 `horizontal`
*/
direction: {
type: vue.PropType<"horizontal" | "vertical">;
default: "horizontal" | "vertical";
};
/**
* @description 是否开启格子点击反馈
*/
clickable: BooleanConstructor;
customClass: {
type: vue.PropType<ClassType>;
default: string;
};
customStyle: {
type: vue.PropType<vue.StyleValue>;
default: string;
};
};
type GridProps = ExtractPropTypes<typeof gridProps>;
declare const gridItemProps: {
/**
* @description 文字
*/
text: StringConstructor;
/**
* @description 点击后跳转的目标路由对象,同 vue-router 的 to 属性
*/
to: (StringConstructor | ObjectConstructor)[];
/**
* @description 点击后跳转的链接地址