@uni-helper/uni-app-types
Version:
为 uni-app 组件提供 TypeScript 类型
2,165 lines (2,135 loc) • 307 kB
TypeScript
import { StyleValue, DefineComponent } from 'vue';
/** 组件的一些属性值集合 */
interface _EventTarget<Dataset extends Record<string, any> = Record<string, any>> {
/** 事件源组件的id */
id?: string;
/** 当前组件的类型 */
tagName?: string;
/** 事件源组件上由 data- 开头的自定义属性组成的集合 */
dataset?: Dataset;
/** 距离页面顶部的偏移量 */
offsetTop: number;
/** 距离页面左边的偏移量 */
offsetLeft: number;
[key: string]: any;
}
/** 基础事件 */
interface _BaseEvent<Mark extends Record<string, any> = Record<string, any>, CurrentTargetDataset extends Record<string, any> = Record<string, any>, TargetDataset extends Record<string, any> = CurrentTargetDataset> {
/** 事件类型 */
type?: string;
/** 事件生成时的时间戳 */
timeStamp?: number;
/** 事件冒泡路径上所有由 mark: 开头的自定义属性组成的集合 */
mark?: Mark;
/** 触发事件的源组件的一些属性值集合 */
target?: _EventTarget<TargetDataset>;
/** 事件绑定的当前组件的一些属性值集合 */
currentTarget?: _EventTarget<CurrentTargetDataset>;
[key: string]: any;
}
/** 自定义事件 */
interface _CustomEvent<Detail extends Record<string, any> = Record<string, any>, Mark extends Record<string, any> = Record<string, any>, CurrentTargetDataset extends Record<string, any> = Record<string, any>, TargetDataset extends Record<string, any> = CurrentTargetDataset> extends _BaseEvent<Mark, CurrentTargetDataset, TargetDataset> {
/** 额外信息 */
detail: Detail;
[key: string]: any;
}
/** 当前停留在屏幕中的触摸点信息 */
interface _TouchDetail {
/** 标志符 */
identifier?: number;
/** 距离文档左上角的横向距离 */
pageX?: number;
/** 距离文档左上角的纵向距离 */
pageY?: number;
/** 距离页面可显示区域(屏幕除去导航条)左上角的横向距离 */
clientX?: number;
/** 距离页面可显示区域(屏幕除去导航条)左上角的纵向距离 */
clientY?: number;
}
/** 当前停留在 canvas 中的触摸点信息 */
interface _TouchCanvasDetail {
/** 标志符 */
identifier?: number;
/** 距离 canvas 左上角的横向距离 */
x?: number;
/** 距离 canvas 左上角的纵向距离 */
y?: number;
}
/** 触摸事件 */
interface _BaseTouchEvent<Detail extends Record<string, any> = Record<string, any>, T extends _TouchDetail | _TouchCanvasDetail = _TouchDetail, Mark extends Record<string, any> = Record<string, any>, CurrentTargetDataset extends Record<string, any> = Record<string, any>, TargetDataset extends Record<string, any> = CurrentTargetDataset> extends _CustomEvent<Detail, Mark, CurrentTargetDataset, TargetDataset> {
/** 当前停留在屏幕中的触摸点信息的数组 */
touches: T[];
/** 当前变化的触摸点信息的数组 */
changedTouches: T[];
}
/** 触摸事件响应 */
interface _TouchEvent<Detail extends Record<string, any> = Record<string, any>, Mark extends Record<string, any> = Record<string, any>, CurrentTargetDataset extends Record<string, any> = Record<string, any>, TargetDataset extends Record<string, any> = CurrentTargetDataset> extends _BaseTouchEvent<Detail, _TouchDetail, Mark, CurrentTargetDataset, TargetDataset> {
}
/** canvas 触摸事件响应 */
interface _TouchCanvasEvent<Mark extends Record<string, any> = Record<string, any>, TargetDataset extends Record<string, any> = Record<string, any>> extends _BaseTouchEvent<never, _TouchCanvasDetail, Mark, never, TargetDataset> {
currentTarget: never;
}
declare global {
namespace UniHelper {
/** 组件的一些属性值集合 */
interface EventTarget extends _EventTarget {
}
/** 基础事件 */
interface BaseEvent extends _BaseEvent {
}
/** 自定义事件 */
interface CustomEvent extends _CustomEvent {
}
/** 当前停留在屏幕中的触摸点信息 */
interface TouchDetail extends _TouchDetail {
}
/** 当前停留在 canvas 中的触摸点信息 */
interface TouchCanvasDetail extends _TouchCanvasDetail {
}
/** 触摸事件 */
interface BaseTouchEvent extends _BaseTouchEvent {
}
/** 触摸事件响应 */
interface TouchEvent extends _TouchEvent {
}
/** canvas 触摸事件响应 */
interface TouchCanvasEvent extends _TouchCanvasEvent {
}
}
}
type CommonProps = {
class?: any;
style?: StyleValue;
};
/** 视图容器属性 */
type _ViewProps = CommonProps & Partial<{
/**
* 指定按下去的样式类
*
* 当 hover-class="none" 时,没有点击态效果
*
* 默认为 none
*/
hoverClass: string;
/**
* 指定是否阻止本节点的祖先节点出现点击态
*
* 默认为 false
*/
hoverStopPropagation: boolean;
/**
* 按住后多久出现点击态
*
* 单位为毫秒
*
* 默认为 50
*/
hoverStartTime: number;
/**
* 手指松开后点击态保留时间
*
* 单位为毫秒
*
* 默认为 400
*/
hoverStayTime: number;
}>;
/**
* 视图容器,和 div 类似,用于包裹各种元素内容
*
* 包裹文字建议使用 text
*
* 如果使用 div,会编译成 view
*/
type _View = DefineComponent<_ViewProps>;
/** 视图容器实例 */
type _ViewInstance = InstanceType<_View>;
declare global {
namespace UniHelper {
/** 视图容器属性 */
type ViewProps = _ViewProps;
/**
* 视图容器,和 div 类似,用于包裹各种元素内容
*
* 包裹文字建议使用 text
*
* 如果使用 div,会编译成 view
* ***
* [👉🏻点击查看组件文档](https://uniapp.dcloud.net.cn/component/view.html)
* |
* [使用说明](https://uni-typed.netlify.app/)
*/
type View = _View;
/** 视图容器实例 */
type ViewInstance = _ViewInstance;
}
}
declare module "vue" {
interface GlobalComponents {
/**
* 视图容器,和 div 类似,用于包裹各种元素内容
*
* 包裹文字建议使用 text
*
* 如果使用 div,会编译成 view
* ***
* [👉🏻点击查看组件文档](https://uniapp.dcloud.net.cn/component/view.html)
* |
* [使用说明](https://uni-typed.netlify.app/)
*/
view: _View;
}
}
declare global {
namespace JSX {
interface IntrinsicElements {
/**
* 视图容器,和 div 类似,用于包裹各种元素内容
*
* 包裹文字建议使用 text
*
* 如果使用 div,会编译成 view
* ***
* [👉🏻点击查看组件文档](https://uniapp.dcloud.net.cn/component/view.html)
* |
* [使用说明](https://uni-typed.netlify.app/)
*/
view: _View;
}
}
}
declare module "vue/jsx-runtime" {
namespace JSX {
interface IntrinsicElements {
/**
* 视图容器,和 div 类似,用于包裹各种元素内容
*
* 包裹文字建议使用 text
*
* 如果使用 div,会编译成 view
* ***
* [👉🏻点击查看组件文档](https://uniapp.dcloud.net.cn/component/view.html)
* |
* [使用说明](https://uni-typed.netlify.app/)
*/
view: _View;
}
}
}
/**
* 设置自定义下拉刷新默认样式
*
* None 不使用默认样式
*/
type _ScrollViewRefresherDefaultStyle = "black" | "white" | "none";
type _ScrollViewOnScrolltoupperEvent = _BaseEvent;
/** 滚动到顶部/左边时触发 */
type _ScrollViewOnScrolltoupper = (event: _ScrollViewOnScrolltoupperEvent) => void;
type _ScrollViewOnScrolltolowerEvent = _BaseEvent;
/** 滚动到底部/右边时触发 */
type _ScrollViewOnScrolltolower = (event: _ScrollViewOnScrolltolowerEvent) => void;
interface _ScrollViewOnScrollDetail {
scrollLeft: number;
scrollTop: number;
scrollHeight: number;
scrollWidth: number;
deltaX: number;
deltaY: number;
}
type _ScrollViewOnScrollEvent = _CustomEvent<_ScrollViewOnScrollDetail>;
/** 滚动时触发 */
type _ScrollViewOnScroll = (event: _ScrollViewOnScrollEvent) => void;
type _ScrollViewOnRefresherpullingEvent = _BaseEvent;
/** 自定义下拉刷新控件被下拉时触发 */
type _ScrollViewOnRefresherpulling = (event: _ScrollViewOnRefresherpullingEvent) => void;
type _ScrollViewOnRefresherrefreshEvent = _BaseEvent;
/** 自定义下拉刷新被触发时触发 */
type _ScrollViewOnRefresherrefresh = (event: _ScrollViewOnRefresherrefreshEvent) => void;
type _ScrollViewOnRefresherrestoreEvent = _BaseEvent;
/** 自定义下拉刷新被复位时触发 */
type _ScrollViewOnRefresherrestore = (event: _ScrollViewOnRefresherrestoreEvent) => void;
type _ScrollViewOnRefresherabortEvent = _BaseEvent;
/** 自定义下拉刷新被中止时触发 */
type _ScrollViewOnRefresherabort = (event: _ScrollViewOnRefresherabortEvent) => void;
/** 可滚动视图区域属性 */
type _ScrollViewProps = CommonProps & Partial<{
/**
* 是否允许横向滚动
*
* 默认为 false
*/
scrollX: boolean;
/**
* 是否允许纵向滚动
*
* 默认为 false
*/
scrollY: boolean;
/**
* 距顶部/左边多远时触发 scrolltoupper 事件
*
* 单位为 px
*
* 默认为 50
*/
upperThreshold: number | string;
/**
* 距底部/右边多远时触发 scrolltolower 事件
*
* 单位为 px
*
* 默认为 50
*/
lowerThreshold: number | string;
/**
* 设置纵向滚动条位置
*
* 优先级低于 scroll-into-view
*/
scrollTop: number | string;
/**
* 优先级低于 scroll-into-view
*
* @decs 设置横向滚动条位置
*/
scrollLeft: number | string;
/**
* 值应为某子元素 id,id 不能以数字开头
*
* 设置哪个方向可滚动,则在哪个方向滚动到该元素
*
* 优先级高于 scroll-top / scroll-left
*/
scrollIntoView: string;
/**
* 在设置滚动条位置时是否使用动画过渡
*
* 默认为 false
*/
scrollWithAnimation: boolean;
/**
* 是否允许 iOS 点击顶部状态栏、安卓双击标题栏时,滚动条返回顶部
*
* 只支持纵向
*
* 默认为 false
*/
enableBackToTop: boolean;
/**
* 控制是否出现滚动条
*
* 默认为 false
*/
showScrollbar: boolean;
/**
* 是否开启自定义下拉刷新
*
* 默认为 false
*/
refresherEnabled: boolean;
/**
* 设置自定义下拉刷新阈值
*
* 默认为 45
*/
refresherThreshold: number;
/**
* 设置自定义下拉刷新默认样式
*
* None 不使用默认样式
*
* 默认为 black
*/
refresherDefaultStyle: _ScrollViewRefresherDefaultStyle;
/**
* 自定义下拉刷新区域背景颜色
*
* 默认为 #FFF
*/
refresherBackground: string;
/**
* 设置当前下拉刷新状态
*
* True 下拉刷新已经被触发
*
* False 下拉刷新未被触发
*
* 默认为 false
*/
refresherTriggered: boolean;
/**
* 是否启用 flexbox 布局
*
* 开启后,当前节点声明了 display: flex 就会成为 flex container,并作用于其子节点
*
* 默认为 false
*/
enableFlex: boolean;
/**
* 是否开启 scroll anchoring 特性,即控制滚动位置不随内容变化而抖动,仅在 iOS 下生效
*
* 安卓下可参考 CSS overflow-anchor 属性
*
* 默认为 false
*/
scrollAnchoring: boolean;
/** 滚动到顶部/左边时触发 */
onScrolltoupper: _ScrollViewOnScrolltoupper;
/** 滚动到底部/右边时触发 */
onScrolltolower: _ScrollViewOnScrolltolower;
/** 滚动时触发 */
onScroll: _ScrollViewOnScroll;
/** 自定义下拉刷新控件被下拉时触发 */
onRefresherpulling: _ScrollViewOnRefresherpulling;
/** 自定义下拉刷新被触发时触发 */
onRefresherrefresh: _ScrollViewOnRefresherrefresh;
/** 自定义下拉刷新被复位时触发 */
onRefresherrestore: _ScrollViewOnRefresherrestore;
/** 自定义下拉刷新被中止时触发 */
onRefresherabort: _ScrollViewOnRefresherabort;
}>;
/**
* 可滚动视图区域,用于区域滚动
*
* 在 webview 渲染的页面中,区域滚动的性能不及页面滚动
*
* 纵向滚动时,需要给 scroll-view 一个固定高度,通过 css 设置 height
*
* 横向滚动时,需要给 scroll-view 添加 white-space: nowrap; 样式
*
* Scroll-view 是区域滚动,不会触发页面滚动,无法触发 pages.json
* 配置的下拉刷新、页面触底onReachBottomDistance、titleNView 的 transparent 透明渐变
*/
type _ScrollView = DefineComponent<_ScrollViewProps>;
/** 可滚动视图区域实例 */
type _ScrollViewInstance = InstanceType<_ScrollView>;
declare global {
namespace UniHelper {
/**
* 设置自定义下拉刷新默认样式
*
* None 不使用默认样式
*/
type ScrollViewRefresherDefaultStyle = _ScrollViewRefresherDefaultStyle;
type ScrollViewOnScrolltoupperEvent = _ScrollViewOnScrolltoupperEvent;
/** 滚动到顶部/左边时触发 */
interface ScrollViewOnScrolltoupper extends _ScrollViewOnScrolltoupper {
}
type ScrollViewOnScrolltolowerEvent = _ScrollViewOnScrolltolowerEvent;
/** 滚动到底部/右边时触发 */
interface ScrollViewOnScrolltolower extends _ScrollViewOnScrolltolower {
}
interface ScrollViewOnScrollDetail extends _ScrollViewOnScrollDetail {
}
type ScrollViewOnScrollEvent = _ScrollViewOnScrollEvent;
/** 滚动时触发 */
interface ScrollViewOnScroll extends _ScrollViewOnScroll {
}
type ScrollViewOnRefresherpullingEvent = _ScrollViewOnRefresherpullingEvent;
/** 自定义下拉刷新控件被下拉时触发 */
interface ScrollViewOnRefresherpulling extends _ScrollViewOnRefresherpulling {
}
type ScrollViewOnRefresherrefreshEvent = _ScrollViewOnRefresherrefreshEvent;
/** 自定义下拉刷新被触发时触发 */
interface ScrollViewOnRefresherrefresh extends _ScrollViewOnRefresherrefresh {
}
type ScrollViewOnRefresherrestoreEvent = _ScrollViewOnRefresherrestoreEvent;
/** 自定义下拉刷新被复位时触发 */
interface ScrollViewOnRefresherrestore extends _ScrollViewOnRefresherrestore {
}
type ScrollViewOnRefresherabortEvent = _ScrollViewOnRefresherabortEvent;
/** 自定义下拉刷新被中止时触发 */
interface ScrollViewOnRefresherabort extends _ScrollViewOnRefresherabort {
}
/** 可滚动视图区域属性 */
type ScrollViewProps = _ScrollViewProps;
/**
* 可滚动视图区域,用于区域滚动
*
* 在 webview 渲染的页面中,区域滚动的性能不及页面滚动
*
* 纵向滚动时,需要给 scroll-view 一个固定高度,通过 css 设置 height
*
* 横向滚动时,需要给 scroll-view 添加 white-space: nowrap; 样式
*
* Scroll-view 是区域滚动,不会触发页面滚动,无法触发 pages.json 配置的下拉刷新、页面触底
* onReachBottomDistance、titleNView 的 transparent 透明渐变
*/
type ScrollView = _ScrollView;
/** 可滚动视图区域实例 */
type ScrollViewInstance = _ScrollViewInstance;
}
}
declare module "vue" {
interface GlobalComponents {
/**
* 可滚动视图区域,用于区域滚动
*
* 在 webview 渲染的页面中,区域滚动的性能不及页面滚动
*
* 纵向滚动时,需要给 scroll-view 一个固定高度,通过 css 设置 height
*
* 横向滚动时,需要给 scroll-view 添加 white-space: nowrap; 样式
*
* Scroll-view 是区域滚动,不会触发页面滚动,无法触发 pages.json 配置的下拉刷新、页面触底
* onReachBottomDistance、titleNView 的 transparent 透明渐变
* ***
* [👉🏻点击查看组件文档](https://uniapp.dcloud.net.cn/component/scroll-view.html)
* |
* [使用说明](https://uni-typed.netlify.app/)
*/
ScrollView: _ScrollView;
}
}
/**
* 导致变更的原因
*
* Autoplay 自动播放
*
* Touch 用户滑动
*
* 空字符串 其它原因
*/
type _SwiperSource = "autoplay" | "touch" | "";
/** Swiper 切换动画类型 */
type _SwiperEasingFunction = "default" | "linear" | "easeInCubic" | "easeOutCubic" | "easeInOutCubic";
interface _SwiperOnChangeDetail {
/** 当前所在滑块的下标 */
current: number;
/**
* 导致变更的原因
*
* Autoplay 自动播放
*
* Touch 用户滑动
*
* 空字符串 其它原因
*/
source: _SwiperSource;
}
type _SwiperOnChangeEvent = _CustomEvent<_SwiperOnChangeDetail>;
/** Current 改变时触发 */
type _SwiperOnChange = (event: _SwiperOnChangeEvent) => void;
interface _SwiperOnTransitionDetail {
dx?: number;
dy?: number;
}
type _SwiperOnTransitionEvent = _CustomEvent<_SwiperOnTransitionDetail>;
/** Swiper-item 位置改变时触发 */
type _SwiperOnTransition = (event: _SwiperOnTransitionEvent) => void;
interface _SwiperOnAnimationfinishDetail {
/** 当前所在滑块的下标 */
current: number;
/**
* 导致变更的原因
*
* Autoplay 自动播放
*
* Touch 用户滑动
*
* 空字符串其它原因
*/
source: _SwiperSource;
}
type _SwiperOnAnimationfinishEvent = _CustomEvent<_SwiperOnAnimationfinishDetail>;
/** 动画结束时触发 */
type _SwiperOnAnimationfinish = (event: _SwiperOnAnimationfinishEvent) => void;
/** 滑块视图容器属性 */
type _SwiperProps = CommonProps & Partial<{
/**
* 是否显示面板指示点
*
* 默认为 false
*/
indicatorDots: boolean;
/**
* 指示点颜色
*
* 默认为 rgba(0, 0, 0, 0.3)
*/
indicatorColor: string;
/**
* 当前选中的指示点颜色
*
* 默认为 #000000
*/
indicatorActiveColor: string;
/** Swiper-item 可见时的 class */
activeClass: string;
/** Acceleration 设置为 true 时且处于滑动过程中,中间若干屏处于可见时的 class */
changingClass: boolean;
/**
* 是否自动切换
*
* 默认为 false
*/
autoplay: boolean;
/**
* 当前所在滑块的下标
*
* 默认为 0
*/
current: number;
/** 当前所在滑块的 item-id ,不能与 current 被同时指定 */
currentItemId: string;
/**
* 自动切换时间间隔
*
* 默认为 5000
*/
interval: number;
/**
* 滑动动画时长
*
* 默认为 500
*/
duration: number;
/**
* 是否采用衔接滑动,即播放到末尾后重新回到开头
*
* 默认为 false
*/
circular: boolean;
/**
* 滑动方向是否为纵向
*
* 默认为 false
*/
vertical: boolean;
/**
* 前边距,可用于露出前一项的一小部分
*
* 接受 px 和 rpx 值
*
* 默认为 0px
*/
previousMargin: string;
/**
* 后边距,可用于露出后一项的一小部分
*
* 接受 px 和 rpx 值
*
* 默认为 0px
*/
nextMargin: string;
/**
* 当开启时,会根据滑动速度,连续滑动多屏
*
* 默认 false
*/
acceleration: boolean;
/**
* 是否禁用代码变动触发 swiper 切换时使用动画
*
* 默认为 false
*/
disableProgrammaticAnimation: boolean;
/**
* 同时显示的滑块数量
*
* 默认为 1
*/
displayMultipleItems: number;
/**
* 是否跳过未显示的滑块布局
*
* 设为 true 可优化复杂情况下的滑动性能,但会丢失隐藏状态滑块的布局信息
*
* 默认为 false
*/
skipHiddenItemLayout: boolean;
/**
* 是否禁止用户 touch 操作
*
* 默认为 false
*/
disableTouch: boolean;
/**
* 是否监听用户的触摸事件
*
* 只在初始化时有效,不支持动态修改
*
* 默认为 true
*/
touchable: boolean;
/**
* 指定 swiper 切换缓动动画类型
*
* 默认为 default
*/
easingFunction: _SwiperEasingFunction;
/** Current 改变时触发 */
onChange: _SwiperOnChange;
/** Swiper-item 位置改变时触发 */
onTransition: _SwiperOnTransition;
/** 动画结束时触发 */
onAnimationfinish: _SwiperOnAnimationfinish;
}>;
/**
* 滑块视图容器,一般用于左右滑动或上下滑动,比如 banner 轮播图
*
* 注意滑动切换和滚动的区别,滑动切换是一屏一屏的切换
*
* Swiper 下的每个 swiper-item 是一个滑动切换区域,不能停留在 2 个滑动区域之间
*/
type _Swiper = DefineComponent<_SwiperProps>;
/** 滑块视图容器实例 */
type _SwiperInstance = InstanceType<_Swiper>;
declare global {
namespace UniHelper {
/**
* 导致变更的原因
*
* Autoplay 自动播放
*
* Touch 用户滑动
*
* 空字符串 其它原因
*/
type SwiperSource = _SwiperSource;
/** Swiper 切换动画类型 */
type SwiperEasingFunction = _SwiperEasingFunction;
interface SwiperOnChangeDetail extends _SwiperOnChangeDetail {
}
type SwiperOnChangeEvent = _SwiperOnChangeEvent;
/** Current 改变时触发 */
interface SwiperOnChange extends _SwiperOnChange {
}
interface SwiperOnTransitionDetail extends _SwiperOnTransitionDetail {
}
type SwiperOnTransitionEvent = _SwiperOnTransitionEvent;
/** Swiper-item 位置改变时触发 */
interface SwiperOnTransition extends _SwiperOnTransition {
}
interface SwiperOnAnimationfinishDetail extends _SwiperOnAnimationfinishDetail {
}
type SwiperOnAnimationfinishEvent = _SwiperOnAnimationfinishEvent;
/** 动画结束时触发 */
interface SwiperOnAnimationfinish extends _SwiperOnAnimationfinish {
}
/** 滑块视图容器属性 */
type SwiperProps = _SwiperProps;
/**
* 滑块视图容器,一般用于左右滑动或上下滑动,比如 banner 轮播图
*
* 注意滑动切换和滚动的区别,滑动切换是一屏一屏的切换
*
* Swiper 下的每个 swiper-item 是一个滑动切换区域,不能停留在 2 个滑动区域之间
*/
type Swiper = _Swiper;
/** 滑块视图容器实例 */
type SwiperInstance = _SwiperInstance;
}
}
declare module "vue" {
interface GlobalComponents {
/**
* 滑块视图容器,一般用于左右滑动或上下滑动,比如 banner 轮播图
*
* 注意滑动切换和滚动的区别,滑动切换是一屏一屏的切换
*
* Swiper 下的每个 swiper-item 是一个滑动切换区域,不能停留在 2 个滑动区域之间
* ***
* [👉🏻点击查看组件文档](https://uniapp.dcloud.net.cn/component/swiper.html)
* |
* [使用说明](https://uni-typed.netlify.app/)
*/
swiper: _Swiper;
}
}
/** Swiper 直接子组件属性 */
type _SwiperItemProps = CommonProps & Partial<{
/** 标识符 */
itemId: string;
}>;
/**
* Swiper 直接子组件,宽高自动设置为父组件的 100%
*
* 不能被子组件自动撑开
*/
type _SwiperItem = DefineComponent<_SwiperItemProps>;
/** Swiper 直接子组件实例 */
type _SwiperItemInstance = InstanceType<_SwiperItem>;
declare global {
namespace UniHelper {
/** Swiper 直接子组件属性 */
type SwiperItemProps = _SwiperItemProps;
/**
* Swiper 直接子组件,宽高自动设置为父组件的 100%
*
* 不能被子组件自动撑开
*/
type SwiperItem = _SwiperItem;
/** Swiper 直接子组件实例 */
type SwiperItemInstance = _SwiperItemInstance;
}
}
declare module "vue" {
interface GlobalComponents {
/**
* Swiper 直接子组件,宽高自动设置为父组件的 100%
*
* 不能被子组件自动撑开
* ***
* [👉🏻点击查看组件文档](https://uniapp.dcloud.net.cn/component/scroll-item.html)
* |
* [使用说明](https://uni-typed.netlify.app/)
*/
SwiperItem: _SwiperItem;
}
}
/**
* 屏幕方向
*
* Landscape 横向
*
* Portrait 纵向
*/
type _MatchMediaOrientation = "landscape" | "portrait";
/** Media query 匹配检测节点属性 */
type _MatchMediaProps = CommonProps & Partial<{
/**
* 页面最小宽度
*
* 单位为 px
*/
minWidth: number;
/**
* 页面最大宽度
*
* 单位为 px
*/
maxWidth: number;
/**
* 页面宽度
*
* 单位为 px
*/
width: number;
/**
* 页面最小高度
*
* 单位为 px
*/
minHeight: number;
/**
* 页面最大高度
*
* 单位为 px
*/
maxHeight: number;
/**
* 页面高度
*
* 单位为 px
*/
height: number;
/**
* 屏幕方向
*
* Landscape 横向
*
* Portrait 纵向
*/
orientation: _MatchMediaOrientation;
}>;
/**
* Media query 匹配检测节点
*
* 类似于网页开发中使用媒体查询来适配大屏小屏,这是一个可适配不同屏幕的基本视图组件
*
* 可以指定一组 media query 媒体查询规则,满足查询条件时,这个组件才会被展示
*/
type _MatchMedia = DefineComponent<_MatchMediaProps>;
/** Media query 匹配检测节点实例 */
type _MatchMediaInstance = InstanceType<_MatchMedia>;
declare global {
namespace UniHelper {
/**
* 屏幕方向
*
* Landscape 横向
*
* Portrait 纵向
*/
type MatchMediaOrientation = _MatchMediaOrientation;
/** Media query 匹配检测节点属性 */
type MatchMediaProps = _MatchMediaProps;
/**
* Media query 匹配检测节点
*
* 类似于网页开发中使用媒体查询来适配大屏小屏,这是一个可适配不同屏幕的基本视图组件
*
* 可以指定一组 media query 媒体查询规则,满足查询条件时,这个组件才会被展示
*/
type MatchMedia = _MatchMedia;
/** Media query 匹配检测节点 */
type MatchMediaInstance = _MatchMediaInstance;
}
}
declare module "vue" {
interface GlobalComponents {
/**
* Media query 匹配检测节点
*
* 类似于网页开发中使用媒体查询来适配大屏小屏,这是一个可适配不同屏幕的基本视图组件
*
* 可以指定一组 media query 媒体查询规则,满足查询条件时,这个组件才会被展示
* ***
* [👉🏻点击查看组件文档](https://uniapp.dcloud.net.cn/component/match-media.html)
* |
* [使用说明](https://uni-typed.netlify.app/)
*/
MatchMedia: _MatchMedia;
}
}
/** 可拖动区域属性 */
type _MovableAreaProps = CommonProps & Partial<{
/**
* 当里面的 movable-view 设置为支持双指缩放时,设置此值可将缩放手势生效区域修改为整个 movable-area
*
* 默认为 false
*/
scaleArea: boolean;
}>;
/**
* 可拖动区域
*
* Movable-area 指代可拖动的范围,在其中内嵌 movable-view 组件用于指示可拖动的区域
*
* 即手指/鼠标按住 movable-view 拖动或双指缩放,但拖不出 movable-area 规定的范围
*
* 也可以不拖动,而使用代码来触发 movable-view 在 movable-area 里的移动缩放
*
* 默认宽高为 10px
*/
type _MovableArea = DefineComponent<_MovableAreaProps>;
/** 可拖动区域实例 */
type _MovableAreaInstance = InstanceType<_MovableArea>;
declare global {
namespace UniHelper {
/** 可拖动区域属性 */
type MovableAreaProps = _MovableAreaProps;
/**
* 可拖动区域
*
* Movable-area 指代可拖动的范围,在其中内嵌 movable-view 组件用于指示可拖动的区域
*
* 即手指/鼠标按住 movable-view 拖动或双指缩放,但拖不出 movable-area 规定的范围
*
* 也可以不拖动,而使用代码来触发 movable-view 在 movable-area 里的移动缩放
*
* 默认宽高为 10px
*/
type MovableArea = _MovableArea;
/** 可拖动区域实例 */
type MovableAreaInstance = _MovableAreaInstance;
}
}
declare module "vue" {
interface GlobalComponents {
/**
* 可拖动区域
*
* Movable-area 指代可拖动的范围,在其中内嵌 movable-view 组件用于指示可拖动的区域
*
* 即手指/鼠标按住 movable-view 拖动或双指缩放,但拖不出 movable-area 规定的范围
*
* 也可以不拖动,而使用代码来触发 movable-view 在 movable-area 里的移动缩放
*
* 默认宽高为 10px
* ***
* [👉🏻点击查看组件文档](https://uniapp.dcloud.net.cn/component/movable-area.html)
* |
* [使用说明](https://uni-typed.netlify.app/)
*/
MovableArea: _MovableArea;
}
}
/** Movable-view 的移动方向 */
type _MovableViewDirection = "all" | "vertical" | "horizontal" | "none";
/**
* Movable-view 产生移动的原因
*
* Touch 拖动
*
* Touch-out-of-bounds 超出移动范围
*
* Out-of-bounds 超出移动范围后的回弹
*
* Friction 惯性
*
* 空字符串 setData
*/
type _MovableViewSource = "touch" | "touch-out-of-bounds" | "out-of-bounds" | "friction" | "";
interface _MovableViewOnChangeDetail {
x: number;
y: number;
/**
* Movable-view 产生移动的原因
*
* Touch 拖动
*
* Touch-out-of-bounds 超出移动范围
*
* Out-of-bounds 超出移动范围后的回弹
*
* Friction 惯性
*
* 空字符串 setData
*/
source: _MovableViewSource;
}
type _MovableViewOnChangeEvent = _CustomEvent<_MovableViewOnChangeDetail>;
/** 拖动过程中触发 */
type _MovableViewOnChange = (event: _MovableViewOnChangeEvent) => void;
interface _MovableViewOnScaleDetail {
x: number;
y: number;
/**
* 是否支持双指缩放
*
* 默认缩放手势生效区域是在 movable-view 内
*/
scale: boolean;
}
type _MovableViewOnScaleEvent = _CustomEvent<_MovableViewOnScaleDetail>;
/** 缩放过程中触发 */
type _MovableViewOnScale = (event: _MovableViewOnScaleEvent) => void;
/** 可移动的视图容器属性 */
type _MovableViewProps = CommonProps & Partial<{
/**
* Movable-view 的移动方向
*
* 默认为 none
*/
direction: _MovableViewDirection;
/**
* 是否带有惯性
*
* 默认为 false
*/
inertia: boolean;
/**
* 超过可移动区域后,是否还可以移动
*
* 默认为 false
*/
outOfBounds: boolean;
/**
* 定义 x 轴方向的偏移
*
* 如果 x 的值不在可移动范围内,会自动移动到可移动范围
*
* 改变 x 的值会触发动画
*/
x: string | number;
/**
* 定义 y 轴方向的偏移
*
* 如果 y 的值不在可移动范围内,会自动移动到可移动范围
*
* 改变 y 的值会触发动画
*/
y: string | number;
/**
* 阻尼系数,用于控制 x 或 y 改变时的动画和过界回弹的动画
*
* 值越大移动越快
*
* 默认为 20
*/
damping: number;
/**
* 摩擦系数,用于控制惯性滑动的动画
*
* 值越大摩擦力越大,滑动越快停止
*
* 必须大于 0,否则会被设置成默认值
*
* 默认为 2
*/
friction: number;
/**
* 是否禁用
*
* 默认为 false
*/
disabled: boolean;
/**
* 是否支持双指缩放
*
* 默认缩放手势生效区域是在 movable-view 内
*
* 默认为 false
*/
scale: boolean;
/**
* 定义缩放倍数最小值
*
* 默认为 0.5
*/
scaleMin: number;
/**
* 定义缩放倍数最大值
*
* 默认为 10
*/
scaleMax: number;
/**
* 定义缩放倍数
*
* 取值范围为 0.5 - 10
*
* 默认为 1
*/
scaleValue: number;
/**
* 是否使用动画
*
* 默认为 true
*/
animation: boolean;
/** 拖动过程中触发 */
onChange: _MovableViewOnChange;
/** 缩放过程中触发 */
onScale: _MovableViewOnScale;
}>;
/**
* 可移动的视图容器,在页面中可以拖拽滑动或双指缩放
*
* Movable-area 直接子组件
*/
type _MovableView = DefineComponent<_MovableViewProps>;
/** 可移动的视图容器实例 */
type _MovableViewInstance = InstanceType<_MovableView>;
declare global {
namespace UniHelper {
/** Movable-view 的移动方向 */
type MovableViewDirection = _MovableViewDirection;
/**
* Movable-view 产生移动的原因
*
* Touch 拖动
*
* Touch-out-of-bounds 超出移动范围
*
* Out-of-bounds 超出移动范围后的回弹
*
* Friction 惯性
*
* 空字符串 setData
*/
type MovableViewSource = _MovableViewSource;
interface MovableViewOnChangeDetail extends _MovableViewOnChangeDetail {
}
type MovableViewOnChangeEvent = _MovableViewOnChangeEvent;
/** 拖动过程中触发 */
interface MovableViewOnChange extends _MovableViewOnChange {
}
interface MovableViewOnScaleDetail extends _MovableViewOnScaleDetail {
}
type MovableViewOnScaleEvent = _MovableViewOnScaleEvent;
/** 缩放过程中触发 */
interface MovableViewOnScale extends _MovableViewOnScale {
}
/** 可移动的视图容器属性 */
type MovableViewProps = _MovableViewProps;
/**
* 可移动的视图容器,在页面中可以拖拽滑动或双指缩放
*
* Movable-area 直接子组件
*/
type MovableView = _MovableView;
/** 可移动的视图容器实例 */
type MovableViewInstance = _MovableViewInstance;
}
}
declare module "vue" {
interface GlobalComponents {
/**
* 可移动的视图容器,在页面中可以拖拽滑动或双指缩放
*
* Movable-area 直接子组件
* ***
* [👉🏻点击查看组件文档](https://uniapp.dcloud.net.cn/component/movable-view.html)
* |
* [使用说明](https://uni-typed.netlify.app/)
*/
MovableView: _MovableView;
}
}
/** 覆盖在原生组件之上的视图属性 */
type _CoverViewProps = CommonProps & Partial<{
/**
* 设置顶部滚动偏移量
*
* 仅在设置了 overflow-y: scroll 成为滚动元素后生效
*/
scrollTop: number | string;
}>;
/**
* 覆盖在原生组件之上的视图
*
* App-vue 和小程序框架,渲染引擎是 webview
*
* 为了优化体验,部分组件如 map、video、textarea、canvas 通过原生控件实现,原生组件层级高于前端组件
*
* 为了能正常覆盖原生组件,设计了 cover-view
*/
type _CoverView = DefineComponent<_CoverViewProps>;
/** 覆盖在原生组件之上的视图 */
type _CoverViewInstance = InstanceType<_CoverView>;
declare global {
namespace UniHelper {
/** 覆盖在原生组件之上的视图 */
type CoverViewProps = _CoverViewProps;
/**
* 覆盖在原生组件之上的视图
*
* App-vue 和小程序框架,渲染引擎是 webview
*
* 为了优化体验,部分组件如 map、video、textarea、canvas 通过原生控件实现,原生组件层级高于前端组件
*
* 为了能正常覆盖原生组件,设计了 cover-view
*/
type CoverView = _CoverView;
/** 覆盖在原生组件之上的视图实例 */
type CoverViewInstance = _CoverViewInstance;
}
}
declare module "vue" {
interface GlobalComponents {
/**
* 覆盖在原生组件之上的视图
*
* App-vue 和小程序框架,渲染引擎是 webview
*
* 为了优化体验,部分组件如 map、video、textarea、canvas 通过原生控件实现,原生组件层级高于前端组件
*
* 为了能正常覆盖原生组件,设计了 cover-view
* ***
* [👉🏻点击查看组件文档](https://uniapp.dcloud.net.cn/component/cover-view.html)
* |
* [使用说明](https://uni-typed.netlify.app/)
*/
CoverView: _CoverView;
}
}
type _CoverImageOnLoadEvent = _BaseEvent;
/** 图片加载成功时触发 */
type _CoverImageOnLoad = (event: _CoverImageOnLoadEvent) => void;
type _CoverImageOnErrorEvent = _BaseEvent;
/** 图片加载失败时触发 */
type _CoverImageOnError = (event: _CoverImageOnErrorEvent) => void;
/** 覆盖在原生组件之上的图片视图属性 */
type _CoverImageProps = CommonProps & Partial<{
/**
* 图片路径
*
* 支持本地路径、网络路径
*
* 不支持 base64 格式
*/
src: string;
/** 图片加载成功时触发 */
onLoad: _CoverImageOnLoad;
/** 图片加载失败时触发 */
onError: _CoverImageOnError;
}>;
/**
* 覆盖在原生组件之上的图片视图
*
* 可覆盖的原生组件同 cover-view
*
* 支持嵌套在 cover-view 里
*/
type _CoverImage = DefineComponent<_CoverImageProps>;
/** 覆盖在原生组件之上的图片视图实例 */
type _CoverImageInstance = InstanceType<_CoverImage>;
declare global {
namespace UniHelper {
type CoverImageOnLoadEvent = _CoverImageOnLoadEvent;
/** 图片加载成功时触发 */
interface CoverImageOnLoad extends _CoverImageOnLoad {
}
type CoverImageOnErrorEvent = _CoverImageOnErrorEvent;
/** 图片加载失败时触发 */
interface CoverImageOnError extends _CoverImageOnError {
}
/** 覆盖在原生组件之上的图片视图属性 */
type CoverImageProps = _CoverImageProps;
/**
* 覆盖在原生组件之上的图片视图
*
* 可覆盖的原生组件同 cover-view
*
* 支持嵌套在 cover-view 里
*/
type CoverImage = _CoverImage;
/** 覆盖在原生组件之上的图片视图实例 */
type CoverImageInstance = _CoverImageInstance;
}
}
declare module "vue" {
interface GlobalComponents {
/**
* 覆盖在原生组件之上的图片视图
*
* 可覆盖的原生组件同 cover-view
*
* 支持嵌套在 cover-view 里
* ***
* [👉🏻点击查看组件文档](https://uniapp.dcloud.net.cn/component/cover-image.html)
* |
* [使用说明](https://uni-typed.netlify.app/)
*/
CoverImage: _CoverImage;
}
}
/** 图标属性 */
type _IconProps = CommonProps & Partial<{
/** 类型 */
type: string;
/**
* 大小
*
* 单位为 px
*
* 默认为 23
*/
size: number;
/** 颜色 */
color: string;
}>;
/** 图标 */
type _Icon = DefineComponent<_IconProps>;
/** 图标实例 */
type _IconInstance = InstanceType<_Icon>;
declare global {
namespace UniHelper {
/** 图标属性 */
type IconProps = _IconProps;
/** 图标 */
type Icon = _Icon;
/** 图标实例 */
type IconInstance = _IconInstance;
}
}
declare module "vue" {
interface GlobalComponents {
/**
* 图标
* ***
* [👉🏻点击查看组件文档](https://uniapp.dcloud.net.cn/component/icon.html)
* |
* [使用说明](https://uni-typed.netlify.app/)
*/
icon: _Icon;
}
}
/**
* 显示连续空格
*
* Ensp 中文字符空格一半大小
*
* Emsp 中文字符空格大小
*
* Nbsp 根据字体设置的空格大小
*/
type _TextSpace = "ensp" | "emsp" | "nbsp";
/** 文本组件属性 */
type _TextProps = CommonProps & Partial<{
/**
* 文本是否可选
*
* 默认为 false
*/
selectable: boolean;
/**
* 文本是否可选,可能会使文本节点显示为 inline-block
*
* 默认为 false
*/
userSelect: boolean;
/**
* 显示连续空格
*
* Ensp 中文字符空格一半大小
*
* Emsp 中文字符空格大小
*
* Nbsp 根据字体设置的空格大小
*
* 没有默认值
*/
space: _TextSpace;
/**
* 是否解码
*
* 默认为 false
*/
decode: boolean;
}>;
/**
* 文本组件
*
* 用于包裹文本内容
*/
type _Text = DefineComponent<_TextProps>;
/** 文本组件实例 */
type _TextInstance = InstanceType<_Text>;
declare global {
namespace UniHelper {
/**
* 显示连续空格
*
* Ensp 中文字符空格一半大小
*
* Emsp 中文字符空格大小
*
* Nbsp 根据字体设置的空格大小
*/
type TextSpace = _TextSpace;
/** 文本组件属性 */
type TextProps = _TextProps;
/**
* 文本组件
*
* 用于包裹文本内容
* ***
* [👉🏻点击查看组件文档](https://uniapp.dcloud.net.cn/component/text.html)
* |
* [使用说明](https://uni-typed.netlify.app/)
*/
type Text = _Text;
/** 文本组件实例 */
type TextInstance = _TextInstance;
}
}
declare module "vue" {
interface GlobalComponents {
/**
* 文本组件
*
* 用于包裹文本内容
* ***
* [👉🏻点击查看组件文档](https://uniapp.dcloud.net.cn/component/text.html)
* |
* [使用说明](https://uni-typed.netlify.app/)
*/
text: _Text;
}
}
declare global {
namespace JSX {
interface IntrinsicElements {
/**
* 文本组件
*
* 用于包裹文本内容
* ***
* [👉🏻点击查看组件文档](https://uniapp.dcloud.net.cn/component/text.html)
* |
* [使用说明](https://uni-typed.netlify.app/)
*/
text: _Text;
}
}
}
declare module "vue/jsx-runtime" {
namespace JSX {
interface IntrinsicElements {
/**
* 文本组件
*
* 用于包裹文本内容
* ***
* [👉🏻点击查看组件文档](https://uniapp.dcloud.net.cn/component/text.html)
* |
* [使用说明](https://uni-typed.netlify.app/)
*/
text: _Text;
}
}
}
/** 显示连续空格 */
type _RichTextSpace = "ensp" | "emsp" | "nbsp";
/** 文本节点 */
interface _RichTextTextNode {
type: "text";
text: string;
}
/** 元素节点 */
interface _RichTextNodeNode {
type?: "node";
name: string;
attrs?: Record<string, any>;
children?: Array<_RichTextTextNode | _RichTextNodeNode>;
}
/** 节点 */
type _RichTextNode = _RichTextTextNode | _RichTextNodeNode;
/** 节点列表 */
type _RichTextNodes = _RichTextNode[] | string;
type _RichTextOnItemclickEvent = _CustomEvent<{
node: _RichTextNode;
}>;
/** 拦截点击事件,支持 a 和 img 标签 */
type _RichTextOnItemclick = (event: _RichTextOnItemclickEvent) => void;
/** 富文本属性 */
type _RichTextProps = CommonProps & Partial<{
/** 节点列表 */
nodes: _RichTextNodes;
/**
* 显示连续空格
*
* 没有默认值
*/
space: _RichTextSpace;
/**
* 富文本是否可以长按选中
*
* 默认为 true
*/
selectable: boolean;
/**
* 是否阻止长按图片时弹起默认菜单
*
* 只在初始化时有效,不支持动态修改
*
* 默认为 false
*/
imageMenuPrevent: boolean;
/**
* 富文本中的图片是否可点击预览
*
* 在不设置的情况下,若 rich-text 未监听点击事件,则默认开启
*
* 未显示设置 preview 时会进行点击默认预览判断,建议显示设置 preview
*/
preview: boolean;
/** 拦截点击事件,支持 a 和 img 标签 */
onItemclick: _RichTextOnItemclick;
}>;
/** 富文本 */
type _RichText = DefineComponent<_RichTextProps>;
/** 富文本实例 */
type _RichTextInstance = InstanceType<_RichText>;
declare global {
namespace UniHelper {
/** 显示连续空格 */
type RichTextSpace = _RichTextSpace;
/** 文本节点 */
interface RichTextTextNode extends _RichTextTextNode {
}
/** 元素节点 */
interface RichTextNodeNode extends _RichTextNodeNode {
}
/** 节点 */
type RichTextNode = _RichTextNode;
/** 节点列表 */
type RichTextNodes = _RichTextNodes;
type RichTextOnItemclickEvent = _RichTextOnItemclickEvent;
/** 拦截点击事件,支持 a 和 img 标签 */
interface RichTextOnItemclick extends _RichTextOnItemclick {
}
/** 富文本属性 */
type RichTextProps = _RichTextProps;
/** 富文本 */
type RichText = _RichText;
/** 富文本实例 */
type RichTextInstance = _RichTextInstance;
}
}
declare module "vue" {
interface GlobalComponents {
/**
* 富文本
* ***
* [👉🏻点击查看组件文档](https://uniapp.dcloud.net.cn/component/rich-text.html)
* |
* [使用说明](https://uni-typed.netlify.app/)
*/
RichText: _RichText;
}
}
/**
* 动画播放方式
*
* Backwards 动画从头播
*
* Forwards 动画从上次结束点接着播
*/
type _ProgressActiveMode = "backwards" | "forwards";
type _ProgressOnActiveendEvent = _BaseEvent;
/** 动画完成时触发 */
type _ProgressOnActiveend = (event: _ProgressOnActiveendEvent) => void;
/** 进度条属性 */
type _ProgressProps = CommonProps & Partial<{
/**
* 百分比
*
* 取值范围为 0 - 100
*
* 没有默认值
*/
percent: number;
/**
* 是否在进度条右侧显示百分比
*
* 默认为 false
*/
showInfo: boolean;
/**
* 圆角大小
*
* 默认为 0
*/
borderRadius: number | string;
/**
* 进度条右侧显示的百分比字体大小
*
* 默认为 16
*/
fontSize: number | string;
/**
* 进度条线的宽度
*
* 单位为 px
*
* 默认为 6
*/
strokeWidth: number;
/**
* 已选择的进度条的颜色
*
* 默认为 #09bb07,百度默认为 #e6e6e6
*/
activeColor: string;
/**
* 未选择的进度条的颜色
*
* 默认为 #ebebeb
*/
backgroundColor: string;
/**
* 是否显示进度条从左往右的动画
*
* 默认为 false
*/
active: boolean;
/**
* 动画播放方式
*
* Backwards 动画从头播
*
* Forwards 动画从上次结束点接着播
*
* 默认为 backwards
*/
activeMode: _ProgressActiveMode;
/**
* 进度增加 1% 所需时间
*
* 单位为 ms
*
* 默认为 30
*/
duration: number;
/** 动画完成时触发 */
onActiveend: _ProgressOnActiveend;
}>;
/** 进度条 */
type _Progress = DefineComponent<_ProgressProps>;
/** 进度条实例 */
type _ProgressInstance = InstanceType<_Progress>;
declare global {
namespace UniHelper {
/**
* 动画播放方式
*
* Backwards 动画从头播
*
* Forwards 动画从上次结束点接着播
*/
type ProgressActiveMode = _ProgressActiveMode;
type ProgressOnActiveendEvent = _ProgressOnActiveendEvent;
/** 动画完成时触发 */
interface ProgressOnActiveend extends _ProgressOnActiveend {
}
/** 进度条属性 */
type ProgressProps = _ProgressProps;
/** 进度条 */
type Progress = _Progress;
/** 进度条实例 */
type ProgressInstance = _ProgressInstance;
}
}
declare module "vue" {
interface GlobalComponents {
/**
* 进度条
* ***
* [👉🏻点击查看组件文档](https://uniapp.dcloud.net.cn/component/progress.html)
* |
* [使用说明](https://uni-typed.netlify.app/)
*/
progress: _Progress;
}
}
declare global {
namespace JSX {
interface IntrinsicElements {
/**
* 进度条
* ***
* [👉🏻点击查看组件文档](https://uniapp.dcloud.net.cn/component/progress.html)
* |
* [使用说明](https://uni-typed.netlify.app/)
*/
progress: _Progress;
}
}
}
declare module "vue/jsx-runtime" {
namespace JSX {
interface IntrinsicElements {
/**
* 进度条
* ***
* [👉🏻点击查看组件文档](https://uniapp.dcloud.net.cn/component/progress.html)
* |
* [使用说明](https://uni-typed.netlify.app/)
*/
progress: _Progress;
}
}
}
/**
* 按钮的大小
*
* Default 默认
*
* Mini 小
*/
type _ButtonSize = "default" | "mini";
/**
* 按钮的样式类型,如想在多端统一颜色,请用 default 然后自行写样式
*
* Primary 微信小程序、360 小程序为绿色,APP、H5、百度小程序、支付宝小程序、飞书小程序、快应用为蓝色,字节跳动小程序为红色,QQ
* 小程序为浅蓝色
*
* Default 白色
*
* Warn 红色
*/
type _ButtonType = "primary" | "default" | "warn";
/**
* 用于 form 组件,点击分别会触发 form 组件的 submit / reset 事件
*
* Submit 点击会触发 form 的 submit 事件
*
* Reset 点击会触发 form 的 reset 事件
*/
type _ButtonFormType = "submit" | "reset";
/**
* 开放能力
*
* Feedback 打开“意见反馈”页面,用户可提交反馈内容并上传日志
*
* Share 触发用户转发
*
* GetUserInfo 获取用户信息,可以从 `@getuserinfo` 回调中获取到用户信息
*
* Contact 打开客服会话,如果用户在会话中点击消息卡片后返回应用,可以从 `@contact` 回调中获得具体信息
*
* GetPhoneNumber 获取用户手机号,可以从 `@getphonenumber` 回调中获取到用户信息
*
* LaunchApp 小程序中打开APP,可以通过 `app-parameter` 属性设定向 APP 传的参数
*
* OpenSetting 打开授权设置页
*
* ChooseAvatar 获取用户头像,可以从 `@chooseavatar` 回调中获取到头像信息
*
* GetAuthorize 支持小程序授权
*
* Lifestyle 关注生活号
*
* ContactShare 分享到通讯录好友
*
* OpenGroupProfile 呼起 QQ 群资料卡页面,可以通过 group-id 属性设定需要打开的群资料卡的群号,同时 manifest.json
* 中必须配置 groupIdList
*
* OpenGuildProfile 呼起频道页面,可以通过 guild-id 属性设定需要打开的频道 ID
*
* OpenPublicProfile 打开公众号资料卡,可以通过 public-id 属性设定需要打开的公众号资料卡的号码,同时 manifest.json
* 中必须配置 publicIdList
*
* ShareMessageToFriend 在自定义开放数据域组件中,向指定好友发起分享
*
* AddFriend 添加好友,对方需要通过该小程序进行授权,允许被加好友后才能调用成功用户授权
*
* AddColorSign 添加彩签,点击后添加状态有用户提示,无回调
*
* AddGroupApp 添加群应用(只有管理员或群主有权操作),添加后给 button 绑定 `@addgroupapp` 事件接收回调数据
*
* AddToFavorites 收藏当前页面,点击按钮后会触发 Page.onAddToFavorites 方法
*
* ChooseAddress 选择用户收货地址,可以从 `@chooseaddress` 回调中获取到用户选择的地址信息
*
* ChooseInvoiceTitle 选择用户发票抬头,可以从 `@chooseinvoicetitle` 回调中获取到用户选择发票抬头信息
*
* Login 登录,可以从 `@login` 回调中确认是否登录成功
*
* Subscribe 订阅类模板消息,需要用户授权才可发送
*
* Favorite 触发用户收藏
*
* WatchLater 触发用户稍后再看
*
* OpenProfile 触发打开用户主页
*
* AgreePrivacyAuthorization 用户同意隐私协议按钮
*/
type _ButtonOpenType = "feedback" | "share" | "getUserInfo" | "contact" | "getPhoneNumber" | "launchApp" | "openSetting" | "chooseAvatar" | "getAuthorize" | "lifestyle" | "contactShare" | "openGroupProfile" | "openGuildProfile" | "openPublicProfile" | "shareMessageToFriend" | "addFriend" | "addColorSign" | "addGroupApp" | "addToFavorites" | "chooseAddress" | "chooseInvoiceTitle" | "login" | "subscribe" | "favorite" | "watchLater" | "openProfile" | "agreePrivacyAuthorization";
/**
* 返回用户信息的语言
*
* Zh_CN 简体中文
*
* Zh_TW 繁体中文
*
* En 英文
*/
type _ButtonLang = "zh_CN" | "zh_TW" | "en";
interface _ButtonOnGetphonenumberDetail {
/** 错误信息 */
errMsg?: string;
/** 动态令牌 */
code?: string;
/** 包括敏感数据在内的完整用户信息的加密数据 */
encryptedData?: string;
/** 加密算法的初始向量 */
iv?: string;
/** 敏感数据对应的云 ID,开通云开发的小程序才会返回,可通过云调用直接获取开放数据 */
cloudID?: string;
}
type _ButtonOnGetphonenumberEvent = _CustomEvent<_ButtonOnGetphonenumberDetail>;
/**
* 获取用户手机号时回调
*
* Open-type="getPhoneNumber" 时有效
*/
type _ButtonOnGetphonenumber = (event: _ButtonOnGetphonenumberEvent) => void;
type _ButtonOnErrorEvent = _BaseEvent;
/** 使用开放能力发生错误时回调 */
type _ButtonOnError = (event: _ButtonOnErrorEvent) => void;
interface _ButtonOnOpensettingDetail {
authSetting: Record<string, any>;
}
type _ButtonOnOpensettingEvent = _CustomEvent<_ButtonOnOpensettingDetail>;
/**
* 在打开授权设置页并关闭后回调
*
* Open-type="openSetting" 时有效
*/
type _ButtonOnOpensetting = (event: _ButtonOnOpensettingEvent) => void;
type _ButtonOnLaunchappEvent = _BaseEvent;
/**
* 从小程序成功打开 APP 回调
*
* Open-type="launchApp" 时有效
*/
type _ButtonOnLaunchapp = (event: _ButtonOnLaunchappEvent) => void;
type _ButtonOnChooseavatarEvent = _BaseEvent;
/**
* 获取用户头像回调
*
* Open-type="chooseAvatar" 时有效
*/
type _ButtonOnChooseavatar = (event: _ButtonOnChooseavatarEvent) => void;
type _ButtonOnAddgroupappEvent = _BaseEvent;
/**
* 添加群应用回调
*
* Open-type="addGroupApp" 时有效
*/
type _ButtonOnAddgroupapp = (event: _ButtonOnAddgroupappEvent) => void;
type _ButtonOnChooseaddressEvent = _BaseEvent;
/**
* 用户编辑并选择收货地址回调
*
* Open-type="chooseAddress" 时有效
*/
type _ButtonOnChooseaddress = (event: _ButtonOnChooseaddressEvent) => void;
type _ButtonOnChooseinvoicetitleEvent = _BaseEvent;
/**
* 用户选择发票抬头回调
*
* Open-type="chooseInvoiceTitle" 时有效
*/
type _ButtonOnChooseinvoicetitle = (event: _ButtonOnChooseinvoicetitleEvent) => void;
type _ButtonOnSubscribeEvent = _BaseEvent;
/**
* 订阅消息授权回调
*
* Open-type="subscribe" 时有效
*/
type _ButtonOnSubscribe = (event: _ButtonOnSubscribeEvent) => void;
type _ButtonOnLoginEvent = _BaseEvent;
/**
* 登录回调
*
* Open-type="login" 时有效
*/
type _ButtonOnLogin = (event: _ButtonOnLoginEvent) => void;
type _ButtonOnAgreeprivacyauthorizationEvent = _BaseEvent;
/**
* 用户同意隐私协议按钮回调
*
* Open-type="agreePrivacyAuthorization" 时有效
*/
type _ButtonOnAgreeprivacyauthorization = (event: _ButtonOnAgreeprivacyauthorizationEvent) => void;
/** 按钮属性 */
type _ButtonProps = CommonProps & Partial<{
/**
* 按钮的大小
*
* Default 默认
*
* Mini 小
*
* 默认为 default
*/
size: _ButtonSize;
/**
* 按钮的样式类型
*
* Primary 微信小程序、360 小程序为绿色,APP、H5、百度小程序、支付宝小程序、飞书小程序、快应用为蓝色,字节跳动小程序为红色,QQ
* 小程序为浅蓝色
*
* Default 白色
*
* Warn 红色
*
* 默认为 default
*/
type: _ButtonType;
/**
* 按钮是否镂空,背景色透明
*
* 默认为 false
*/
plain: boolean;
/** 是否禁用 */
disabled: boolean;
/**
* 是否带 loading 图标
*
* 默认为 false
*/
loading: boolean;
/**
* 用于 form 组件,点击分别会触发 form 组件的 submit / reset 事件
*
* Submit 点击会触发 form 的 submit 事件
*
* Reset 点击会触发 form 的 reset 事件
*
* 没有默认值
*/
formType: _ButtonFormType;
/**
* 开放能力
*
* Feedback 打开“意见反馈”页面,用户可提交反馈内容并上传日志
*
* Share 触发用户转发
*
* GetUserInfo 获取用户信息,可以从 `@getuserinfo` 回调中获取到用户信息
*
* Contact 打开客服会话,如果用户在会话中点击消息卡片后返回应用,可以从 `@contact` 回调中获得具体信息
*
* GetPhoneNumber 获取用户手机号,可以从 `@getphonenumber` 回调中获取到用户信息
*
* LaunchApp 小程序中打开APP,可以通过 `app-parameter` 属性设定向 APP 传的参数
*
* OpenSetting 打开授权设置页
*
* ChooseAvatar 获取用户头像,可以从 `@chooseavatar` 回调中获取到头像信息
*
* GetAuthorize 支持小程序授权
*
* Lifestyle 关注生活号
*
* ContactShare 分享到通讯录好友
*
* OpenGroupProfile 呼起 QQ 群资料卡页面,可以通过 group-id 属性设定需要打开的群资料卡的群号,同时
* manifest.json 中必须配置 groupIdList
*
* OpenGuildProfile 呼起频道页面,可以通过 guild-id 属性设定需要打开的频道 ID
*
* OpenPublicProfile 打开公众号资料卡,可以通过 public-id 属性设定需要打开的公众号资料卡的号码,同时
* manifest.json 中必须配置 publicIdList
*
* ShareMessageToFriend 在自定义开放数据域组件中,向指定好友发起分享
*
* AddFriend 添加好友,对方需要通过该小程序进行授权,允许被加好友后才能调用成功用户授权
*
* AddColorSign 添加彩签,点击后添加状态有用户提示,无回调
*
* AddGroupApp 添加群应用(只有管理员或群主有权操作),添加后给 button 绑定 `@addgroupapp` 事件接收回调数据
*
* AddToFavorites 收藏当前页面,点击按钮后会触发 Page.onAddToFavorites 方法
*
* ChooseAddress 选择用户收货地址,可以从 `@chooseaddress` 回调中获取到用户选择的地址信息
*
* ChooseInvoiceTitle 选择用户发票抬头,可以从 `@chooseinvoicetitle` 回调中获取到用户选择发票抬头信息
*
* Login 登录,可以从 `@login` 回调中确认是否登录成功
*
* Subscribe 订阅类模板消息,需要用户授权才可发送
*
* Favorite 触发用户收藏
*
* WatchLater 触发用户稍后再看
*
* OpenProfile 触发打开用户主页
*/
openType: _ButtonOpenType;
/**
* 指定按下去的样式类
*
* 当 hover-class="none" 时,没有点击态效果
*
* 默认为 button-hover
*/
hoverClass: string;
/**
* 按住后多久出现点击态
*
* 单位为 ms
*
* 默认为 20
*/
hoverStartTime: number;
/**
* 手指松开后点击态保留时间
*
* 单位为 ms
*
* 默认为 70
*/
hoverStayTime: number;
/**
* 打开 APP 时,向 APP 传递的参数
*
* Open-type="launchApp" 时有效
*/
appParameter: string;
/**
* 指定是否阻止本节点的祖先节点出现点击态
*
* 默认为 false
*/
hoverStopPropagation: boolean;
/**
* 返回用户信息的语言
*
* Zh_CN 简体中文
*
* Zh_TW 繁体中文
*
* En 英文
*
* 默认为 en
*/
lang: _ButtonLang;
/**
* 会话来源
*
* Open-type="contact" 时有效
*/
sessionFrom: string;
/**
* 会话内消息卡片标题
*
* Open-type="contact" 时有效
*
* 默认为当前标题
*/
sendMessageTitle: string;
/**
* 会话内消息卡片点击跳转小程序路径
*
* Open-type="contact" 时有效
*
* 默认为当前分享路径
*/
sendMessagePath: string;
/**
* 会话内消息卡片图片
*
* Open-type="contact" 时有效
*
* 默认为截图
*/
sendMessageImg: string;
/**
* 是否显示会话内消息卡片
*
* 设置此参数为 true,用户进入客服会话会在右下角显示"可能要发送的小程序"提示,用户点击后可以快速发送小程序消息
*
* Open-type="contact" 时有效
*
* 默认为 false
*/
showMessageCard: boolean;
/**
* 打开群资料卡时,传递的群号
*
* Open-type="openGroupProfile" 时有效
*/
groupId: string;
/**
* 打开频道页面时,传递的频道号
*
* Open-type="openGuildProfile" 时有效
*/
guildId: string;
/**
* 打开公众号资料卡时,传递的号码
*
* Open-type="openPublicProfile" 时有效
*/
publicId: string;
/**
* 获取用户手机号时回调
*
* Open-type="getPhoneNumber" 时有效
*/
onGetphonenumber: _ButtonOnGetphonenumber;
/** 使用开放能力发生错误时回调 */
onError: _ButtonOnError;
/**
* 在打开授权设置页并关闭后回调
*
* Open-type="openSetting" 时有效
*/
onOpensetting: _ButtonOnOpensetting;
/**
* 从小程序成功打开 APP 回调
*
* Open-type="launchApp" 时有效
*/
onLaunchapp: _ButtonOnLaunchapp;
/**
* 获取用户头像回调
*
* Open-type="chooseAvatar" 时有效
*/
onChooseavatar: _ButtonOnChooseavatar;
/**
* 添加群应用回调
*
* O