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> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>iView test page</title> <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"> --> <!-- <link href="/test/dist/main.css" rel="stylesheet"> -->
</head> </head>
<body> <body>

13
examples/routers/tag.vue
View file

@ -62,6 +62,13 @@
<br><br> <br><br>
<Tag v-for="item in count" :key="item" :name="item" closable @on-close="handleClose2">标签{{ item + 1 }}</Tag> <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> <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> </div>
</template> </template>
<script> <script>
@ -69,7 +76,8 @@
data () { data () {
return { return {
show: true, show: true,
count: [0, 1, 2] count: [0, 1, 2],
checked: true
}; };
}, },
methods: { methods: {
@ -86,6 +94,9 @@
handleClose2 (event, name) { handleClose2 (event, name) {
const index = this.count.indexOf(name); const index = this.count.indexOf(name);
this.count.splice(index, 1); 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 = ''; this.$refs.input.currentValue = '';
const oldVal = JSON.stringify(this.currentValue); const oldVal = JSON.stringify(this.currentValue);
this.currentValue = item.value.split(','); this.currentValue = item.value.split(',');
this.emitValue(this.currentValue, oldVal); // use setTimeout for #4786, can not use nextTick, because @on-find-selected use nextTick
this.handleClose(); setTimeout(() => {
this.emitValue(this.currentValue, oldVal);
this.handleClose();
}, 0);
}, },
handleFocus () { handleFocus () {
this.$refs.input.focus(); this.$refs.input.focus();

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

@ -77,10 +77,16 @@
// return value back recursion // 向上递归，设置临时选中值（并非真实选中） // return value back recursion // 向上递归，设置临时选中值（并非真实选中）
const backItem = this.getBaseItem(item); 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.tmpItem = backItem;
this.emitUpdate([backItem]); this.emitUpdate([backItem]);
} }
if (item.children && item.children.length){ if (item.children && item.children.length){
this.sublist = item.children; this.sublist = item.children;
this.dispatch('Cascader', 'on-result-change', { this.dispatch('Cascader', 'on-result-change', {

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

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

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

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

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

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

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

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

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

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

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

@ -128,6 +128,10 @@
width: auto !important; width: auto !important;
margin: 10px; margin: 10px;
} }
.@{modal-prefix-cls}-fullscreen{
width: 100% !important;
margin: 0;
}
.vertical-center-modal { .vertical-center-modal {
.@{modal-prefix-cls} { .@{modal-prefix-cls} {
flex: 1; flex: 1;

138
types/message.d.ts vendored
View file

@ -5,80 +5,78 @@
import Vue, { VNode, CreateElement } from "vue"; import Vue, { VNode, CreateElement } from "vue";
export declare interface Message { export declare interface Message {
/** /**
* 消息 * 消息
* @param config MessageConfig为相关配置,string为待显示的内容 * @param config MessageConfig为相关配置,string为待显示的内容
*/ */
info(config?: MessageConfig | string): void; info(config?: MessageConfig | string): void;
/** /**
* 成功 * 成功
* @param config MessageConfig为相关配置,string为待显示的内容 * @param config MessageConfig为相关配置,string为待显示的内容
*/ */
success(config?: MessageConfig | string): void; success(config?: MessageConfig | string): void;
/** /**
* 警告 * 警告
* @param config MessageConfig为相关配置,string为待显示的内容 * @param config MessageConfig为相关配置,string为待显示的内容
*/ */
warning(config?: MessageConfig | string): void; warning(config?: MessageConfig | string): void;
/** /**
* 错误 * 错误
* @param config MessageConfig为相关配置,string为待显示的内容 * @param config MessageConfig为相关配置,string为待显示的内容
*/ */
error(config?: MessageConfig | string): void; error(config?: MessageConfig | string): void;
/** /**
* 配置 * 配置
* @param config MessageConfig为相关配置,string为待显示的内容 * @param config MessageConfig为相关配置,string为待显示的内容
*/ */
loading(options?: MessageConfig | string): void; loading(options?: MessageConfig | string): void;
/** /**
* 配置 * 配置
* @param config MessageConfig为相关配置,string为待显示的内容 * @param config MessageConfig为相关配置,string为待显示的内容
*/ */
config(options?: MessageConfig): void; config(options?: MessageConfig): void;
/** /**
* 销毁 * 销毁
*/ */
destroy(): void; destroy(): void;
} }
export declare interface MessageConfig { 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 // Project: https://github.com/iview/iview
// Definitions by: yangdan // Definitions by: yangdan
// Definitions: https://github.com/yangdan8/iview.git // Definitions: https://github.com/yangdan8/iview.git
import Vue, { VNode } from 'vue'; import Vue, { VNode, CreateElement } from "vue";
export declare interface Modal { 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 { export declare interface ModalInstance {
/** /**
* 消息 * 消息
* @param config ModalConfig为相关配置,string为待显示的内容 * @param config ModalConfig为相关配置,string为待显示的内容
*/ */
info(config?: ModalConfig | string): void; info(config?: ModalConfig | string): void;
/** /**
* 成功 * 成功
* @param config ModalConfig为相关配置,string为待显示的内容 * @param config ModalConfig为相关配置,string为待显示的内容
*/ */
success(config?: ModalConfig | string): void; success(config?: ModalConfig | string): void;
/** /**
* 警告 * 警告
* @param config ModalConfig为相关配置,string为待显示的内容 * @param config ModalConfig为相关配置,string为待显示的内容
*/ */
warning(config?: ModalConfig | string): void; warning(config?: ModalConfig | string): void;
/** /**
* 错误 * 错误
* @param config ModalConfig为相关配置,string为待显示的内容 * @param config ModalConfig为相关配置,string为待显示的内容
*/ */
error(config?: ModalConfig | string): void; error(config?: ModalConfig | string): void;
/** /**
* 对话框 * 对话框
* @param config ModalConfig为相关配置,string为待显示的内容 * @param config ModalConfig为相关配置,string为待显示的内容
*/ */
confirm(config?: ModalConfig | string): void; confirm(config?: ModalConfig | string): void;
/** /**
* 移除 * 移除
*/ */
remove(): void; remove(): void;
} }
export declare interface ModalConfig { export declare interface ModalConfig {
/** /**
* 标题或者Element选择器字符串 * 标题或者Element选择器字符串
*/ */
title?: string; title?: string;
/** /**
* 内容或者Element选择器字符串 * 内容或者Element选择器字符串
*/ */
content?: string; content?: string;
/** /**
* 自定义内容，使用后不再限制类型， content 也无效。 * 自定义内容，使用后不再限制类型， content 也无效。
*/ * @param h Render函数
render?: (h?) => void; */
/** render?: (h?: CreateElement) => void;
* 宽度，单位 px /**
* @default 416 * 宽度，单位 px
*/ * @default 416
width?: number | string; */
/** width?: number | string;
* 确定按钮的文字 /**
* @default 确定 * 确定按钮的文字
*/ * @default 确定
okText?: string; */
/** okText?: string;
* 取消按钮的文字，只在Modal.confirm()下有效 /**
* @default 取消 * 取消按钮的文字，只在Modal.confirm()下有效
*/ * @default 取消
cancelText?: string; */
/** cancelText?: string;
* 点击确定按钮时，确定按钮是否显示 loading 状态，开启则需手动调用Modal.remove()来关闭对话框 /**
* @default false * 点击确定按钮时，确定按钮是否显示 loading 状态，开启则需手动调用Modal.remove()来关闭对话框
*/ * @default false
loading?: boolean; */
/** loading?: boolean;
* 页面是否可以滚动 /**
* @default false * 页面是否可以滚动
*/ * @default false
scrollable?: boolean; */
/** scrollable?: boolean;
* 页面是否可以滚动 /**
* @default false * 页面是否可以滚动
*/ * @default false
closable?: boolean; */
/** closable?: boolean;
* 点击确定的回调 /**
*/ * 点击确定的回调
onOk?: () => void; */
/** onOk?: () => void;
* 点击取消的回调，只在Modal.confirm()下有效 /**
*/ * 点击取消的回调，只在Modal.confirm()下有效
onCancel?: () => void; */
onCancel?: () => void;
} }
declare module 'vue/types/vue' { declare module "vue/types/vue" {
interface Vue { interface Vue {
/** /**
* 对话框 * 对话框
*/ */
$Modal: ModalInstance; $Modal: ModalInstance;
} }
} }

153
types/notice.d.ts vendored
View file

@ -5,88 +5,89 @@
import Vue, { VNode, CreateElement } from "vue"; import Vue, { VNode, CreateElement } from "vue";
export declare interface Notice { export declare interface Notice {
/** /**
* 打开 * 打开
* @param config NoticeConfig为相关配置,string为待显示的内容 * @param config NoticeConfig为相关配置,string为待显示的内容
*/ */
open(config?: NoticeConfig | string): void; open(config?: NoticeConfig | string): void;
/** /**
* 信息 * 信息
* @param config NoticeConfig为相关配置,string为待显示的内容 * @param config NoticeConfig为相关配置,string为待显示的内容
*/ */
info(config?: NoticeConfig | string): void; info(config?: NoticeConfig | string): void;
/** /**
* 成功 * 成功
* @param config NoticeConfig为相关配置,string为待显示的内容 * @param config NoticeConfig为相关配置,string为待显示的内容
*/ */
success(config?: NoticeConfig | string): void; success(config?: NoticeConfig | string): void;
/** /**
* 警告 * 警告
* @param config NoticeConfig为相关配置,string为待显示的内容 * @param config NoticeConfig为相关配置,string为待显示的内容
*/ */
warning(config?: NoticeConfig | string): void; warning(config?: NoticeConfig | string): void;
/** /**
* 错误 * 错误
* @param config NoticeConfig为相关配置,string为待显示的内容 * @param config NoticeConfig为相关配置,string为待显示的内容
*/ */
error(config?: NoticeConfig): void; error(config?: NoticeConfig): void;
/** /**
* 全局配置 * 全局配置
*/ */
config(options?: NoticeGlobalConfig): void; config(options?: NoticeGlobalConfig): void;
/** /**
* 全局关闭某个通知 * 全局关闭某个通知
*/ */
close(name?: string): void; close(name?: string): void;
/** /**
* 全局销毁 * 全局销毁
*/ */
destroy(): void; destroy(): void;
} }
export declare interface NoticeConfig { export declare interface NoticeConfig {
/** /**
* 通知提醒的标题 * 通知提醒的标题
*/ */
title?: string; title?: string;
/** /**
* 通知提醒的内容，为空或不填时，自动应用仅标题模式下的样式 * 通知提醒的内容，为空或不填时，自动应用仅标题模式下的样式
*/ */
desc?: string; desc?: string;
/** /**
* 自定义描述内容，使用 Vue 的 Render 函数 * 自定义描述内容，使用 Vue 的 Render 函数
*/ * @param h Render函数
render?: (h: CreateElement) => VNode; */
/** render?: (h?: CreateElement) => VNode;
* 自动关闭的延时，单位秒，不关闭可以写 0 默认4.5 /**
*/ * 自动关闭的延时，单位秒，不关闭可以写 0 默认4.5
duration?: number; */
/** duration?: number;
* 当前通知的唯一标识 /**
*/ * 当前通知的唯一标识
name?: string; */
/** name?: string;
* 关闭时的回调 /**
*/ * 关闭时的回调
onClose?: Function; */
onClose?: Function;
} }
export declare interface NoticeGlobalConfig { export declare interface NoticeGlobalConfig {
/** /**
* 通知组件距离顶端的距离，单位像素 默认24 * 通知组件距离顶端的距离，单位像素 默认24
*/ */
top?: number; top?: number;
/** /**
* 默认自动关闭的延时，单位秒 默认4.5 * 默认自动关闭的延时，单位秒 默认4.5
*/ */
duration?: number; duration?: number;
} }
declare module 'vue/types/vue' { declare module "vue/types/vue" {
interface Vue { interface Vue {
/** /**
* 通知提醒 * 通知提醒
*/ */
$Notice: Notice; $Notice: Notice;
} }
} }

785
types/table.d.ts vendored
View file

@ -2,418 +2,427 @@
// Project: https://github.com/iview/iview // Project: https://github.com/iview/iview
// Definitions by: yangdan // Definitions by: yangdan
// Definitions: https://github.com/yangdan8/iview.git // Definitions: https://github.com/yangdan8/iview.git
import Vue, { VNode } from 'vue'; import Vue, { VNode, CreateElement } from "vue";
export declare interface Table extends 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 { export declare interface TableColumn {
/** /**
* 列类型，可选值为 index、selection、expand、html * 列类型，可选值为 index、selection、expand、html
*/ */
type?: 'index' | 'selection' | 'expand' | 'html'; type?: "index" | "selection" | "expand" | "html";
/** /**
* 列头显示文字 * 列头显示文字
* @default # * @default #
*/ */
title?: string; title?: string;
/** /**
* 对应列内容的字段名 * 对应列内容的字段名
*/ */
key?: string; key?: string;
/** /**
* 列宽 * 列宽
*/ */
width?: number; width?: number;
/** /**
* 最小列宽 * 最小列宽
*/ */
minWidth?: number; minWidth?: number;
/** /**
* 最大列宽 * 最大列宽
*/ */
maxWidth?: number; maxWidth?: number;
/** /**
* 对齐方式，可选值为 left 左对齐、right 右对齐和 center 居中对齐,默认 left * 对齐方式，可选值为 left 左对齐、right 右对齐和 center 居中对齐,默认 left
* @default left * @default left
*/ */
align?: 'left' | 'right' | 'center'; align?: "left" | "right" | "center";
/** /**
* 列的样式名称 * 列的样式名称
*/ */
className?: string; className?: string;
/** /**
* 列是否固定在左侧或者右侧，可选值为 left 左侧和 right 右侧 * 列是否固定在左侧或者右侧，可选值为 left 左侧和 right 右侧
*/ */
fixed?: 'left' | 'right'; fixed?: "left" | "right";
/** /**
* 开启后，文本将不换行，超出部分显示为省略号 * 开启后，文本将不换行，超出部分显示为省略号
* @default false * @default false
*/ */
ellipsis?: boolean; ellipsis?: boolean;
/** /**
* 开启后，文本将不换行，超出部分显示为省略号，并用 Tooltip 组件显示完整内容 * 开启后，文本将不换行，超出部分显示为省略号，并用 Tooltip 组件显示完整内容
* @default false * @default false
*/ */
tooltip?: boolean; tooltip?: boolean;
/** /**
* 自定义渲染列，使用 Vue 的 Render 函数。 * 自定义渲染列，使用 Vue 的 Render 函数。
* 传入两个参数，第一个是 h，第二个为对象，包含 row、column 和 index， * 传入两个参数，第一个是 h，第二个为对象，包含 row、column 和 index，
* 分别指当前行数据，当前列数据，当前行索引，详见示例。 * 分别指当前行数据，当前列数据，当前行索引，详见示例。
* 学习 Render 函数的内容 从 rc.18 版本开始，我们将不再支持旧的用法。旧的 render 函数已被废弃。 * 学习 Render 函数的内容 从 rc.18 版本开始，我们将不再支持旧的用法。旧的 render 函数已被废弃。
*/ * @param h Render函数
render?: (h?: * @param params 对象，包含 row、column 和 index
( */
el?: string | object | Function, render?: (
data?: string | TableRenderCreateElementData | TableRenderCreateElementResult | Array<TableRenderCreateElementResult>, h?: CreateElement,
vnode?: string | TableRenderCreateElementResult[] params?: TableColumnRenderParams
) => TableRenderCreateElementResult, ) => TableRenderCreateElementResult;
params?: TableColumnRenderParams /**
) => TableRenderCreateElementResult; * 自定义列头显示内容，传入参数有两个，column 和 index，分别为当前列数据和当前列索引，不支持渲染自定义组件
/** * @param h Render函数
* 自定义列头显示内容，传入参数有两个，column 和 index，分别为当前列数据和当前列索引，不支持渲染自定义组件 * @param params 对象，包含 row、column 和 index
*/ */
renderHeader?: (h?: renderHeader?: (
( h?: CreateElement,
el?: string | object | Function, params?: TableColumnRenderHeadParams
data?: string | TableRenderCreateElementData | TableRenderCreateElementResult | Array<TableRenderCreateElementResult>, ) => TableRenderCreateElementResult;
vnode?: string | TableRenderCreateElementResult[] /**
) => TableRenderCreateElementResult, * 对应列是否可以排序，如果设置为 custom，则代表用户希望远程排序，
params?: TableColumnRenderHeadParams * 需要监听 Table 的 on- sort - change 事件,默认false
) => TableRenderCreateElementResult; * @default false
/** */
* 对应列是否可以排序，如果设置为 custom，则代表用户希望远程排序， sortable?: boolean | "custom";
* 需要监听 Table 的 on- sort - change 事件,默认false /**
* @default false * 自定义排序使用的方法，接收三个参数 a 、 b 和 type，
*/ * 当设置 sortable?: true 时有效。type 值为 asc 和 desc
sortable?: boolean | 'custom'; */
/** sortMethod?: (a: any, b: any, type: "asc" | "desc") => void;
* 自定义排序使用的方法，接收三个参数 a 、 b 和 type， /**
* 当设置 sortable?: true 时有效。type 值为 asc 和 desc * 设置初始化排序。值为 asc 和 desc
*/ */
sortMethod?: (a: any, b: any, type: 'asc' | 'desc') => void; sortType?: "asc" | "desc";
/** /**
* 设置初始化排序。值为 asc 和 desc * 过滤数据的选项，格式为数组，数组中每项包含 label 和 value 属性，使用过滤，必须同时配置filterMethod
*/ */
sortType?: 'asc' | 'desc'; filters?: { label: string; value: string | number | boolean }[];
/** /**
* 过滤数据的选项，格式为数组，数组中每项包含 label 和 value 属性，使用过滤，必须同时配置filterMethod * 数据过滤使用的方法，如果是多选的筛选项，对每一条数据会执行多次，任意一次返回 true 就会显示
*/ */
filters?: { label: string, value: string | number | boolean }[]; filterMethod?: () => void;
/** /**
* 数据过滤使用的方法，如果是多选的筛选项，对每一条数据会执行多次，任意一次返回 true 就会显示 * 数据过滤的选项是否多选
*/ * @default true
filterMethod?: () => void; */
/** filterMultiple?: boolean;
* 数据过滤的选项是否多选 /**
* @default true * 在初始化时使用过滤，数组，值为需要过滤的 value 集合
*/ */
filterMultiple?: boolean; filteredValue?: (string | number | boolean)[];
/** /**
* 在初始化时使用过滤，数组，值为需要过滤的 value 集合 * 使用远程过滤
*/ */
filteredValue?: (string | number | boolean)[]; filterRemote?: () => void;
/** /**
* 使用远程过滤 * 表头分组
*/ */
filterRemote?: () => void; children?: object[];
/**
* 表头分组
*/
children?: object[];
} }
export declare interface TableRenderCreateElementData { export declare interface TableRenderCreateElementData {
/** /**
* 和`v-bind:class`一样的 API * 和`v-bind:class`一样的 API
*/ */
'class'?: object; class?: object;
/** /**
* 和`v-bind:style`一样的 API * 和`v-bind:style`一样的 API
*/ */
style?: object; style?: object;
/** /**
* 正常的 HTML 特性 * 正常的 HTML 特性
*/ */
attrs?: object, attrs?: object;
/** /**
* 组件 props * 组件 props
*/ */
props?: object; props?: object;
/** /**
* DOM 属性 * DOM 属性
*/ */
domProps?: object; domProps?: object;
/** /**
* 事件监听器基于 "on" * 事件监听器基于 "on"
* 所以不再支持如 v-on?:keyup.enter 修饰器 * 所以不再支持如 v-on?:keyup.enter 修饰器
* 需要手动匹配 keyCode。 * 需要手动匹配 keyCode。
*/ */
on?: object; on?: object;
/** /**
* 仅对于组件，用于监听原生事件，而不是组件使用 vm.$emit 触发的事件。 * 仅对于组件，用于监听原生事件，而不是组件使用 vm.$emit 触发的事件。
*/ */
nativeOn?: object; nativeOn?: object;
/** /**
* 自定义指令. 注意事项：不能对绑定的旧值设值 * 自定义指令. 注意事项：不能对绑定的旧值设值
* Vue 会为您持续追踨 * Vue 会为您持续追踨
*/ */
directives?: object[]; directives?: object[];
/** /**
* 如果子组件有定义 slot 的名称 * 如果子组件有定义 slot 的名称
*/ */
slot?: string; slot?: string;
/** /**
* 其他特殊顶层属性,myKey * 其他特殊顶层属性,myKey
*/ */
key?: string; key?: string;
/** /**
* myRef * myRef
*/ */
ref?: string ref?: string;
} }
export declare interface TableColumnRenderParams { export declare interface TableColumnRenderParams {
/** /**
* 当前行数据 * 当前行数据
*/ */
row?: object; row?: object;
/** /**
* 当前列数据 * 当前列数据
*/ */
column?: object; column?: object;
/** /**
* 当前行索引 * 当前行索引
*/ */
index?: number; index?: number;
} }
export declare interface TableRenderCreateElementResult { export declare interface TableRenderCreateElementResult {
child?: object; child?: object;
children?: Array<any>; children?: Array<any>;
componentInstance?: object; componentInstance?: object;
componentOptions?: object; componentOptions?: object;
context?: object; context?: object;
data?: object; data?: object;
elm?: object; elm?: object;
functionalContext?: object; functionalContext?: object;
isCloned?: boolean; isCloned?: boolean;
isComment?: boolean; isComment?: boolean;
isOnce?: boolean; isOnce?: boolean;
isRootInsert?: boolean; isRootInsert?: boolean;
isStatic?: boolean; isStatic?: boolean;
key?: object; key?: object;
ns?: object; ns?: object;
parent?: object; parent?: object;
raw?: boolean; raw?: boolean;
tag?: string; tag?: string;
text?: object; text?: object;
} }
export declare interface TableColumnRenderHeadParams { export declare interface TableColumnRenderHeadParams {
/** /**
* 当前列数据 * 当前列数据
*/ */
column?: object; column?: object;
/** /**
* 当前行索引 * 当前行索引
*/ */
index?: number; index?: number;
} }
export declare interface TableExportCsvParams { export declare interface TableExportCsvParams {
/** /**
* 文件名，默认为 table.csv * 文件名，默认为 table.csv
*/ */
filename?: string; filename?: string;
/** /**
* 是否导出为原始数据，默认为 true * 是否导出为原始数据，默认为 true
*/ */
original?: boolean; original?: boolean;
/** /**
* 不显示表头，默认为 false * 不显示表头，默认为 false
*/ */
noHeader?: boolean; noHeader?: boolean;
/** /**
* 自定义导出的列数据 * 自定义导出的列数据
*/ */
columns?: any[]; columns?: any[];
/** /**
* 自定义导出的行数据 * 自定义导出的行数据
*/ */
data?: any[]; data?: any[];
/** /**
* 添加此函数后，不会下载，而是返回数据 * 添加此函数后，不会下载，而是返回数据
*/ */
callback?: () => void; callback?: () => void;
/** /**
* 数据分隔符，默认是逗号(,) * 数据分隔符，默认是逗号(,)
* @default , * @default ,
*/ */
separator?: string; separator?: string;
/** /**
* 每项数据是否加引号 * 每项数据是否加引号
* @default false * @default false
*/ */
quoted?: boolean; quoted?: boolean;
} }

187
types/tree.d.ts vendored
View file

@ -2,102 +2,103 @@
// Project: https://github.com/iview/iview // Project: https://github.com/iview/iview
// Definitions by: yangdan // Definitions by: yangdan
// Definitions: https://github.com/yangdan8/iview.git // Definitions: https://github.com/yangdan8/iview.git
import Vue, { VNode } from 'vue'; import Vue, { VNode, CreateElement } from "vue";
export declare interface Tree extends Vue { export declare interface Tree extends Vue {
/** /**
* 可嵌套的节点属性的数组，生成 tree 的数据 * 可嵌套的节点属性的数组，生成 tree 的数据
*/ */
data?: TreeChild[]; data?: TreeChild[];
/** /**
* 是否支持多选 * 是否支持多选
* @default false * @default false
*/ */
multiple?: boolean; multiple?: boolean;
/** /**
* 是否显示多选框 * 是否显示多选框
* @default false * @default false
*/ */
'show-checkbox'?: boolean; "show-checkbox"?: boolean;
/** /**
* 没有数据时的提示 * 没有数据时的提示
* @default 暂无数据 * @default 暂无数据
*/ */
'empty-text'?: string; "empty-text"?: string;
/** /**
* 异步加载数据的方法 * 异步加载数据的方法
*/ */
'load-data'?: () => void; "load-data"?: () => void;
/** /**
* 自定义渲染内容 * 自定义渲染内容
*/ * @param h Render函数
render?: () => void; */
/** render?: (h?: CreateElement) => void;
* 定义子节点键 /**
* @default children * 定义子节点键
*/ * @default children
'children-key'?:string; */
/** "children-key"?: string;
* 点击树节点时触发 /**
* @default 当前已选中的节点数组 * 点击树节点时触发
*/ * @default 当前已选中的节点数组
$emit(eventName: 'on-select-change', value: TreeChild[]): this; */
/** $emit(eventName: "on-select-change", value: TreeChild[]): this;
* 点击复选框时触发 /**
* @default 当前已勾选节点的数组 * 点击复选框时触发
*/ * @default 当前已勾选节点的数组
$emit(eventName: 'on-check-change', value: TreeChild[]): this; */
/** $emit(eventName: "on-check-change", value: TreeChild[]): this;
* 展开和收起子列表时触发 /**
* @default 当前节点的数据 * 展开和收起子列表时触发
*/ * @default 当前节点的数据
$emit(eventName: 'on-toggle-expand', value: TreeChild): this; */
/** $emit(eventName: "on-toggle-expand", value: TreeChild): this;
* 获取被勾选的节点 /**
*/ * 获取被勾选的节点
getCheckedNodes(): void; */
/** getCheckedNodes(): void;
* 获取被选中的节点 /**
*/ * 获取被选中的节点
getSelectedNodes(): void; */
getSelectedNodes(): void;
} }
export declare interface TreeChild extends Vue { export declare interface TreeChild extends Vue {
/** /**
* 标题 * 标题
*/ */
title?: string; title?: string;
/** /**
* 是否展开直子节点 * 是否展开直子节点
* @default false * @default false
*/ */
expand?: boolean; expand?: boolean;
/** /**
* 禁掉响应 * 禁掉响应
* @default false * @default false
*/ */
disabled?: boolean; disabled?: boolean;
/** /**
* 禁掉checkbox * 禁掉checkbox
* @default false * @default false
*/ */
disableCheckbox?: boolean; disableCheckbox?: boolean;
/** /**
* 是否选中子节点 * 是否选中子节点
* @default false * @default false
*/ */
selected?: boolean; selected?: boolean;
/** /**
* 是否勾选(如果勾选，子节点也会全部勾选) * 是否勾选(如果勾选，子节点也会全部勾选)
* @default false * @default false
*/ */
checked?: boolean; checked?: boolean;
/** /**
* 子节点属性数组 * 子节点属性数组
*/ */
children?: TreeChild[]; children?: TreeChild[];
/** /**
* 自定义当前节点渲染内容，见示例 * 自定义当前节点渲染内容，见示例
*/ */
render(): void; render(): void;
} }