Merge remote-tracking branch 'upstream/master' into build
This commit is contained in:
jingsam
commit
e5d5ee7cbd
11 changed files with 174 additions and 105 deletions
2
.gitattributes
vendored
Normal file
2
.gitattributes
vendored
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
src/styles/**/* linguist-vendored=false
|
||||
dist/styles/* linguist-vendored=false
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -26,7 +26,7 @@
|
|||
</div>
|
||||
<Dropdown v-show="visible" transition="slide-up" v-ref:dropdown>
|
||||
<ul v-show="notFound" :class="[prefixCls + '-not-found']"><li>{{ notFoundText }}</li></ul>
|
||||
<ul v-else :class="[prefixCls + '-dropdown-list']"><slot></slot></ul>
|
||||
<ul v-else :class="[prefixCls + '-dropdown-list']" v-el:options><slot></slot></ul>
|
||||
</Dropdown>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -34,7 +34,7 @@
|
|||
import Icon from '../icon';
|
||||
import Dropdown from './dropdown.vue';
|
||||
import clickoutside from '../../directives/clickoutside';
|
||||
import { oneOf } from '../../utils/assist';
|
||||
import { oneOf, MutationObserver } from '../../utils/assist';
|
||||
|
||||
const prefixCls = 'ivu-select';
|
||||
|
||||
|
|
@ -94,7 +94,8 @@
|
|||
focusIndex: 0,
|
||||
query: '',
|
||||
inputLength: 20,
|
||||
notFound: false
|
||||
notFound: false,
|
||||
slotChangeDuration: false // if slot change duration and in multiple, set true and after slot change, set false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
|
@ -180,7 +181,7 @@
|
|||
});
|
||||
}
|
||||
},
|
||||
updateOptions (init) {
|
||||
updateOptions (init, slot = false) {
|
||||
let options = [];
|
||||
let index = 1;
|
||||
|
||||
|
|
@ -199,20 +200,28 @@
|
|||
this.options = options;
|
||||
|
||||
if (init) {
|
||||
this.updateSingleSelected(true);
|
||||
this.updateMultipleSelected(true);
|
||||
this.updateSingleSelected(true, slot);
|
||||
this.updateMultipleSelected(true, slot);
|
||||
}
|
||||
},
|
||||
updateSingleSelected (init = false) {
|
||||
updateSingleSelected (init = false, slot = false) {
|
||||
const type = typeof this.model;
|
||||
|
||||
if (type === 'string' || type === 'number') {
|
||||
let findModel = false;
|
||||
|
||||
for (let i = 0; i < this.options.length; i++) {
|
||||
if (this.model === this.options[i].value) {
|
||||
this.selectedSingle = this.options[i].label;
|
||||
findModel = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
if (slot && !findModel) {
|
||||
this.model = '';
|
||||
this.query = '';
|
||||
}
|
||||
}
|
||||
|
||||
this.toggleSingleSelected(this.model, init);
|
||||
|
|
@ -229,7 +238,7 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
updateMultipleSelected (init = false) {
|
||||
updateMultipleSelected (init = false, slot = false) {
|
||||
if (this.multiple && Array.isArray(this.model)) {
|
||||
let selected = [];
|
||||
|
||||
|
|
@ -249,8 +258,22 @@
|
|||
}
|
||||
|
||||
this.selectedMultiple = selected;
|
||||
}
|
||||
|
||||
if (slot) {
|
||||
let selectedModel = [];
|
||||
|
||||
for (let i = 0; i < selected.length; i++) {
|
||||
selectedModel.push(selected[i].value);
|
||||
}
|
||||
|
||||
// if slot change and remove a selected option, emit user
|
||||
if (this.model.length === selectedModel.length) {
|
||||
this.slotChangeDuration = true;
|
||||
}
|
||||
|
||||
this.model = selectedModel;
|
||||
}
|
||||
}
|
||||
this.toggleMultipleSelected(this.model, init);
|
||||
},
|
||||
removeTag (index) {
|
||||
|
|
@ -431,19 +454,46 @@
|
|||
if (this.multiple && this.model.length && this.query === '') {
|
||||
this.removeTag(this.model.length - 1);
|
||||
}
|
||||
},
|
||||
// use when slot changed
|
||||
slotChange () {
|
||||
this.options = [];
|
||||
this.optionInstances = [];
|
||||
}
|
||||
},
|
||||
ready () {
|
||||
this.updateOptions(true);
|
||||
document.addEventListener('keydown', this.handleKeydown);
|
||||
|
||||
// watch slot changed
|
||||
if (MutationObserver) {
|
||||
this.observer = new MutationObserver(() => {
|
||||
this.slotChange();
|
||||
this.updateOptions(true, true);
|
||||
});
|
||||
|
||||
this.observer.observe(this.$els.options, {
|
||||
// attributes: true,
|
||||
childList: true,
|
||||
characterData: true,
|
||||
subtree: true
|
||||
});
|
||||
}
|
||||
},
|
||||
beforeDestroy () {
|
||||
document.removeEventListener('keydown', this.handleKeydown);
|
||||
if (this.observer) {
|
||||
this.observer.disconnect();
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
model () {
|
||||
if (this.multiple) {
|
||||
this.updateMultipleSelected();
|
||||
if (this.slotChangeDuration) {
|
||||
this.slotChangeDuration = false;
|
||||
} else {
|
||||
this.updateMultipleSelected();
|
||||
}
|
||||
} else {
|
||||
this.updateSingleSelected();
|
||||
}
|
||||
|
|
|
|||
|
|
@ -20,8 +20,8 @@
|
|||
position: relative;
|
||||
right: 50%;
|
||||
padding: 8px 16px;
|
||||
border-radius: @border-radius-base;
|
||||
border: 1px solid @border-color-base;
|
||||
border: 1px solid @border-color-split;
|
||||
border-radius: @border-radius-small;
|
||||
box-shadow: @shadow-base;
|
||||
background: #fff;
|
||||
display: block;
|
||||
|
|
|
|||
|
|
@ -76,15 +76,47 @@
|
|||
|
||||
&.@{tag-prefix-cls}-blue {
|
||||
color: @link-color !important;
|
||||
border: 1px solid @link-color !important;
|
||||
|
||||
&:after{
|
||||
background: @link-color;
|
||||
}
|
||||
.@{tag-close-prefix-cls}{
|
||||
color: @link-color !important;
|
||||
}
|
||||
}
|
||||
&.@{tag-prefix-cls}-green {
|
||||
color: @success-color !important;
|
||||
border: 1px solid @success-color !important;
|
||||
|
||||
&:after{
|
||||
background: @success-color;
|
||||
}
|
||||
.@{tag-close-prefix-cls}{
|
||||
color: @success-color !important;
|
||||
}
|
||||
}
|
||||
&.@{tag-prefix-cls}-yellow {
|
||||
color: @warning-color !important;
|
||||
border: 1px solid @warning-color !important;
|
||||
|
||||
&:after{
|
||||
background: @warning-color;
|
||||
}
|
||||
.@{tag-close-prefix-cls}{
|
||||
color: @warning-color !important;
|
||||
}
|
||||
}
|
||||
&.@{tag-prefix-cls}-red {
|
||||
color: @error-color !important;
|
||||
border: 1px solid @error-color !important;
|
||||
|
||||
&:after{
|
||||
background: @error-color;
|
||||
}
|
||||
.@{tag-close-prefix-cls}{
|
||||
color: @error-color !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -46,7 +46,7 @@
|
|||
@shadow-right : 1px 0 6px @shadow-color;
|
||||
|
||||
// Button
|
||||
@btn-font-weight : 400;
|
||||
@btn-font-weight : normal;
|
||||
@btn-padding-base : 4px 15px;
|
||||
@btn-padding-large : 6px 15px 7px 15px;
|
||||
@btn-padding-small : 2px 7px;
|
||||
|
|
|
|||
|
|
@ -49,4 +49,7 @@ export function getScrollBarSize (fresh) {
|
|||
cached = widthContained - widthScroll;
|
||||
}
|
||||
return cached;
|
||||
}
|
||||
}
|
||||
|
||||
// watch DOM change
|
||||
export const MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver || false;
|
||||
|
|
@ -38,7 +38,7 @@
|
|||
},
|
||||
methods: {
|
||||
info () {
|
||||
Message.info('欢迎来到iView', 3, () => {
|
||||
Message.info('欢迎来到iView', 1000, () => {
|
||||
console.log('close info');
|
||||
});
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,98 +1,67 @@
|
|||
<template>
|
||||
<div>
|
||||
<br><br><br><br><br><br><br><br><br><br><br>
|
||||
{{ city | json }}<br>
|
||||
<Button @click="city = 'hangzhou'">切换城市</Button>
|
||||
<br>
|
||||
<i-select v-if="true" :model.sync="city" style="width:200px" filterable @on-change="change">
|
||||
<i-option-group label="热门城市">
|
||||
<i-option value="beijing">北京市</i-option>
|
||||
<i-option value="shanghai" disabled label="上海市">上海市2</i-option>
|
||||
<i-option value="shenzhen">深圳市</i-option>
|
||||
</i-option-group>
|
||||
<i-option-group label="二线城市">
|
||||
<i-option value="nanjing">南京市</i-option>
|
||||
<i-option value="hangzhou">杭州市</i-option>
|
||||
<i-option value="heilongjiang" disabled>黑龙江市</i-option>
|
||||
</i-option-group>
|
||||
<i-option-group label="其它城市">
|
||||
<i-option value="jyg">嘉峪关市</i-option>
|
||||
<i-option value="lanzhou">兰州市</i-option>
|
||||
<i-option value="beijingxi">北京西</i-option>
|
||||
</i-option-group>
|
||||
</i-select>
|
||||
|
||||
<i-select v-show="true" :model.sync="focus" style="width:200px" @on-change="change" clearable filterable label-in-value>
|
||||
<i-option value="beijing">北京</i-option>
|
||||
<i-option value="shanghai" label="上海市">上海市</i-option>
|
||||
<i-option value="shenzhen" disabled>深圳市</i-option>
|
||||
<i-option value="guangzhou" label="广州市">广州市2</i-option>
|
||||
<i-option value="shijiazhuang" disabled>石家庄市</i-option>
|
||||
<!--<i-option value="shijiazhuang2">石家庄市2</i-option>-->
|
||||
<i-option value="a">a市</i-option>
|
||||
<i-option value="b">b市</i-option>
|
||||
<i-option value="c">c市</i-option>
|
||||
<i-option value="d">d市</i-option>
|
||||
<i-option value="e">e市</i-option>
|
||||
</i-select>
|
||||
|
||||
<i-select v-if="true" :model.sync="focus2" style="width:300px" @on-change="change" clearable filterable multiple>
|
||||
<i-option value="beijing" label="北京市">北京2</i-option>
|
||||
<i-option value="shanghai">上海市</i-option>
|
||||
<i-option value="shenzhen" disabled>深圳市</i-option>
|
||||
<i-option value="guangzhou">广州市</i-option>
|
||||
<i-option value="shijiazhuang">石家庄市</i-option>
|
||||
<i-option value="a">a1市</i-option>
|
||||
<i-option value="b">b2市</i-option>
|
||||
<i-option value="c">c1市</i-option>
|
||||
<i-option value="d">d2市</i-option>
|
||||
<i-option value="e">e1市</i-option>
|
||||
</i-select>
|
||||
|
||||
<i-select v-if="true" :model.sync="focus2" style="width:300px" @on-change="change" clearable multiple>
|
||||
<i-option value="beijing" label="北京市">北京2</i-option>
|
||||
<i-option value="shanghai">上海市</i-option>
|
||||
<i-option value="shenzhen" disabled>深圳市</i-option>
|
||||
<i-option value="guangzhou">广州市</i-option>
|
||||
<i-option value="shijiazhuang">石家庄市</i-option>
|
||||
<i-option value="a">a市</i-option>
|
||||
<i-option value="b">b市</i-option>
|
||||
<i-option value="c">c市</i-option>
|
||||
<i-option value="d">d市</i-option>
|
||||
<i-option value="e">e市</i-option>
|
||||
</i-select>
|
||||
|
||||
<br><br><br><br><br><br><br><br><br><br><br><br>
|
||||
</div>
|
||||
<!--<i-select :model.sync="model1" style="width:200px">-->
|
||||
<!--<i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option>-->
|
||||
<!--</i-select>-->
|
||||
<!--{{ model1 | json }}-->
|
||||
<i-button @click="change">修改数据</i-button>
|
||||
<!--<i-select :model.sync="model10" multiple style="width:240px" @on-change="datachange">-->
|
||||
<!--<i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option>-->
|
||||
<!--</i-select>-->
|
||||
<!--{{ model10 | json }}-->
|
||||
<!--<i-select :model.sync="model11" filterable style="width:200px" @on-change="datachange">-->
|
||||
<!--<i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option>-->
|
||||
<!--</i-select>-->
|
||||
<!--{{ model11 | json }}-->
|
||||
<i-select :model.sync="model12" filterable multiple style="width:240px" @on-change="datachange">
|
||||
<i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option>
|
||||
</i-select>
|
||||
{{ model12 | json }}
|
||||
</template>
|
||||
<script>
|
||||
import { iSelect, iOption, iOptionGroup, Button } from 'iview';
|
||||
|
||||
import { iSelect, iOption, iButton } from 'iview';
|
||||
export default {
|
||||
components: {
|
||||
iSelect,
|
||||
iOption,
|
||||
iOptionGroup,
|
||||
Button
|
||||
},
|
||||
props: {
|
||||
|
||||
},
|
||||
components: { iSelect, iOption, iButton },
|
||||
data () {
|
||||
return {
|
||||
city: '',
|
||||
focus: '',
|
||||
focus2: ['beijing']
|
||||
// focus2: []
|
||||
cityList: [
|
||||
{
|
||||
value: 'beijing',
|
||||
label: '北京市'
|
||||
},
|
||||
{
|
||||
value: 'shanghai',
|
||||
label: '上海市'
|
||||
},
|
||||
{
|
||||
value: 'shenzhen',
|
||||
label: '深圳市'
|
||||
},
|
||||
{
|
||||
value: 'hangzhou',
|
||||
label: '杭州市'
|
||||
},
|
||||
{
|
||||
value: 'nanjing',
|
||||
label: '南京市'
|
||||
},
|
||||
{
|
||||
value: 'chongqing',
|
||||
label: '重庆市'
|
||||
}
|
||||
],
|
||||
model1: '',
|
||||
model10: [],
|
||||
model11: '',
|
||||
model12: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
methods: {
|
||||
change (data) {
|
||||
console.log(data)
|
||||
change () {
|
||||
this.cityList.splice(2, 1);
|
||||
},
|
||||
datachange (data) {
|
||||
console.log(data);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -28,10 +28,23 @@
|
|||
<Tag type="border" color="red" closable>标签一</Tag>
|
||||
<Tag type="border" color="yellow">标签一</Tag>
|
||||
<Tag type="border" color="yellow" closable>标签一</Tag>
|
||||
<i-button type="primary" @click="modal1 = true">显示对话框</i-button>
|
||||
<Modal
|
||||
:visible.sync="modal1"
|
||||
title="普通的Modal对话框标题">
|
||||
<p>对话框内容</p>
|
||||
<p>对话框内容</p>
|
||||
<p>对话框内容</p>
|
||||
</Modal>
|
||||
</template>
|
||||
<script>
|
||||
import { Tag } from 'iview';
|
||||
import { Tag, Modal, iButton } from 'iview';
|
||||
export default {
|
||||
components: { Tag }
|
||||
components: { Tag, Modal, iButton },
|
||||
data () {
|
||||
return {
|
||||
modal1: false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue