UNPKG

nutui-uniapp

Version:

京东风格的轻量级移动端 Uniapp、Vue3 组件库(支持小程序开发)

2,001 lines (1,964 loc) 248 kB
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 点击后跳转的链接地址