diff --git a/examples/index.html b/examples/index.html index e84e1c10..3dd5539b 100644 --- a/examples/index.html +++ b/examples/index.html @@ -3,6 +3,7 @@ iView test page + diff --git a/examples/routers/tag.vue b/examples/routers/tag.vue index a9d18439..14bedb6c 100644 --- a/examples/routers/tag.vue +++ b/examples/routers/tag.vue @@ -62,6 +62,13 @@

标签{{ item + 1 }} + +


+ test + + {{ checked }} diff --git a/src/components/scroll/loading-component.vue b/src/components/scroll/loading-component.vue index 9b1cd694..3061c269 100644 --- a/src/components/scroll/loading-component.vue +++ b/src/components/scroll/loading-component.vue @@ -11,28 +11,32 @@ diff --git a/src/components/select/option.vue b/src/components/select/option.vue index 86c1add0..689bf80d 100644 --- a/src/components/select/option.vue +++ b/src/components/select/option.vue @@ -2,9 +2,7 @@
  • {{ showLabel }}
    • \ No newline at end of file diff --git a/src/styles/components/modal.less b/src/styles/components/modal.less index 1f22de41..fcf85868 100644 --- a/src/styles/components/modal.less +++ b/src/styles/components/modal.less @@ -128,6 +128,10 @@ width: auto !important; margin: 10px; } + .@{modal-prefix-cls}-fullscreen{ + width: 100% !important; + margin: 0; + } .vertical-center-modal { .@{modal-prefix-cls} { flex: 1; diff --git a/types/message.d.ts b/types/message.d.ts index 73739131..c209b2c0 100644 --- a/types/message.d.ts +++ b/types/message.d.ts @@ -5,80 +5,78 @@ import Vue, { VNode, CreateElement } from "vue"; export declare interface Message { - /** - * 消息 - * @param config MessageConfig为相关配置,string为待显示的内容 - */ - info(config?: MessageConfig | string): void; - /** - * 成功 - * @param config MessageConfig为相关配置,string为待显示的内容 - */ - success(config?: MessageConfig | string): void; - /** - * 警告 - * @param config MessageConfig为相关配置,string为待显示的内容 - */ - warning(config?: MessageConfig | string): void; - /** - * 错误 - * @param config MessageConfig为相关配置,string为待显示的内容 - */ - error(config?: MessageConfig | string): void; - /** - * 配置 - * @param config MessageConfig为相关配置,string为待显示的内容 - */ - loading(options?: MessageConfig | string): void; - /** - * 配置 - * @param config MessageConfig为相关配置,string为待显示的内容 - */ - config(options?: MessageConfig): void; - /** - * 销毁 - */ - destroy(): void; + /** + * 消息 + * @param config MessageConfig为相关配置,string为待显示的内容 + */ + info(config?: MessageConfig | string): void; + /** + * 成功 + * @param config MessageConfig为相关配置,string为待显示的内容 + */ + success(config?: MessageConfig | string): void; + /** + * 警告 + * @param config MessageConfig为相关配置,string为待显示的内容 + */ + warning(config?: MessageConfig | string): void; + /** + * 错误 + * @param config MessageConfig为相关配置,string为待显示的内容 + */ + error(config?: MessageConfig | string): void; + /** + * 配置 + * @param config MessageConfig为相关配置,string为待显示的内容 + */ + loading(options?: MessageConfig | string): void; + /** + * 配置 + * @param config MessageConfig为相关配置,string为待显示的内容 + */ + config(options?: MessageConfig): void; + /** + * 销毁 + */ + destroy(): void; } export declare interface MessageConfig { - /** - * 提示内容 - */ - content?: string; - /** - * 自定义描述内容，使用 Vue 的 Render 函数 - */ - render?: (h: CreateElement) => VNode; - /** - * 关闭时的回调 - */ - onClose?: () => void; - /** - * 页面是否可以滚动 - * @default false - */ - closable?: boolean; - /** - * 提示组件距离顶端的距离，单位像素 - * @default 24 - */ - top?: number; - /** - * 默认自动关闭的延时，单位秒 - * @default 1.5 - */ - duration?: number; -} - -declare module 'vue/types/vue' { - interface Vue { /** - * 全局提示 + * 提示内容 */ - $Message: Message; - } + content?: string; + /** + * 自定义描述内容，使用 Vue 的 Render 函数 + * @param h Render函数 + */ + render?: (h?: CreateElement) => VNode; + /** + * 关闭时的回调 + */ + onClose?: () => void; + /** + * 页面是否可以滚动 + * @default false + */ + closable?: boolean; + /** + * 提示组件距离顶端的距离，单位像素 + * @default 24 + */ + top?: number; + /** + * 默认自动关闭的延时，单位秒 + * @default 1.5 + */ + duration?: number; } - - +declare module "vue/types/vue" { + interface Vue { + /** + * 全局提示 + */ + $Message: Message; + } +} diff --git a/types/modal.d.ts b/types/modal.d.ts index 4260b96c..be4ee694 100644 --- a/types/modal.d.ts +++ b/types/modal.d.ts @@ -2,222 +2,223 @@ // Project: https://github.com/iview/iview // Definitions by: yangdan // Definitions: https://github.com/yangdan8/iview.git -import Vue, { VNode } from 'vue'; +import Vue, { VNode, CreateElement } from "vue"; export declare interface Modal { - /** - * 对话框是否显示，可使用 v-model 双向绑定数据。 - * @default false - */ - value?: boolean; - /** - * 对话框标题，如果使用 slot 自定义了页头，则 title 无效 - */ - title?: string; - /** - * 是否显示右上角的关闭按钮，关闭后 Esc 按键也将关闭, - * @default true - */ - closable?: boolean; - /** - * 是否允许点击遮罩层关闭 - * @default true - */ - 'mask-closable'?: boolean; - /** - * 点击确定按钮时，确定按钮是否显示 loading 状态，开启则需手动设置visible来关闭对话框, - * @default false - */ - loading?: boolean; - /** - * 页面是否可以滚动 - * @default false - */ - scrollable?: boolean; - /** - * 是否全屏显示 - * @default false - */ - fullscreen?: boolean; - /** - * 是否可以拖拽移动 - * @default false - */ - draggable?: boolean; - /** - * 是否显示遮罩层，开启 draggable 时，强制不显示 - * @default true - */ - mask?: boolean; - /** - * 确定按钮文字 - * @default 确定 - */ - 'ok-text'?: string; - /** - * 取消按钮文字 - * @default 取消 - */ - 'cancel-text'?: string; - /** - * 对话框宽度，单位 px。 - * 对话框的宽度是响应式的，当屏幕尺寸小于 768px 时，宽度会变为自动auto, - * @default 520 - */ - width?: number | string; - /** - * 不显示底部 - * @default false - */ - 'footer-hide'?: boolean; - /** - * 设置浮层样式，调整浮层位置等，该属性设置的是.ivu-modal的样式 - */ - style?: object; - /** - * 设置对话框容器.ivu-modal-wrap的类名，可辅助实现垂直居中等自定义效果 - */ - 'class-name'?: string; - /** - * 层级 - * @default 1000 - */ - 'z-index'?: number; - /** - * 自定义显示动画，第一项是模态框，第二项是背景, - * @default ['ease', 'fade'] - */ - 'transition-names'?: Array; - /** - * 是否将弹层放置于 body 内，默认值true - * @default true - */ - transfer?: boolean; - /** - * 点击确定的回调 - */ - $emit(eventName: 'on-ok'): this; - /** - * 开关变化时触发，返回当前的状态 - */ - $emit(eventName: 'on-cancel'): this; - /** - * 开关变化时触发，返回当前的状态 - */ - $emit(eventName: 'on-visible-change', visible: boolean): this; - /** - * slot插槽对象 - */ - $slots: { /** - * 对话框主体内容 + * 对话框是否显示，可使用 v-model 双向绑定数据。 + * @default false */ - '': VNode[]; + value?: boolean; /** - * 自定义页头 + * 对话框标题，如果使用 slot 自定义了页头，则 title 无效 */ - header: VNode[]; + title?: string; /** - * 自定义页脚内容 + * 是否显示右上角的关闭按钮，关闭后 Esc 按键也将关闭, + * @default true */ - footer: VNode[]; + closable?: boolean; /** - * 自定义右上角关闭内容 + * 是否允许点击遮罩层关闭 + * @default true */ - close: VNode[]; - }; + "mask-closable"?: boolean; + /** + * 点击确定按钮时，确定按钮是否显示 loading 状态，开启则需手动设置visible来关闭对话框, + * @default false + */ + loading?: boolean; + /** + * 页面是否可以滚动 + * @default false + */ + scrollable?: boolean; + /** + * 是否全屏显示 + * @default false + */ + fullscreen?: boolean; + /** + * 是否可以拖拽移动 + * @default false + */ + draggable?: boolean; + /** + * 是否显示遮罩层，开启 draggable 时，强制不显示 + * @default true + */ + mask?: boolean; + /** + * 确定按钮文字 + * @default 确定 + */ + "ok-text"?: string; + /** + * 取消按钮文字 + * @default 取消 + */ + "cancel-text"?: string; + /** + * 对话框宽度，单位 px。 + * 对话框的宽度是响应式的，当屏幕尺寸小于 768px 时，宽度会变为自动auto, + * @default 520 + */ + width?: number | string; + /** + * 不显示底部 + * @default false + */ + "footer-hide"?: boolean; + /** + * 设置浮层样式，调整浮层位置等，该属性设置的是.ivu-modal的样式 + */ + style?: object; + /** + * 设置对话框容器.ivu-modal-wrap的类名，可辅助实现垂直居中等自定义效果 + */ + "class-name"?: string; + /** + * 层级 + * @default 1000 + */ + "z-index"?: number; + /** + * 自定义显示动画，第一项是模态框，第二项是背景, + * @default ['ease', 'fade'] + */ + "transition-names"?: Array; + /** + * 是否将弹层放置于 body 内，默认值true + * @default true + */ + transfer?: boolean; + /** + * 点击确定的回调 + */ + $emit(eventName: "on-ok"): this; + /** + * 开关变化时触发，返回当前的状态 + */ + $emit(eventName: "on-cancel"): this; + /** + * 开关变化时触发，返回当前的状态 + */ + $emit(eventName: "on-visible-change", visible: boolean): this; + /** + * slot插槽对象 + */ + $slots: { + /** + * 对话框主体内容 + */ + "": VNode[]; + /** + * 自定义页头 + */ + header: VNode[]; + /** + * 自定义页脚内容 + */ + footer: VNode[]; + /** + * 自定义右上角关闭内容 + */ + close: VNode[]; + }; } export declare interface ModalInstance { - /** - * 消息 - * @param config ModalConfig为相关配置,string为待显示的内容 - */ - info(config?: ModalConfig | string): void; - /** - * 成功 - * @param config ModalConfig为相关配置,string为待显示的内容 - */ - success(config?: ModalConfig | string): void; - /** - * 警告 - * @param config ModalConfig为相关配置,string为待显示的内容 - */ - warning(config?: ModalConfig | string): void; - /** - * 错误 - * @param config ModalConfig为相关配置,string为待显示的内容 - */ - error(config?: ModalConfig | string): void; - /** - * 对话框 - * @param config ModalConfig为相关配置,string为待显示的内容 - */ - confirm(config?: ModalConfig | string): void; - /** - * 移除 - */ - remove(): void; + /** + * 消息 + * @param config ModalConfig为相关配置,string为待显示的内容 + */ + info(config?: ModalConfig | string): void; + /** + * 成功 + * @param config ModalConfig为相关配置,string为待显示的内容 + */ + success(config?: ModalConfig | string): void; + /** + * 警告 + * @param config ModalConfig为相关配置,string为待显示的内容 + */ + warning(config?: ModalConfig | string): void; + /** + * 错误 + * @param config ModalConfig为相关配置,string为待显示的内容 + */ + error(config?: ModalConfig | string): void; + /** + * 对话框 + * @param config ModalConfig为相关配置,string为待显示的内容 + */ + confirm(config?: ModalConfig | string): void; + /** + * 移除 + */ + remove(): void; } export declare interface ModalConfig { - /** - * 标题或者Element选择器字符串 - */ - title?: string; - /** - * 内容或者Element选择器字符串 - */ - content?: string; - /** - * 自定义内容，使用后不再限制类型， content 也无效。 - */ - render?: (h?) => void; - /** - * 宽度，单位 px - * @default 416 - */ - width?: number | string; - /** - * 确定按钮的文字 - * @default 确定 - */ - okText?: string; - /** - * 取消按钮的文字，只在Modal.confirm()下有效 - * @default 取消 - */ - cancelText?: string; - /** - * 点击确定按钮时，确定按钮是否显示 loading 状态，开启则需手动调用Modal.remove()来关闭对话框 - * @default false - */ - loading?: boolean; - /** - * 页面是否可以滚动 - * @default false - */ - scrollable?: boolean; - /** - * 页面是否可以滚动 - * @default false - */ - closable?: boolean; - /** - * 点击确定的回调 - */ - onOk?: () => void; - /** - * 点击取消的回调，只在Modal.confirm()下有效 - */ - onCancel?: () => void; + /** + * 标题或者Element选择器字符串 + */ + title?: string; + /** + * 内容或者Element选择器字符串 + */ + content?: string; + /** + * 自定义内容，使用后不再限制类型， content 也无效。 + * @param h Render函数 + */ + render?: (h?: CreateElement) => void; + /** + * 宽度，单位 px + * @default 416 + */ + width?: number | string; + /** + * 确定按钮的文字 + * @default 确定 + */ + okText?: string; + /** + * 取消按钮的文字，只在Modal.confirm()下有效 + * @default 取消 + */ + cancelText?: string; + /** + * 点击确定按钮时，确定按钮是否显示 loading 状态，开启则需手动调用Modal.remove()来关闭对话框 + * @default false + */ + loading?: boolean; + /** + * 页面是否可以滚动 + * @default false + */ + scrollable?: boolean; + /** + * 页面是否可以滚动 + * @default false + */ + closable?: boolean; + /** + * 点击确定的回调 + */ + onOk?: () => void; + /** + * 点击取消的回调，只在Modal.confirm()下有效 + */ + onCancel?: () => void; } -declare module 'vue/types/vue' { - interface Vue { - /** - * 对话框 - */ - $Modal: ModalInstance; - } +declare module "vue/types/vue" { + interface Vue { + /** + * 对话框 + */ + $Modal: ModalInstance; + } } diff --git a/types/notice.d.ts b/types/notice.d.ts index e40324e1..e1cae5ce 100644 --- a/types/notice.d.ts +++ b/types/notice.d.ts @@ -5,88 +5,89 @@ import Vue, { VNode, CreateElement } from "vue"; export declare interface Notice { - /** - * 打开 - * @param config NoticeConfig为相关配置,string为待显示的内容 - */ - open(config?: NoticeConfig | string): void; - /** - * 信息 - * @param config NoticeConfig为相关配置,string为待显示的内容 - */ - info(config?: NoticeConfig | string): void; - /** - * 成功 - * @param config NoticeConfig为相关配置,string为待显示的内容 - */ - success(config?: NoticeConfig | string): void; - /** - * 警告 - * @param config NoticeConfig为相关配置,string为待显示的内容 - */ - warning(config?: NoticeConfig | string): void; - /** - * 错误 - * @param config NoticeConfig为相关配置,string为待显示的内容 - */ - error(config?: NoticeConfig): void; - /** - * 全局配置 - */ - config(options?: NoticeGlobalConfig): void; - /** - * 全局关闭某个通知 - */ - close(name?: string): void; - /** - * 全局销毁 - */ - destroy(): void; + /** + * 打开 + * @param config NoticeConfig为相关配置,string为待显示的内容 + */ + open(config?: NoticeConfig | string): void; + /** + * 信息 + * @param config NoticeConfig为相关配置,string为待显示的内容 + */ + info(config?: NoticeConfig | string): void; + /** + * 成功 + * @param config NoticeConfig为相关配置,string为待显示的内容 + */ + success(config?: NoticeConfig | string): void; + /** + * 警告 + * @param config NoticeConfig为相关配置,string为待显示的内容 + */ + warning(config?: NoticeConfig | string): void; + /** + * 错误 + * @param config NoticeConfig为相关配置,string为待显示的内容 + */ + error(config?: NoticeConfig): void; + /** + * 全局配置 + */ + config(options?: NoticeGlobalConfig): void; + /** + * 全局关闭某个通知 + */ + close(name?: string): void; + /** + * 全局销毁 + */ + destroy(): void; } export declare interface NoticeConfig { - /** - * 通知提醒的标题 - */ - title?: string; - /** - * 通知提醒的内容，为空或不填时，自动应用仅标题模式下的样式 - */ - desc?: string; - /** - * 自定义描述内容，使用 Vue 的 Render 函数 - */ - render?: (h: CreateElement) => VNode; - /** - * 自动关闭的延时，单位秒，不关闭可以写 0 默认4.5 - */ - duration?: number; - /** - * 当前通知的唯一标识 - */ - name?: string; - /** - * 关闭时的回调 - */ - onClose?: Function; + /** + * 通知提醒的标题 + */ + title?: string; + /** + * 通知提醒的内容，为空或不填时，自动应用仅标题模式下的样式 + */ + desc?: string; + /** + * 自定义描述内容，使用 Vue 的 Render 函数 + * @param h Render函数 + */ + render?: (h?: CreateElement) => VNode; + /** + * 自动关闭的延时，单位秒，不关闭可以写 0 默认4.5 + */ + duration?: number; + /** + * 当前通知的唯一标识 + */ + name?: string; + /** + * 关闭时的回调 + */ + onClose?: Function; } export declare interface NoticeGlobalConfig { - /** - * 通知组件距离顶端的距离，单位像素 默认24 - */ - top?: number; - /** - * 默认自动关闭的延时，单位秒 默认4.5 - */ - duration?: number; + /** + * 通知组件距离顶端的距离，单位像素 默认24 + */ + top?: number; + /** + * 默认自动关闭的延时，单位秒 默认4.5 + */ + duration?: number; } -declare module 'vue/types/vue' { - interface Vue { - /** - * 通知提醒 - */ - $Notice: Notice; - } -} \ No newline at end of file +declare module "vue/types/vue" { + interface Vue { + /** + * 通知提醒 + */ + $Notice: Notice; + } +} diff --git a/types/table.d.ts b/types/table.d.ts index c6dcdca3..1d90c5c4 100644 --- a/types/table.d.ts +++ b/types/table.d.ts @@ -2,418 +2,427 @@ // Project: https://github.com/iview/iview // Definitions by: yangdan // Definitions: https://github.com/yangdan8/iview.git -import Vue, { VNode } from 'vue'; +import Vue, { VNode, CreateElement } from "vue"; export declare interface Table extends Vue { - /** - * 显示的结构化数据，其中，字段 cellClassName 用于设置任意单元格的样式名称， - * 因此数据不能使用该字段，详见示例特定样式。 - * @default [] - */ - data?: object[]; - /** - * 表格列的配置描述，具体项见后文 - * @default [] - */ - columns?: object[]; - /** - * 是否显示间隔斑马纹 - * @default false - */ - stripe?: boolean; - /** - * 是否显示纵向边框 - * @default false - */ - border?: boolean; - /** - * 是否显示表头 - * @default true - */ - 'show-header'?: boolean; - /** - * 表格宽度，单位 px - * @default 自动 - */ - width?: number | string; - /** - * 表格高度，单位 px，设置后，如果表格内容大于此值，会固定表头 - */ - height?: number | string; - /** - * 表格是否加载中 - * @default false - */ - loading?: boolean; - /** - * 禁用鼠标悬停时的高亮 - * @default false - */ - 'disabled-hover'?: boolean; - /** - * 是否支持高亮选中的行，即单选 - * @default false - */ - 'highlight-row'?: boolean; - /** - * 行的 className 的回调方法，传入参数： - * row：当前行数据 - * index：当前行的索引 - */ - 'row-class-name'?: (row?: object, index?: number) => void; - /** - * 表格尺寸，可选值为 large、small、default 或者不填 - */ - size?: string; - /** - * 数据为空时显示的提示内容 - * @default 暂无数据 - */ - 'no-data-text'?: string; - /** - * 筛选数据为空时显示的提示内容 - * @default 暂无筛选结果 - */ - 'no-filtered-data-text'?: string; - /** - * 开启 highlight-row 后有效，当表格的当前行发生变化的时候会触发 - * currentRow：当前高亮行的数据 - * oldCurrentRow：上一次高亮的数据 - */ - $emit(eventName: 'on-current-change', currentRow: object, oldCurrentRow: object): this; - /** - * 在多选模式下有效，选中某一项时触发 - * selection：已选项数据 - * row：刚选择的项数据 - */ - $emit(eventName: 'on-select', selection: object[], row: object): this; - /** - * 在多选模式下有效，取消选中某一项时触发 - * selection：已选项数据 - * row：取消选择的项数据 - */ - $emit(eventName: 'on-select-cancel', selection: object[], row: object): this; - /** - * 在多选模式下有效，点击全选时触发 - * selection：已选项数据 - */ - $emit(eventName: 'on-select-all', selection: object[]): this; - /** - * 在多选模式下有效，只要选中项发生变化时就会触发 - * selection：已选项数据 - */ - $emit(eventName: 'on-selection-change', selection: object[]): this; - /** - * 排序时有效，当点击排序时触发 - * column：当前列数据 - * key：排序依据的指标 - * order：排序的顺序，值为 asc 或 desc - */ - $emit(eventName: 'on-sort-change', column?: object, key?: string, order?: 'asc' | 'desc'): this; - /** - * 筛选时有效，筛选条件发生变化时触发 当前列数据 - */ - $emit(eventName: 'on-filter-change', value: any): this; - /** - * 单击某一行时触发 - * currentRow：当前行的数据 - * index?: 当前行的索引 - */ - $emit(eventName: 'on-row-click', currentRow: object, index: number): this; - /** - * 双击某一行时触发 - * currentRow：当前行的数据 - * index?: 当前行的索引 - */ - $emit(eventName: 'on-row-dblclick', currentRow: object, index: number): this; - /** - * 展开或收起某一行时触发 - * row：当前行的数据 - * status：当前的状态 - */ - $emit(eventName: 'on-expand', row: object, status: string): this; - /** - * 导出数据 - */ - exportCsv(params: TableExportCsvParams): void; - /** - * 执行改变大小重绘table - */ - handleResize(): void; - /** - * 清除高亮项，仅在开启 highlight-row 时可用 - */ - clearCurrentRow(): void; - /** - * slot插槽对象 - */ - $slots: { /** - * 表头 + * 显示的结构化数据，其中，字段 cellClassName 用于设置任意单元格的样式名称， + * 因此数据不能使用该字段，详见示例特定样式。 + * @default [] */ - header: VNode[]; + data?: object[]; /** - * 页脚 + * 表格列的配置描述，具体项见后文 + * @default [] */ - footer: VNode[]; + columns?: object[]; /** - * 加载中 + * 是否显示间隔斑马纹 + * @default false */ - loading: VNode[]; - }; + stripe?: boolean; + /** + * 是否显示纵向边框 + * @default false + */ + border?: boolean; + /** + * 是否显示表头 + * @default true + */ + "show-header"?: boolean; + /** + * 表格宽度，单位 px + * @default 自动 + */ + width?: number | string; + /** + * 表格高度，单位 px，设置后，如果表格内容大于此值，会固定表头 + */ + height?: number | string; + /** + * 表格是否加载中 + * @default false + */ + loading?: boolean; + /** + * 禁用鼠标悬停时的高亮 + * @default false + */ + "disabled-hover"?: boolean; + /** + * 是否支持高亮选中的行，即单选 + * @default false + */ + "highlight-row"?: boolean; + /** + * 行的 className 的回调方法，传入参数： + * row：当前行数据 + * index：当前行的索引 + */ + "row-class-name"?: (row?: object, index?: number) => void; + /** + * 表格尺寸，可选值为 large、small、default 或者不填 + */ + size?: string; + /** + * 数据为空时显示的提示内容 + * @default 暂无数据 + */ + "no-data-text"?: string; + /** + * 筛选数据为空时显示的提示内容 + * @default 暂无筛选结果 + */ + "no-filtered-data-text"?: string; + /** + * 开启 highlight-row 后有效，当表格的当前行发生变化的时候会触发 + * currentRow：当前高亮行的数据 + * oldCurrentRow：上一次高亮的数据 + */ + $emit( + eventName: "on-current-change", + currentRow: object, + oldCurrentRow: object + ): this; + /** + * 在多选模式下有效，选中某一项时触发 + * selection：已选项数据 + * row：刚选择的项数据 + */ + $emit(eventName: "on-select", selection: object[], row: object): this; + /** + * 在多选模式下有效，取消选中某一项时触发 + * selection：已选项数据 + * row：取消选择的项数据 + */ + $emit( + eventName: "on-select-cancel", + selection: object[], + row: object + ): this; + /** + * 在多选模式下有效，点击全选时触发 + * selection：已选项数据 + */ + $emit(eventName: "on-select-all", selection: object[]): this; + /** + * 在多选模式下有效，只要选中项发生变化时就会触发 + * selection：已选项数据 + */ + $emit(eventName: "on-selection-change", selection: object[]): this; + /** + * 排序时有效，当点击排序时触发 + * column：当前列数据 + * key：排序依据的指标 + * order：排序的顺序，值为 asc 或 desc + */ + $emit( + eventName: "on-sort-change", + column?: object, + key?: string, + order?: "asc" | "desc" + ): this; + /** + * 筛选时有效，筛选条件发生变化时触发 当前列数据 + */ + $emit(eventName: "on-filter-change", value: any): this; + /** + * 单击某一行时触发 + * currentRow：当前行的数据 + * index?: 当前行的索引 + */ + $emit(eventName: "on-row-click", currentRow: object, index: number): this; + /** + * 双击某一行时触发 + * currentRow：当前行的数据 + * index?: 当前行的索引 + */ + $emit( + eventName: "on-row-dblclick", + currentRow: object, + index: number + ): this; + /** + * 展开或收起某一行时触发 + * row：当前行的数据 + * status：当前的状态 + */ + $emit(eventName: "on-expand", row: object, status: string): this; + /** + * 导出数据 + */ + exportCsv(params: TableExportCsvParams): void; + /** + * 执行改变大小重绘table + */ + handleResize(): void; + /** + * 清除高亮项，仅在开启 highlight-row 时可用 + */ + clearCurrentRow(): void; + /** + * slot插槽对象 + */ + $slots: { + /** + * 表头 + */ + header: VNode[]; + /** + * 页脚 + */ + footer: VNode[]; + /** + * 加载中 + */ + loading: VNode[]; + }; } export declare interface TableColumn { - /** - * 列类型，可选值为 index、selection、expand、html - */ - type?: 'index' | 'selection' | 'expand' | 'html'; - /** - * 列头显示文字 - * @default # - */ - title?: string; - /** - * 对应列内容的字段名 - */ - key?: string; - /** - * 列宽 - */ - width?: number; - /** - * 最小列宽 - */ - minWidth?: number; - /** - * 最大列宽 - */ - maxWidth?: number; - /** - * 对齐方式，可选值为 left 左对齐、right 右对齐和 center 居中对齐,默认 left - * @default left - */ - align?: 'left' | 'right' | 'center'; - /** - * 列的样式名称 - */ - className?: string; - /** - * 列是否固定在左侧或者右侧，可选值为 left 左侧和 right 右侧 - */ - fixed?: 'left' | 'right'; - /** - * 开启后，文本将不换行，超出部分显示为省略号 - * @default false - */ - ellipsis?: boolean; - /** - * 开启后，文本将不换行，超出部分显示为省略号，并用 Tooltip 组件显示完整内容 - * @default false - */ - tooltip?: boolean; - /** - * 自定义渲染列，使用 Vue 的 Render 函数。 - * 传入两个参数，第一个是 h，第二个为对象，包含 row、column 和 index， - * 分别指当前行数据，当前列数据，当前行索引，详见示例。 - * 学习 Render 函数的内容 从 rc.18 版本开始，我们将不再支持旧的用法。旧的 render 函数已被废弃。 - */ - render?: (h?: - ( - el?: string | object | Function, - data?: string | TableRenderCreateElementData | TableRenderCreateElementResult | Array, - vnode?: string | TableRenderCreateElementResult[] - ) => TableRenderCreateElementResult, - params?: TableColumnRenderParams - ) => TableRenderCreateElementResult; - /** - * 自定义列头显示内容，传入参数有两个，column 和 index，分别为当前列数据和当前列索引，不支持渲染自定义组件 - */ - renderHeader?: (h?: - ( - el?: string | object | Function, - data?: string | TableRenderCreateElementData | TableRenderCreateElementResult | Array, - vnode?: string | TableRenderCreateElementResult[] - ) => TableRenderCreateElementResult, - params?: TableColumnRenderHeadParams - ) => TableRenderCreateElementResult; - /** - * 对应列是否可以排序，如果设置为 custom，则代表用户希望远程排序， - * 需要监听 Table 的 on- sort - change 事件,默认false - * @default false - */ - sortable?: boolean | 'custom'; - /** - * 自定义排序使用的方法，接收三个参数 a 、 b 和 type， - * 当设置 sortable?: true 时有效。type 值为 asc 和 desc - */ - sortMethod?: (a: any, b: any, type: 'asc' | 'desc') => void; - /** - * 设置初始化排序。值为 asc 和 desc - */ - sortType?: 'asc' | 'desc'; - /** - * 过滤数据的选项，格式为数组，数组中每项包含 label 和 value 属性，使用过滤，必须同时配置filterMethod - */ - filters?: { label: string, value: string | number | boolean }[]; - /** - * 数据过滤使用的方法，如果是多选的筛选项，对每一条数据会执行多次，任意一次返回 true 就会显示 - */ - filterMethod?: () => void; - /** - * 数据过滤的选项是否多选 - * @default true - */ - filterMultiple?: boolean; - /** - * 在初始化时使用过滤，数组，值为需要过滤的 value 集合 - */ - filteredValue?: (string | number | boolean)[]; - /** - * 使用远程过滤 - */ - filterRemote?: () => void; - /** - * 表头分组 - */ - children?: object[]; + /** + * 列类型，可选值为 index、selection、expand、html + */ + type?: "index" | "selection" | "expand" | "html"; + /** + * 列头显示文字 + * @default # + */ + title?: string; + /** + * 对应列内容的字段名 + */ + key?: string; + /** + * 列宽 + */ + width?: number; + /** + * 最小列宽 + */ + minWidth?: number; + /** + * 最大列宽 + */ + maxWidth?: number; + /** + * 对齐方式，可选值为 left 左对齐、right 右对齐和 center 居中对齐,默认 left + * @default left + */ + align?: "left" | "right" | "center"; + /** + * 列的样式名称 + */ + className?: string; + /** + * 列是否固定在左侧或者右侧，可选值为 left 左侧和 right 右侧 + */ + fixed?: "left" | "right"; + /** + * 开启后，文本将不换行，超出部分显示为省略号 + * @default false + */ + ellipsis?: boolean; + /** + * 开启后，文本将不换行，超出部分显示为省略号，并用 Tooltip 组件显示完整内容 + * @default false + */ + tooltip?: boolean; + /** + * 自定义渲染列，使用 Vue 的 Render 函数。 + * 传入两个参数，第一个是 h，第二个为对象，包含 row、column 和 index， + * 分别指当前行数据，当前列数据，当前行索引，详见示例。 + * 学习 Render 函数的内容 从 rc.18 版本开始，我们将不再支持旧的用法。旧的 render 函数已被废弃。 + * @param h Render函数 + * @param params 对象，包含 row、column 和 index + */ + render?: ( + h?: CreateElement, + params?: TableColumnRenderParams + ) => TableRenderCreateElementResult; + /** + * 自定义列头显示内容，传入参数有两个，column 和 index，分别为当前列数据和当前列索引，不支持渲染自定义组件 + * @param h Render函数 + * @param params 对象，包含 row、column 和 index + */ + renderHeader?: ( + h?: CreateElement, + params?: TableColumnRenderHeadParams + ) => TableRenderCreateElementResult; + /** + * 对应列是否可以排序，如果设置为 custom，则代表用户希望远程排序， + * 需要监听 Table 的 on- sort - change 事件,默认false + * @default false + */ + sortable?: boolean | "custom"; + /** + * 自定义排序使用的方法，接收三个参数 a 、 b 和 type， + * 当设置 sortable?: true 时有效。type 值为 asc 和 desc + */ + sortMethod?: (a: any, b: any, type: "asc" | "desc") => void; + /** + * 设置初始化排序。值为 asc 和 desc + */ + sortType?: "asc" | "desc"; + /** + * 过滤数据的选项，格式为数组，数组中每项包含 label 和 value 属性，使用过滤，必须同时配置filterMethod + */ + filters?: { label: string; value: string | number | boolean }[]; + /** + * 数据过滤使用的方法，如果是多选的筛选项，对每一条数据会执行多次，任意一次返回 true 就会显示 + */ + filterMethod?: () => void; + /** + * 数据过滤的选项是否多选 + * @default true + */ + filterMultiple?: boolean; + /** + * 在初始化时使用过滤，数组，值为需要过滤的 value 集合 + */ + filteredValue?: (string | number | boolean)[]; + /** + * 使用远程过滤 + */ + filterRemote?: () => void; + /** + * 表头分组 + */ + children?: object[]; } export declare interface TableRenderCreateElementData { - /** - * 和`v-bind:class`一样的 API - */ - 'class'?: object; - /** - * 和`v-bind:style`一样的 API - */ - style?: object; - /** - * 正常的 HTML 特性 - */ - attrs?: object, - /** - * 组件 props - */ - props?: object; - /** - * DOM 属性 - */ - domProps?: object; - /** - * 事件监听器基于 "on" - * 所以不再支持如 v-on?:keyup.enter 修饰器 - * 需要手动匹配 keyCode。 - */ - on?: object; - /** - * 仅对于组件，用于监听原生事件，而不是组件使用 vm.$emit 触发的事件。 - */ - nativeOn?: object; - /** - * 自定义指令. 注意事项：不能对绑定的旧值设值 - * Vue 会为您持续追踨 - */ - directives?: object[]; - /** - * 如果子组件有定义 slot 的名称 - */ - slot?: string; - /** - * 其他特殊顶层属性,myKey - */ - key?: string; - /** - * myRef - */ - ref?: string + /** + * 和`v-bind:class`一样的 API + */ + class?: object; + /** + * 和`v-bind:style`一样的 API + */ + style?: object; + /** + * 正常的 HTML 特性 + */ + attrs?: object; + /** + * 组件 props + */ + props?: object; + /** + * DOM 属性 + */ + domProps?: object; + /** + * 事件监听器基于 "on" + * 所以不再支持如 v-on?:keyup.enter 修饰器 + * 需要手动匹配 keyCode。 + */ + on?: object; + /** + * 仅对于组件，用于监听原生事件，而不是组件使用 vm.$emit 触发的事件。 + */ + nativeOn?: object; + /** + * 自定义指令. 注意事项：不能对绑定的旧值设值 + * Vue 会为您持续追踨 + */ + directives?: object[]; + /** + * 如果子组件有定义 slot 的名称 + */ + slot?: string; + /** + * 其他特殊顶层属性,myKey + */ + key?: string; + /** + * myRef + */ + ref?: string; } export declare interface TableColumnRenderParams { - /** - * 当前行数据 - */ - row?: object; - /** - * 当前列数据 - */ - column?: object; - /** - * 当前行索引 - */ - index?: number; + /** + * 当前行数据 + */ + row?: object; + /** + * 当前列数据 + */ + column?: object; + /** + * 当前行索引 + */ + index?: number; } export declare interface TableRenderCreateElementResult { - child?: object; - children?: Array; - componentInstance?: object; - componentOptions?: object; - context?: object; - data?: object; - elm?: object; - functionalContext?: object; - isCloned?: boolean; - isComment?: boolean; - isOnce?: boolean; - isRootInsert?: boolean; - isStatic?: boolean; - key?: object; - ns?: object; - parent?: object; - raw?: boolean; - tag?: string; - text?: object; + child?: object; + children?: Array; + componentInstance?: object; + componentOptions?: object; + context?: object; + data?: object; + elm?: object; + functionalContext?: object; + isCloned?: boolean; + isComment?: boolean; + isOnce?: boolean; + isRootInsert?: boolean; + isStatic?: boolean; + key?: object; + ns?: object; + parent?: object; + raw?: boolean; + tag?: string; + text?: object; } export declare interface TableColumnRenderHeadParams { - /** - * 当前列数据 - */ - column?: object; - /** - * 当前行索引 - */ - index?: number; + /** + * 当前列数据 + */ + column?: object; + /** + * 当前行索引 + */ + index?: number; } export declare interface TableExportCsvParams { - /** - * 文件名，默认为 table.csv - */ - filename?: string; - /** - * 是否导出为原始数据，默认为 true - */ - original?: boolean; - /** - * 不显示表头，默认为 false - */ - noHeader?: boolean; - /** - * 自定义导出的列数据 - */ - columns?: any[]; - /** - * 自定义导出的行数据 - */ - data?: any[]; - /** - * 添加此函数后，不会下载，而是返回数据 - */ - callback?: () => void; - /** - * 数据分隔符，默认是逗号(,) - * @default , - */ - separator?: string; - /** - * 每项数据是否加引号 - * @default false - */ - quoted?: boolean; + /** + * 文件名，默认为 table.csv + */ + filename?: string; + /** + * 是否导出为原始数据，默认为 true + */ + original?: boolean; + /** + * 不显示表头，默认为 false + */ + noHeader?: boolean; + /** + * 自定义导出的列数据 + */ + columns?: any[]; + /** + * 自定义导出的行数据 + */ + data?: any[]; + /** + * 添加此函数后，不会下载，而是返回数据 + */ + callback?: () => void; + /** + * 数据分隔符，默认是逗号(,) + * @default , + */ + separator?: string; + /** + * 每项数据是否加引号 + * @default false + */ + quoted?: boolean; } - - - - diff --git a/types/tree.d.ts b/types/tree.d.ts index 4b1c6439..2f9de4e8 100644 --- a/types/tree.d.ts +++ b/types/tree.d.ts @@ -2,102 +2,103 @@ // Project: https://github.com/iview/iview // Definitions by: yangdan // Definitions: https://github.com/yangdan8/iview.git -import Vue, { VNode } from 'vue'; +import Vue, { VNode, CreateElement } from "vue"; export declare interface Tree extends Vue { - /** - * 可嵌套的节点属性的数组，生成 tree 的数据 - */ - data?: TreeChild[]; - /** - * 是否支持多选 - * @default false - */ - multiple?: boolean; - /** - * 是否显示多选框 - * @default false - */ - 'show-checkbox'?: boolean; - /** - * 没有数据时的提示 - * @default 暂无数据 - */ - 'empty-text'?: string; - /** - * 异步加载数据的方法 - */ - 'load-data'?: () => void; - /** - * 自定义渲染内容 - */ - render?: () => void; - /** - * 定义子节点键 - * @default children - */ - 'children-key'?:string; - /** - * 点击树节点时触发 - * @default 当前已选中的节点数组 - */ - $emit(eventName: 'on-select-change', value: TreeChild[]): this; - /** - * 点击复选框时触发 - * @default 当前已勾选节点的数组 - */ - $emit(eventName: 'on-check-change', value: TreeChild[]): this; - /** - * 展开和收起子列表时触发 - * @default 当前节点的数据 - */ - $emit(eventName: 'on-toggle-expand', value: TreeChild): this; - /** - * 获取被勾选的节点 - */ - getCheckedNodes(): void; - /** - * 获取被选中的节点 - */ - getSelectedNodes(): void; + /** + * 可嵌套的节点属性的数组，生成 tree 的数据 + */ + data?: TreeChild[]; + /** + * 是否支持多选 + * @default false + */ + multiple?: boolean; + /** + * 是否显示多选框 + * @default false + */ + "show-checkbox"?: boolean; + /** + * 没有数据时的提示 + * @default 暂无数据 + */ + "empty-text"?: string; + /** + * 异步加载数据的方法 + */ + "load-data"?: () => void; + /** + * 自定义渲染内容 + * @param h Render函数 + */ + render?: (h?: CreateElement) => void; + /** + * 定义子节点键 + * @default children + */ + "children-key"?: string; + /** + * 点击树节点时触发 + * @default 当前已选中的节点数组 + */ + $emit(eventName: "on-select-change", value: TreeChild[]): this; + /** + * 点击复选框时触发 + * @default 当前已勾选节点的数组 + */ + $emit(eventName: "on-check-change", value: TreeChild[]): this; + /** + * 展开和收起子列表时触发 + * @default 当前节点的数据 + */ + $emit(eventName: "on-toggle-expand", value: TreeChild): this; + /** + * 获取被勾选的节点 + */ + getCheckedNodes(): void; + /** + * 获取被选中的节点 + */ + getSelectedNodes(): void; } export declare interface TreeChild extends Vue { - /** - * 标题 - */ - title?: string; - /** - * 是否展开直子节点 - * @default false - */ - expand?: boolean; - /** - * 禁掉响应 - * @default false - */ - disabled?: boolean; - /** - * 禁掉checkbox - * @default false - */ - disableCheckbox?: boolean; - /** - * 是否选中子节点 - * @default false - */ - selected?: boolean; - /** - * 是否勾选(如果勾选，子节点也会全部勾选) - * @default false - */ - checked?: boolean; - /** - * 子节点属性数组 - */ - children?: TreeChild[]; - /** - * 自定义当前节点渲染内容，见示例 - */ - render(): void; -} \ No newline at end of file + /** + * 标题 + */ + title?: string; + /** + * 是否展开直子节点 + * @default false + */ + expand?: boolean; + /** + * 禁掉响应 + * @default false + */ + disabled?: boolean; + /** + * 禁掉checkbox + * @default false + */ + disableCheckbox?: boolean; + /** + * 是否选中子节点 + * @default false + */ + selected?: boolean; + /** + * 是否勾选(如果勾选，子节点也会全部勾选) + * @default false + */ + checked?: boolean; + /** + * 子节点属性数组 + */ + children?: TreeChild[]; + /** + * 自定义当前节点渲染内容，见示例 + */ + render(): void; +}