commit
d2c548d1c2
24 changed files with 1853 additions and 1259 deletions
|
@ -1,5 +1,5 @@
|
||||||
<p align="center">
|
<p align="center">
|
||||||
<a href="https://www.iviewui.com">
|
<a href="http://iview.talkingdata.com/">
|
||||||
<img width="200" src="https://file.iviewui.com/logo-new.svg">
|
<img width="200" src="https://file.iviewui.com/logo-new.svg">
|
||||||
</a>
|
</a>
|
||||||
</p>
|
</p>
|
||||||
|
@ -22,7 +22,7 @@ iView
|
||||||
|
|
||||||
## Docs
|
## Docs
|
||||||
|
|
||||||
**[3.x](https://www.iviewui.com)** | [2.x](http://v2.iviewui.com) | [1.x](http://v1.iviewui.com)
|
**[3.x](http://iview.talkingdata.com/)** | [2.x](http://v2.iviewui.com) | [1.x](http://v1.iviewui.com)
|
||||||
|
|
||||||
## Features
|
## Features
|
||||||
|
|
||||||
|
|
2298
dist/iview.js
vendored
2298
dist/iview.js
vendored
File diff suppressed because it is too large
Load diff
2
dist/iview.js.map
vendored
2
dist/iview.js.map
vendored
File diff suppressed because one or more lines are too long
17
dist/iview.min.js
vendored
17
dist/iview.min.js
vendored
File diff suppressed because one or more lines are too long
BIN
dist/iview.min.js.gz
vendored
BIN
dist/iview.min.js.gz
vendored
Binary file not shown.
2
dist/iview.min.js.map
vendored
2
dist/iview.min.js.map
vendored
File diff suppressed because one or more lines are too long
2
dist/styles/iview.css
vendored
2
dist/styles/iview.css
vendored
File diff suppressed because one or more lines are too long
|
@ -1,18 +1,9 @@
|
||||||
<style>
|
|
||||||
.demo-carousel{
|
|
||||||
height: 200px;
|
|
||||||
line-height: 200px;
|
|
||||||
text-align: center;
|
|
||||||
color: #fff;
|
|
||||||
font-size: 20px;
|
|
||||||
background: #506b9e;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<template>
|
<template>
|
||||||
<div style="width: 400px;">
|
<div>
|
||||||
<Carousel v-model="value1" loop arrow="always" @on-change="handleChange">
|
<!--#6076-->
|
||||||
|
<Carousel loop>
|
||||||
<CarouselItem>
|
<CarouselItem>
|
||||||
<div class="demo-carousel">1</div>
|
<div class="demo-carousel">111111111111</div>
|
||||||
</CarouselItem>
|
</CarouselItem>
|
||||||
<CarouselItem>
|
<CarouselItem>
|
||||||
<div class="demo-carousel">2</div>
|
<div class="demo-carousel">2</div>
|
||||||
|
@ -24,20 +15,65 @@
|
||||||
<div class="demo-carousel">4</div>
|
<div class="demo-carousel">4</div>
|
||||||
</CarouselItem>
|
</CarouselItem>
|
||||||
</Carousel>
|
</Carousel>
|
||||||
<Button @click="value1 = 2">change</Button>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
value1: 0
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
handleChange (old, newval) {
|
|
||||||
console.log(old, newval);
|
},
|
||||||
}
|
mounted () {
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
<style>
|
||||||
|
.demo-carousel{
|
||||||
|
height: 100px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<!--<style>-->
|
||||||
|
<!-- .demo-carousel{-->
|
||||||
|
<!-- height: 200px;-->
|
||||||
|
<!-- line-height: 200px;-->
|
||||||
|
<!-- text-align: center;-->
|
||||||
|
<!-- font-size: 20px;-->
|
||||||
|
<!-- }-->
|
||||||
|
<!--</style>-->
|
||||||
|
<!--<template>-->
|
||||||
|
<!-- <div>-->
|
||||||
|
<!-- <Carousel v-model="value1" loop @on-change="handleChange" @on-click="handlerClick">-->
|
||||||
|
<!-- <CarouselItem v-for="it in 4" :key="it">-->
|
||||||
|
<!-- <div class="demo-carousel">-->
|
||||||
|
<!-- {{it}}<Button @click="handlerIndexClick(it)">点击事件</Button>-->
|
||||||
|
<!-- </div>-->
|
||||||
|
<!-- </CarouselItem>-->
|
||||||
|
<!-- </Carousel>-->
|
||||||
|
<!-- <Button @click="value1 = 2">change</Button>-->
|
||||||
|
<!-- </div>-->
|
||||||
|
<!--</template>-->
|
||||||
|
<!--<script>-->
|
||||||
|
<!-- export default {-->
|
||||||
|
<!-- data () {-->
|
||||||
|
<!-- return {-->
|
||||||
|
<!-- value1: 0-->
|
||||||
|
<!-- }-->
|
||||||
|
<!-- },-->
|
||||||
|
<!-- methods: {-->
|
||||||
|
<!-- handleChange (old, newval) {-->
|
||||||
|
<!-- console.log(old, newval,'---on-change');-->
|
||||||
|
<!-- },-->
|
||||||
|
<!-- handlerClick(index){-->
|
||||||
|
<!-- console.log(index,'------on-click');-->
|
||||||
|
<!-- },-->
|
||||||
|
<!-- handlerIndexClick(it){-->
|
||||||
|
<!-- console.log(it,'------it')-->
|
||||||
|
<!-- }-->
|
||||||
|
<!-- },-->
|
||||||
|
<!-- }-->
|
||||||
|
<!--</script>-->
|
||||||
|
|
|
@ -1,6 +1,12 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<Button type="primary" @click="modal1 = true">Display dialog box</Button>
|
<Button type="primary" @click="modal1 = true">Display dialog box</Button>
|
||||||
|
<Button type="primary" @click="modal2 = true">Display dialog box</Button>
|
||||||
|
<Modal v-model="modal2" draggable title="Common Modal dialog box title"
|
||||||
|
@on-ok="ok"
|
||||||
|
@on-cancel="cancel" :styles="{top: '300px', left: '100px'}">
|
||||||
|
<p>2123</p>
|
||||||
|
</Modal>
|
||||||
<Modal
|
<Modal
|
||||||
v-model="modal1"
|
v-model="modal1"
|
||||||
title="Common Modal dialog box title"
|
title="Common Modal dialog box title"
|
||||||
|
@ -52,6 +58,7 @@
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
modal1: false,
|
modal1: false,
|
||||||
|
modal2: false,
|
||||||
cityList: [
|
cityList: [
|
||||||
{
|
{
|
||||||
value: 'New York',
|
value: 'New York',
|
||||||
|
|
|
@ -1,8 +1,13 @@
|
||||||
|
<style>
|
||||||
|
.ivu-steps{
|
||||||
|
background: greenyellow;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<Steps :current="index">
|
<Steps :current="index">
|
||||||
<!--<Step title="开始"></Step>-->
|
<!--<Step title="开始"></Step>-->
|
||||||
<Step v-for="(item, index) in activitiList" :title="item.approveUserName" :key="index" :content="item.startTime"></Step>
|
<Step v-for="(item, index) in activitiList" :title="item.approveUserName" :key="index"></Step>
|
||||||
<!--<Step title="结束"></Step>-->
|
<!--<Step title="结束"></Step>-->
|
||||||
</Steps>
|
</Steps>
|
||||||
<Button @click="change">change</Button>
|
<Button @click="change">change</Button>
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "iview",
|
"name": "iview",
|
||||||
"version": "3.4.2",
|
"version": "3.5.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",
|
||||||
|
|
|
@ -95,7 +95,7 @@
|
||||||
transfer: {
|
transfer: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default () {
|
default () {
|
||||||
return this.$IVIEW.transfer === '' ? false : this.$IVIEW.transfer;
|
return !this.$IVIEW || this.$IVIEW.transfer === '' ? false : this.$IVIEW.transfer;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
name: {
|
name: {
|
||||||
|
|
|
@ -4,10 +4,10 @@
|
||||||
<Icon type="ios-arrow-back"></Icon>
|
<Icon type="ios-arrow-back"></Icon>
|
||||||
</button>
|
</button>
|
||||||
<div :class="[prefixCls + '-list']">
|
<div :class="[prefixCls + '-list']">
|
||||||
<div :class="[prefixCls + '-track', showCopyTrack ? '' : 'higher']" :style="trackStyles" ref="originTrack">
|
<div :class="[prefixCls + '-track', showCopyTrack ? '' : 'higher']" :style="trackStyles" ref="originTrack" @click="handlerClickEvent('currentIndex')">
|
||||||
<slot></slot>
|
<slot></slot>
|
||||||
</div>
|
</div>
|
||||||
<div :class="[prefixCls + '-track', showCopyTrack ? 'higher' : '']" :style="copyTrackStyles" ref="copyTrack" v-if="loop">
|
<div :class="[prefixCls + '-track', showCopyTrack ? 'higher' : '']" :style="copyTrackStyles" @click="handlerClickEvent('copyTrackIndex')" ref="copyTrack" v-if="loop">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<button type="button" :class="arrowClasses" class="right" @click="arrowEvent(1)">
|
<button type="button" :class="arrowClasses" class="right" @click="arrowEvent(1)">
|
||||||
|
@ -113,10 +113,13 @@
|
||||||
];
|
];
|
||||||
},
|
},
|
||||||
trackStyles () {
|
trackStyles () {
|
||||||
|
// #6076
|
||||||
|
const visibleStyle = this.trackIndex === -1 ? 'hidden' : 'visible';
|
||||||
return {
|
return {
|
||||||
width: `${this.trackWidth}px`,
|
width: `${this.trackWidth}px`,
|
||||||
transform: `translate3d(${-this.trackOffset}px, 0px, 0px)`,
|
transform: `translate3d(${-this.trackOffset}px, 0px, 0px)`,
|
||||||
transition: `transform 500ms ${this.easing}`
|
transition: `transform 500ms ${this.easing}`,
|
||||||
|
visibility : visibleStyle
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
copyTrackStyles () {
|
copyTrackStyles () {
|
||||||
|
@ -125,7 +128,7 @@
|
||||||
transform: `translate3d(${-this.trackCopyOffset}px, 0px, 0px)`,
|
transform: `translate3d(${-this.trackCopyOffset}px, 0px, 0px)`,
|
||||||
transition: `transform 500ms ${this.easing}`,
|
transition: `transform 500ms ${this.easing}`,
|
||||||
position: 'absolute',
|
position: 'absolute',
|
||||||
top: 0
|
//top: 0
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
arrowClasses () {
|
arrowClasses () {
|
||||||
|
@ -142,6 +145,9 @@
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
handlerClickEvent(type){
|
||||||
|
this.$emit('on-click',this[type]);
|
||||||
|
},
|
||||||
// find option component
|
// find option component
|
||||||
findChild (cb) {
|
findChild (cb) {
|
||||||
const find = function (child) {
|
const find = function (child) {
|
||||||
|
@ -195,8 +201,8 @@
|
||||||
child.width = this.listWidth;
|
child.width = this.listWidth;
|
||||||
child.height = typeof this.height === 'number' ? `${this.height}px` : this.height;
|
child.height = typeof this.height === 'number' ? `${this.height}px` : this.height;
|
||||||
});
|
});
|
||||||
|
const slidesLength = this.slides.length || 0
|
||||||
this.trackWidth = (this.slides.length || 0) * this.listWidth;
|
this.trackWidth = slidesLength * this.listWidth;
|
||||||
},
|
},
|
||||||
// use when slot changed
|
// use when slot changed
|
||||||
slotChange () {
|
slotChange () {
|
||||||
|
|
|
@ -207,7 +207,7 @@
|
||||||
for (let i = 0; i < arr.length; i++) {
|
for (let i = 0; i < arr.length; i++) {
|
||||||
let item = arr[i];
|
let item = arr[i];
|
||||||
item.__label = label ? label + ' / ' + item.label : item.label;
|
item.__label = label ? label + ' / ' + item.label : item.label;
|
||||||
item.__value = value ? value + ',' + item.value : item.value;
|
item.__value = value ? [...value, item.value] : [item.value];
|
||||||
|
|
||||||
if (item.children && item.children.length) {
|
if (item.children && item.children.length) {
|
||||||
getSelections(item.children, item.__label, item.__value);
|
getSelections(item.children, item.__label, item.__value);
|
||||||
|
@ -276,7 +276,7 @@
|
||||||
this.currentValue = this.selected = this.tmpSelected = [];
|
this.currentValue = this.selected = this.tmpSelected = [];
|
||||||
this.handleClose();
|
this.handleClose();
|
||||||
this.emitValue(this.currentValue, oldVal);
|
this.emitValue(this.currentValue, oldVal);
|
||||||
// this.$broadcast('on-clear');
|
// this.$broadcast('on-clear');
|
||||||
this.broadcast('Caspanel', 'on-clear');
|
this.broadcast('Caspanel', 'on-clear');
|
||||||
},
|
},
|
||||||
handleClose () {
|
handleClose () {
|
||||||
|
@ -328,7 +328,7 @@
|
||||||
this.query = '';
|
this.query = '';
|
||||||
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;
|
||||||
// use setTimeout for #4786, can not use nextTick, because @on-find-selected use nextTick
|
// use setTimeout for #4786, can not use nextTick, because @on-find-selected use nextTick
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
this.emitValue(this.currentValue, oldVal);
|
this.emitValue(this.currentValue, oldVal);
|
||||||
|
@ -351,7 +351,7 @@
|
||||||
if ('__label' in new_item) {
|
if ('__label' in new_item) {
|
||||||
delete new_item.__label;
|
delete new_item.__label;
|
||||||
}
|
}
|
||||||
if ('children' in new_item && new_item.children.length) {
|
if (Array.isArray(new_item.children) && new_item.children.length) {
|
||||||
new_item.children = new_item.children.map(i => deleteData(i));
|
new_item.children = new_item.children.map(i => deleteData(i));
|
||||||
}
|
}
|
||||||
return new_item;
|
return new_item;
|
||||||
|
|
|
@ -82,7 +82,10 @@
|
||||||
default: false
|
default: false
|
||||||
},
|
},
|
||||||
styles: {
|
styles: {
|
||||||
type: Object
|
type: Object,
|
||||||
|
default() {
|
||||||
|
return {};
|
||||||
|
}
|
||||||
},
|
},
|
||||||
className: {
|
className: {
|
||||||
type: String
|
type: String
|
||||||
|
@ -202,8 +205,10 @@
|
||||||
let style = {};
|
let style = {};
|
||||||
|
|
||||||
if (this.draggable) {
|
if (this.draggable) {
|
||||||
if (this.dragData.x !== null) style.left = `${this.dragData.x}px`;
|
let customTop = this.styles.top ? parseFloat(this.styles.top) : 0;
|
||||||
if (this.dragData.y !== null) style.top = `${this.dragData.y}px`;
|
let customLeft = this.styles.left ? parseFloat(this.styles.left) : 0;
|
||||||
|
if (this.dragData.x !== null) style.left = `${this.dragData.x - customLeft}px`;
|
||||||
|
if (this.dragData.y !== null) style.top = `${this.dragData.y - customTop}px`;
|
||||||
const width = parseInt(this.width);
|
const width = parseInt(this.width);
|
||||||
const styleWidth = {
|
const styleWidth = {
|
||||||
width: width <= 100 ? `${width}%` : `${width}px`
|
width: width <= 100 ? `${width}%` : `${width}px`
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<li
|
<li
|
||||||
:title="t('i.page.prev')"
|
:title="t('i.page.prev')"
|
||||||
:class="prevClasses"
|
:class="prevClasses"
|
||||||
@click="prev">
|
@click.stop="prev">
|
||||||
<a><i class="ivu-icon ivu-icon-ios-arrow-back"></i></a>
|
<a><i class="ivu-icon ivu-icon-ios-arrow-back"></i></a>
|
||||||
</li>
|
</li>
|
||||||
<div :class="simplePagerClasses" :title="currentPage + '/' + allPages">
|
<div :class="simplePagerClasses" :title="currentPage + '/' + allPages">
|
||||||
|
@ -21,7 +21,7 @@
|
||||||
<li
|
<li
|
||||||
:title="t('i.page.next')"
|
:title="t('i.page.next')"
|
||||||
:class="nextClasses"
|
:class="nextClasses"
|
||||||
@click="next">
|
@click.stop="next">
|
||||||
<a><i class="ivu-icon ivu-icon-ios-arrow-forward"></i></a>
|
<a><i class="ivu-icon ivu-icon-ios-arrow-forward"></i></a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
@ -32,24 +32,24 @@
|
||||||
<li
|
<li
|
||||||
:title="t('i.page.prev')"
|
:title="t('i.page.prev')"
|
||||||
:class="prevClasses"
|
:class="prevClasses"
|
||||||
@click="prev">
|
@click.stop="prev">
|
||||||
<a><template v-if="prevText !== ''">{{ prevText }}</template><i v-else class="ivu-icon ivu-icon-ios-arrow-back"></i></a>
|
<a><template v-if="prevText !== ''">{{ prevText }}</template><i v-else class="ivu-icon ivu-icon-ios-arrow-back"></i></a>
|
||||||
</li>
|
</li>
|
||||||
<li title="1" :class="firstPageClasses" @click="changePage(1)"><a>1</a></li>
|
<li title="1" :class="firstPageClasses" @click.stop="changePage(1)"><a>1</a></li>
|
||||||
<li :title="t('i.page.prev5')" v-if="currentPage > 5" :class="[prefixCls + '-item-jump-prev']" @click="fastPrev"><a><i class="ivu-icon ivu-icon-ios-arrow-back"></i></a></li>
|
<li :title="t('i.page.prev5')" v-if="currentPage > 5" :class="[prefixCls + '-item-jump-prev']" @click.stop="fastPrev"><a><i class="ivu-icon ivu-icon-ios-arrow-back"></i></a></li>
|
||||||
<li :title="currentPage - 3" v-if="currentPage === 5" :class="[prefixCls + '-item']" @click="changePage(currentPage - 3)"><a>{{ currentPage - 3 }}</a></li>
|
<li :title="currentPage - 3" v-if="currentPage === 5" :class="[prefixCls + '-item']" @click.stop="changePage(currentPage - 3)"><a>{{ currentPage - 3 }}</a></li>
|
||||||
<li :title="currentPage - 2" v-if="currentPage - 2 > 1" :class="[prefixCls + '-item']" @click="changePage(currentPage - 2)"><a>{{ currentPage - 2 }}</a></li>
|
<li :title="currentPage - 2" v-if="currentPage - 2 > 1" :class="[prefixCls + '-item']" @click.stop="changePage(currentPage - 2)"><a>{{ currentPage - 2 }}</a></li>
|
||||||
<li :title="currentPage - 1" v-if="currentPage - 1 > 1" :class="[prefixCls + '-item']" @click="changePage(currentPage - 1)"><a>{{ currentPage - 1 }}</a></li>
|
<li :title="currentPage - 1" v-if="currentPage - 1 > 1" :class="[prefixCls + '-item']" @click.stop="changePage(currentPage - 1)"><a>{{ currentPage - 1 }}</a></li>
|
||||||
<li :title="currentPage" v-if="currentPage != 1 && currentPage != allPages" :class="[prefixCls + '-item',prefixCls + '-item-active']"><a>{{ currentPage }}</a></li>
|
<li :title="currentPage" v-if="currentPage != 1 && currentPage != allPages" :class="[prefixCls + '-item',prefixCls + '-item-active']"><a>{{ currentPage }}</a></li>
|
||||||
<li :title="currentPage + 1" v-if="currentPage + 1 < allPages" :class="[prefixCls + '-item']" @click="changePage(currentPage + 1)"><a>{{ currentPage + 1 }}</a></li>
|
<li :title="currentPage + 1" v-if="currentPage + 1 < allPages" :class="[prefixCls + '-item']" @click.stop="changePage(currentPage + 1)"><a>{{ currentPage + 1 }}</a></li>
|
||||||
<li :title="currentPage + 2" v-if="currentPage + 2 < allPages" :class="[prefixCls + '-item']" @click="changePage(currentPage + 2)"><a>{{ currentPage + 2 }}</a></li>
|
<li :title="currentPage + 2" v-if="currentPage + 2 < allPages" :class="[prefixCls + '-item']" @click.stop="changePage(currentPage + 2)"><a>{{ currentPage + 2 }}</a></li>
|
||||||
<li :title="currentPage + 3" v-if="allPages - currentPage === 4" :class="[prefixCls + '-item']" @click="changePage(currentPage + 3)"><a>{{ currentPage + 3 }}</a></li>
|
<li :title="currentPage + 3" v-if="allPages - currentPage === 4" :class="[prefixCls + '-item']" @click.stop="changePage(currentPage + 3)"><a>{{ currentPage + 3 }}</a></li>
|
||||||
<li :title="t('i.page.next5')" v-if="allPages - currentPage >= 5" :class="[prefixCls + '-item-jump-next']" @click="fastNext"><a><i class="ivu-icon ivu-icon-ios-arrow-forward"></i></a></li>
|
<li :title="t('i.page.next5')" v-if="allPages - currentPage >= 5" :class="[prefixCls + '-item-jump-next']" @click.stop="fastNext"><a><i class="ivu-icon ivu-icon-ios-arrow-forward"></i></a></li>
|
||||||
<li :title="allPages" v-if="allPages > 1" :class="lastPageClasses" @click="changePage(allPages)"><a>{{ allPages }}</a></li>
|
<li :title="allPages" v-if="allPages > 1" :class="lastPageClasses" @click.stop="changePage(allPages)"><a>{{ allPages }}</a></li>
|
||||||
<li
|
<li
|
||||||
:title="t('i.page.next')"
|
:title="t('i.page.next')"
|
||||||
:class="nextClasses"
|
:class="nextClasses"
|
||||||
@click="next">
|
@click.stop="next">
|
||||||
<a><template v-if="nextText !== ''">{{ nextText }}</template><i v-else class="ivu-icon ivu-icon-ios-arrow-forward"></i></a>
|
<a><template v-if="nextText !== ''">{{ nextText }}</template><i v-else class="ivu-icon ivu-icon-ios-arrow-forward"></i></a>
|
||||||
</li>
|
</li>
|
||||||
<Options
|
<Options
|
||||||
|
|
|
@ -5,7 +5,7 @@
|
||||||
<div :class="bgClasses" :style="bgStyle"><div class="ivu-progress-inner-text" v-if="textInside">{{ percent }}%</div></div><div :class="successBgClasses" :style="successBgStyle"></div>
|
<div :class="bgClasses" :style="bgStyle"><div class="ivu-progress-inner-text" v-if="textInside">{{ percent }}%</div></div><div :class="successBgClasses" :style="successBgStyle"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<span v-if="!hideInfo" :class="textClasses">
|
<span v-if="!hideInfo && !textInside" :class="textClasses">
|
||||||
<slot>
|
<slot>
|
||||||
<span v-if="isStatus" :class="textInnerClasses">
|
<span v-if="isStatus" :class="textInnerClasses">
|
||||||
<Icon :type="statusIcon"></Icon>
|
<Icon :type="statusIcon"></Icon>
|
||||||
|
|
|
@ -558,31 +558,32 @@
|
||||||
this.filterQueryChange = false;
|
this.filterQueryChange = false;
|
||||||
},
|
},
|
||||||
handleKeydown (e) {
|
handleKeydown (e) {
|
||||||
if (e.key === 'Backspace'){
|
const key = e.key || e.code;
|
||||||
|
if ( key === 'Backspace'){
|
||||||
return; // so we don't call preventDefault
|
return; // so we don't call preventDefault
|
||||||
}
|
}
|
||||||
|
|
||||||
if (this.visible) {
|
if (this.visible) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
if (e.key === 'Tab'){
|
if ( key === 'Tab'){
|
||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
}
|
}
|
||||||
|
|
||||||
// Esc slide-up
|
// Esc slide-up
|
||||||
if (e.key === 'Escape') {
|
if ( key === 'Escape') {
|
||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
this.hideMenu();
|
this.hideMenu();
|
||||||
}
|
}
|
||||||
// next
|
// next
|
||||||
if (e.key === 'ArrowUp') {
|
if ( key === 'ArrowUp') {
|
||||||
this.navigateOptions(-1);
|
this.navigateOptions(-1);
|
||||||
}
|
}
|
||||||
// prev
|
// prev
|
||||||
if (e.key === 'ArrowDown') {
|
if ( key === 'ArrowDown') {
|
||||||
this.navigateOptions(1);
|
this.navigateOptions(1);
|
||||||
}
|
}
|
||||||
// enter
|
// enter
|
||||||
if (e.key === 'Enter') {
|
if ( key === 'Enter') {
|
||||||
if (this.focusIndex === -1) return this.hideMenu();
|
if (this.focusIndex === -1) return this.hideMenu();
|
||||||
const optionComponent = this.flatOptions[this.focusIndex];
|
const optionComponent = this.flatOptions[this.focusIndex];
|
||||||
|
|
||||||
|
|
|
@ -967,7 +967,9 @@
|
||||||
|
|
||||||
this.$on('on-visible-change', (val) => {
|
this.$on('on-visible-change', (val) => {
|
||||||
if (val) {
|
if (val) {
|
||||||
|
this.$nextTick(()=>{
|
||||||
this.handleResize();
|
this.handleResize();
|
||||||
|
});
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<div :class="prefixCls" v-if="show" :style="contentStyle"><slot></slot></div>
|
<div :class="prefixCls" v-show="show" :style="contentStyle"><slot></slot></div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
const prefixCls = 'ivu-tabs-tabpane';
|
const prefixCls = 'ivu-tabs-tabpane';
|
||||||
|
|
|
@ -24,15 +24,14 @@
|
||||||
|
|
||||||
&-track {
|
&-track {
|
||||||
position: relative;
|
position: relative;
|
||||||
top: 0;
|
top: 100%;
|
||||||
left: 0;
|
left: 0;
|
||||||
display: block;
|
display: block;
|
||||||
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
&.higher {
|
&.higher {
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
|
top: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -100,14 +100,14 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&-horizontal {
|
&-horizontal {
|
||||||
.@{split-prefix-cls}-trigger-con {
|
>.@{split-prefix-cls}-trigger-con {
|
||||||
top: 50%;
|
top: 50%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
width: 0;
|
width: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&-vertical {
|
&-vertical {
|
||||||
.@{split-prefix-cls}-trigger-con {
|
>.@{split-prefix-cls}-trigger-con {
|
||||||
left: 50%;
|
left: 50%;
|
||||||
height: 0;
|
height: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
|
@ -128,9 +128,6 @@
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
vertical-align: top;
|
vertical-align: top;
|
||||||
}
|
}
|
||||||
.@{steps-prefix-cls}-head {
|
|
||||||
background: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.@{steps-prefix-cls}-head-inner {
|
.@{steps-prefix-cls}-head-inner {
|
||||||
display: block;
|
display: block;
|
||||||
|
@ -172,8 +169,6 @@
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: #666;
|
color: #666;
|
||||||
background: #fff;
|
|
||||||
|
|
||||||
> a:first-child:last-child {
|
> a:first-child:last-child {
|
||||||
color: #666;
|
color: #666;
|
||||||
}
|
}
|
||||||
|
@ -342,12 +337,39 @@
|
||||||
&.@{steps-prefix-cls}-hidden {
|
&.@{steps-prefix-cls}-hidden {
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
}
|
}
|
||||||
|
.@{steps-prefix-cls}-tail {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
.@{steps-prefix-cls}-content {
|
.@{steps-prefix-cls}-content {
|
||||||
//max-width: 100px;
|
//max-width: 100px;
|
||||||
padding-left: 35px;
|
padding-left: 45px;
|
||||||
}
|
}
|
||||||
.@{steps-prefix-cls}-item:not(:first-child) .@{steps-prefix-cls}-head {
|
.@{steps-prefix-cls}-item:not(:first-child) .@{steps-prefix-cls}-head {
|
||||||
padding-left: 10px;
|
padding-left: 10px;
|
||||||
margin-left: -10px;
|
}
|
||||||
|
.@{steps-prefix-cls}-item {
|
||||||
|
overflow: hidden;
|
||||||
|
&:last-child .@{steps-prefix-cls}-title:after{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.@{steps-prefix-cls}-title {
|
||||||
|
position: relative;
|
||||||
|
&:after{
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
width: 9999px;
|
||||||
|
height: 1px;
|
||||||
|
left: 100%;
|
||||||
|
top: 50%;
|
||||||
|
background: @border-color-split;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.@{steps-prefix-cls}-status-finish {
|
||||||
|
.@{steps-prefix-cls}-title:after {
|
||||||
|
background: @primary-color;
|
||||||
|
transition: all @transition-time @ease-in-out;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue