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

fixed ie bug

Browse source
This commit is contained in:
jingsam 2016-10-28 17:24:52 +08:00
parent 64bd05f7ff
commit d6342fe1c3
12 changed files with 144 additions and 128 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/components/base/notification/notice.vue
View file

@ -1,7 +1,7 @@
<template> <template>
<div :class="classes" :style="style" :transition="transitionName"> <div :class="classes" :style="style" :transition="transitionName">
<div :class="[`${baseClass}-content`]" v-el:content>{{{ content }}}</div> <div :class="[baseClass + '-content']" v-el:content>{{{ content }}}</div>
<a :class="[`${baseClass}-close`]" @click="close" v-if="closable"> <a :class="[baseClass + '-close]" @click="close" v-if="closable">
<i class="ivu-icon ivu-icon-ios-close-empty"></i> <i class="ivu-icon ivu-icon-ios-close-empty"></i>
</a> </a>
</div> </div>

10
src/components/modal/modal.vue
View file

@ -2,15 +2,15 @@
<div :class="wrapClasses"> <div :class="wrapClasses">
<div :class="maskClasses" v-show="visible" @click="mask" transition="fade"></div> <div :class="maskClasses" v-show="visible" @click="mask" transition="fade"></div>
<div :class="classes" :style="styles" v-show="visible" transition="ease"> <div :class="classes" :style="styles" v-show="visible" transition="ease">
<div :class="[`${prefixCls}-content`]"> <div :class="[prefixCls + '-content]">
<a :class="[`${prefixCls}-close`]" v-if="closable" @click="close"> <a :class="[prefixCls + '-close']" v-if="closable" @click="close">
<slot name="close"> <slot name="close">
<Icon type="ios-close-empty"></Icon> <Icon type="ios-close-empty"></Icon>
</slot> </slot>
</a> </a>
<div :class="[`${prefixCls}-header`]" v-if="showHead" v-el:head><slot name="header"><p>{{ title }}</p></slot></div> <div :class="[prefixCls + '-header']" v-if="showHead" v-el:head><slot name="header"><p>{{ title }}</p></slot></div>
<div :class="[`${prefixCls}-body`]"><slot></slot></div> <div :class="[prefixCls + '-body']"><slot></slot></div>
<div :class="[`${prefixCls}-footer`]" v-if="!footerHide"> <div :class="[prefixCls + '-footer']" v-if="!footerHide">
<slot name="footer"> <slot name="footer">
<Button type="ghost" size="large" @click="cancel">{{ cancelText }}</Button> <Button type="ghost" size="large" @click="cancel">{{ cancelText }}</Button>
<Button type="primary" size="large" :loading="buttonLoading" @click="ok">{{ okText }}</Button> <Button type="primary" size="large" :loading="buttonLoading" @click="ok">{{ okText }}</Button>

36
src/components/page/page.vue
View file

@ -24,7 +24,7 @@
</li> </li>
</ul> </ul>
<ul :class="wrapClasses" v-else> <ul :class="wrapClasses" v-else>
<span :class="[`${prefixCls}-total`]" v-if="showTotal"> <span :class="[prefixCls + '-total']" v-if="showTotal">
<slot>共 {{ total }} 条</slot> <slot>共 {{ total }} 条</slot>
</span> </span>
<li <li
@ -33,15 +33,15 @@
@click="prev"> @click="prev">
<a><i class="ivu-icon ivu-icon-ios-arrow-left"></i></a> <a><i class="ivu-icon ivu-icon-ios-arrow-left"></i></a>
</li> </li>
<li title="第一页" :class="[`${prefixCls}-item`,{[`${prefixCls}-item-active`]: current == 1}]" @click="changePage(1)"><a>1</a></li> <li title="第一页" :class="firstPageClasses" @click="changePage(1)"><a>1</a></li>
<li title="向前 5 页" v-if="current - 3 > 1" :class="[`${prefixCls}-item-jump-prev`]" @click="fastPrev"><a><i class="ivu-icon ivu-icon-ios-arrow-left"></i></a></li> <li title="向前 5 页" v-if="current - 3 > 1" :class="[prefixCls + '-item-jump-prev']" @click="fastPrev"><a><i class="ivu-icon ivu-icon-ios-arrow-left"></i></a></li>
<li :title="current - 2" v-if="current - 2 > 1" :class="[`${prefixCls}-item`]" @click="changePage(current - 2)"><a>{{ current - 2 }}</a></li> <li :title="current - 2" v-if="current - 2 > 1" :class="[prefixCls + '-item']" @click="changePage(current - 2)"><a>{{ current - 2 }}</a></li>
<li :title="current - 1" v-if="current - 1 > 1" :class="[`${prefixCls}-item`]" @click="changePage(current - 1)"><a>{{ current - 1 }}</a></li> <li :title="current - 1" v-if="current - 1 > 1" :class="[prefixCls + '-item']" @click="changePage(current - 1)"><a>{{ current - 1 }}</a></li>
<li :title="current" v-if="current != 1 && current != allPages" :class="[`${prefixCls}-item`,`${prefixCls}-item-active`]"><a>{{ current }}</a></li> <li :title="current" v-if="current != 1 && current != allPages" :class="[prefixCls + '-item',prefixCls + '-item-active']"><a>{{ current }}</a></li>
<li :title="current + 1" v-if="current + 1 < allPages" :class="[`${prefixCls}-item`]" @click="changePage(current + 1)"><a>{{ current + 1 }}</a></li> <li :title="current + 1" v-if="current + 1 < allPages" :class="[prefixCls + '-item']" @click="changePage(current + 1)"><a>{{ current + 1 }}</a></li>
<li :title="current + 2" v-if="current + 2 < allPages" :class="[`${prefixCls}-item`]" @click="changePage(current + 2)"><a>{{ current + 2 }}</a></li> <li :title="current + 2" v-if="current + 2 < allPages" :class="[prefixCls + '-item']" @click="changePage(current + 2)"><a>{{ current + 2 }}</a></li>
<li title="向后 5 页" v-if="current + 3 < allPages" :class="[`${prefixCls}-item-jump-next`]" @click="fastNext"><a><i class="ivu-icon ivu-icon-ios-arrow-right"></i></a></li> <li title="向后 5 页" v-if="current + 3 < allPages" :class="[prefixCls + '-item-jump-next']" @click="fastNext"><a><i class="ivu-icon ivu-icon-ios-arrow-right"></i></a></li>
<li :title="'最后一页:' + allPages" v-if="allPages > 1" :class="[`${prefixCls}-item`, {[`${prefixCls}-item-active`]: current == allPages}]" @click="changePage(allPages)"><a>{{ allPages }}</a></li> <li :title="'最后一页:' + allPages" v-if="allPages > 1" :class="lastPageClasses" @click="changePage(allPages)"><a>{{ allPages }}</a></li>
<li <li
title="下一页" title="下一页"
:class="nextClasses" :class="nextClasses"
@ -156,6 +156,22 @@
[`${prefixCls}-disabled`]: this.current == this.allPages [`${prefixCls}-disabled`]: this.current == this.allPages
} }
] ]
},
firstPageClasses () {
return [
`${prefixCls}-item`,
{
[`${prefixCls}-item-active`]: this.current == 1
}
]
},
lastPageClasses () {
return [
`${prefixCls}-item`,
{
[`${prefixCls}-item-active`]: this.current == this.allPages
}
]
} }
}, },
methods: { methods: {

36
src/components/poptip/poptip.vue
View file

@ -5,30 +5,30 @@
@mouseleave="handleMouseleave" @mouseleave="handleMouseleave"
v-clickoutside="handleClose"> v-clickoutside="handleClose">
<div <div
:class="[`${prefixCls}-rel`]" :class="[prefixCls + '-rel']"
v-el:reference v-el:reference
@click="handleClick" @click="handleClick"
@mousedown="handleFocus" @mousedown="handleFocus"
@mouseup="handleBlur"> @mouseup="handleBlur">
<slot></slot> <slot></slot>
</div> </div>
<div :class="[`${prefixCls}-popper`]" :style="styles" transition="fade" v-el:popper v-show="visible"> <div :class="[prefixCls + '-popper']" :style="styles" transition="fade" v-el:popper v-show="visible">
<div :class="[`${prefixCls}-content`]"> <div :class="[prefixCls + '-content']">
<div :class="[`${prefixCls}-arrow`]"></div> <div :class="[prefixCls + '-arrow']"></div>
<div :class="[`${prefixCls}-inner`]" v-if="confirm"> <div :class="[prefixCls + '-inner']" v-if="confirm">
<div :class="[`${prefixCls}-body`]"> <div :class="[prefixCls + '-body']">
<i class="ivu-icon ivu-icon-help-circled"></i> <i class="ivu-icon ivu-icon-help-circled"></i>
<div :class="[`${prefixCls}-body-message`]"><slot name="title">{{ title }}</slot></div> <div :class="[prefixCls + '-body-message']"><slot name="title">{{ title }}</slot></div>
</div> </div>
<div :class="[`${prefixCls}-footer`]"> <div :class="[prefixCls + '-footer']">
<Button type="ghost" size="small" @click="cancel">{{ cancelText }}</Button> <i-button type="ghost" size="small" @click="cancel">{{ cancelText }}</i-button>
<Button type="primary" size="small" @click="ok">{{ okText }}</Button> <i-button type="primary" size="small" @click="ok">{{ okText }}</i-button>
</div> </div>
</div> </div>
<div :class="[`${prefixCls}-inner`]" v-if="!confirm"> <div :class="[prefixCls + '-inner']" v-if="!confirm">
<div :class="[`${prefixCls}-title`]" v-if="showTitle" v-el:title><slot name="title">{{ title }}</slot></div> <div :class="[prefixCls + '-title']" v-if="showTitle" v-el:title><slot name="title">{{ title }}</slot></div>
<div :class="[`${prefixCls}-body`]"> <div :class="[prefixCls + '-body']">
<div :class="[`${prefixCls}-body-content`]"><slot name="content">{{ content }}</slot></div> <div :class="[prefixCls + '-body-content']"><slot name="content">{{ content }}</slot></div>
</div> </div>
</div> </div>
</div> </div>
@ -46,7 +46,7 @@
export default { export default {
mixins: [Popper], mixins: [Popper],
directives: { clickoutside }, directives: { clickoutside },
components: { Button }, components: { iButton: Button },
props: { props: {
trigger: { trigger: {
validator (value) { validator (value) {
@ -92,9 +92,9 @@
computed: { computed: {
classes () { classes () {
return [ return [
`${prefixCls}`, prefixCls + '',
{ {
[`${prefixCls}-confirm`]: this.confirm [prefixCls + '-confirm']: this.confirm
} }
] ]
}, },
@ -102,7 +102,7 @@
let style = {}; let style = {};
if (!!this.width) { if (!!this.width) {
style.width = `${this.width}px`; style.width = '${this.width}px';
} }
return style; return style;
} }

6
src/components/select/option-group.vue
View file

@ -1,8 +1,8 @@
<template> <template>
<li :class="[`${prefixCls}-wrap`]"> <li :class="[prefixCls + '-wrap']">
<div :class="[`${prefixCls}-title`]">{{ label }}</div> <div :class="[prefixCls + '-title']">{{ label }}</div>
<ul> <ul>
<li :class="[`${prefixCls}`]"><slot></slot></li> <li :class="[prefixCls]"><slot></slot></li>
</ul> </ul>
</li> </li>
</template> </template>

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

@ -1,32 +1,32 @@
<template> <template>
<div :class="classes" v-clickoutside="handleClose"> <div :class="classes" v-clickoutside="handleClose">
<div <div
:class="[`${prefixCls}-selection`]" :class="[prefixCls + '-selection']"
v-el:reference v-el:reference
@click="toggleMenu"> @click="toggleMenu">
<div class="ivu-tag" v-for="item in selectedMultiple"> <div class="ivu-tag" v-for="item in selectedMultiple">
<span class="ivu-tag-text">{{ item.label }}</span> <span class="ivu-tag-text">{{ item.label }}</span>
<Icon type="ios-close-empty" @click.stop="removeTag($index)"></Icon> <Icon type="ios-close-empty" @click.stop="removeTag($index)"></Icon>
</div> </div>
<span :class="[`${prefixCls}-placeholder`]" v-show="showPlaceholder && !filterable">{{ placeholder }}</span> <span :class="[prefixCls + '-placeholder']" v-show="showPlaceholder && !filterable">{{ placeholder }}</span>
<span :class="[`${prefixCls}-selected-value`]" v-show="!showPlaceholder && !multiple && !filterable">{{ selectedSingle }}</span> <span :class="[prefixCls + '-selected-value']" v-show="!showPlaceholder && !multiple && !filterable">{{ selectedSingle }}</span>
<input <input
type="text" type="text"
v-if="filterable" v-if="filterable"
v-model="query" v-model="query"
:class="[`${prefixCls}-input`]" :class="[prefixCls + '-input']"
:placeholder="showPlaceholder ? placeholder : ''" :placeholder="showPlaceholder ? placeholder : ''"
:style="inputStyle" :style="inputStyle"
@blur="handleBlur" @blur="handleBlur"
@keydown="resetInputState" @keydown="resetInputState"
@keydown.delete="handleInputDelete" @keydown.delete="handleInputDelete"
v-el:input> v-el:input>
<Icon type="ios-close" :class="[`${prefixCls}-arrow`]" v-show="showCloseIcon" @click.stop="clearSingleSelect"></Icon> <Icon type="ios-close" :class="[prefixCls + '-arrow']" v-show="showCloseIcon" @click.stop="clearSingleSelect"></Icon>
<Icon type="arrow-down-b" :class="[`${prefixCls}-arrow`]"></Icon> <Icon type="arrow-down-b" :class="[prefixCls + '-arrow']"></Icon>
</div> </div>
<Dropdown v-show="visible" transition="slide-up" v-ref:dropdown> <Dropdown v-show="visible" transition="slide-up" v-ref:dropdown>
<ul v-show="notFound" :class="[`${prefixCls}-not-found`]"><li>{{ notFoundText }}</li></ul> <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']"><slot></slot></ul>
</Dropdown> </Dropdown>
</div> </div>
</template> </template>
@ -100,14 +100,14 @@
computed: { computed: {
classes () { classes () {
return [ return [
`${prefixCls}`, prefixCls + '',
{ {
[`${prefixCls}-visible`]: this.visible, [prefixCls + '-visible']: this.visible,
[`${prefixCls}-disabled`]: this.disabled, [prefixCls + '-disabled']: this.disabled,
[`${prefixCls}-multiple`]: this.multiple, [prefixCls + '-multiple']: this.multiple,
[`${prefixCls}-single`]: !this.multiple, [prefixCls + '-single']: !this.multiple,
[`${prefixCls}-show-clear`]: this.showCloseIcon, [prefixCls + '-show-clear']: this.showCloseIcon,
[`${prefixCls}-${this.size}`]: !!this.size [prefixCls + '-${this.size}']: !!this.size
} }
] ]
}, },
@ -136,7 +136,7 @@
if (this.showPlaceholder) { if (this.showPlaceholder) {
style.width = '100%'; style.width = '100%';
} else { } else {
style.width = `${this.inputLength}px`; style.width = '${this.inputLength}px';
} }
} }

12
src/components/steps/step.vue
View file

@ -1,15 +1,15 @@
<template> <template>
<div :class="wrapClasses" :style="styles"> <div :class="wrapClasses" :style="styles">
<div :class="[`${prefixCls}-tail`]"><i></i></div> <div :class="[prefixCls + '-tail']"><i></i></div>
<div :class="[`${prefixCls}-head`]"> <div :class="[prefixCls + '-head']">
<div :class="[`${prefixCls}-head-inner`]"> <div :class="[prefixCls + '-head-inner']">
<span v-if="!icon && status != 'finish' && status != 'error'">{{ stepNumber }}</span> <span v-if="!icon && status != 'finish' && status != 'error'">{{ stepNumber }}</span>
<span v-else :class="iconClasses"></span> <span v-else :class="iconClasses"></span>
</div> </div>
</div> </div>
<div :class="[`${prefixCls}-main`]"> <div :class="[prefixCls + '-main']">
<div :class="[`${prefixCls}-title`]">{{ title }}</div> <div :class="[prefixCls + '-title']">{{ title }}</div>
<div v-if="content" :class="[`${prefixCls}-content`]">{{ content }}</div> <div v-if="content" :class="[prefixCls + '-content']">{{ content }}</div>
</div> </div>
</div> </div>
</template> </template>

12
src/components/tooltip/tooltip.vue
View file

@ -1,12 +1,12 @@
<template> <template>
<div :class="[`${prefixCls}`]" @mouseenter="handleShowPopper" @mouseleave="handleClosePopper"> <div :class="[prefix]" @mouseenter="handleShowPopper" @mouseleave="handleClosePopper">
<div :class="[`${prefixCls}-rel`]" v-el:reference> <div :class="[prefix + '-rel']" v-el:reference>
<slot></slot> <slot></slot>
</div> </div>
<div :class="[`${prefixCls}-popper`]" transition="fade" v-el:popper v-show="!disabled && visible"> <div :class="[prefix + '-popper']" transition="fade" v-el:popper v-show="!disabled && visible">
<div :class="[`${prefixCls}-content`]"> <div :class="[prefix + '-content']">
<div :class="[`${prefixCls}-arrow`]"></div> <div :class="[prefix + '-arrow']"></div>
<div :class="[`${prefixCls}-inner`]"><slot name="content">{{ content }}</slot></div> <div :class="[prefix + '-inner']"><slot name="content">{{ content }}</slot></div>
</div> </div>
</div> </div>
</div> </div>

82
test/routers/button.vue
View file

@ -1,73 +1,73 @@
<template> <template>
<Button>Default</Button> <i-button>Default</i-button>
<Button type="primary">Primary</Button> <i-button type="primary">Primary</i-button>
<Button type="ghost">Ghost</Button> <i-button type="ghost">Ghost</i-button>
<br><br> <br><br>
<Button type="primary" size="large">Large</Button> <i-button type="primary" size="large">Large</i-button>
<Button type="primary">Default</Button> <i-button type="primary">Default</i-button>
<Button type="primary" size="small">Small</Button> <i-button type="primary" size="small">Small</i-button>
<br><br> <br><br>
<Button>Default</Button> <i-button>Default</i-button>
<Button disabled>Default(Disabled)</Button> <i-button disabled>Default(Disabled)</i-button>
<br><br> <br><br>
<Button type="primary">Primary</Button> <i-button type="primary">Primary</i-button>
<Button type="primary" disabled>Primary(Disabled)</Button> <i-button type="primary" disabled>Primary(Disabled)</i-button>
<br><br> <br><br>
<Button type="ghost">Ghost</Button> <i-button type="ghost">Ghost</i-button>
<Button type="ghost" disabled>Ghost(Disabled)</Button> <i-button type="ghost" disabled>Ghost(Disabled)</i-button>
<br><br> <br><br>
<Button type="primary" shape="circle" icon="ios-search"></Button> <i-button type="primary" shape="circle" icon="ios-search"></i-button>
<Button type="primary" icon="ios-search">搜索</Button> <i-button type="primary" icon="ios-search">搜索</i-button>
<br><br> <br><br>
<Button type="ghost" shape="circle"> <i-button type="ghost" shape="circle">
<Icon type="search"></Icon> <Icon type="search"></Icon>
</Button> </i-button>
<Button type="ghost"> <i-button type="ghost">
<Icon type="search"></Icon> <Icon type="search"></Icon>
搜索 搜索
</Button> </i-button>
<Button type="ghost" shape="circle" size="large"> <i-button type="ghost" shape="circle" size="large">
<Icon type="search"></Icon> <Icon type="search"></Icon>
</Button> </i-button>
<Button type="ghost" shape="circle" size="small"> <i-button type="ghost" shape="circle" size="small">
<Icon type="search"></Icon> <Icon type="search"></Icon>
</Button> </i-button>
<br><br><br> <br><br><br>
<Button type="primary" loading>Loading...</Button> <i-button type="primary" loading>Loading...</i-button>
<Button type="primary" loading size="large">Loading...</Button> <i-button type="primary" loading size="large">Loading...</i-button>
<Button type="primary" loading size="small">Loading...</Button> <i-button type="primary" loading size="small">Loading...</i-button>
<Button type="primary" :loading="loading" @click="toLoading"> <i-button type="primary" :loading="loading" @click="toLoading">
<span v-if="!loading">Click me!</span> <span v-if="!loading">Click me!</span>
<span v-else>Loading...</span> <span v-else>Loading...</span>
</Button> </i-button>
<Button type="primary" :loading="loading2" icon="checkmark-round" @click="toLoading2"> <i-button type="primary" :loading="loading2" icon="checkmark-round" @click="toLoading2">
<span v-if="!loading2">Click me!</span> <span v-if="!loading2">Click me!</span>
<span v-else>Loading...</span> <span v-else>Loading...</span>
</Button> </i-button>
<h4>基本</h4> <h4>基本</h4>
<Button-group size="large"> <Button-group size="large">
<Button>取消</Button> <i-button>取消</i-button>
<Button type="primary">确定</Button> <i-button type="primary">确定</i-button>
</Button-group> </Button-group>
<Button-group> <Button-group>
<Button type="primary">L</Button> <i-button type="primary">L</i-button>
<Button>M</Button> <i-button>M</i-button>
<Button type="ghost">R</Button> <i-button type="ghost">R</i-button>
</Button-group> </Button-group>
<h4>配合图标</h4> <h4>配合图标</h4>
<Button-group> <Button-group>
<Button type="primary"> <i-button type="primary">
<Icon type="chevron-left"></Icon> <Icon type="chevron-left"></Icon>
前进 前进
</Button> </i-button>
<Button type="primary"> <i-button type="primary">
后退 后退
<Icon type="chevron-right"></Icon> <Icon type="chevron-right"></Icon>
</Button> </i-button>
</Button-group> </Button-group>
<Button-group> <Button-group>
<Button type="primary" icon="cloud"></Button> <i-button type="primary" icon="cloud"></i-button>
<Button type="primary" icon="upload"></Button> <i-button type="primary" icon="upload"></i-button>
</Button-group> </Button-group>
</template> </template>
<script> <script>
@ -78,7 +78,7 @@
export default { export default {
components: { components: {
Button, iButton: Button,
ButtonGroup, ButtonGroup,
Icon, Icon,
iInput: Input, iInput: Input,

4
test/routers/notice.vue
View file

@ -38,7 +38,7 @@
</div> </div>
</Poptip> </Poptip>
<Poptip placement="right" width="300"> <Poptip placement="right" width="300">
<Button type="ghost">click 激活</Button> <i-button type="ghost">click 激活</i-button>
<div class="api" slot="content"> <div class="api" slot="content">
<table> <table>
<thead> <thead>
@ -108,7 +108,7 @@
import { Tooltip, Button, Row, iCol, Poptip, iSelect, iOption, Message } from 'iview'; import { Tooltip, Button, Row, iCol, Poptip, iSelect, iOption, Message } from 'iview';
export default { export default {
components: { Tooltip, Button, Row, iCol, Poptip, iSelect, iOption, Message }, components: { Tooltip, iButton: Button, Row, iCol, Poptip, iSelect, iOption, Message },
props: { props: {
}, },

4
test/routers/page.vue
View file

@ -41,7 +41,7 @@
<Step title="步骤3"></Step> <Step title="步骤3"></Step>
<Step title="步骤4"></Step> <Step title="步骤4"></Step>
</Steps> </Steps>
<Button type="primary" @click="next">下一步</Button> <i-button type="primary" @click="next">下一步</i-button>
<br><br> <br><br>
<Steps :current="1" direction="vertical" size="small"> <Steps :current="1" direction="vertical" size="small">
<Step title="已完成" content="这里是该步骤的描述信息这里是该步骤的描述信息这里是该步骤的描述信息"></Step> <Step title="已完成" content="这里是该步骤的描述信息这里是该步骤的描述信息这里是该步骤的描述信息"></Step>
@ -67,7 +67,7 @@
Page, Page,
Steps, Steps,
Step, Step,
Button iButton: Button
}, },
props: { props: {