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

Merge pull request #23 from iview/2.0

Browse source 
update
This commit is contained in:
yangdan8 2019-01-03 16:50:19 +08:00 • committed by GitHub
commit e33a0b9838
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
20 changed files with 935 additions and 830 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
README.md
View file

@ -26,7 +26,7 @@ iView
<tr> <tr>
<td align="center" valign="middle"> <td align="center" valign="middle">
<a href="https://segmentfault.com/ls/1650000016424063" target="_blank"> <a href="https://segmentfault.com/ls/1650000016424063" target="_blank">
<img width="300" src="https://file.iviewui.com/asd/asd-iview-live2.png"> <img width="300" src="https://file.iviewui.com/asd/asd-i-2.png">
</a> </a>
</td> </td>
<td align="center" valign="middle"> <td align="center" valign="middle">

1413
dist/iview.js vendored
View file

File diff suppressed because it is too large Load diff

2
dist/iview.js.map vendored
View file

File diff suppressed because one or more lines are too long

6
dist/iview.min.js vendored
View file

File diff suppressed because one or more lines are too long

BIN
dist/iview.min.js.gz vendored
View file

Binary file not shown.

2
dist/iview.min.js.map vendored
View file

File diff suppressed because one or more lines are too long

2
dist/styles/iview.css vendored
View file

File diff suppressed because one or more lines are too long

112
examples/routers/cascader.vue
View file

@ -1,61 +1,77 @@
<template> <template>
<Cascader :data="data4" :load-data="loadData"></Cascader> <div>
<Row>
<i-col span="18">
<i-button v-on:click="setValue">setValue</i-button>
</i-col>
<i-col span="4">
<Cascader :data="data" v-model="value1" transfer></Cascader>
</i-col>
</Row>
</div>
</template> </template>
<script> <script>
export default { export default {
data () { data () {
return { return {
data4: [ value1: [],
{ data: [{
value: 'beijing', value: '9ecec83c-cf6b-4cfe-aa75-eb3510875331',
label: '北京', label: '北京',
children: [], children: [{
loading: false value: 'a873a9bd-7d75-4f46-9369-4d25a1feb13c',
}, label: '故宫'
{ }, {
value: 'hangzhou', value: 'tiantan',
label: '杭州', label: '天坛'
children: [], }, {
loading:false value: 'wangfujing',
} label: '王府井'
] }]
}, {
value: 'ca7c0fbc-728d-42e8-b111-f5f73cf9171b',
label: '江苏',
children: [{
value: 'a89d891b-5c50-44c0-87b4-d4f934edc921',
label: '南京',
children: [{
value: '44736384-0ede-41ba-bf7a-59c84241851a',
label: '夫子庙中国第一庙来自南京',
children:[{
value: '44736384-0ede-41ba-bf7a-59c84241851c',
label:'自定义产品系统来自黑龙江地区'
}]
}]
}, {
value: 'suzhou',
label: '苏州',
children: [{
value: 'zhuozhengyuan',
label: '拙政园',
}, {
value: 'shizilin',
label: '狮子林',
}]
}],
}]
} }
}, },
methods: { methods: {
loadData (item, callback) { setValue() {
item.loading = true; var v = "ca7c0fbc-728d-42e8-b111-f5f73cf9171b,a89d891b-5c50-44c0-87b4-d4f934edc921,44736384-0ede-41ba-bf7a-59c84241851a";
setTimeout(() => { var x = v.split(',')
if (item.value === 'beijing') { var x1 = x[0].toString();
item.children = [ var x2 = x[1].toString();
{ var x3 = x[2].toString();
value: 'talkingdata',
label: 'TalkingData' this.value1 = x;
},
{
value: 'baidu',
label: '百度'
},
{
value: 'sina',
label: '新浪'
}
];
} else if (item.value === 'hangzhou') {
item.children = [
{
value: 'ali',
label: '阿里巴巴'
},
{
value: '163',
label: '网易'
}
];
}
item.loading = false;
callback();
}, 1000);
} }
},
mounted () {
} }
} }
</script> </script>
<style>
</style>

21
examples/routers/divider.vue
View file

@ -25,6 +25,25 @@
iView is a set of UI components and widgets built on Vue.js. iView is a set of UI components and widgets built on Vue.js.
</p> </p>
<Divider dashed>iView Developer</Divider>
<p>
iView is a set of UI components and widgets built on Vue.js.
iView is a set of UI components and widgets built on Vue.js.
iView is a set of UI components and widgets built on Vue.js.
</p>
<Divider dashed orientation="left">iView Developer</Divider>
<p>
iView is a set of UI components and widgets built on Vue.js.
iView is a set of UI components and widgets built on Vue.js.
iView is a set of UI components and widgets built on Vue.js.
</p>
<Divider dashed orientation="right">iView Developer</Divider>
<p>
iView is a set of UI components and widgets built on Vue.js.
iView is a set of UI components and widgets built on Vue.js.
iView is a set of UI components and widgets built on Vue.js.
</p>
<Divider dashed/> <Divider dashed/>
<p> <p>
@ -60,6 +79,8 @@
<a href="#">Components</a> <a href="#">Components</a>
<Divider type="vertical" /> <Divider type="vertical" />
<a href="#">Divider</a> <a href="#">Divider</a>
<Divider type="vertical" dashed />
<a href="#">ABCDE</a>
</div> </div>
</Card> </Card>
</i-col> </i-col>

100
examples/routers/select.vue
View file

@ -1,75 +1,47 @@
<template> <template>
<Row> <div style="margin: 200px;">
<Col span="12" style="padding-right:10px"> <Select size="small" v-model="model10" multiple style="width:260px">
<Select <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
v-model="model13"
filterable
remote
:remote-method="remoteMethod1"
:loading="loading1">
<Option v-for="(option, index) in options1" :value="option.value" :key="index">{{option.label}}</Option>
</Select> </Select>
</Col> <Select v-model="model10" multiple style="width:260px">
<Col span="12"> <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
<Select
v-model="model14"
multiple
filterable
remote
:remote-method="remoteMethod2"
:loading="loading2">
<Option v-for="(option, index) in options2" :value="option.value" :key="index">{{option.label}}</Option>
</Select> </Select>
</Col> <Select size="large" v-model="model10" multiple style="width:260px">
</Row> <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
</Select>
</div>
</template> </template>
<script> <script>
export default { export default {
data () { data () {
return { return {
model13: '', cityList: [
loading1: false, {
options1: [], value: 'New York',
model14: [], label: 'New York'
loading2: false, },
options2: [], {
list: ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New hampshire', 'New jersey', 'New mexico', 'New york', 'North carolina', 'North dakota', 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode island', 'South carolina', 'South dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 'Virginia', 'Washington', 'West virginia', 'Wisconsin', 'Wyoming'] value: 'London',
} label: 'LondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondon'
}, },
methods: { {
remoteMethod1 (query) { value: 'Sydney',
if (query !== '') { label: 'Sydney'
this.loading1 = true; },
setTimeout(() => { {
this.loading1 = false; value: 'Ottawa',
const list = this.list.map(item => { label: 'Ottawa'
return { },
value: item, {
label: item value: 'Paris',
}; label: 'Paris'
}); },
this.options1 = list.filter(item => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1); {
}, 200); value: 'Canberra',
} else { label: 'Canberra'
this.options1 = []; }
} ],
}, model10: ['New York', 'London']
remoteMethod2 (query) {
if (query !== '') {
this.loading2 = true;
setTimeout(() => {
this.loading2 = false;
const list = this.list.map(item => {
return {
value: item,
label: item
};
});
this.options2 = list.filter(item => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1);
}, 200);
} else {
this.options2 = [];
}
} }
} }
} }

2
package.json
View file

@ -1,6 +1,6 @@
{ {
"name": "iview", "name": "iview",
"version": "3.2.0", "version": "3.2.1",
"title": "iView", "title": "iView",
"description": "A high quality UI components Library with Vue.js", "description": "A high quality UI components Library with Vue.js",
"homepage": "http://www.iviewui.com", "homepage": "http://www.iviewui.com",

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

@ -59,8 +59,8 @@
handleTriggerItem (item, fromInit = false, fromUser = false) { handleTriggerItem (item, fromInit = false, fromUser = false) {
if (item.disabled) return; if (item.disabled) return;
const cascader = findComponentUpward(this, 'Cascader');
if (item.loading !== undefined && !item.children.length) { if (item.loading !== undefined && !item.children.length) {
const cascader = findComponentUpward(this, 'Cascader');
if (cascader && cascader.loadData) { if (cascader && cascader.loadData) {
cascader.loadData(item, () => { cascader.loadData(item, () => {
// todo // todo
@ -110,6 +110,10 @@
fromInit: fromInit fromInit: fromInit
}); });
} }
if (cascader) {
cascader.$refs.drop.update();
}
}, },
updateResult (item) { updateResult (item) {
this.result = [this.tmpItem].concat(item); this.result = [this.tmpItem].concat(item);

1
src/components/divider/divider.vue
View file

@ -42,6 +42,7 @@
`${prefixCls}`, `${prefixCls}`,
`${prefixCls}-${this.type}`, `${prefixCls}-${this.type}`,
{ {
[`${prefixCls}-with-text`]: this.hasSlot && this.orientation === 'center',
[`${prefixCls}-with-text-${this.orientation}`]: this.hasSlot, [`${prefixCls}-with-text-${this.orientation}`]: this.hasSlot,
[`${prefixCls}-dashed`]: !!this.dashed [`${prefixCls}-dashed`]: !!this.dashed
} }

20
src/components/input/input.vue
View file

@ -30,6 +30,9 @@
@keydown="handleKeydown" @keydown="handleKeydown"
@focus="handleFocus" @focus="handleFocus"
@blur="handleBlur" @blur="handleBlur"
@compositionstart="handleComposition"
@compositionupdate="handleComposition"
@compositionend="handleComposition"
@input="handleInput" @input="handleInput"
@change="handleChange"> @change="handleChange">
<div :class="[prefixCls + '-group-append']" v-if="append" v-show="slotReady"><slot name="append"></slot></div> <div :class="[prefixCls + '-group-append']" v-if="append" v-show="slotReady"><slot name="append"></slot></div>
@ -62,6 +65,9 @@
@keydown="handleKeydown" @keydown="handleKeydown"
@focus="handleFocus" @focus="handleFocus"
@blur="handleBlur" @blur="handleBlur"
@compositionstart="handleComposition"
@compositionupdate="handleComposition"
@compositionend="handleComposition"
@input="handleInput"> @input="handleInput">
</textarea> </textarea>
</div> </div>
@ -179,7 +185,8 @@
slotReady: false, slotReady: false,
textareaStyles: {}, textareaStyles: {},
showPrefix: false, showPrefix: false,
showSuffix: false showSuffix: false,
isOnComposition: false
}; };
}, },
computed: { computed: {
@ -244,7 +251,18 @@
this.dispatch('FormItem', 'on-form-blur', this.currentValue); this.dispatch('FormItem', 'on-form-blur', this.currentValue);
} }
}, },
handleComposition(event) {
if (event.type === 'compositionstart') {
this.isOnComposition = true;
}
if (event.type === 'compositionend') {
this.isOnComposition = false;
this.handleInput(event);
}
},
handleInput (event) { handleInput (event) {
if (this.isOnComposition) return;
let value = event.target.value; let value = event.target.value;
if (this.number && value !== '') value = Number.isNaN(Number(value)) ? value : Number(value); if (this.number && value !== '') value = Number.isNaN(Number(value)) ? value : Number(value);
this.$emit('input', value); this.$emit('input', value);

21
src/components/select/select.vue
View file

@ -761,21 +761,12 @@
}, },
slotOptions(options, old){ slotOptions(options, old){
// #4626，当 Options 的 label 更新时，v-model 的值未更新 // #4626，当 Options 的 label 更新时，v-model 的值未更新
if (options && options.length && this.values.length && !this.multiple) { // remote 下，调用 getInitialValue 有 bug
this.values = this.values.map(value => { if (!this.remote) {
const option = options.find(option => { const values = this.getInitialValue();
if (!option.componentOptions) return false; if (this.flatOptions && this.flatOptions.length && values.length && !this.multiple) {
return option.componentOptions.propsData.value === value.value; this.values = values.map(this.getOptionData).filter(Boolean);
}); }
if(!option) return null;
const label = getOptionLabel(option);
return {
value: value.value,
label: label
};
}).filter(Boolean);
} }
// 当 dropdown 在控件上部显示时，如果选项列表的长度由外部动态变更了， // 当 dropdown 在控件上部显示时，如果选项列表的长度由外部动态变更了，

1
src/styles/components/divider.less
View file

@ -18,6 +18,7 @@
display: block; display: block;
height: 1px; height: 1px;
width: 100%; width: 100%;
min-width: 100%;
margin: 24px 0; margin: 24px 0;
clear: both; clear: both;
} }

4
src/styles/components/input-number.less
View file

@ -112,6 +112,10 @@
&[disabled] { &[disabled] {
.disabled(); .disabled();
} }
&::placeholder {
color: @input-placeholder-color;
}
} }
&-large { &-large {

24
src/styles/components/select.less
View file

@ -205,9 +205,21 @@
height: 24px; height: 24px;
line-height: 22px; line-height: 22px;
margin: 3px 4px 3px 0; margin: 3px 4px 3px 0;
//i{ max-width: 99%;
// top: 2px; position: relative;
//} span{
display: block;
margin-right: 14px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
i{
display: block;
position: absolute;
right: 4px;
top: 4px;
}
} }
&-large&-multiple .@{css-prefix}tag{ &-large&-multiple .@{css-prefix}tag{
@ -215,7 +227,7 @@
line-height: 26px; line-height: 26px;
font-size: @font-size-base; font-size: @font-size-base;
i{ i{
top: 1px; top: 6px;
} }
} }
@ -225,8 +237,12 @@
font-size: @font-size-small; font-size: @font-size-small;
padding: 0 6px; padding: 0 6px;
margin: 3px 4px 2px 0; margin: 3px 4px 2px 0;
span{
margin-right: 14px;
}
i{ i{
top: 1px; top: 1px;
right: 2px;
} }
} }

9
src/styles/components/tree.less
View file

@ -6,12 +6,21 @@
margin: 0; margin: 0;
padding: 0; padding: 0;
font-size: @font-size-small; font-size: @font-size-small;
&.@{dropdown-prefix-cls}-menu{
padding: 0;
}
li{ li{
list-style: none; list-style: none;
margin: 8px 0; margin: 8px 0;
padding: 0; padding: 0;
white-space: nowrap; white-space: nowrap;
outline: none; outline: none;
&.@{dropdown-item-prefix-cls}{
margin: 0;
padding: 7px 16px;
white-space: nowrap;
}
} }
} }
li{ li{

17
types/tree.d.ts vendored
View file

@ -38,14 +38,19 @@ export declare interface Tree extends Vue {
* @default children * @default children
*/ */
"children-key"?: string; "children-key"?: string;
/**
* 在显示复选框的情况下，是否严格的遵循父子不互相关联的做法
* @default false
*/
"check-strictly"?: boolean;
/** /**
* 点击树节点时触发 * 点击树节点时触发
* @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;
/** /**
@ -56,11 +61,15 @@ export declare interface Tree extends Vue {
/** /**
* 获取被勾选的节点 * 获取被勾选的节点
*/ */
getCheckedNodes(): void; getCheckedNodes(): any[];
/** /**
* 获取被选中的节点 * 获取被选中的节点
*/ */
getSelectedNodes(): void; getSelectedNodes(): any[];
/**
* 获取选中及半选节点
*/
getCheckedAndIndeterminateNodes(): any[];
} }
export declare interface TreeChild extends Vue { export declare interface TreeChild extends Vue {