129 lines
3.6 KiB
TypeScript
129 lines
3.6 KiB
TypeScript
/** 下拉项接口 */
|
|
export interface DropdownItem {
|
|
/** 值 */
|
|
value: string;
|
|
/** 显示文本 */
|
|
text: string;
|
|
/** 源码显示内容 */
|
|
html?: HTMLElement | string;
|
|
}
|
|
|
|
/** 下拉框选项接口 */
|
|
export interface DropdownOptions {
|
|
/** 文本关键字，默认值 `text` */
|
|
textKey?: string;
|
|
/** 值关键字，默认值 `value` */
|
|
valueKey?: string;
|
|
/** 源码显示的关键字，默认值 `html` */
|
|
htmlKey?: string;
|
|
/** 最大输入长度，默认值 `500` */
|
|
maxLength?: number;
|
|
/** 是否允许多选 */
|
|
multiSelect?: boolean;
|
|
/** 选中值 */
|
|
selected?: string;
|
|
/** 选中的数组 */
|
|
selectedList?: Array<string>;
|
|
/** 是否禁用 */
|
|
disabled?: boolean;
|
|
/** 是否支持输入 */
|
|
input?: boolean;
|
|
/** 是否支持搜索 */
|
|
search?: boolean;
|
|
/** 搜索的关键字数组 */
|
|
searchKeys?: Array<string>;
|
|
/** 搜索提示文本，默认值取语言资源 `searchHolder` "Search..." */
|
|
searchPlaceholder?: string;
|
|
/** 焦点索引 */
|
|
tabIndex?: number;
|
|
/** 输入框的提示文本 */
|
|
placeholder?: string;
|
|
/** 是否固定为向下展开 */
|
|
slideFixed?: boolean;
|
|
/** 父元素，默认添加到头元素之后 */
|
|
wrapper?: HTMLElement;
|
|
}
|
|
|
|
/** 下拉框类 */
|
|
export class Dropdown {
|
|
/**
|
|
* 把父元素下的所有 `select` 元素修改为统一下拉框组件<br/><br/>
|
|
* 解析的属性为 `value`, `disabled`, `tabIndex`
|
|
* @param dom 父元素
|
|
* @param trigger 选中事件触发函数（上下文为触发选中的 `Dropdown` 实例）
|
|
* @returns 返回该父元素
|
|
*/
|
|
static resolve(dom?: HTMLElement, trigger?: (item: DropdownItem) => void): HTMLElement;
|
|
|
|
/**
|
|
* 下拉框的构造函数
|
|
* @param options 下拉框选项
|
|
*/
|
|
constructor(options?: DropdownOptions);
|
|
|
|
/** 根据该函数返回数据源 */
|
|
sourceFilter: () => Array<DropdownItem>;
|
|
/**
|
|
* 选中时触发
|
|
* @param item 选中的条目
|
|
* @eventProperty
|
|
*/
|
|
onSelected: (item: DropdownItem) => void;
|
|
/**
|
|
* 选中多个时触发
|
|
* @param list 选中的条目数组
|
|
* @eventProperty
|
|
*/
|
|
onSelectedList: (list: Array<DropdownItem>) => void;
|
|
/**
|
|
* 下拉框展开时触发
|
|
* @eventProperty
|
|
*/
|
|
onExpanded: () => void;
|
|
/**
|
|
* 下拉框收缩时触发
|
|
* @eventProperty
|
|
*/
|
|
onCollapsed: () => void;
|
|
|
|
/** 获取下拉框是否禁用 */
|
|
get disabled(): boolean;
|
|
/**
|
|
* 设置下拉框禁用状态
|
|
* @param flag 禁用状态
|
|
*/
|
|
set disabled(flag: boolean);
|
|
/** 获取数据源 */
|
|
get source(): Array<DropdownItem>;
|
|
/**
|
|
* 设置数据源
|
|
* @param list 数据源
|
|
*/
|
|
set source(list: Array<DropdownItem>);
|
|
|
|
/** 获取是否允许多选 */
|
|
get multiSelect(): boolean;
|
|
/** 获取选中的条目 */
|
|
get selected(): DropdownItem;
|
|
/** 获取选中的条目列表 */
|
|
get selectedList(): Array<DropdownItem>;
|
|
|
|
/**
|
|
* 创建下拉框元素
|
|
* @returns 返回创建的下拉框元素
|
|
*/
|
|
create(): HTMLElement;
|
|
/**
|
|
* 选中某个条目
|
|
* @param selected 选中的值
|
|
* @param silence 是否静默选中，即不触发 {@linkcode onSelected} 事件
|
|
*/
|
|
select(selected: string, silence?: boolean): void;
|
|
/**
|
|
* 选中条目列表
|
|
* @param selectedlist 选中的值的列表
|
|
* @param silence 是否静默选中，即不触发 {@linkcode onSelected} 事件
|
|
*/
|
|
selectlist(selectedlist: Array<string>, silence?: boolean): void;
|
|
}
|