sard-uniapp/components/image/common.d.ts

sard-uniapp 是一套基于 Uniapp + Vue3 框架开发的兼容多端的 UI 组件库

import { type StyleValue } from 'vue';
export type ImageMode = 'scaleToFill' | 'aspectFit' | 'aspectFill' | 'widthFix' | 'heightFix' | 'top' | 'bottom' | 'center' | 'left' | 'right' | 'top left' | 'top right' | 'bottom left' | 'bottom right';
export interface ImageProps {
    rootStyle?: StyleValue;
    rootClass?: string;
    src?: string;
    mode?: ImageMode;
    lazyLoad?: boolean;
    webp?: boolean;
    showMenuByLongpress?: boolean;
    width?: string;
    height?: string;
    shape?: 'circle' | 'square';
    radius?: string;
    loadingIcon?: string;
    errorIcon?: string;
    iconFamily?: string;
    showLoading?: boolean;
    showError?: boolean;
    background?: string;
    fade?: boolean;
    customLoad?: (callback: (event: any) => void) => any;
}
export declare const defaultImageProps: {
    rootStyle?: (string | false | ((props: {
        rootStyle: StyleValue;
        rootClass: string;
        src: string;
        mode: ImageMode;
        lazyLoad: boolean;
        webp: boolean;
        showMenuByLongpress: boolean;
        width: string;
        height: string;
        shape: "circle" | "square";
        radius: string;
        loadingIcon: string;
        errorIcon: string;
        iconFamily: string;
        showLoading: boolean;
        showError: boolean;
        background: string;
        fade: boolean;
        customLoad: (callback: (event: any) => void) => any;
    }) => string | false | import("vue").CSSProperties | StyleValue[]) | null) | undefined;
    rootClass?: (string | ((props: {
        rootStyle: StyleValue;
        rootClass: string;
        src: string;
        mode: ImageMode;
        lazyLoad: boolean;
        webp: boolean;
        showMenuByLongpress: boolean;
        width: string;
        height: string;
        shape: "circle" | "square";
        radius: string;
        loadingIcon: string;
        errorIcon: string;
        iconFamily: string;
        showLoading: boolean;
        showError: boolean;
        background: string;
        fade: boolean;
        customLoad: (callback: (event: any) => void) => any;
    }) => string)) | undefined;
    src?: (string | ((props: {
        rootStyle: StyleValue;
        rootClass: string;
        src: string;
        mode: ImageMode;
        lazyLoad: boolean;
        webp: boolean;
        showMenuByLongpress: boolean;
        width: string;
        height: string;
        shape: "circle" | "square";
        radius: string;
        loadingIcon: string;
        errorIcon: string;
        iconFamily: string;
        showLoading: boolean;
        showError: boolean;
        background: string;
        fade: boolean;
        customLoad: (callback: (event: any) => void) => any;
    }) => string)) | undefined;
    mode?: (ImageMode | ((props: {
        rootStyle: StyleValue;
        rootClass: string;
        src: string;
        mode: ImageMode;
        lazyLoad: boolean;
        webp: boolean;
        showMenuByLongpress: boolean;
        width: string;
        height: string;
        shape: "circle" | "square";
        radius: string;
        loadingIcon: string;
        errorIcon: string;
        iconFamily: string;
        showLoading: boolean;
        showError: boolean;
        background: string;
        fade: boolean;
        customLoad: (callback: (event: any) => void) => any;
    }) => "center" | "left" | "right" | "bottom" | "top" | "scaleToFill" | "aspectFit" | "aspectFill" | "widthFix" | "heightFix" | "top left" | "top right" | "bottom left" | "bottom right")) | undefined;
    lazyLoad?: (boolean | ((props: {
        rootStyle: StyleValue;
        rootClass: string;
        src: string;
        mode: ImageMode;
        lazyLoad: boolean;
        webp: boolean;
        showMenuByLongpress: boolean;
        width: string;
        height: string;
        shape: "circle" | "square";
        radius: string;
        loadingIcon: string;
        errorIcon: string;
        iconFamily: string;
        showLoading: boolean;
        showError: boolean;
        background: string;
        fade: boolean;
        customLoad: (callback: (event: any) => void) => any;
    }) => boolean)) | undefined;
    webp?: (boolean | ((props: {
        rootStyle: StyleValue;
        rootClass: string;
        src: string;
        mode: ImageMode;
        lazyLoad: boolean;
        webp: boolean;
        showMenuByLongpress: boolean;
        width: string;
        height: string;
        shape: "circle" | "square";
        radius: string;
        loadingIcon: string;
        errorIcon: string;
        iconFamily: string;
        showLoading: boolean;
        showError: boolean;
        background: string;
        fade: boolean;
        customLoad: (callback: (event: any) => void) => any;
    }) => boolean)) | undefined;
    showMenuByLongpress?: (boolean | ((props: {
        rootStyle: StyleValue;
        rootClass: string;
        src: string;
        mode: ImageMode;
        lazyLoad: boolean;
        webp: boolean;
        showMenuByLongpress: boolean;
        width: string;
        height: string;
        shape: "circle" | "square";
        radius: string;
        loadingIcon: string;
        errorIcon: string;
        iconFamily: string;
        showLoading: boolean;
        showError: boolean;
        background: string;
        fade: boolean;
        customLoad: (callback: (event: any) => void) => any;
    }) => boolean)) | undefined;
    width?: (string | ((props: {
        rootStyle: StyleValue;
        rootClass: string;
        src: string;
        mode: ImageMode;
        lazyLoad: boolean;
        webp: boolean;
        showMenuByLongpress: boolean;
        width: string;
        height: string;
        shape: "circle" | "square";
        radius: string;
        loadingIcon: string;
        errorIcon: string;
        iconFamily: string;
        showLoading: boolean;
        showError: boolean;
        background: string;
        fade: boolean;
        customLoad: (callback: (event: any) => void) => any;
    }) => string)) | undefined;
    height?: (string | ((props: {
        rootStyle: StyleValue;
        rootClass: string;
        src: string;
        mode: ImageMode;
        lazyLoad: boolean;
        webp: boolean;
        showMenuByLongpress: boolean;
        width: string;
        height: string;
        shape: "circle" | "square";
        radius: string;
        loadingIcon: string;
        errorIcon: string;
        iconFamily: string;
        showLoading: boolean;
        showError: boolean;
        background: string;
        fade: boolean;
        customLoad: (callback: (event: any) => void) => any;
    }) => string)) | undefined;
    shape?: ("circle" | "square" | ((props: {
        rootStyle: StyleValue;
        rootClass: string;
        src: string;
        mode: ImageMode;
        lazyLoad: boolean;
        webp: boolean;
        showMenuByLongpress: boolean;
        width: string;
        height: string;
        shape: "circle" | "square";
        radius: string;
        loadingIcon: string;
        errorIcon: string;
        iconFamily: string;
        showLoading: boolean;
        showError: boolean;
        background: string;
        fade: boolean;
        customLoad: (callback: (event: any) => void) => any;
    }) => "circle" | "square")) | undefined;
    radius?: (string | ((props: {
        rootStyle: StyleValue;
        rootClass: string;
        src: string;
        mode: ImageMode;
        lazyLoad: boolean;
        webp: boolean;
        showMenuByLongpress: boolean;
        width: string;
        height: string;
        shape: "circle" | "square";
        radius: string;
        loadingIcon: string;
        errorIcon: string;
        iconFamily: string;
        showLoading: boolean;
        showError: boolean;
        background: string;
        fade: boolean;
        customLoad: (callback: (event: any) => void) => any;
    }) => string)) | undefined;
    loadingIcon?: (string | ((props: {
        rootStyle: StyleValue;
        rootClass: string;
        src: string;
        mode: ImageMode;
        lazyLoad: boolean;
        webp: boolean;
        showMenuByLongpress: boolean;
        width: string;
        height: string;
        shape: "circle" | "square";
        radius: string;
        loadingIcon: string;
        errorIcon: string;
        iconFamily: string;
        showLoading: boolean;
        showError: boolean;
        background: string;
        fade: boolean;
        customLoad: (callback: (event: any) => void) => any;
    }) => string)) | undefined;
    errorIcon?: (string | ((props: {
        rootStyle: StyleValue;
        rootClass: string;
        src: string;
        mode: ImageMode;
        lazyLoad: boolean;
        webp: boolean;
        showMenuByLongpress: boolean;
        width: string;
        height: string;
        shape: "circle" | "square";
        radius: string;
        loadingIcon: string;
        errorIcon: string;
        iconFamily: string;
        showLoading: boolean;
        showError: boolean;
        background: string;
        fade: boolean;
        customLoad: (callback: (event: any) => void) => any;
    }) => string)) | undefined;
    iconFamily?: (string | ((props: {
        rootStyle: StyleValue;
        rootClass: string;
        src: string;
        mode: ImageMode;
        lazyLoad: boolean;
        webp: boolean;
        showMenuByLongpress: boolean;
        width: string;
        height: string;
        shape: "circle" | "square";
        radius: string;
        loadingIcon: string;
        errorIcon: string;
        iconFamily: string;
        showLoading: boolean;
        showError: boolean;
        background: string;
        fade: boolean;
        customLoad: (callback: (event: any) => void) => any;
    }) => string)) | undefined;
    showLoading?: (boolean | ((props: {
        rootStyle: StyleValue;
        rootClass: string;
        src: string;
        mode: ImageMode;
        lazyLoad: boolean;
        webp: boolean;
        showMenuByLongpress: boolean;
        width: string;
        height: string;
        shape: "circle" | "square";
        radius: string;
        loadingIcon: string;
        errorIcon: string;
        iconFamily: string;
        showLoading: boolean;
        showError: boolean;
        background: string;
        fade: boolean;
        customLoad: (callback: (event: any) => void) => any;
    }) => boolean)) | undefined;
    showError?: (boolean | ((props: {
        rootStyle: StyleValue;
        rootClass: string;
        src: string;
        mode: ImageMode;
        lazyLoad: boolean;
        webp: boolean;
        showMenuByLongpress: boolean;
        width: string;
        height: string;
        shape: "circle" | "square";
        radius: string;
        loadingIcon: string;
        errorIcon: string;
        iconFamily: string;
        showLoading: boolean;
        showError: boolean;
        background: string;
        fade: boolean;
        customLoad: (callback: (event: any) => void) => any;
    }) => boolean)) | undefined;
    background?: (string | ((props: {
        rootStyle: StyleValue;
        rootClass: string;
        src: string;
        mode: ImageMode;
        lazyLoad: boolean;
        webp: boolean;
        showMenuByLongpress: boolean;
        width: string;
        height: string;
        shape: "circle" | "square";
        radius: string;
        loadingIcon: string;
        errorIcon: string;
        iconFamily: string;
        showLoading: boolean;
        showError: boolean;
        background: string;
        fade: boolean;
        customLoad: (callback: (event: any) => void) => any;
    }) => string)) | undefined;
    fade?: (boolean | ((props: {
        rootStyle: StyleValue;
        rootClass: string;
        src: string;
        mode: ImageMode;
        lazyLoad: boolean;
        webp: boolean;
        showMenuByLongpress: boolean;
        width: string;
        height: string;
        shape: "circle" | "square";
        radius: string;
        loadingIcon: string;
        errorIcon: string;
        iconFamily: string;
        showLoading: boolean;
        showError: boolean;
        background: string;
        fade: boolean;
        customLoad: (callback: (event: any) => void) => any;
    }) => boolean)) | undefined;
    customLoad?: (((callback: (event: any) => void) => any) | ((props: {
        rootStyle: StyleValue;
        rootClass: string;
        src: string;
        mode: ImageMode;
        lazyLoad: boolean;
        webp: boolean;
        showMenuByLongpress: boolean;
        width: string;
        height: string;
        shape: "circle" | "square";
        radius: string;
        loadingIcon: string;
        errorIcon: string;
        iconFamily: string;
        showLoading: boolean;
        showError: boolean;
        background: string;
        fade: boolean;
        customLoad: (callback: (event: any) => void) => any;
    }) => (callback: (event: any) => void) => any)) | undefined;
};
export interface ImageSlots {
    loading?(props: Record<string, never>): any;
    error?(props: Record<string, never>): any;
}
export interface ImageEmits {
    (e: 'click', event: any): void;
    (e: 'load', event: any): void;
    (e: 'error', event: any): void;
}
export interface ImageExpose {
}
export declare const FIX_MODES: {
    widthFix: boolean;
    heightFix: boolean;
};
export declare const IMAGE_MODES: {
    aspectFit: string[];
    aspectFill: string[];
    scaleToFill: string[];
    widthFix: (string | undefined)[];
    heightFix: (string | undefined)[];
    top: string[];
    bottom: string[];
    left: string[];
    right: string[];
    center: string[];
    'top left': string[];
    'top right': string[];
    'bottom left': string[];
    'bottom right': string[];
};