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

Merge pull request #39 from jingsam/master

Browse source 
fixed #34
This commit is contained in:
Aresn 2016-10-28 17:51:09 +08:00 • committed by GitHub
commit 8a3bad748c
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>
<div :class="classes" :style="style" :transition="transitionName">
<div :class="[`${baseClass}-content`]" v-el:content>{{{ content }}}</div>
<a :class="[`${baseClass}-close`]" @click="close" v-if="closable">
<div :class="[baseClass + '-content']" v-el:content>{{{ content }}}</div>
<a :class="[baseClass + '-close]" @click="close" v-if="closable">
<i class="ivu-icon ivu-icon-ios-close-empty"></i>
</a>
</div>

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

@ -2,15 +2,15 @@
<div :class="wrapClasses">
<div :class="maskClasses" v-show="visible" @click="mask" transition="fade"></div>
<div :class="classes" :style="styles" v-show="visible" transition="ease">
<div :class="[`${prefixCls}-content`]">
<a :class="[`${prefixCls}-close`]" v-if="closable" @click="close">
<div :class="[prefixCls + '-content]">
<a :class="[prefixCls + '-close']" v-if="closable" @click="close">
<slot name="close">
<Icon type="ios-close-empty"></Icon>
</slot>
</a>
<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}-footer`]" v-if="!footerHide">
<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 + '-footer']" v-if="!footerHide">
<slot name="footer">
<Button type="ghost" size="large" @click="cancel">{{ cancelText }}</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>
</ul>
<ul :class="wrapClasses" v-else>
<span :class="[`${prefixCls}-total`]" v-if="showTotal">
<span :class="[prefixCls + '-total']" v-if="showTotal">
<slot>共 {{ total }} 条</slot>
</span>
<li
@ -33,15 +33,15 @@
@click="prev">
<a><i class="ivu-icon ivu-icon-ios-arrow-left"></i></a>
</li>
<li title="第一页" :class="[`${prefixCls}-item`,{[`${prefixCls}-item-active`]: current == 1}]" @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="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" 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 + 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="'最后一页:' + allPages" v-if="allPages > 1" :class="[`${prefixCls}-item`, {[`${prefixCls}-item-active`]: current == allPages}]" @click="changePage(allPages)"><a>{{ allPages }}</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="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" 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 + 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="'最后一页:' + allPages" v-if="allPages > 1" :class="lastPageClasses" @click="changePage(allPages)"><a>{{ allPages }}</a></li>
<li
title="下一页"
:class="nextClasses"
@ -156,6 +156,22 @@
[`${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: {

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

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

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

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

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

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

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

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

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

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

82
test/routers/button.vue
View file

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

4
test/routers/notice.vue
View file

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

4
test/routers/page.vue
View file

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