wot-design-uni/components/wd-action-sheet/types.ts

一个基于Vue3+TS开发的uni-app组件库，提供70+高质量组件，支持暗黑模式、国际化和自定义主题。

/*
 * @Author: weisheng
 * @Date: 2024-03-18 11:22:03
 * @LastEditTime: 2024-04-04 22:35:25
 * @LastEditors: weisheng
 * @Description:
 * @FilePath: /wot-design-uni/src/uni_modules/wot-design-uni/components/wd-action-sheet/types.ts
 * 记得注释
 */
import type { ExtractPropTypes } from 'vue'
import { baseProps, makeArrayProp, makeBooleanProp, makeNumberProp, makeRequiredProp, makeStringProp } from '../common/props'

export type Action = {
  /**
   * 选项名称
   */
  name: string
  /**
   * 描述信息
   */
  subname?: string
  /**
   * 颜色
   */
  color?: string
  /**
   * 禁用
   */
  disabled?: boolean
  /**
   * 加载中状态
   */
  loading?: boolean
}

export type Panel = {
  /**
   * 图片地址
   */
  iconUrl: string
  /**
   * 标题内容
   */
  title: string
}

export const actionSheetProps = {
  ...baseProps,
  /**
   * header 头部样式
   * @default ''
   * @type {string}
   */
  customHeaderClass: makeStringProp(''),
  /**
   * 设置菜单显示隐藏
   * @default false
   * @type {boolean}
   */
  modelValue: { ...makeBooleanProp(false), ...makeRequiredProp(Boolean) },
  /**
   * 菜单选项
   * @default []
   * @type {Action[]}
   */
  actions: makeArrayProp<Action>(),
  /**
   * 自定义面板项,可以为字符串数组，也可以为对象数组，如果为二维数组，则为多行展示
   * @default []
   * @type {Array<Panel | Panel[]>}
   */
  panels: makeArrayProp<Panel | Panel[]>(),
  /**
   * 标题
   * @type {string}
   */
  title: String,
  /**
   * 取消按钮文案
   * @type {string}
   */
  cancelText: String,
  /**
   * 点击选项后是否关闭菜单
   * @default true
   * @type {boolean}
   */
  closeOnClickAction: makeBooleanProp(true),
  /**
   * 点击遮罩是否关闭
   * @default true
   * @type {boolean}
   */
  closeOnClickModal: makeBooleanProp(true),
  /**
   * 弹框动画持续时间
   * @default 200
   * @type {number}
   */
  duration: makeNumberProp(200),
  /**
   * 菜单层级
   * @default 10
   * @type {number}
   */
  zIndex: makeNumberProp(10),
  /**
   * 弹层内容懒渲染，触发展示时才渲染内容
   * @default true
   * @type {boolean}
   */
  lazyRender: makeBooleanProp(true),
  /**
   * 弹出面板是否设置底部安全距离（iphone X 类型的机型）
   * @default true
   * @type {boolean}
   */
  safeAreaInsetBottom: makeBooleanProp(true)
}

export type ActionSheetProps = ExtractPropTypes<typeof actionSheetProps>