drip-public/iview
6
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #21 from iview/2.0

Browse source 
更新
This commit is contained in:
yangdan8 2018-12-20 22:00:17 +08:00 • committed by GitHub
commit ba307d7961
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
15 changed files with 904 additions and 857 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
examples/index.html
View file

@ -3,6 +3,7 @@
<head>
<meta charset="UTF-8">
<title>iView test page</title>
<meta name="viewport" content="user-scalable=no,width=device-width,initial-scale=1"/>
<!-- <link href="/test/dist/main.css" rel="stylesheet"> -->
</head>
<body>

13
examples/routers/tag.vue
View file

@ -62,6 +62,13 @@
<br><br>
<Tag v-for="item in count" :key="item" :name="item" closable @on-close="handleClose2">标签{{ item + 1 }}</Tag>
<Button icon="ios-plus-empty" type="dashed" size="small" @click="handleAdd">添加标签</Button>
<br><br><hr><br>
<Tag :checked="checked" checkable>test</Tag>
<Button @click="toggle">
Toggle
</Button>
<span>{{ checked }}</span>
</div>
</template>
<script>
@ -69,7 +76,8 @@
data () {
return {
show: true,
count: [0, 1, 2]
count: [0, 1, 2],
checked: true
};
},
methods: {
@ -86,6 +94,9 @@
handleClose2 (event, name) {
const index = this.count.indexOf(name);
this.count.splice(index, 1);
},
toggle() {
this.checked = !this.checked;
}
}
};

7
src/components/cascader/cascader.vue
View file

@ -294,8 +294,11 @@
this.$refs.input.currentValue = '';
const oldVal = JSON.stringify(this.currentValue);
this.currentValue = item.value.split(',');
this.emitValue(this.currentValue, oldVal);
this.handleClose();
// use setTimeout for #4786, can not use nextTick, because @on-find-selected use nextTick
setTimeout(() => {
this.emitValue(this.currentValue, oldVal);
this.handleClose();
}, 0);
},
handleFocus () {
this.$refs.input.focus();

8
src/components/cascader/caspanel.vue
View file

@ -77,10 +77,16 @@
// return value back recursion // 向上递归，设置临时选中值（并非真实选中）
const backItem = this.getBaseItem(item);
if (backItem.label !== this.tmpItem.label || backItem.value !== this.tmpItem.value) {
// #5021 for this.changeOnSelect，加 if 是因为 #4472
if (
this.changeOnSelect ||
(backItem.label !== this.tmpItem.label || backItem.value !== this.tmpItem.value) ||
(backItem.label === this.tmpItem.label && backItem.value === this.tmpItem.value)
) {
this.tmpItem = backItem;
this.emitUpdate([backItem]);
}
if (item.children && item.children.length){
this.sublist = item.children;
this.dispatch('Cascader', 'on-result-change', {

1
src/components/date-picker/base/confirm.vue
View file

@ -55,6 +55,7 @@
if (this.timeDisabled) return;
this.$emit('on-pick-toggle-time');
this.dispatch('CalendarPicker', 'focus-input');
this.dispatch('CalendarPicker', 'update-popper');
},
handleTab(e) {
const tabbables = [...this.$el.children];

4
src/components/date-picker/picker.vue
View file

@ -679,6 +679,9 @@
},
focus() {
this.$refs.input && this.$refs.input.focus();
},
updatePopper () {
this.$refs.drop.update();
}
},
watch: {
@ -715,6 +718,7 @@
// to handle focus from confirm buttons
this.$on('focus-input', () => this.focus());
this.$on('update-popper', () => this.updatePopper());
}
};
</script>

48
src/components/scroll/loading-component.vue
View file

@ -11,28 +11,32 @@
</template>
<script>
const prefixCls = 'ivu-scroll';
import Spin from '../spin/spin.vue';
import Icon from '../icon/icon.vue';
export default {
props: ['text', 'active', 'spinnerHeight'],
computed: {
wrapperClasses() {
return [
`${prefixCls}-loader-wrapper`,
{
[`${prefixCls}-loader-wrapper-active`]: this.active
}
];
},
spinnerClasses() {
return `${prefixCls}-spinner`;
},
iconClasses() {
return `${prefixCls}-spinner-icon`;
},
textClasses() {
return `${prefixCls}-loader-text`;
const prefixCls = 'ivu-scroll';
export default {
props: ['text', 'active', 'spinnerHeight'],
components: { Spin, Icon },
computed: {
wrapperClasses() {
return [
`${prefixCls}-loader-wrapper`,
{
[`${prefixCls}-loader-wrapper-active`]: this.active
}
];
},
spinnerClasses() {
return `${prefixCls}-spinner`;
},
iconClasses() {
return `${prefixCls}-spinner-icon`;
},
textClasses() {
return `${prefixCls}-loader-text`;
}
}
}
};
};
</script>

2
src/components/select/option.vue
View file

@ -2,9 +2,7 @@
<li
:class="classes"
@click.stop="select"
@touchend.stop="select"
@mousedown.prevent
@touchstart.prevent
><slot>{{ showLabel }}</slot></li>
</template>
<script>

5
src/components/tag/tag.vue
View file

@ -137,6 +137,11 @@
this.$emit('on-change', checked, this.name);
}
}
},
watch: {
checked (val) {
this.isChecked = val;
}
}
};
</script>

4
src/styles/components/modal.less
View file

@ -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;

138
types/message.d.ts vendored
View file

@ -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;
}
}

401
types/modal.d.ts vendored
View file

@ -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<string>;
/**
* 是否将弹层放置于 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<string>;
/**
* 是否将弹层放置于 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;
}
}

155
types/notice.d.ts vendored
View file

@ -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;
}
}
declare module "vue/types/vue" {
interface Vue {
/**
* 通知提醒
*/
$Notice: Notice;
}
}

785
types/table.d.ts vendored
View file

@ -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<TableRenderCreateElementResult>,
vnode?: string | TableRenderCreateElementResult[]
) => TableRenderCreateElementResult,
params?: TableColumnRenderParams
) => TableRenderCreateElementResult;
/**
* 自定义列头显示内容，传入参数有两个，column 和 index，分别为当前列数据和当前列索引，不支持渲染自定义组件
*/
renderHeader?: (h?:
(
el?: string | object | Function,
data?: string | TableRenderCreateElementData | TableRenderCreateElementResult | Array<TableRenderCreateElementResult>,
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<any>;
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<any>;
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;
}

189
types/tree.d.ts vendored
View file

@ -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;
}
/**
* 标题
*/
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;
}