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

Merge branch '2.0' of https://github.com/iview/iview into anchor

Browse source
This commit is contained in:
zhigang.li 2018-06-29 17:16:26 +08:00
commit b23702cb13
150 changed files with 8558 additions and 6961 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
README.md
View file

@ -40,13 +40,14 @@
## Who's using iView
- [TalkingData](http://www.talkingdata.com/)
- [Alibaba](http://www.alibaba.com/)
- [Tencent](https://www.tencent.com/)
- [JD](http://www.jd.com/)
- [DiDi](http://www.didichuxing.com/)
- [Meituan](http://www.meituan.com/)
- [Sina](http://www.sina.com.cn/)
- [Lenovo](https://www.lenovo.com.cn/)
- [Alibaba 阿里巴巴](http://www.alibaba.com/)
- [Baidu 百度](https://www.baidu.com/)
- [Tencent 腾讯](https://www.tencent.com/)
- [Toutiao 今日头条](https://www.toutiao.com/)
- [JD 京东](http://www.jd.com/)
- [DiDi 滴滴](http://www.didichuxing.com/)
- [Meituan 美团](http://www.meituan.com/)
- [Sina 新浪](http://www.sina.com.cn/)
> If your company or products use iView, welcome to click [here](https://github.com/iview/iview/issues/2143) to leave a message.

3
examples/app.vue
View file

@ -16,6 +16,7 @@ nav {
<div class="container">
<nav>
<ul>
<li><router-link to="/split">Split</router-link></li>
<li><router-link to="/layout">Layout</router-link></li>
<li><router-link to="/affix">Affix</router-link></li>
<li><router-link to="/anchor">Anchor</router-link></li>
@ -63,7 +64,9 @@ nav {
<li><router-link to="/color-picker">ColorPicker</router-link></li>
<li><router-link to="/auto-complete">AutoComplete</router-link></li>
<li><router-link to="/scroll">Scroll</router-link></li>
<li><router-link to="/divider">Divider</router-link></li>
<li><router-link to="/time">Time</router-link></li>
<li><router-link to="/cell">Cell</router-link></li>
</ul>
</nav>
<router-view></router-view>

21
examples/main.js
View file

@ -6,11 +6,13 @@ import Vue from 'vue';
import VueRouter from 'vue-router';
import App from './app.vue';
import iView from '../src/index';
import locale from '../src/locale/lang/en-US';
// import locale from '../src/locale/lang/zh-CN';
// import locale from '../src/locale/lang/en-US';
import locale from '../src/locale/lang/zh-CN';
Vue.use(VueRouter);
Vue.use(iView, { locale });
Vue.use(iView, {
locale
});
// 开启debug模式
Vue.config.debug = true;
@ -18,7 +20,12 @@ Vue.config.debug = true;
// 路由配置
const router = new VueRouter({
esModule: false,
mode: 'history',
routes: [
{
path: '/split',
component: (resolve) => require(['./routers/split.vue'], resolve)
},
{
path: '/layout',
component: (resolve) => require(['./routers/layout.vue'], resolve)
@ -207,9 +214,17 @@ const router = new VueRouter({
path: '/scroll',
component: (resolve) => require(['./routers/scroll.vue'], resolve)
},
{
path: '/divider',
component: (resolve) => require(['./routers/divider.vue'], resolve)
},
{
path: '/time',
component: (resolve) => require(['./routers/time.vue'], resolve)
},
{
path: '/cell',
component: (resolve) => require(['./routers/cell.vue'], resolve)
}
]
});

37
examples/routers/alert.vue
View file

@ -1,8 +1,28 @@
<template>
<div>
<Alert show-icon banner closable>消息提示文案</Alert>
<Alert>
An info prompt
<template slot="desc">Content of prompt. Content of prompt. Content of prompt. Content of prompt. </template>
</Alert>
<Alert type="success">
A success prompt
<template slot="desc">Content of prompt. Content of prompt. Content of prompt. Content of prompt. </template>
</Alert>
<Alert type="warning">
A warning prompt
<template slot="desc">
Content of prompt. Content of prompt. Content of prompt.
</template>
</Alert>
<Alert type="error">
An error prompt
<span slot="desc">
Custom error description copywriting. <Icon type="help-circled" size="14"></Icon>
</span>
</Alert>
<Alert type="info" show-icon closable>消息提示文案</Alert>
<Alert type="success" show-icon>成功提示文案</Alert>
<Alert type="warning" show-icon banner>警告提示文案</Alert>
<Alert type="warning" show-icon>警告提示文案</Alert>
<Alert type="error" show-icon>错误提示文案</Alert>
<Alert show-icon>
消息提示文案
@ -26,9 +46,20 @@
</Alert>
<Alert show-icon closable>
自定义图标
<Icon type="ios-lightbulb-outline" slot="icon"></Icon>
<Icon type="ios-bulb-outline" slot="icon"></Icon>
<template slot="desc">自定义图标文案自定义图标文案自定义图标文案自定义图标文案自定义图标文案</template>
</Alert>
<Alert banner type="warning">Notice: notification contents...</Alert>
<Alert banner closable type="warning">Notice: notification contents...</Alert>
<Alert closable>An info prompt</Alert>
<Alert type="success" show-icon closable>
A success prompt
<span slot="desc">Content of prompt. Content of prompt. Content of prompt. Content of prompt. </span>
</Alert>
<Alert type="warning" closable>
Custom closing content
<span slot="close">No longer prompt</span>
</Alert>
</div>
</template>
<script>

61
examples/routers/badge.vue
View file

@ -14,10 +14,67 @@
</style>
<template>
<div>
<Badge dot :count="count">
<Badge :count="count">
<a href="#" class="demo-badge"></a>
</Badge>
<Badge :count="0" showZero>
<a href="#" class="demo-badge"></a>
</Badge>
<Button @click="setCount">set count</Button>
<br><br>
<Badge text="hot">
<Button type="ghost">Hello</Button>
</Badge>
<br><br>
<div>
<Badge status="success" />
<Badge status="error" />
<Badge status="default" />
<Badge status="processing" />
<Badge status="warning" />
<br />
<Badge status="success" text="Success" />
<br />
<Badge status="error" text="Error" />
<br />
<Badge status="default" text="Default" />
<br />
<Badge status="processing" text="Processing" />
<br />
<Badge status="warning" text="Warning" />
</div>
<div style="margin: 50px">
<Badge dot>
<a href="//iviewui.com">我是一个链接</a>
</Badge>
<br><br>
<Badge :count="10" :offset="[-5, -5]">
<a href="//iviewui.com">我是一个链接</a>
</Badge>
</div>
<div>
<Badge :count="count" type="primary">
<a href="#" class="demo-badge"></a>
</Badge>
<Badge :count="count" type="success">
<a href="#" class="demo-badge"></a>
</Badge>
<Badge :count="count" type="normal">
<a href="#" class="demo-badge"></a>
</Badge>
<Badge :count="count" type="info">
<a href="#" class="demo-badge"></a>
</Badge>
<Badge :count="count" type="error">
<a href="#" class="demo-badge"></a>
</Badge>
<Badge :count="count" type="warning">
<a href="#" class="demo-badge"></a>
</Badge>
<Badge :count="count">
<a href="#" class="demo-badge"></a>
</Badge>
</div>
</div>
</template>
<script>
@ -25,7 +82,7 @@
props: {},
data () {
return {
count: 50
count: 5
};
},
methods: {

5
examples/routers/breadcrumb.vue
View file

@ -7,8 +7,9 @@
<template>
<div>
<Breadcrumb separator="<b class='demo-breadcrumb-separator'>=></b>">
<Breadcrumb-item to="/">Home4</Breadcrumb-item>
<Breadcrumb-item :to="{name: 'user', params: { userId: 123 }}">Components</Breadcrumb-item>
<Breadcrumb-item to="/button">Home4</Breadcrumb-item>
<Breadcrumb-item to="//iviewui.com" target="_blank">Home4</Breadcrumb-item>
<Breadcrumb-item :to="{name: 'icon', params: { userId: 123 }}">Components</Breadcrumb-item>
<Breadcrumb-item>Breadcrumb</Breadcrumb-item>
</Breadcrumb>
<Breadcrumb separator="">

409
examples/routers/button.vue
View file

File diff suppressed because one or more lines are too long

57
examples/routers/carousel.vue
View file

@ -1,44 +1,43 @@
<style>
.demo-carousel{
height: 200px;
line-height: 200px;
text-align: center;
color: #fff;
font-size: 20px;
background: #506b9e;
}
</style>
<template>
<div>
<Carousel v-model="v1" dots="outside" @on-change="hc" :autoplay="false">
<Carousel-item>
<div class="demo-case-img">
<img src="https://file.iviewui.com/dist/84b3cded4163febf9dae090e76129322.png">
</div>
</Carousel-item>
<Carousel-item>
<div class="demo-case-img">
<img src="https://file.iviewui.com/dist/84b3cded4163febf9dae090e76129322.png">
</div>
</Carousel-item>
<Carousel-item>
<div class="demo-case-img">
<img src="https://file.iviewui.com/dist/84b3cded4163febf9dae090e76129322.png">
</div>
</Carousel-item>
<div style="width: 400px;">
<Carousel v-model="value1" loop arrow="always" @on-change="handleChange">
<CarouselItem>
<div class="demo-carousel">1</div>
</CarouselItem>
<CarouselItem>
<div class="demo-carousel">2</div>
</CarouselItem>
<CarouselItem>
<div class="demo-carousel">3</div>
</CarouselItem>
<CarouselItem>
<div class="demo-carousel">4</div>
</CarouselItem>
</Carousel>
<Button @click="v1 = 2">change</Button>
<Button @click="value1 = 2">change</Button>
</div>
</template>
<script>
export default {
data () {
return {
v1: 0
value1: 0
}
},
methods: {
hc (...args) {
console.log(args);
handleChange (old, newval) {
console.log(old, newval);
}
}
}
</script>
<style lang="less">
.demo-case-img {
img{
width: 500px;
}
}
</style>

106
examples/routers/cascader.vue
View file

@ -1,64 +1,60 @@
<template>
<div>
<Cascader v-model="value3" :data="data" filterable style="width: 400px"></Cascader>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<Cascader v-model="value3" :data="data" filterable style="width: 400px"></Cascader>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<Cascader v-model="value3" :data="data" filterable style="width: 400px"></Cascader>
</div>
<Cascader :data="data4" :load-data="loadData"></Cascader>
</template>
<script>
export default {
data () {
return {
data: [{
value: 1,
label: '北京',
children: [
{
value: 11,
label: '故宫'
},
{
value: 12,
label: '天坛'
},
{
value: 13,
label: '王府井'
}
]
}, {
value: 2,
label: '江苏',
children: [
{
value: 21,
label: '南京',
children: [
{
value: 211,
label: '夫子庙',
}
]
},
{
value: 22,
label: '苏州',
children: [
{
value: 221,
label: '拙政园',
},
{
value: 222,
label: '狮子林',
}
]
}
],
}],
value3: []
data4: [
{
value: 'beijing',
label: '北京',
children: [],
loading: false
},
{
value: 'hangzhou',
label: '杭州',
children: [],
loading:false
}
]
}
},
methods: {
loadData (item, callback) {
item.loading = true;
setTimeout(() => {
if (item.value === 'beijing') {
item.children = [
{
value: 'talkingdata',
label: 'TalkingData'
},
{
value: 'baidu',
label: '百度'
},
{
value: 'sina',
label: '新浪'
}
];
} else if (item.value === 'hangzhou') {
item.children = [
{
value: 'ali',
label: '阿里巴巴'
},
{
value: '163',
label: '网易'
}
];
}
item.loading = false;
callback();
}, 1000);
}
}
}

42
examples/routers/cell.vue Normal file
View file

@ -0,0 +1,42 @@
<template>
<div style="margin: 100px;background: #f8f8f9;padding: 100px;">
<Card title="选项" :padding="0" shadow style="width: 300px;">
<CellGroup @on-click="handleClick">
<Cell title="标题一" name="a1" label="附属内容" to="/button">
<Badge count="10" slot="extra"></Badge>
</Cell>
<Cell title="标题一" name="a2" label="附属内容" extra="详细信息"></Cell>
<Cell title="标题一" name="a3" label="附属内容" extra="详细信息" to="/button"></Cell>
<Cell title="标题一" name="a4" label="附属内容" selected></Cell>
<Cell title="标题二">
<Icon type="trash-a" slot="icon"></Icon>
</Cell>
<Cell><span style="color: #ff6600">六七十111</span></Cell>
<Cell title="标题四" selected></Cell>
<Cell title="标题五"></Cell>
<Cell title="标题六" disabled></Cell>
<Cell title="标题七" extra="详细信息" to="/icon"></Cell>
<Cell title="标题七" extra="详细信息" selected></Cell>
<Cell title="标题七" label="附属内容" extra="详细信息"></Cell>
<Cell title="标题八">
<i-switch v-model="switch1" slot="extra"></i-switch>
</Cell>
<Cell title="标题九" to="/button"></Cell>
</CellGroup>
</Card>
</div>
</template>
<script>
export default {
data(){
return {
switch1: false
}
},
methods: {
handleClick (name) {
console.log(name);
}
}
}
</script>

63
examples/routers/circle.vue
View file

@ -1,54 +1,17 @@
<style lang="less">
.demo-circle-custom{
& h1{
color: #3f414d;
font-size: 28px;
font-weight: normal;
}
& p{
color: #657180;
font-size: 14px;
margin: 10px 0 15px;
}
& span{
display: block;
padding-top: 15px;
color: #657180;
font-size: 14px;
&:before{
content: '';
display: block;
width: 50px;
height: 1px;
margin: 0 auto;
background: #e0e3e6;
position: relative;
top: -15px;
};
}
& span i{
font-style: normal;
color: #3f414d;
}
}
</style>
<template>
<i-circle
:size="250"
:trail-width="4"
:stroke-width="5"
:percent="75"
stroke-linecap="square"
stroke-color="#43a3fb">
<div class="demo-circle-custom">
<h1>{{ 42001776 }}</h1>
<p>消费人群规模</p>
<span>
总占人数
<i>75%</i>
</span>
</div>
</i-circle>
<div>
<i-circle :percent="80">
<span class="demo-i-circle-inner" style="font-size:24px">80%</span>
</i-circle>
<i-circle :percent="100" stroke-color="#5cb85c">
<Icon type="ios-checkmark" size="60" style="color:#5cb85c"></Icon>
</i-circle>
<i-circle :percent="35" stroke-color="#ff5500">
<span class="demo-i-circle-inner">
<Icon type="ios-close" size="50" style="color:#ff5500"></Icon>
</span>
</i-circle>
</div>
</template>
<script>
export default {

4
examples/routers/collapse.vue
View file

@ -1,7 +1,7 @@
<template>
<div>
<Collapse accordion v-model="value3">
<Panel name="1">
<Collapse accordion v-model="value3" simple>
<Panel name="1" hide-arrow>
史蒂夫·乔布斯
<div slot="content">
史蒂夫·乔布斯（Steve Jobs），1955年2月24日生于美国加利福尼亚州旧金山，美国发明家、企业家、美国苹果公司联合创办人。

8
examples/routers/color-picker.vue
View file

@ -5,18 +5,15 @@
<color-picker
v-model="color"
placement="bottom-start"
size="large"
@on-change="c1"
@on-active-change="c2"></color-picker>
<Input value="hello" style="display: inline-block" />
<Date-picker
transfer
type="date"
placeholder="选择日期"
style="width: 200px"></Date-picker>
<color-picker
ref="xxx"
:transfer="true"
v-model="color"
:recommend="true"
format="rgb"
@ -32,17 +29,15 @@
<color-picker
v-model="color"
placement="bottom-start"
size="small"></color-picker>
></color-picker>
<Date-picker
type="date"
placeholder="选择日期"
size="small"
style="width: 200px"></Date-picker>
<color-picker
ref="yyy"
:colors="colors"
v-model="color"
transfer
format="rgb"
alpha></color-picker>
<Button @click="setColor">set color</Button>
@ -57,7 +52,6 @@
v-model="color7"
:hue="false"
:hide-drop-down="hideDropDown"
transfer
@on-open-change="onOpenChange"></ColorPicker>
<br><br><br><br>

75
examples/routers/divider.vue Normal file
View file

@ -0,0 +1,75 @@
<template>
<Row :gutter="16">
<i-col span="12">
<Card title="horizontal divider">
<div>
<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/>
<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>iView </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/>
<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 orientation="left">iView</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 orientation="right">iView</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>
</div>
</Card>
</i-col>
<i-col span="12">
<Card title="vertical divider">
<div>
iView
<Divider type="vertical" />
<a href="#">Components</a>
<Divider type="vertical" />
<a href="#">Divider</a>
</div>
</Card>
</i-col>
</Row>
</template>
<script>
export default {}
</script>
<style>
</style>

386
examples/routers/dropdown.vue
View file

@ -1,352 +1,44 @@
<template>
<div>
<div>
<Dropdown trigger="click" style="margin-left: 20px" placement="right-start" >
<a href="javascript:void(0)">
right-start
<Icon type="arrow-down-b"></Icon>
</a>
<DropdownMenu slot="list">
<DropdownItem>驴打滚</DropdownItem>
<DropdownItem>炸酱面</DropdownItem>
<DropdownItem>豆汁儿</DropdownItem>
<DropdownItem>冰糖葫芦</DropdownItem>
<DropdownItem>北京烤鸭</DropdownItem>
</DropdownMenu>
</Dropdown>
<Dropdown trigger="click" style="margin-left: 20px" placement="right-end" >
<a href="javascript:void(0)">
right-end
<Icon type="arrow-down-b"></Icon>
</a>
<DropdownMenu slot="list">
<DropdownItem>驴打滚</DropdownItem>
<DropdownItem>炸酱面</DropdownItem>
<DropdownItem>豆汁儿</DropdownItem>
<DropdownItem>冰糖葫芦</DropdownItem>
<DropdownItem>北京烤鸭</DropdownItem>
</DropdownMenu>
</Dropdown>
<Dropdown trigger="click" style="margin-left: 20px" placement="bottom-start" >
<a href="javascript:void(0)">
bottom-start
<Icon type="arrow-down-b"></Icon>
</a>
<DropdownMenu slot="list">
<DropdownItem>驴打滚</DropdownItem>
<DropdownItem>炸酱面</DropdownItem>
<DropdownItem>豆汁儿</DropdownItem>
<DropdownItem>冰糖葫芦</DropdownItem>
<DropdownItem>北京烤鸭</DropdownItem>
</DropdownMenu>
</Dropdown>
<Dropdown trigger="click" style="margin-left: 20px" placement="bottom-end" >
<a href="javascript:void(0)">
bottom-end
<Icon type="arrow-down-b"></Icon>
</a>
<DropdownMenu slot="list">
<DropdownItem>驴打滚</DropdownItem>
<DropdownItem>炸酱面</DropdownItem>
<DropdownItem>豆汁儿</DropdownItem>
<DropdownItem>冰糖葫芦</DropdownItem>
<DropdownItem>北京烤鸭</DropdownItem>
</DropdownMenu>
</Dropdown>
<Dropdown trigger="click" style="margin-left: 20px" placement="top-start" >
<a href="javascript:void(0)">
top-start
<Icon type="arrow-down-b"></Icon>
</a>
<DropdownMenu slot="list">
<DropdownItem>驴打滚</DropdownItem>
<DropdownItem>炸酱面</DropdownItem>
<DropdownItem>豆汁儿</DropdownItem>
<DropdownItem>冰糖葫芦</DropdownItem>
<DropdownItem>北京烤鸭</DropdownItem>
</DropdownMenu>
</Dropdown>
<Dropdown trigger="click" style="margin-left: 20px" placement="top-end" >
<a href="javascript:void(0)">
top-end
<Icon type="arrow-down-b"></Icon>
</a>
<DropdownMenu slot="list">
<DropdownItem>驴打滚</DropdownItem>
<DropdownItem>炸酱面</DropdownItem>
<DropdownItem>豆汁儿</DropdownItem>
<DropdownItem>冰糖葫芦</DropdownItem>
<DropdownItem>北京烤鸭</DropdownItem>
</DropdownMenu>
</Dropdown>
<Dropdown trigger="click" style="margin-left: 20px" placement="left-start" >
<a href="javascript:void(0)">
left-start
<Icon type="arrow-down-b"></Icon>
</a>
<DropdownMenu slot="list">
<DropdownItem>驴打滚</DropdownItem>
<DropdownItem>炸酱面</DropdownItem>
<DropdownItem>豆汁儿</DropdownItem>
<DropdownItem>冰糖葫芦</DropdownItem>
<DropdownItem>北京烤鸭</DropdownItem>
</DropdownMenu>
</Dropdown>
<Dropdown trigger="click" style="margin-left: 20px" placement="left-end" >
<a href="javascript:void(0)">
left-end
<Icon type="arrow-down-b"></Icon>
</a>
<DropdownMenu slot="list">
<DropdownItem>驴打滚</DropdownItem>
<DropdownItem>炸酱面</DropdownItem>
<DropdownItem>豆汁儿</DropdownItem>
<DropdownItem>冰糖葫芦</DropdownItem>
<DropdownItem>北京烤鸭</DropdownItem>
</DropdownMenu>
</Dropdown>
<Dropdown trigger="click" style="margin-left: 20px" placement="top" >
<a href="javascript:void(0)">
top
<Icon type="arrow-down-b"></Icon>
</a>
<DropdownMenu slot="list">
<DropdownItem>驴打滚</DropdownItem>
<DropdownItem>炸酱面</DropdownItem>
<DropdownItem>豆汁儿</DropdownItem>
<DropdownItem>冰糖葫芦</DropdownItem>
<DropdownItem>北京烤鸭</DropdownItem>
</DropdownMenu>
</Dropdown>
<Dropdown trigger="click" style="margin-left: 20px" placement="bottom" >
<a href="javascript:void(0)">
bottom
<Icon type="arrow-down-b"></Icon>
</a>
<DropdownMenu slot="list">
<DropdownItem>驴打滚</DropdownItem>
<DropdownItem>炸酱面</DropdownItem>
<DropdownItem>豆汁儿</DropdownItem>
<DropdownItem>冰糖葫芦</DropdownItem>
<DropdownItem>北京烤鸭</DropdownItem>
</DropdownMenu>
</Dropdown>
<Dropdown trigger="click" style="margin-left: 20px" placement="left" >
<a href="javascript:void(0)">
left
<Icon type="arrow-down-b"></Icon>
</a>
<DropdownMenu slot="list">
<DropdownItem>驴打滚</DropdownItem>
<DropdownItem>炸酱面</DropdownItem>
<DropdownItem>豆汁儿</DropdownItem>
<DropdownItem>冰糖葫芦</DropdownItem>
<DropdownItem>北京烤鸭</DropdownItem>
<DropdownItem>驴打滚</DropdownItem>
<DropdownItem>炸酱面</DropdownItem>
<DropdownItem>豆汁儿</DropdownItem>
<DropdownItem>冰糖葫芦</DropdownItem>
<DropdownItem>北京烤鸭</DropdownItem>
<DropdownItem>驴打滚</DropdownItem>
<DropdownItem>炸酱面</DropdownItem>
<DropdownItem>豆汁儿</DropdownItem>
<DropdownItem>冰糖葫芦</DropdownItem>
<DropdownItem>北京烤鸭</DropdownItem>
</DropdownMenu>
</Dropdown>
<Dropdown trigger="click" style="margin-left: 20px" placement="right" >
<a href="javascript:void(0)">
right
<Icon type="arrow-down-b"></Icon>
</a>
<DropdownMenu slot="list">
<DropdownItem>驴打滚</DropdownItem>
<DropdownItem>炸酱面</DropdownItem>
<DropdownItem>豆汁儿</DropdownItem>
<DropdownItem>冰糖葫芦</DropdownItem>
<DropdownItem>北京烤鸭</DropdownItem>
</DropdownMenu>
</Dropdown>
</div>
<br><br><br><br>
<div style='width:600px;height:100px;overflow: auto;border:1px solid'>
<Dropdown trigger="click" style="margin-left: 20px" placement="right-start" >
<a href="javascript:void(0)">
right-start
<Icon type="arrow-down-b"></Icon>
</a>
<DropdownMenu slot="list">
<DropdownItem>驴打滚</DropdownItem>
<DropdownItem>炸酱面</DropdownItem>
<DropdownItem>豆汁儿</DropdownItem>
<DropdownItem>冰糖葫芦</DropdownItem>
<DropdownItem>北京烤鸭</DropdownItem>
</DropdownMenu>
</Dropdown>
<Dropdown trigger="click" style="margin-left: 20px" placement="right-end" >
<a href="javascript:void(0)">
right-end
<Icon type="arrow-down-b"></Icon>
</a>
<DropdownMenu slot="list">
<DropdownItem>驴打滚</DropdownItem>
<DropdownItem>炸酱面</DropdownItem>
<DropdownItem>豆汁儿</DropdownItem>
<DropdownItem>冰糖葫芦</DropdownItem>
<DropdownItem>北京烤鸭</DropdownItem>
</DropdownMenu>
</Dropdown>
<Dropdown trigger="click" style="margin-left: 20px" placement="bottom-start" >
<a href="javascript:void(0)">
bottom-start
<Icon type="arrow-down-b"></Icon>
</a>
<DropdownMenu slot="list">
<DropdownItem>驴打滚</DropdownItem>
<DropdownItem>炸酱面</DropdownItem>
<DropdownItem>豆汁儿</DropdownItem>
<DropdownItem>冰糖葫芦</DropdownItem>
<DropdownItem>北京烤鸭</DropdownItem>
</DropdownMenu>
</Dropdown>
<Dropdown trigger="click" style="margin-left: 20px" placement="bottom-end" >
<a href="javascript:void(0)">
bottom-end
<Icon type="arrow-down-b"></Icon>
</a>
<DropdownMenu slot="list">
<DropdownItem>驴打滚</DropdownItem>
<DropdownItem>炸酱面</DropdownItem>
<DropdownItem>豆汁儿</DropdownItem>
<DropdownItem>冰糖葫芦</DropdownItem>
<DropdownItem>北京烤鸭</DropdownItem>
</DropdownMenu>
</Dropdown>
<Dropdown trigger="click" style="margin-left: 20px" placement="top-start" >
<a href="javascript:void(0)">
top-start
<Icon type="arrow-down-b"></Icon>
</a>
<DropdownMenu slot="list">
<DropdownItem>驴打滚</DropdownItem>
<DropdownItem>炸酱面</DropdownItem>
<DropdownItem>豆汁儿</DropdownItem>
<DropdownItem>冰糖葫芦</DropdownItem>
<DropdownItem>北京烤鸭</DropdownItem>
</DropdownMenu>
</Dropdown>
<Dropdown trigger="click" style="margin-left: 20px" placement="top-end" >
<a href="javascript:void(0)">
top-end
<Icon type="arrow-down-b"></Icon>
</a>
<DropdownMenu slot="list">
<DropdownItem>驴打滚</DropdownItem>
<DropdownItem>炸酱面</DropdownItem>
<DropdownItem>豆汁儿</DropdownItem>
<DropdownItem>冰糖葫芦</DropdownItem>
<DropdownItem>北京烤鸭</DropdownItem>
</DropdownMenu>
</Dropdown>
<Dropdown trigger="click" style="margin-left: 20px" placement="left-start" >
<a href="javascript:void(0)">
left-start
<Icon type="arrow-down-b"></Icon>
</a>
<DropdownMenu slot="list">
<DropdownItem>驴打滚</DropdownItem>
<DropdownItem>炸酱面</DropdownItem>
<DropdownItem>豆汁儿</DropdownItem>
<DropdownItem>冰糖葫芦</DropdownItem>
<DropdownItem>北京烤鸭</DropdownItem>
</DropdownMenu>
</Dropdown>
<Dropdown trigger="click" style="margin-left: 20px" placement="left-end" >
<a href="javascript:void(0)">
left-end
<Icon type="arrow-down-b"></Icon>
</a>
<DropdownMenu slot="list">
<DropdownItem>驴打滚</DropdownItem>
<DropdownItem>炸酱面</DropdownItem>
<DropdownItem>豆汁儿</DropdownItem>
<DropdownItem>冰糖葫芦</DropdownItem>
<DropdownItem>北京烤鸭</DropdownItem>
</DropdownMenu>
</Dropdown>
<Dropdown trigger="click" style="margin-left: 20px" placement="top" >
<a href="javascript:void(0)">
top
<Icon type="arrow-down-b"></Icon>
</a>
<DropdownMenu slot="list">
<DropdownItem>驴打滚</DropdownItem>
<DropdownItem>炸酱面</DropdownItem>
<DropdownItem>豆汁儿</DropdownItem>
<DropdownItem>冰糖葫芦</DropdownItem>
<DropdownItem>北京烤鸭</DropdownItem>
</DropdownMenu>
</Dropdown>
<Dropdown trigger="click" style="margin-left: 20px" placement="bottom" >
<a href="javascript:void(0)">
bottom
<Icon type="arrow-down-b"></Icon>
</a>
<DropdownMenu slot="list">
<DropdownItem>驴打滚</DropdownItem>
<DropdownItem>炸酱面</DropdownItem>
<DropdownItem>豆汁儿</DropdownItem>
<DropdownItem>冰糖葫芦</DropdownItem>
<DropdownItem>北京烤鸭</DropdownItem>
</DropdownMenu>
</Dropdown>
<Dropdown trigger="click" style="margin-left: 20px" placement="left" >
<a href="javascript:void(0)">
left
<Icon type="arrow-down-b"></Icon>
</a>
<DropdownMenu slot="list">
<DropdownItem>驴打滚</DropdownItem>
<DropdownItem>炸酱面</DropdownItem>
<DropdownItem>豆汁儿</DropdownItem>
<DropdownItem>冰糖葫芦</DropdownItem>
<DropdownItem>北京烤鸭</DropdownItem>
<DropdownItem>驴打滚</DropdownItem>
<DropdownItem>炸酱面</DropdownItem>
<DropdownItem>豆汁儿</DropdownItem>
<DropdownItem>冰糖葫芦</DropdownItem>
<DropdownItem>北京烤鸭</DropdownItem>
<DropdownItem>驴打滚</DropdownItem>
<DropdownItem>炸酱面</DropdownItem>
<DropdownItem>豆汁儿</DropdownItem>
<DropdownItem>冰糖葫芦</DropdownItem>
<DropdownItem>北京烤鸭</DropdownItem>
</DropdownMenu>
</Dropdown>
<Dropdown trigger="click" style="margin-left: 20px" placement="right" >
<a href="javascript:void(0)">
right
<Icon type="arrow-down-b"></Icon>
</a>
<DropdownMenu slot="list">
<DropdownItem>驴打滚</DropdownItem>
<DropdownItem>炸酱面</DropdownItem>
<DropdownItem>豆汁儿</DropdownItem>
<DropdownItem>冰糖葫芦</DropdownItem>
<DropdownItem>北京烤鸭</DropdownItem>
</DropdownMenu>
</Dropdown>
</div>
<Dropdown trigger="hover">
<a href="javascript:void(0)">
下拉菜单
<Icon type="ios-arrow-down"></Icon>
</a>
<DropdownMenu slot="list">
<DropdownItem>驴打滚</DropdownItem>
<DropdownItem>炸酱面</DropdownItem>
<DropdownItem disabled>豆汁儿</DropdownItem>
<DropdownItem>冰糖葫芦</DropdownItem>
<DropdownItem divided>北京烤鸭</DropdownItem>
</DropdownMenu>
</Dropdown>
<Dropdown trigger="click">
<a href="javascript:void(0)">
下拉菜单
<Icon type="ios-arrow-down"></Icon>
</a>
<DropdownMenu slot="list">
<DropdownItem>驴打滚</DropdownItem>
<DropdownItem>炸酱面</DropdownItem>
<DropdownItem disabled>豆汁儿</DropdownItem>
<DropdownItem>冰糖葫芦</DropdownItem>
<DropdownItem divided>北京烤鸭</DropdownItem>
</DropdownMenu>
</Dropdown>
<Dropdown trigger="contextMenu">
<a href="javascript:void(0)">
下拉菜单
<Icon type="ios-arrow-down"></Icon>
</a>
<DropdownMenu slot="list">
<DropdownItem>驴打滚</DropdownItem>
<DropdownItem>炸酱面</DropdownItem>
<DropdownItem disabled>豆汁儿</DropdownItem>
<DropdownItem>冰糖葫芦</DropdownItem>
<DropdownItem divided>北京烤鸭</DropdownItem>
</DropdownMenu>
</Dropdown>
</div>
</template>
<script>

157
examples/routers/input.vue
View file

@ -1,16 +1,161 @@
<template>
<div style="width: 200px;margin: 100px;">
{{ value6 }}
<Input v-model="value5" type="textarea" placeholder="Enter something..."></Input>
<Input v-model="value6" type="textarea" :rows="4" placeholder="Enter something..."></Input>
<!--<div>-->
<!--<Input v-model="value" placeholder="Enter something..." style="width: 300px"></Input>-->
<!--<Input v-model="value11">-->
<!--<span slot="prepend">http://</span>-->
<!--<span slot="append">.com</span>-->
<!--</Input>-->
<!--<br>-->
<!--<Input v-model="value12">-->
<!--<Select v-model="select1" slot="prepend" style="width: 80px">-->
<!--<Option value="http">http://</Option>-->
<!--<Option value="https">https://</Option>-->
<!--</Select>-->
<!--<Select v-model="select2" slot="append" style="width: 70px">-->
<!--<Option value="com">.com</Option>-->
<!--<Option value="org">.org</Option>-->
<!--<Option value="io">.io</Option>-->
<!--</Select>-->
<!--</Input>-->
<!--<br>-->
<!--<Input v-model="value13">-->
<!--<Select v-model="select3" slot="prepend" style="width: 80px">-->
<!--<Option value="day">Day</Option>-->
<!--<Option value="month">Month</Option>-->
<!--</Select>-->
<!--<Button slot="append" icon="ios-search"></Button>-->
<!--</Input>-->
<!--<br>-->
<!--<Input v-model="value11" size="small">-->
<!--<span slot="prepend">http://</span>-->
<!--<span slot="append">.com</span>-->
<!--</Input>-->
<!--<br>-->
<!--<Input v-model="value12" size="small">-->
<!--<Select v-model="select1" slot="prepend" style="width: 80px">-->
<!--<Option value="http">http://</Option>-->
<!--<Option value="https">https://</Option>-->
<!--</Select>-->
<!--<Select v-model="select2" slot="append" style="width: 70px">-->
<!--<Option value="com">.com</Option>-->
<!--<Option value="org">.org</Option>-->
<!--<Option value="io">.io</Option>-->
<!--</Select>-->
<!--</Input>-->
<!--<br>-->
<!--<Input v-model="value13" size="small">-->
<!--<Select v-model="select3" slot="prepend" style="width: 80px">-->
<!--<Option value="day">Day</Option>-->
<!--<Option value="month">Month</Option>-->
<!--</Select>-->
<!--<Button slot="append" icon="ios-search"></Button>-->
<!--</Input>-->
<!--<br>-->
<!--<Input v-model="value11" size="large">-->
<!--<span slot="prepend">http://</span>-->
<!--<span slot="append">.com</span>-->
<!--</Input>-->
<!--<br>-->
<!--<Input v-model="value12" size="large">-->
<!--<Select v-model="select1" slot="prepend" style="width: 80px">-->
<!--<Option value="http">http://</Option>-->
<!--<Option value="https">https://</Option>-->
<!--</Select>-->
<!--<Select v-model="select2" slot="append" style="width: 70px">-->
<!--<Option value="com">.com</Option>-->
<!--<Option value="org">.org</Option>-->
<!--<Option value="io">.io</Option>-->
<!--</Select>-->
<!--</Input>-->
<!--<br>-->
<!--<Input v-model="value13" size="large">-->
<!--<Select v-model="select3" slot="prepend" style="width: 80px">-->
<!--<Option value="day">Day</Option>-->
<!--<Option value="month">Month</Option>-->
<!--</Select>-->
<!--<Button slot="append" icon="ios-search"></Button>-->
<!--</Input>-->
<!--<br>-->
<!--</div>-->
<div>
<Input
v-model="value"
size="small"
prefix="ios-contact"
suffix="ios-search"
placeholder="Enter something..."
style="width: 300px"></Input>
<br>
<Input
v-model="value"
prefix="ios-contact"
suffix="ios-search"
placeholder="Enter something..."
style="width: 300px"></Input>
<br>
<Input
v-model="value"
size="large"
prefix="ios-contact"
suffix="ios-search"
placeholder="Enter something..."
style="width: 300px"></Input>
<br><br>
<Input
v-model="value"
size="small"
icon="ios-search"
placeholder="Enter something..."
style="width: 300px"></Input>
<br>
<Input
v-model="value"
icon="ios-search"
placeholder="Enter something..."
style="width: 300px"></Input>
<br>
<Input
v-model="value"
size="large"
icon="ios-search"
placeholder="Enter something..."
style="width: 300px"></Input>
<br><br><br>
<Input v-model="value" placeholder="Enter something..." style="width: 300px">
<Icon type="ios-alarm-outline" slot="suffix" />
<Icon type="ios-aperture" slot="prefix" />
</Input>
<br><br><br><br>
<Input v-model="value" search enter-button style="width: 300px" @on-search="hs" size="small" />
<br>
<Input v-model="value" search enter-button style="width: 300px" @on-search="hs" />
<br>
<Input v-model="value" search enter-button style="width: 300px" @on-search="hs" size="large" />
<br><br>
<Input v-model="value" search style="width: 300px" @on-search="hs" />
<br><br>
<Input v-model="value" search enter-button="Search" style="width: 300px" @on-search="hs" />
</div>
</template>
<script>
export default {
data () {
return {
value5: '',
value6: ''
value: '',
value11: '',
value12: '',
value13: '',
select1: 'http',
select2: 'com',
select3: 'day'
}
},
methods: {
hs (val) {
console.log(val);
}
}
}

10
examples/routers/loading-bar.vue
View file

@ -19,11 +19,11 @@
}
},
created () {
this.$Loading.config({
color: '#5cb85c',
failedColor: '#f0ad4e',
height: 5
});
// this.$Loading.config({
// color: '#5cb85c',
// failedColor: '#f0ad4e',
// height: 5
// });
}
}
</script>

6
examples/routers/menu.vue
View file

@ -1,6 +1,6 @@
<template>
<div>
<Menu ref="menu" active-name="1-2" :open-names="openNames" theme="dark" accordion @on-open-change="handleOpenChange">
<Menu ref="menu" active-name="1-2" :open-names="openNames" theme="light" accordion @on-open-change="handleOpenChange">
<Submenu name="1">
<template slot="title">
<Icon type="ios-analytics"></Icon>
@ -20,8 +20,8 @@
<Icon type="ios-filing"></Icon>
Navigation Two
</template>
<MenuItem name="2-1">Option 5</MenuItem>
<MenuItem name="2-2">Option 6</MenuItem>
<MenuItem name="2-1" to="/button">Option 5</MenuItem>
<MenuItem name="2-2" to="//iviewui.com" target="_blank">Option 6</MenuItem>
<Submenu name="3">
<template slot="title">Submenu</template>
<MenuItem name="3-1">Option 7</MenuItem>

63
examples/routers/message.vue
View file

@ -1,54 +1,45 @@
<template>
<div>
<i-button @click.native="info">显示普通提示</i-button>
<i-button @click.native="success">显示成功提示</i-button>
<i-button @click.native="warning">显示警告提示</i-button>
<i-button @click.native="error">显示错误提示</i-button>
<i-button @click.native="destroy">销毁提示</i-button>
<Button type="primary" @click="info">Display info prompt</Button>
<Button @click="success">Display success prompt</Button>
<Button @click="warning">Display warning prompt</Button>
<Button @click="error">Display error prompt</Button>
<Button @click="loading">Display loading...</Button>
<Button @click="closable">Display a closable message</Button>
</div>
</template>
<script>
export default {
methods: {
info () {
// this.$Message.info('这是一条普通提示');
this.$Message.success({
content: '这是一条普通提示2',
duration: 500,
onClose () {
// console.log(123)
},
closable: true,
render (h) {
return h('Button',{
props: {
type: 'primary'
}
}, '这是render出来的');
}
})
},
success () {
this.$Message.success({
content: '这是一条成功的提示',
duration: 4
this.$Message.info({
content: '这是一条普通的提示',
duration: 1000
});
},
success () {
this.$Message.success('This is a success tip');
},
warning () {
this.$Message.warning('这是一条警告的提示');
this.$Message.warning('This is a warning tip');
},
error () {
this.$Message.error('对方不想说话，并且向你抛出了一个异常');
this.$Message.error('This is an error tip');
},
destroy () {
this.$Message.destroy();
loading () {
const msg = this.$Message.loading({
content: 'Loading...',
duration: 0
});
setTimeout(msg, 3000);
},
closable () {
this.$Message.info({
content: 'Tips for manual closing',
duration: 1000,
closable: true
});
}
},
mounted () {
// this.$Message.config({
// top: 50,
// duration: 3
// });
}
}
</script>

54
examples/routers/modal.vue
View file

@ -1,44 +1,30 @@
<template>
<div>
<Button @click="instance('info')">Info</Button>
<Button @click="instance('success')">Success</Button>
<Button @click="instance('warning')">Warning</Button>
<Button @click="instance('error')">Error</Button>
<Button type="primary" @click="modal1 = true">Display dialog box</Button>
<Modal
v-model="modal1"
title="Common Modal dialog box title"
@on-ok="ok"
@on-cancel="cancel">
<p>Content of dialog</p>
<p>Content of dialog</p>
<p>Content of dialog</p>
</Modal>
</div>
</template>
<script>
export default {
data () {
return {
modal1: false
}
},
methods: {
instance (type) {
const title = 'Title';
const content = '<p>Content of dialog</p><p>Content of dialog</p>';
switch (type) {
case 'info':
this.$Modal.info({
title: title,
content: content,
closable: true
});
break;
case 'success':
this.$Modal.success({
title: title,
content: content
});
break;
case 'warning':
this.$Modal.warning({
title: title,
content: content
});
break;
case 'error':
this.$Modal.error({
title: title,
content: content
});
break;
}
ok () {
this.$Message.info('Clicked ok');
},
cancel () {
this.$Message.info('Clicked cancel');
}
}
}

16
examples/routers/notice.vue
View file

@ -2,7 +2,9 @@
<div>
<p>带描述信息</p>
<Button @click="normal(false)">普通</Button>
<Button @click="normal(true)">普通</Button>
<Button @click="info(false)">消息</Button>
<Button @click="info(true)">消息</Button>
<Button @click="success(false)">成功</Button>
<Button @click="warning(false)">警告</Button>
<Button @click="error(false)">错误</Button>
@ -23,19 +25,19 @@
title: 'google',
duration: 0,
desc: nodesc ? '' : '这里是通知描述这里,是通知描述这里是通知描述这里,是通知描述这里,是通知描述这里是通知描述这里是通知描述',
render (h) {
return h('span', {}, 'sdsdfsdf');
}
// render (h) {
// return h('span', {}, 'sdsdfsdf');
// }
});
},
info (nodesc) {
this.$Notice.info({
// title: '这是通知标题',
title: '这是通知标题',
duration: 0,
desc: nodesc ? '' : '这里是通知描述这里,是通知描述这里是通知描述这里,是通知描述这里,是通知描述这里是通知描述这里是通知描述',
render (h) {
return h('span', {}, 'sdsdfsdf');
}
// render (h) {
// return h('span', {}, 'sdsdfsdf');
// }
});
},
success () {

22
examples/routers/page.vue
View file

@ -1,28 +1,36 @@
<template>
<div>
<Page :total="total" show-sizer show-elevator show-total transfer :current.sync="current"></Page>
<Page prev-text="上一页" next-text="下一页" :total="total" show-sizer show-elevator show-total :current.sync="current"></Page>
{{ current }}
<Button type="primary" @click="subject">- 1</Button>
<Button type="primary" @click="change">Change</Button>
<Page :current="2" :total="50" simple></Page>
<div style="margin:10px 0px">
<Page :total="1000" show-sizer show-elevator show-total transfer :current="12"></Page>
<Page :total="1000" show-sizer show-elevator show-total :current="12"></Page>
</div>
<div style="margin:10px 0px">
<Page :total="1000" show-sizer show-elevator show-total transfer :current="12"></Page>
<Page :total="1000" show-sizer show-elevator show-total :current="12"></Page>
</div>
<div style="margin:100px 0px">
<Page :total="500" show-sizer show-elevator show-total transfer ></Page>
<Page :total="500" show-sizer show-elevator show-total ></Page>
</div>
<div style="margin:100px 0px">
<Page :total="500" show-sizer show-elevator transfer ></Page>
<Page :total="500" show-sizer show-elevator ></Page>
</div>
<div style="margin:100px 0px">
<Page :total="500" show-sizer show-elevator transfer ></Page>
<Page :total="500" show-sizer show-elevator ></Page>
</div>
<div style="margin:10px 0px">
<Page :total="500" show-sizer transfer ></Page>
<Page :total="500" show-sizer ></Page>
</div>
<div style="margin: 10px 0px">
<Page :total="40" size="small"></Page>
<br><br>
<Page :total="40" size="small" show-elevator show-sizer></Page>
<br><br>
<Page :total="40" size="small" show-total></Page>
<br><br>
</div>
</div>
</template>

2
examples/routers/poptip.vue
View file

@ -17,7 +17,7 @@
</Poptip>
</div> -->
<div>
<Poptip title="提示标题" content="标签一的内容" transfer>
<Poptip title="提示标题" content="标签一的内容">
<Button id="aaa">点击显示</Button>
<div slot="content">
<Button @click='loadData(15)'>15条数据</Button>

48
examples/routers/progress.vue
View file

@ -1,42 +1,20 @@
<template>
<div>
<i-progress :percent="percent"></i-progress>
<Button-group size="large">
<Button icon="ios-plus-empty" @click.native="add"></Button>
<Button icon="ios-minus-empty" @click.native="minus"></Button>
</Button-group>
<i-progress :percent="25" :stroke-width="5"></i-progress>
<i-progress :percent="100">
<Icon type="checkmark-circled"></Icon>
<span>成功</span>
</i-progress>
<i-progress :percent="percent"></i-progress>
<div style="height: 150px">
<i-progress vertical :percent="percent" :stroke-width="20" hide-info></i-progress>
<i-progress vertical :percent="percent"></i-progress>
</div>
<div style="height: 300px;">
<Progress vertical :percent="25"></Progress>
<Progress vertical :percent="45" status="active"></Progress>
<Progress vertical :percent="65" status="wrong"></Progress>
<Progress vertical :percent="100"></Progress>
<Progress vertical :percent="25" hide-info></Progress>
<Progress :percent="25"></Progress>
<Progress :percent="45" status="active"></Progress>
<Progress :percent="65" status="wrong"></Progress>
<Progress :percent="100"></Progress>
<Progress :percent="25" hide-info></Progress>
</div>
</template>
<script>
export default {
data () {
return {
percent: 0
}
},
methods: {
add () {
if (this.percent >= 100) {
return false;
}
this.percent += 10;
},
minus () {
if (this.percent <= 0) {
return false;
}
this.percent -= 10;
}
}
}
</script>

8
examples/routers/rate.vue
View file

@ -4,6 +4,12 @@
<Rate allow-half v-model="valueHalf"></Rate>
<Rate clearable v-model="valueClear"></Rate>
<Rate clearable allow-half v-model="valueClearHalf"></Rate>
<Rate
allow-half
show-text
v-model="characterValue"
character="好"/>
<Rate allow-half v-model="cv" icon="ios-heart" />
<!--<Rate show-text v-model="valueText"></Rate>-->
<!--<Rate show-text allow-half v-model="valueCustomText">-->
<!--<span style="color: #f5a623">{{ valueCustomText }}</span>-->
@ -22,6 +28,8 @@
valueDisabled: 2.4,
valueClear: 1,
valueClearHalf: 1.5,
characterValue: 2.5,
cv: 3.5
}
}
}

991
examples/routers/select.vue
View file

@ -1,959 +1,40 @@
<!--<template>-->
<!--<div>-->
<!--{{model10}} - -->
<!--{{model11}}-->
<!--<Select -->
<!--v-model="model10" -->
<!--style="width:260px">-->
<!--<Option -->
<!--v-for="(item, index) in cityList" -->
<!--:value="item.value" -->
<!--:key="index">{{item.label}}</Option>-->
<!--</Select>-->
<!--<Select -->
<!--v-model="model11" -->
<!--style="width:260px">-->
<!--<Option -->
<!--v-for="(item, index) in cityList" -->
<!--:value="item.value" -->
<!--:key="index">{{item.label}}</Option>-->
<!--</Select>-->
<!--</div>-->
<!--</template>-->
<!--<script>-->
<!--export default {-->
<!--data() {-->
<!--return {-->
<!--cityList: [],-->
<!--model10: '',-->
<!--model11: '',-->
<!--model12: '',-->
<!--};-->
<!--},-->
<!--mounted() {-->
<!--setTimeout(() => {-->
<!--this.cityList = [-->
<!--{-->
<!--value: 'beijing',-->
<!--label: '北京市',-->
<!--},-->
<!--{-->
<!--value: 'shanghai',-->
<!--label: '上海市',-->
<!--},-->
<!--{-->
<!--value: 'shenzhen',-->
<!--label: '深圳市',-->
<!--},-->
<!--{-->
<!--value: 'hangzhou',-->
<!--label: '杭州市',-->
<!--},-->
<!--{-->
<!--value: 'nanjing',-->
<!--label: '南京市',-->
<!--},-->
<!--{-->
<!--value: 'chongqing',-->
<!--label: '重庆市',-->
<!--},-->
<!--];-->
<!--}, 1000);-->
<!--},-->
<!--};-->
<!--</script>-->
<!--<template>-->
<!--<div>-->
<!--<Select v-model="value">-->
<!--<Option -->
<!--v-for="item in list" -->
<!--:value="item.value" -->
<!--:label="item.label" -->
<!--:key="item.value"></Option>-->
<!--</Select>-->
<!--<Button @click="setList">set list</Button>-->
<!--</div>-->
<!--</template>-->
<!--<script>-->
<!--export default {-->
<!--data() {-->
<!--return {-->
<!--value: '',-->
<!--list: [],-->
<!--};-->
<!--},-->
<!--methods: {-->
<!--setList() {-->
<!--const list = [];-->
<!--for (let i = 0; i < 400; i++) {-->
<!--list.push({-->
<!--value: `value${i}`,-->
<!--label: `label${i}`,-->
<!--});-->
<!--}-->
<!--this.list = list;-->
<!--},-->
<!--},-->
<!--};-->
<!--</script>-->
<!--<template>-->
<!--<div style="width: 400px;margin: 50px;">-->
<!--<div>data: {{model13}}</div>-->
<!--<Row>-->
<!--<Col -->
<!--span="12" -->
<!--style="padding-right:10px">-->
<!--<Select-->
<!--v-model="model13"-->
<!--:remote-method="remoteMethod1"-->
<!--:loading="loading1"-->
<!--size="small"-->
<!--placeholder="提示提示"-->
<!--filterable-->
<!--remote-->
<!--transfer>-->
<!--<Option -->
<!--v-for="(option, index) in options1" -->
<!--:value="option.value" -->
<!--:key="index">{{option.label}}</Option>-->
<!--</Select>-->
<!--</Col>-->
<!--<Col span="12">-->
<!--<Select-->
<!--v-model="model14"-->
<!--:remote-method="remoteMethod2"-->
<!--:loading="loading2"-->
<!--multiple-->
<!--filterable-->
<!--remote>-->
<!--<Option -->
<!--v-for="(option, index) in options2" -->
<!--:value="option.value" -->
<!--:key="index">{{option.label}}</Option>-->
<!--</Select>-->
<!--</Col>-->
<!--</Row>-->
<!--</div>-->
<!--</template>-->
<!--<script>-->
<!--export default {-->
<!--data() {-->
<!--return {-->
<!--model13: '',-->
<!--loading1: false,-->
<!--options1: [],-->
<!--model14: [],-->
<!--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',-->
<!--],-->
<!--};-->
<!--},-->
<!--methods: {-->
<!--remoteMethod1(query) {-->
<!--if (query !== '') {-->
<!--this.loading1 = true;-->
<!--setTimeout(() => {-->
<!--this.loading1 = false;-->
<!--const list = this.list.map((item) => ({-->
<!--value: item,-->
<!--label: item,-->
<!--}));-->
<!--this.options1 = list.filter((item) => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1);-->
<!--}, 200);-->
<!--} else {-->
<!--this.options1 = [];-->
<!--}-->
<!--},-->
<!--remoteMethod2(query) {-->
<!--if (query !== '') {-->
<!--this.loading2 = true;-->
<!--setTimeout(() => {-->
<!--this.loading2 = false;-->
<!--const list = this.list.map((item) => ({-->
<!--value: item,-->
<!--label: item,-->
<!--}));-->
<!--this.options2 = list.filter((item) => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1);-->
<!--}, 200);-->
<!--} else {-->
<!--this.options2 = [];-->
<!--}-->
<!--},-->
<!--},-->
<!--};-->
<!--</script>-->
<!--<template>-->
<!--<div style="width: 300px">-->
<!--<Select-->
<!--v-model="model14"-->
<!--:remote-method="remoteMethod2"-->
<!--:loading="loading2"-->
<!--multiple-->
<!--filterable-->
<!--remote>-->
<!--<Option -->
<!--v-for="(option, index) in options2" -->
<!--:value="option.value" -->
<!--:key="index">{{option.label}}</Option>-->
<!--</Select>-->
<!--</div>-->
<!--</template>-->
<!--<script>-->
<!--export default {-->
<!--data() {-->
<!--return {-->
<!--model13: '',-->
<!--loading1: false,-->
<!--options1: [],-->
<!--model14: [],-->
<!--loading2: false,-->
<!--options2: [],-->
<!--list: ['a', 'b', 'c'],-->
<!--};-->
<!--},-->
<!--methods: {-->
<!--remoteMethod2(query) {-->
<!--if (query !== '') {-->
<!--this.loading2 = true;-->
<!--setTimeout(() => {-->
<!--this.loading2 = false;-->
<!--const list = this.list.map((item) => ({-->
<!--value: item,-->
<!--label: item,-->
<!--}));-->
<!--this.options2 = list.filter((item) => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1);-->
<!--}, 200);-->
<!--} else {-->
<!--this.options2 = [];-->
<!--}-->
<!--},-->
<!--},-->
<!--};-->
<!--</script>-->
<!--<template>-->
<!--<Row>-->
<!--<Col -->
<!--span="12" -->
<!--style="padding-right:10px">-->
<!--<Select-->
<!--v-model="model13"-->
<!--:remote-method="remoteMethod1"-->
<!--:loading="loading1"-->
<!--filterable-->
<!--remote>-->
<!--<Option -->
<!--v-for="(option, index) in options1" -->
<!--:value="option.value" -->
<!--:key="index">{{option.label}}</Option>-->
<!--</Select>-->
<!--</Col>-->
<!--<Col span="12">-->
<!--<Select-->
<!--v-model="model14"-->
<!--:remote-method="remoteMethod2"-->
<!--:loading="loading2"-->
<!--multiple-->
<!--filterable-->
<!--remote>-->
<!--<Option -->
<!--v-for="(option, index) in options2" -->
<!--:value="option.value" -->
<!--:key="index">{{option.label}}</Option>-->
<!--</Select>-->
<!--</Col>-->
<!--</Row>-->
<!--</template>-->
<!--<script>-->
<!--export default {-->
<!--data() {-->
<!--return {-->
<!--model13: '',-->
<!--loading1: false,-->
<!--options1: [],-->
<!--model14: [],-->
<!--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',-->
<!--],-->
<!--};-->
<!--},-->
<!--methods: {-->
<!--remoteMethod1(query) {-->
<!--if (query !== '') {-->
<!--this.loading1 = true;-->
<!--setTimeout(() => {-->
<!--this.loading1 = false;-->
<!--const list = this.list.map((item) => ({-->
<!--value: item,-->
<!--label: item,-->
<!--}));-->
<!--this.options1 = list.filter((item) => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1);-->
<!--}, 200);-->
<!--} else {-->
<!--this.options1 = [];-->
<!--}-->
<!--},-->
<!--remoteMethod2(query) {-->
<!--if (query !== '') {-->
<!--this.loading2 = true;-->
<!--setTimeout(() => {-->
<!--this.loading2 = false;-->
<!--const list = this.list.map((item) => ({-->
<!--value: item,-->
<!--label: item,-->
<!--}));-->
<!--this.options2 = list.filter((item) => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1);-->
<!--}, 200);-->
<!--} else {-->
<!--this.options2 = [];-->
<!--}-->
<!--},-->
<!--},-->
<!--};-->
<!--</script>-->
<!--<template>-->
<!--<div id="app">-->
<!--<input><br>-->
<!--<i-select-->
<!--v-model="model1"-->
<!--style="width:200px"-->
<!--&gt;-->
<!--<i-option-->
<!--v-for="item in cityList"-->
<!--:value="item.value"-->
<!--:key="item.value"-->
<!--&gt;{{item.label}}</i-option>-->
<!--</i-select>-->
<!--<br>-->
<!--<i-select-->
<!--v-model="model2"-->
<!--size="small"-->
<!--style="width:100px"-->
<!--&gt;-->
<!--<i-option-->
<!--v-for="item in cityList"-->
<!--:value="item.value"-->
<!--:key="item.value"-->
<!--&gt;{{item.label}}</i-option>-->
<!--</i-select>-->
<!--<i-select-->
<!--v-model="model3"-->
<!--style="width:100px"-->
<!--&gt;-->
<!--<i-option-->
<!--v-for="item in cityList"-->
<!--:value="item.value"-->
<!--:key="item.value"-->
<!--&gt;{{item.label}}</i-option>-->
<!--</i-select>-->
<!--<i-select-->
<!--v-model="model4"-->
<!--size="large"-->
<!--style="width:100px"-->
<!--&gt;-->
<!--<i-option-->
<!--v-for="item in cityList"-->
<!--:value="item.value"-->
<!--:key="item.value"-->
<!--&gt;{{item.label}}</i-option>-->
<!--</i-select>-->
<!--<br>-->
<!--<i-select-->
<!--v-model="model5"-->
<!--disabled-->
<!--style="width:200px"-->
<!--&gt;-->
<!--<i-option-->
<!--v-for="item in cityList"-->
<!--:value="item.value"-->
<!--:key="item.value"-->
<!--&gt;{{item.label}}</i-option>-->
<!--</i-select>-->
<!--<i-select-->
<!--v-model="model6"-->
<!--style="width:200px"-->
<!--&gt;-->
<!--<i-option value="beijing">New York</i-option>-->
<!--<i-option -->
<!--value="shanghai" -->
<!--disabled>London</i-option>-->
<!--<i-option value="shenzhen">Sydney</i-option>-->
<!--</i-select>-->
<!--<br>-->
<!--<i-select-->
<!--v-model="model8"-->
<!--clearable-->
<!--style="width:200px"-->
<!--&gt;-->
<!--<i-option-->
<!--v-for="item in cityList"-->
<!--:value="item.value"-->
<!--:key="item.value"-->
<!--&gt;{{item.label}}</i-option>-->
<!--</i-select>-->
<!--<br>-->
<!--<i-select-->
<!--v-model="model7"-->
<!--style="width:200px"-->
<!--&gt;-->
<!--<option-group label="Hot Cities">-->
<!--<i-option-->
<!--v-for="item in cityList1"-->
<!--:value="item.value"-->
<!--:key="item.value"-->
<!--&gt;{{item.label}}</i-option>-->
<!--</option-group>-->
<!--<option-group label="Other Cities">-->
<!--<i-option-->
<!--v-for="item in cityList2"-->
<!--:value="item.value"-->
<!--:key="item.value"-->
<!--&gt;{{item.label}}</i-option>-->
<!--</option-group>-->
<!--</i-select>-->
<!--<br>-->
<!--<i-select-->
<!--v-model="model9"-->
<!--style="width:200px"-->
<!--&gt;-->
<!--<i-option -->
<!--value="New York" -->
<!--label="New York">-->
<!--<span>New York</span>-->
<!--<span style="float:right;color:#ccc">America</span>-->
<!--</i-option>-->
<!--<i-option -->
<!--value="London" -->
<!--label="London">-->
<!--<span>London</span>-->
<!--<span style="float:right;color:#ccc">U.K.</span>-->
<!--</i-option>-->
<!--<i-option -->
<!--value="Sydney" -->
<!--label="Sydney">-->
<!--<span>Sydney</span>-->
<!--<span style="float:right;color:#ccc">Australian</span>-->
<!--</i-option>-->
<!--</i-select>-->
<!--<br>-->
<!--<div>here</div>-->
<!--<i-select-->
<!--v-model="model10"-->
<!--multiple-->
<!--style="width:260px"-->
<!--&gt;-->
<!--<i-option-->
<!--v-for="item in cityList"-->
<!--:value="item.value"-->
<!--:key="item.value"-->
<!--&gt;{{item.label}}</i-option>-->
<!--</i-select>-->
<!--<br>-->
<!--<row>-->
<!--<i-col-->
<!--span="12"-->
<!--style="padding-right:10px"-->
<!--&gt;-->
<!--<i-select-->
<!--v-model="model11"-->
<!--filterable-->
<!--&gt;-->
<!--<i-option-->
<!--v-for="item in cityList"-->
<!--:value="item.value"-->
<!--:key="item.value"-->
<!--&gt;{{item.label}}</i-option>-->
<!--</i-select>-->
<!--</i-col>-->
<!--<i-col span="12">-->
<!--<i-select-->
<!--v-model="model12"-->
<!--filterable-->
<!--multiple-->
<!--&gt;-->
<!--<i-option-->
<!--v-for="item in cityList"-->
<!--:value="item.value"-->
<!--:key="item.value"-->
<!--&gt;{{item.label}}</i-option>-->
<!--</i-select>-->
<!--</i-col>-->
<!--</row>-->
<!--<br>-->
<!--<row>-->
<!--<i-col-->
<!--span="12"-->
<!--style="padding-right:10px"-->
<!--&gt;-->
<!--<i-select-->
<!--v-model="model13"-->
<!--:remote-method="remoteMethod1"-->
<!--:loading="loading1"-->
<!--filterable-->
<!--remote-->
<!--clearable-->
<!--&gt;-->
<!--<i-option-->
<!--v-for="(option, index) in options1"-->
<!--:value="option.value"-->
<!--:key="index"-->
<!--&gt;{{option.label}}</i-option>-->
<!--</i-select>-->
<!--</i-col>-->
<!--<i-col span="12">-->
<!--<i-select-->
<!--v-model="model14"-->
<!--:remote-method="remoteMethod2"-->
<!--:loading="loading2"-->
<!--multiple-->
<!--filterable-->
<!--remote-->
<!--clearable>-->
<!--<i-option-->
<!--v-for="(option, index) in options2"-->
<!--:value="option.value"-->
<!--:key="index"-->
<!--&gt;{{option.label}}</i-option>-->
<!--</i-select>-->
<!--</i-col>-->
<!--</row>-->
<!--</div>-->
<!--</template>-->
<!--<script>-->
<!--export default {-->
<!--data() {-->
<!--return {-->
<!--cityList: [-->
<!--{-->
<!--value: 'New York',-->
<!--label: 'New York',-->
<!--},-->
<!--{-->
<!--value: 'London',-->
<!--label: 'London',-->
<!--},-->
<!--{-->
<!--value: 'Sydney',-->
<!--label: 'Sydney',-->
<!--},-->
<!--{-->
<!--value: 'Ottawa',-->
<!--label: 'Ottawa',-->
<!--},-->
<!--{-->
<!--value: 'Paris',-->
<!--label: 'Paris',-->
<!--},-->
<!--{-->
<!--value: 'Canberra',-->
<!--label: 'Canberra',-->
<!--},-->
<!--],-->
<!--cityList1: [-->
<!--{-->
<!--value: 'New York',-->
<!--label: 'New York',-->
<!--},-->
<!--{-->
<!--value: 'London',-->
<!--label: 'London',-->
<!--},-->
<!--{-->
<!--value: 'Sydney',-->
<!--label: 'Sydney',-->
<!--},-->
<!--],-->
<!--cityList2: [-->
<!--{-->
<!--value: 'Ottawa',-->
<!--label: 'Ottawa',-->
<!--},-->
<!--{-->
<!--value: 'Paris',-->
<!--label: 'Paris',-->
<!--},-->
<!--{-->
<!--value: 'Canberra',-->
<!--label: 'Canberra',-->
<!--},-->
<!--],-->
<!--model1: '',-->
<!--model2: '',-->
<!--model3: '',-->
<!--model4: '',-->
<!--model5: '',-->
<!--model6: '',-->
<!--model7: '',-->
<!--model8: '',-->
<!--model9: '',-->
<!--model10: [],-->
<!--model11: '',-->
<!--model12: [],-->
<!--model13: '',-->
<!--loading1: false,-->
<!--options1: [],-->
<!--model14: [],-->
<!--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',-->
<!--],-->
<!--};-->
<!--},-->
<!--methods: {-->
<!--remoteMethod1(query) {-->
<!--if (query !== '') {-->
<!--this.loading1 = true;-->
<!--setTimeout(() => {-->
<!--this.loading1 = false;-->
<!--const list = this.list.map((item) => ({-->
<!--value: item,-->
<!--label: item,-->
<!--}));-->
<!--this.options1 = list.filter((item) => item.label.toLowerCase().includes(query.toLowerCase()));-->
<!--}, 1500);-->
<!--} else {-->
<!--this.options1 = [];-->
<!--}-->
<!--},-->
<!--remoteMethod2(query) {-->
<!--if (query !== '') {-->
<!--this.loading2 = true;-->
<!--setTimeout(() => {-->
<!--this.loading2 = false;-->
<!--const list = this.list.map((item) => ({-->
<!--value: item,-->
<!--label: item,-->
<!--}));-->
<!--this.options2 = list.filter((item) => item.label.toLowerCase().includes(query.toLowerCase()));-->
<!--}, 200);-->
<!--} else {-->
<!--this.options2 = [];-->
<!--}-->
<!--},-->
<!--},-->
<!--};-->
<!--</script>-->
<template>
<div>
<Select
v-model="model1"
size="small"
style="width:200px;" >
<Option
v-for="item in cityList"
:value="item.value"
:key="item.value">{{item.label}}</Option>
</Select>
<Select
v-model="model10"
size="small"
multiple
style="width:260px" >
<Option
v-for="item in cityList"
:value="item.value"
:key="item.value">{{item.label}}</Option>
</Select>
<br><br>
<Select
v-model="model1"
size="large"
style="width:200px"
clearable
@on-clear="onClear">
<Option
v-for="item in cityList"
:value="item.value"
:key="item.value">{{item.label}}</Option>
</Select>
<Select
v-model="model10"
size="large"
multiple
style="width:260px">
<Option
v-for="item in cityList"
:value="item.value"
:key="item.value">{{item.label}}</Option>
</Select>
<br><br>
<Select
v-model="model1"
style="width:200px">
<Option
v-for="item in cityList"
:value="item.value"
:key="item.value">{{item.label}}</Option>
</Select>
<Select
v-model="model11"
multiple
style="width:260px">
<Option
v-for="item in cityList"
:value="item.value"
:key="item.value">{{item.label}}</Option>
</Select>
<Select
v-model="model10"
multiple
style="width:260px">
<Option
v-for="item in cityList"
:value="item.value"
:key="item.value">{{item.label}}</Option>
</Select>
<br><br>
<br><br>
<br><br>
<br><br>
<br><br>
<br><br>
<br><br>
<br><br>
<Select
v-model="model10"
multiple
style="width:260px">
<Option
v-for="item in cityList"
:value="item.value"
:key="item.value">{{item.label}}</Option>
</Select>
<br><br>
<br><br>
<br><br>
<br><br>
<br><br>
<br><br>
<br><br>
<br><br>
<Select
v-model="model10"
multiple
style="width:260px">
<Option
v-for="item in cityList"
:value="item.value"
:key="item.value">{{item.label}}</Option>
</Select>
</div>
<Select v-model="model1" style="width:200px">
<Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
</Select>
</template>
<script>
export default {
data() {
return {
cityList: [
{
value: 'New York',
label: 'New York',
},
{
value: '中国',
label: '中国',
},
{
value: 'Sydney',
label: 'Sydney',
},
{
value: 'Ottawa',
label: 'Ottawa',
},
{
value: 'Paris',
label: 'Paris',
},
{
value: 'Canberra',
label: 'Canberra',
},
],
model1: '',
model10: [],
model11: [],
};
},
methods: {
onClear() {
console.log('onClear');
},
},
};
export default {
data () {
return {
cityList: [
{
value: 'New York',
label: 'New York'
},
{
value: 'London',
label: 'London'
},
{
value: 'Sydney',
label: 'Sydney'
},
{
value: 'Ottawa',
label: 'Ottawa'
},
{
value: 'Paris',
label: 'Paris'
},
{
value: 'Canberra',
label: 'Canberra'
}
],
model1: ''
}
}
}
</script>

74
examples/routers/split.vue Normal file
View file

@ -0,0 +1,74 @@
<template>
<div class="split-pane-page-wrapper">
<Split v-model="offset" @on-moving="handleMoving">
<div slot="left" class="pane left-pane">
<Split v-model="offsetVertical" mode="vertical" @on-moving="handleMoving">
<div slot="top" class="pane top-pane"></div>
<div slot="bottom" class="pane bottom-pane"></div>
<div slot="trigger" class="custom-trigger">
<Icon class="trigger-icon" :size="22" type="android-more-vertical" color="#000000"/>
</div>
</Split>
</div>
<div slot="right" class="pane right-pane"></div>
</Split>
</div>
</template>
<script>
export default {
name: 'split_pane_page',
data () {
return {
offset: 0.6,
offsetVertical: '250px'
}
},
methods: {
handleMoving (e) {
console.log(e.atMin, e.atMax)
}
}
}
</script>
<style lang="less">
.center-middle{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.split-pane-page-wrapper{
height: 600px;
.pane{
width: 100%;
height: 100%;
&.left-pane{
background: sandybrown;
}
&.right-pane{
background: palevioletred;
}
&.top-pane{
background: sandybrown;
}
&.bottom-pane{
background: palevioletred;
}
}
.custom-trigger{
width: 20px;
height: 20px;
border-radius: 50%;
background: #fff;
position: absolute;
.center-middle;
box-shadow: 0 0 6px 0 rgba(28, 36, 56, 0.4);
cursor: row-resize;
i.trigger-icon{
.center-middle;
}
}
}
</style>

34
examples/routers/switch.vue
View file

@ -1,18 +1,46 @@
<template>
<div>
<i-switch v-model="m1" true-value="yes" false-value="no">
<i-switch v-model="m1" :loading="loading">
<span slot="open">开</span>
<span slot="close">关</span>
</i-switch>
{{ m1 }}
<div @click="m1 = 'no'">toggle</div>
<div @click="m1 = !m1">toggle</div>
<div @click="loading = !loading">loading</div>
<br><br>
<i-switch size="large" loading></i-switch>
<i-switch></i-switch>
<i-switch size="small" v-model="m1" :loading="loading"></i-switch>
<br><br>
<i-switch>
<span slot="open">开</span>
<span slot="close">关</span>
</i-switch>
<i-switch>
<Icon type="android-done" slot="open"></Icon>
<Icon type="android-close" slot="close"></Icon>
</i-switch>
<br><br>
<i-switch size="large">
<span slot="open">开启</span>
<span slot="close">关闭</span>
</i-switch>
<i-switch size="large" v-model="m1" :loading="loading">
<span slot="open">ON</span>
<span slot="close">OFF</span>
</i-switch>
<br><br>
<i-switch :disabled="disabled"></i-switch>
<Button type="primary" @click="disabled = !disabled">Toggle Disabled</Button>
</div>
</template>
<script>
export default {
data () {
return {
m1: 'yes'
m1: true,
disabled: true,
loading: false
}
},
methods: {

497
examples/routers/table.vue
View file

@ -1,350 +1,47 @@
<style>
table {
border-collapse: collapse;
border-spacing: 0;
}
</style>
<template>
<div>
<!-- <br><br><br><br><br> -->
<!-- <Table border :show-header='false' :columns="columns1" height="500" :data="data1"></Table> -->
<!-- <Table border :columns="columns1" height='300'></Table> -->
<!-- <br><br><br><br><br> -->
<!-- <Table width="550" height="200" border :columns="columns2" :data="data4"></Table> -->
<!--<br><br><br><br><br>-->
<!-- <Table border :columns="columns5" height="240" :data="data5"></Table> -->
<!-- <br><br><br><br><br> -->
<!-- <Table border :columns="columns6" :data="data5"></Table> -->
<!-- <br><br><br><br><br> -->
<!-- <Table border :show-header='false' :columns="columns7" height="200" :data="data7"></Table> -->
<!-- <Table border :columns="columns7" height="240" :data="data7"></Table> -->
<!-- <br><br><br><br><br> -->
<!-- <Table border :columns="columns8" :data="data7" height="200"></Table> -->
<!-- <Table border :columns="columns8" height="200"></Table> -->
<!-- <br><br><br><br><br> -->
<div class="layout-demo-con">
<Button @click="change">修改Sider绑定的变量来控制收缩</Button>
<Layout :style="{minHeight: '80vh'}">
<Sider
v-model="isCollapsed"
collapsed-width="0"
hide-trigger
breakpoint="sm"
@on-collapse="changed"
collapsible
ref="side"
width="200">
<Menu width="auto" theme="dark" active-name="1">
<MenuGroup title="内容管理">
<MenuItem name="1">
<Icon type="document-text"></Icon>
文章管理
</MenuItem>
<MenuItem name="2">
<Icon type="chatbubbles"></Icon>
评论管理
</MenuItem>
</MenuGroup>
<MenuGroup title="统计分析">
<MenuItem name="3">
<Icon type="heart"></Icon>
用户留存
</MenuItem>
<MenuItem name="4">
<Icon type="heart-broken"></Icon>
流失用户
</MenuItem>
</MenuGroup>
</Menu>
<!-- <div slot="trigger"><Icon type="document-text"></Icon></div> -->
</Sider>
<Layout class-name="test-class">
<Header :style="{background: '#eee'}"><Button @click="toggleCollapse">菜单</Button></Header>
<Content :style="{background:'#FFCF9E'}">
<!-- <Table border :columns="columns1" height="500" :data="data1"></Table> -->
<!-- <br> -->
<!-- <Table border :columns="columns5" :data="data5"></Table> -->
<Table border :columns="columns8" height="240" :data="data7"></Table>
</Content>
<Footer>sdfsdsdfsdfs</Footer>
</Layout>
</Layout>
</div>
<Table ref="currentRowTable" :columns="columns3" :data="data1"></Table>
<Button @click="handleClearCurrentRow">Clear</Button>
</div>
</template>
<script>
export default {
data () {
return {
isCollapsed: false,
columns1: [
columns3: [
{
title: 'Name',
key: 'name',
type: 'index',
width: 60,
align: 'center',
minWidth: 100,
maxWidth: 200,
fixed: 'left',
filters: [
{
label: 'Joe',
value: 1
},
{
label: 'John',
value: 2
}
],
filterMultiple: false,
filterMethod (value, row) {
if (value === 1) {
return row.name === 'Joe';
} else if (value === 2) {
return row.name === 'John Brown';
}
indexMethod (row) {
return row._index;
}
},
{
title: 'Other',
align: 'center',
children: [
{
title: 'Age',
key: 'age',
align: 'center',
minWidth: 100,
maxWidth: 200,
sortable: true
},
{
title: 'Address',
align: 'center',
children: [
{
title: 'Street',
key: 'street',
align: 'center',
minWidth: 100,
maxWidth: 200,
},
{
title: 'Block',
align: 'center',
children: [
{
title: 'Building',
key: 'building',
align: 'center',
minWidth: 100,
maxWidth: 200,
sortable: true
},
{
title: 'Door No.',
key: 'door',
align: 'center',
minWidth: 100,
maxWidth: 200,
}
]
}
]
}
]
},
{
title: 'Company',
align: 'center',
children: [
{
title: 'Company Address',
key: 'caddress',
align: 'center',
minWidth: 100,
maxWidth: 200,
},
{
title: 'Company Name',
key: 'cname',
align: 'center',
minWidth: 100,
maxWidth: 200,
}
]
},
// {
// title: 'Gender',
// key: 'gender',
// align: 'center',
// width: 200,
// fixed: 'right'
// },
{
title: 'Gender',
key: 'gender',
align: 'center',
minWidth: 100,
maxWidth: 200,
fixed: 'right'
}
],
columns2: [
{
title: 'Name',
key: 'name',
width: 100,
fixed: 'left'
},
{
title: 'Age',
key: 'age',
width: 100,
fixed: 'right',
sortable: true
},
{
title: 'Province',
key: 'province',
width: 100
},
{
title: 'City',
key: 'city',
width: 100
},
{
title: 'Address',
key: 'address',
width: 200
},
{
title: 'Postcode',
key: 'zip',
width: 100
},
{
title: 'Action',
key: 'action',
fixed: 'right',
width: 120,
render: (h, params) => {
return h('div', [
h('Button', {
props: {
type: 'text',
size: 'small'
}
}, 'View'),
h('Button', {
props: {
type: 'text',
size: 'small'
}
}, 'Edit')
]);
}
}
],
data1: [],
data4: [
{
name: 'John Brown',
age: 18,
address: 'New York No. 1 Lake Park',
province: 'America',
city: 'New York',
zip: 100000
},
{
name: 'Jim Green',
age: 24,
address: 'Washington, D.C. No. 1 Lake Park',
province: 'America',
city: 'Washington, D.C.',
zip: 100000
},
{
name: 'Joe Black',
age: 30,
address: 'Sydney No. 1 Lake Park',
province: 'Australian',
city: 'Sydney',
zip: 100000
},
{
name: 'Jon Snow',
age: 26,
address: 'Ottawa No. 2 Lake Park',
province: 'Canada',
city: 'Ottawa',
zip: 100000
},
{
name: 'John Brown',
age: 18,
address: 'New York No. 1 Lake Park',
province: 'America',
city: 'New York',
zip: 100000
},
{
name: 'Jim Green',
age: 24,
address: 'Washington, D.C. No. 1 Lake Park',
province: 'America',
city: 'Washington, D.C.',
zip: 100000
},
{
name: 'Joe Black',
age: 30,
address: 'Sydney No. 1 Lake Park',
province: 'Australian',
city: 'Sydney',
zip: 100000
},
{
name: 'Jon Snow',
age: 26,
address: 'Ottawa No. 2 Lake Park',
province: 'Canada',
city: 'Ottawa',
zip: 100000
}
],
columns5: [
{
title: 'Date',
key: 'date',
sortable: true
},
{
title: 'Name',
key: 'name'
},
{
title: 'Age',
key: 'age',
sortable: true
key: 'age'
},
{
title: 'Address',
key: 'address'
key: 'address',
tooltip: true
}
],
data5: [
data1: [
{
name: 'John Brown',
age: 18,
address: 'New York No. 1 Lake Park',
address: '自定义渲染列，使用 Vue 的 Render 函数。传入两个参数，第一个是 h，第二个为对象，包含 row、column 和 index，分别指当前行数据，当前列数据，当前行索引，详见示例。自定义渲染列，使用 Vue 的 Render 函数。传入两个参数，第一个是 h，第二个为对象，包含 row、column 和 index，分别指当前行数据，当前列数据，当前行索引，详见示例。自定义渲染列，使用 Vue 的 Render 函数。传入两个参数，第一个是 h，第二个为对象，包含 row、column 和 index，分别指当前行数据，当前列数据，当前行索引，详见示例。',
date: '2016-10-03'
},
{
name: 'Jim Green',
age: 24,
address: 'London No. 1 Lake Park',
address: 'London No. 1 Lake Park自定义渲染列，使用 Vue 的 Render 函',
date: '2016-10-01'
},
{
@ -359,173 +56,13 @@ table {
address: 'Ottawa No. 2 Lake Park',
date: '2016-10-04'
}
],
columns6: [
{
title: 'Date',
key: 'date'
},
{
title: 'Name',
key: 'name'
},
{
title: 'Age',
key: 'age',
filters: [
{
label: 'Greater than 25',
value: 1
},
{
label: 'Less than 25',
value: 2
}
],
filterMultiple: false,
filterMethod (value, row) {
if (value === 1) {
return row.age > 25;
} else if (value === 2) {
return row.age < 25;
}
}
},
{
title: 'Address',
key: 'address',
fixed: 'right',
filters: [
{
label: 'New York',
value: 'New York'
},
{
label: 'London',
value: 'London'
},
{
label: 'Sydney',
value: 'Sydney'
}
],
filterMethod (value, row) {
return row.address.indexOf(value) > -1;
}
}
],
columns7: [
{
title: 'Date',
key: 'date',
sortable: true,
width:200,
},
{
title: 'Name',
key: 'name',
width:200,
},
{
title: 'Age',
key: 'age',
width:200,
},
{
title: 'Address',
key: 'address',
width:200,
}
],
data7: [
{
name: 'John Brown',
age: 18,
address: 'New York No. 1 Lake Park',
date: '2016-10-03'
},
{
name: 'Jim Green',
age: 24,
address: 'London No. 1 Lake Park',
date: '2016-10-01'
},
{
name: 'Joe Black',
age: 30,
address: 'Sydney No. 1 Lake Park Sydney No. 1 Lake Park',
date: '2016-10-02'
},
{
name: 'Jon Snow',
age: 26,
address: 'Ottawa No. 2 Lake Park Ottawa No. 2 Lake Park Ottawa No. 2 Lake Park',
date: '2016-10-04'
}
],
columns8: [
{
title: 'Address',
key: 'address',
minWidth:200,
//maxWidth:300,
},
{
title: 'Date',
key: 'date',
sortable: true,
minWidth:100,
maxWidth:150,
},
{
title: 'Name',
key: 'name',
minWidth:100,
maxWidth:200,
},
{
title: 'Age',
key: 'age',
minWidth:60,
maxWidth:100,
},
],
]
}
},
mounted () {
const data = [];
for (let i = 0; i < 20; i++) {
data.push({
key: i,
name: 'John Brown',
age: i + 1,
street: 'Lake Park',
building: 'C',
door: 2035,
caddress: 'Lake Street 42',
cname: 'SoftLake Co',
gender: 'M',
});
}
this.data1 = data;
},
methods: {
toggleCollapse () {
this.$refs.side.toggleCollapse();
},
change () {
this.isCollapsed = !this.isCollapsed;
},
changed (res) {
console.log(res)
}
},
watch: {
isCollapsed (val) {
// console.log(val)
handleClearCurrentRow () {
this.$refs.currentRowTable.clearCurrentRow();
}
}
}
</script>
</script>

52
examples/routers/tag.vue
View file

@ -1,5 +1,25 @@
<template>
<div>
<div>
<Tag color="default">default</Tag>
<Tag color="primary">primary</Tag>
<Tag color="success">success</Tag>
<Tag color="error">error</Tag>
<Tag color="warning">warning</Tag>
<Tag color="magenta">magenta</Tag>
<Tag color="red">red</Tag>
<Tag color="volcano">volcano</Tag>
<Tag color="orange">orange</Tag>
<Tag color="gold">gold</Tag>
<Tag color="gold">不错</Tag>
<Tag color="lime">lime</Tag>
<Tag color="green">green</Tag>
<Tag color="cyan">cyan</Tag>
<Tag color="blue">blue</Tag>
<Tag color="geekblue">geekblue</Tag>
<Tag color="purple">purple</Tag>
<Tag color="white">purple</Tag>
</div>
<Tag checkable>标签一</Tag>
<Tag>标签二</Tag>
<Tag v-if="show" closable @on-close="handleClose">标签三</Tag>
@ -9,15 +29,15 @@
<Tag type="dot">标签一</Tag>
<Tag type="dot" closable>标签二</Tag>
<br><br>
<Tag closable color="blue" checkable>标签一</Tag>
<Tag closable color="green" checkable>标签二</Tag>
<Tag closable color="red" checkable>标签三</Tag>
<Tag closable color="yellow" checkable>标签四</Tag>
<Tag closable color="primary" checkable>标签一</Tag>
<Tag closable color="success" checkable>标签二</Tag>
<Tag closable color="error" checkable>标签三</Tag>
<Tag closable color="warning" checkable>标签四</Tag>
<br><br>
<Tag color="blue" checkable>标签一</Tag>
<Tag color="green" checkable>标签二</Tag>
<Tag color="red" checkable>标签三</Tag>
<Tag color="yellow" checkable>标签四</Tag>
<Tag color="primary" checkable>标签一</Tag>
<Tag color="success" checkable>标签二</Tag>
<Tag color="error" checkable>标签三</Tag>
<Tag color="warning" checkable>标签四</Tag>
<br><br>
<Tag closable color="#EF6AFF" checkable>标签一</Tag>
<Tag color="#EF6AFF" checkable>标签一</Tag>
@ -30,15 +50,15 @@
<Tag type="dot" closable color="#EF6AFF">标签三</Tag>
<Tag closable color="default">标签四</Tag>
<br><br>
<Tag type="border" closable color="blue" checkable>标签一</Tag>
<Tag type="border" closable color="green">标签二</Tag>
<Tag type="border" closable color="red">标签三</Tag>
<Tag type="border" closable color="yellow">标签四</Tag>
<Tag type="border" closable color="primary" checkable>标签一</Tag>
<Tag type="border" closable color="success">标签二</Tag>
<Tag type="border" closable color="error">标签三</Tag>
<Tag type="border" closable color="warning">标签四</Tag>
<br><br>
<Tag type="dot" closable color="blue" checkable>标签一</Tag>
<Tag type="dot" closable color="green">标签二</Tag>
<Tag type="dot" closable color="red">标签三</Tag>
<Tag type="dot" closable color="yellow">标签四</Tag>
<Tag type="dot" closable color="primary" checkable>标签一</Tag>
<Tag type="dot" closable color="success">标签二</Tag>
<Tag type="dot" closable color="error">标签三</Tag>
<Tag type="dot" closable color="warning">标签四</Tag>
<br><br>
<Tag v-for="item in count" :key="item" :name="item" closable @on-close="handleClose2">标签{{ item + 1 }}</Tag>
<Button icon="ios-plus-empty" type="dashed" size="small" @click="handleAdd">添加标签</Button>

4
examples/routers/time.vue
View file

@ -3,13 +3,15 @@
<Time :time="1526608921" />
<Time :time="1652839997" />
<Time :time="ddd" :interval="1" />
</div>
</template>
<script>
export default {
data () {
return {
ddd: new Date('2018-04-27 14:23:00')
ddd: new Date()
};
},
computed: {},

9
examples/routers/tooltip.vue
View file

@ -1,12 +1,15 @@
<template>
<div>
<Tooltip always placement="top" transfer :content="text" :delay="1000">
<div style="margin: 200px;">
<Tooltip always placement="top-end" :content="text" :delay="1000" theme="light">
<Button @click="disabled = true">延时1秒显示</Button>
</Tooltip>
<Tooltip placement="top" transfer :content="text">
<Tooltip always :max-width="200" content="我的文本超级无敌长我的文本超级无敌长我的文本超级无敌长我的文本超级无敌长我的文本超级无敌长我的文本超级无敌长">
<Button @click="handleChange">change</Button>
</Tooltip>
<Button @click="handleChange">change</Button>
<Poptip title="Title" padding="0" width="250" word-wrap content="我的文本超级，无敌,长我的文本超级无敌长我的文本超级无敌长我的文本超级无敌长我的文本超级无敌长我的文本超级无敌长">
<Button>Click</Button>
</Poptip>
</div>
</template>
<script>

42
examples/routers/transfer.vue
View file

@ -1,16 +1,27 @@
<template>
<Transfer
:data="data1"
:target-keys="targetKeys1"
:render-format="render1"
@on-change="handleChange1"></Transfer>
:data="data3"
:target-keys="targetKeys3"
:list-style="listStyle"
:render-format="render3"
:operations="['To left','To right']"
filterable
@on-change="handleChange3">
<div :style="{float: 'right', margin: '5px'}">
<Button type="ghost" size="small" @click="reloadMockData">Refresh</Button>
</div>
</Transfer>
</template>
<script>
export default {
data () {
return {
data1: this.getMockData(),
targetKeys1: this.getTargetKeys()
data3: this.getMockData(),
targetKeys3: this.getTargetKeys(),
listStyle: {
width: '250px',
height: '300px'
}
}
},
methods: {
@ -19,8 +30,8 @@
for (let i = 1; i <= 20; i++) {
mockData.push({
key: i.toString(),
label: '内容' + i,
description: '内容' + i + '的描述信息',
label: 'Content ' + i,
description: 'The desc of content ' + i,
disabled: Math.random() * 3 < 1
});
}
@ -31,14 +42,15 @@
.filter(() => Math.random() * 2 > 1)
.map(item => item.key);
},
render1 (item) {
return item.label;
handleChange3 (newTargetKeys) {
this.targetKeys3 = newTargetKeys;
},
handleChange1 (newTargetKeys, direction, moveKeys) {
console.log(newTargetKeys);
console.log(direction);
console.log(moveKeys);
this.targetKeys1 = newTargetKeys;
render3 (item) {
return item.label + ' - ' + item.description;
},
reloadMockData () {
this.data3 = this.getMockData();
this.targetKeys3 = this.getTargetKeys();
}
}
}

11
src/components/alert/alert.vue
View file

@ -10,7 +10,7 @@
<span :class="descClasses"><slot name="desc"></slot></span>
<a :class="closeClasses" v-if="closable" @click="close">
<slot name="close">
<Icon type="ios-close-empty"></Icon>
<Icon type="ios-close"></Icon>
</slot>
</a>
</div>
@ -80,19 +80,20 @@
switch (this.type) {
case 'success':
type = 'checkmark-circled';
type = 'ios-checkmark-circle';
break;
case 'info':
type = 'information-circled';
type = 'ios-information-circle';
break;
case 'warning':
type = 'android-alert';
type = 'ios-alert';
break;
case 'error':
type = 'close-circled';
type = 'ios-close-circle';
break;
}
if (this.desc) type += '-outline';
return type;
}
},

14
src/components/anchor/anchor-link.vue
View file

@ -5,9 +5,9 @@
</div>
</template>
<script>
import { findComponentUpward } from '../../utils/assist';
export default {
name: 'AnchorLink',
inject: ['anchorCom'],
props: {
href: String,
title: String
@ -21,29 +21,23 @@ export default {
anchorLinkClasses () {
return [
this.prefix,
this.currentLink === this.href ? `${this.prefix}-active` : ''
this.anchorCom.currentLink === this.href ? `${this.prefix}-active` : ''
];
},
linkTitleClasses () {
return [
`${this.prefix}-title`
];
},
parentAnchor () {
return findComponentUpward(this, 'Anchor');
},
currentLink () {
return this.parentAnchor.currentLink;
}
},
methods: {
goAnchor () {
this.parentAnchor.turnTo(this.href);
this.anchorCom.turnTo(this.href);
}
},
mounted () {
this.$nextTick(() => {
this.parentAnchor.init();
this.anchorCom.init();
});
}
};

5
src/components/anchor/anchor.vue
View file

@ -15,6 +15,11 @@ import { scrollTop, findComponentDownward, findComponentsDownward, sharpMatcherR
import { on, off } from '../../utils/dom';
export default {
name: 'Anchor',
provide () {
return {
anchorCom: this
};
},
data () {
return {
prefix: 'ivu-anchor',

7
src/components/auto-complete/auto-complete.vue
View file

@ -73,6 +73,9 @@
size: {
validator (value) {
return oneOf(value, ['small', 'large', 'default']);
},
default () {
return this.$IVIEW.size === '' ? 'default' : this.$IVIEW.size;
}
},
icon: {
@ -90,7 +93,9 @@
},
transfer: {
type: Boolean,
default: false
default () {
return this.$IVIEW.transfer === '' ? false : this.$IVIEW.transfer;
}
},
name: {
type: String

4
src/components/avatar/avatar.vue
View file

@ -25,7 +25,9 @@
validator (value) {
return oneOf(value, ['small', 'large', 'default']);
},
default: 'default'
default () {
return this.$IVIEW.size === '' ? 'default' : this.$IVIEW.size;
}
},
src: {
type: String

2
src/components/back-top/back-top.vue
View file

@ -2,7 +2,7 @@
<div :class="classes" :style="styles" @click="back">
<slot>
<div :class="innerClasses">
<i class="ivu-icon ivu-icon-chevron-up"></i>
<i class="ivu-icon ivu-icon-ios-arrow-up"></i>
</div>
</slot>
</div>

63
src/components/badge/badge.vue
View file

@ -1,20 +1,25 @@
<template>
<span v-if="dot" :class="classes" ref="badge">
<slot></slot>
<sup :class="dotClasses" v-show="badge"></sup>
<sup :class="dotClasses" :style="styles" v-show="badge"></sup>
</span>
<span v-else-if="status" :class="classes" class="ivu-badge-status" ref="badge">
<span :class="statusClasses"></span>
<span class="ivu-badge-status-text">{{ text }}</span>
</span>
<span v-else :class="classes" ref="badge">
<slot></slot>
<sup v-if="count" :class="countClasses" v-show="badge">{{ finalCount }}</sup>
<sup v-if="hasCount" :style="styles" :class="countClasses" v-show="badge">{{ finalCount }}</sup>
</span>
</template>
<script>
import { oneOf } from '../../utils/assist';
const prefixCls = 'ivu-badge';
export default {
name: 'Badge',
props: {
count: [Number, String],
count: Number,
dot: {
type: Boolean,
default: false
@ -23,7 +28,28 @@
type: [Number, String],
default: 99
},
className: String
className: String,
showZero: {
type: Boolean,
default: false
},
text: {
type: String,
default: ''
},
status: {
validator (value) {
return oneOf(value, ['success', 'processing', 'default', 'error', 'warning']);
}
},
type: {
validator (value) {
return oneOf(value, ['success', 'primary', 'normal', 'error', 'warning', 'info']);
}
},
offset: {
type: Array
}
},
computed: {
classes () {
@ -37,11 +63,29 @@
`${prefixCls}-count`,
{
[`${this.className}`]: !!this.className,
[`${prefixCls}-count-alone`]: this.alone
[`${prefixCls}-count-alone`]: this.alone,
[`${prefixCls}-count-${this.type}`]: !!this.type
}
];
},
statusClasses () {
return [
`${prefixCls}-status-dot`,
{
[`${prefixCls}-status-${this.status}`]: !!this.status
}
];
},
styles () {
const style = {};
if (this.offset && this.offset.length === 2) {
style['margin-top'] = `${this.offset[0]}px`;
style['margin-right'] = `${this.offset[1]}px`;
}
return style;
},
finalCount () {
if (this.text !== '') return this.text;
return parseInt(this.count) >= parseInt(this.overflowCount) ? `${this.overflowCount}+` : this.count;
},
badge () {
@ -60,7 +104,14 @@
}
}
return status;
if (this.text !== '') status = true;
return status || this.showZero;
},
hasCount() {
if(this.count || this.text !== '') return true;
if(this.showZero && parseInt(this.count) === 0) return true;
else return false;
},
alone () {
return this.$slots.default === undefined;

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

@ -9,7 +9,7 @@
></render-cell>
</div>
<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"></i>
</a>
</template>
<template v-if="type === 'message'">
@ -21,7 +21,7 @@
></render-cell>
</div>
<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"></i>
</a>
</div>
</template>

26
src/components/breadcrumb/breadcrumb-item.vue
View file

@ -1,6 +1,6 @@
<template>
<span>
<a v-if="to || href" :class="linkClasses" @click="handleClick">
<a v-if="to" :href="linkUrl" :target="target" :class="linkClasses" @click="handleCheckClick">
<slot></slot>
</a>
<span v-else :class="linkClasses">
@ -13,22 +13,14 @@
</span>
</template>
<script>
// todo 3.0 时废弃 href
import mixinsLink from '../../mixins/link';
const prefixCls = 'ivu-breadcrumb-item';
export default {
name: 'BreadcrumbItem',
mixins: [ mixinsLink ],
props: {
href: {
type: [Object, String]
},
to: {
type: [Object, String]
},
replace: {
type: Boolean,
default: false
}
},
data () {
return {
@ -46,16 +38,6 @@
},
mounted () {
this.showSeparator = this.$slots.separator !== undefined;
},
methods: {
handleClick () {
const isRoute = this.$router;
if (isRoute) {
this.replace ? this.$router.replace(this.to || this.href) : this.$router.push(this.to || this.href);
} else {
window.location.href = this.to || this.href;
}
}
}
};
</script>

48
src/components/button/button.vue
View file

@ -1,28 +1,43 @@
<template>
<a
v-if="to"
:class="classes"
:disabled="disabled"
:href="linkUrl"
:target="target"
@click="handleClickLink">
<Icon class="ivu-load-loop" type="ios-loading" v-if="loading"></Icon>
<Icon :type="icon" :custom="customIcon" v-if="(icon || customIcon) && !loading"></Icon>
<span v-if="showSlot" ref="slot"><slot></slot></span>
</a>
<button
v-else
:type="htmlType"
:class="classes"
:disabled="disabled"
@click="handleClick">
<Icon class="ivu-load-loop" type="load-c" v-if="loading"></Icon>
<Icon :type="icon" v-if="icon && !loading"></Icon>
@click="handleClickLink">
<Icon class="ivu-load-loop" type="ios-loading" v-if="loading"></Icon>
<Icon :type="icon" :custom="customIcon" v-if="(icon || customIcon) && !loading"></Icon>
<span v-if="showSlot" ref="slot"><slot></slot></span>
</button>
</template>
<script>
import Icon from '../icon';
import { oneOf } from '../../utils/assist';
import mixinsLink from '../../mixins/link';
const prefixCls = 'ivu-btn';
export default {
name: 'Button',
mixins: [ mixinsLink ],
components: { Icon },
props: {
type: {
validator (value) {
return oneOf(value, ['primary', 'ghost', 'dashed', 'text', 'info', 'success', 'warning', 'error', 'default']);
}
return oneOf(value, ['default', 'primary', 'dashed', 'text', 'info', 'success', 'warning', 'error']);
},
default: 'default'
},
shape: {
validator (value) {
@ -32,6 +47,9 @@
size: {
validator (value) {
return oneOf(value, ['small', 'large', 'default']);
},
default () {
return this.$IVIEW.size === '' ? 'default' : this.$IVIEW.size;
}
},
loading: Boolean,
@ -42,10 +60,21 @@
return oneOf(value, ['button', 'submit', 'reset']);
}
},
icon: String,
icon: {
type: String,
default: ''
},
customIcon: {
type: String,
default: ''
},
long: {
type: Boolean,
default: false
},
ghost: {
type: Boolean,
default: false
}
},
data () {
@ -63,14 +92,17 @@
[`${prefixCls}-${this.shape}`]: !!this.shape,
[`${prefixCls}-${this.size}`]: !!this.size,
[`${prefixCls}-loading`]: this.loading != null && this.loading,
[`${prefixCls}-icon-only`]: !this.showSlot && (!!this.icon || this.loading)
[`${prefixCls}-icon-only`]: !this.showSlot && (!!this.icon || !!this.customIcon || this.loading),
[`${prefixCls}-ghost`]: this.ghost
}
];
}
},
methods: {
handleClick (event) {
handleClickLink (event) {
this.$emit('click', event);
this.handleCheckClick(event);
}
},
mounted () {

11
src/components/carousel/carousel.vue
View file

@ -1,7 +1,7 @@
<template>
<div :class="classes">
<button type="button" :class="arrowClasses" class="left" @click="arrowEvent(-1)">
<Icon type="chevron-left"></Icon>
<Icon type="ios-arrow-back"></Icon>
</button>
<div :class="[prefixCls + '-list']">
<div :class="[prefixCls + '-track', showCopyTrack ? '' : 'higher']" :style="trackStyles" ref="originTrack">
@ -11,7 +11,7 @@
</div>
</div>
<button type="button" :class="arrowClasses" class="right" @click="arrowEvent(1)">
<Icon type="chevron-right"></Icon>
<Icon type="ios-arrow-forward"></Icon>
</button>
<ul :class="dotsClasses">
<template v-for="n in slides.length">
@ -227,6 +227,7 @@
} else {
this.trackIndex = index;
}
this.currentIndex = index;
},
add (offset) {
// 获取单个轨道的图片数
@ -306,8 +307,10 @@
this.updatePos();
},
value (val) {
this.currentIndex = val;
this.trackIndex = val;
// this.currentIndex = val;
// this.trackIndex = val;
this.updateTrackIndex(val);
this.setAutoplay();
}
},
mounted () {

13
src/components/cascader/cascader.vue
View file

@ -16,8 +16,8 @@
:class="[prefixCls + '-label']"
v-show="filterable && query === ''"
@click="handleFocus">{{ displayRender }}</div>
<Icon type="ios-close" :class="[prefixCls + '-arrow']" v-show="showCloseIcon" @click.native.stop="clearSelect"></Icon>
<Icon type="arrow-down-b" :class="[prefixCls + '-arrow']"></Icon>
<Icon type="ios-close-circle" :class="[prefixCls + '-arrow']" v-show="showCloseIcon" @click.native.stop="clearSelect"></Icon>
<Icon type="ios-arrow-down" :class="[prefixCls + '-arrow']"></Icon>
</slot>
</div>
<transition name="transition-drop">
@ -97,7 +97,10 @@
},
size: {
validator (value) {
return oneOf(value, ['small', 'large']);
return oneOf(value, ['small', 'large', 'default']);
},
default () {
return this.$IVIEW.size === '' ? 'default' : this.$IVIEW.size;
}
},
trigger: {
@ -128,7 +131,9 @@
},
transfer: {
type: Boolean,
default: false
default () {
return this.$IVIEW.transfer === '' ? false : this.$IVIEW.transfer;
}
},
name: {
type: String

4
src/components/cascader/casitem.vue
View file

@ -1,8 +1,8 @@
<template>
<li :class="classes">
{{ data.label }}
<i v-if="showArrow" class="ivu-icon ivu-icon-ios-arrow-right"></i>
<i v-if="showLoading" class="ivu-icon ivu-icon-load-c ivu-load-loop"></i>
<i v-if="showArrow" class="ivu-icon ivu-icon-ios-arrow-forward"></i>
<i v-if="showLoading" class="ivu-icon ivu-icon-ios-loading ivu-load-loop"></i>
</li>
</template>
<script>

2
src/components/cell-group/index.js Normal file
View file

@ -0,0 +1,2 @@
import CellGroup from '../cell/cell-group.vue';
export default CellGroup;

20
src/components/cell/cell-group.vue Normal file
View file

@ -0,0 +1,20 @@
<template>
<div class="ivu-cell-group">
<slot></slot>
</div>
</template>
<script>
export default {
name: 'CellGroup',
provide () {
return {
cellGroup: this
};
},
methods: {
handleClick (name) {
this.$emit('on-click', name);
}
}
};
</script>

32
src/components/cell/cell-item.vue Normal file
View file

@ -0,0 +1,32 @@
<template>
<div class="ivu-cell-item">
<div class="ivu-cell-icon">
<slot name="icon"></slot>
</div>
<div class="ivu-cell-main">
<div class="ivu-cell-title"><slot>{{ title }}</slot></div>
<div class="ivu-cell-label"><slot name="label">{{ label }}</slot></div>
</div>
<div class="ivu-cell-footer">
<span class="ivu-cell-extra"><slot name="extra">{{ extra }}</slot></span>
</div>
</div>
</template>
<script>
export default {
props: {
title: {
type: String,
default: ''
},
label: {
type: String,
default: ''
},
extra: {
type: String,
default: ''
},
}
};
</script>

93
src/components/cell/cell.vue Normal file
View file

@ -0,0 +1,93 @@
<template>
<div :class="classes">
<a v-if="to" :href="linkUrl" class="ivu-cell-link" @click.prevent="handleClick" @click="handleClickItem">
<CellItem :title="title" :label="label" :extra="extra">
<slot name="icon" slot="icon"></slot>
<slot slot="default"></slot>
<slot name="extra" slot="extra"></slot>
<slot name="label" slot="label"></slot>
</CellItem>
</a>
<div class="ivu-cell-link" v-else @click="handleClickItem">
<CellItem :title="title" :label="label" :extra="extra">
<slot name="icon" slot="icon"></slot>
<slot slot="default"></slot>
<slot name="extra" slot="extra"></slot>
<slot name="label" slot="label"></slot>
</CellItem>
</div>
<div class="ivu-cell-arrow" v-if="to">
<slot name="arrow">
<Icon type="ios-arrow-forward"></Icon>
</slot>
</div>
</div>
</template>
<script>
import CellItem from './cell-item.vue';
import Icon from '../icon/icon.vue';
import mixinsLink from '../../mixins/link';
const prefixCls = 'ivu-cell';
export default {
name: 'Cell',
inject: ['cellGroup'],
mixins: [ mixinsLink ],
components: { CellItem, Icon },
props: {
name: {
type: [String, Number]
},
title: {
type: String,
default: ''
},
label: {
type: String,
default: ''
},
extra: {
type: String,
default: ''
},
disabled: {
type: Boolean,
default: false
},
selected: {
type: Boolean,
default: false
},
to: {
type: [Object, String]
},
replace: {
type: Boolean,
default: false
}
},
data () {
return {
prefixCls: prefixCls
};
},
computed: {
classes () {
return [
`${prefixCls}`,
{
[`${prefixCls}-disabled`]: this.disabled,
[`${prefixCls}-selected`]: this.selected,
[`${prefixCls}-with-link`]: this.to
}
];
},
},
methods: {
handleClickItem () {
this.cellGroup.handleClick(this.name);
}
}
};
</script>

5
src/components/cell/index.js Normal file
View file

@ -0,0 +1,5 @@
import Cell from './cell.vue';
import CellGroup from './cell-group.vue';
Cell.Group = CellGroup;
export default Cell;

3
src/components/checkbox/checkbox-group.vue
View file

@ -22,6 +22,9 @@
size: {
validator (value) {
return oneOf(value, ['small', 'large', 'default']);
},
default () {
return this.$IVIEW.size === '' ? 'default' : this.$IVIEW.size;
}
}
},

3
src/components/checkbox/checkbox.vue
View file

@ -63,6 +63,9 @@
size: {
validator (value) {
return oneOf(value, ['small', 'large', 'default']);
},
default () {
return this.$IVIEW.size === '' ? 'default' : this.$IVIEW.size;
}
},
name: {

56
src/components/circle/circle.vue
View file

@ -1,8 +1,8 @@
<template>
<div :style="circleSize" :class="wrapClasses">
<svg viewBox="0 0 100 100">
<path :d="pathString" :stroke="trailColor" :stroke-width="trailWidth" :fill-opacity="0"/>
<path :d="pathString" :stroke-linecap="strokeLinecap" :stroke="strokeColor" :stroke-width="strokeWidth" fill-opacity="0" :style="pathStyle"/>
<path :d="pathString" :stroke="trailColor" :stroke-width="trailWidth" :fill-opacity="0" :style="trailStyle" />
<path :d="pathString" :stroke-linecap="strokeLinecap" :stroke="strokeColor" :stroke-width="computedStrokeWidth" fill-opacity="0" :style="pathStyle" />
</svg>
<div :class="innerClasses">
<slot></slot>
@ -31,7 +31,7 @@
},
strokeColor: {
type: String,
default: '#2db7f5'
default: '#2d8cf0'
},
strokeLinecap: {
validator (value) {
@ -46,6 +46,10 @@
trailColor: {
type: String,
default: '#eaeef2'
},
dashboard: {
type: Boolean,
default: false
}
},
computed: {
@ -55,23 +59,53 @@
height: `${this.size}px`
};
},
computedStrokeWidth () {
return this.percent === 0 && this.dashboard ? 0 : this.strokeWidth;
},
radius () {
return 50 - this.strokeWidth / 2;
},
pathString () {
return `M 50,50 m 0,-${this.radius}
a ${this.radius},${this.radius} 0 1 1 0,${2 * this.radius}
a ${this.radius},${this.radius} 0 1 1 0,-${2 * this.radius}`;
if (this.dashboard) {
return `M 50,50 m 0,${this.radius}
a ${this.radius},${this.radius} 0 1 1 0,-${2 * this.radius}
a ${this.radius},${this.radius} 0 1 1 0,${2 * this.radius}`;
} else {
return `M 50,50 m 0,-${this.radius}
a ${this.radius},${this.radius} 0 1 1 0,${2 * this.radius}
a ${this.radius},${this.radius} 0 1 1 0,-${2 * this.radius}`;
}
},
len () {
return Math.PI * 2 * this.radius;
},
trailStyle () {
let style = {};
if (this.dashboard) {
style = {
'stroke-dasharray': `${this.len - 75}px ${this.len}px`,
'stroke-dashoffset': `-${75 / 2}px`,
'transition': 'stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s'
};
}
return style;
},
pathStyle () {
return {
'stroke-dasharray': `${this.len}px ${this.len}px`,
'stroke-dashoffset': `${((100 - this.percent) / 100 * this.len)}px`,
'transition': 'stroke-dashoffset 0.6s ease 0s, stroke 0.6s ease'
};
let style = {};
if (this.dashboard) {
style = {
'stroke-dasharray': `${(this.percent / 100) * (this.len - 75)}px ${this.len}px`,
'stroke-dashoffset': `-${75 / 2}px`,
'transition': 'stroke-dashoffset .3s ease 0s, stroke-dasharray .6s ease 0s, stroke .6s, stroke-width .06s ease .6s'
};
} else {
style = {
'stroke-dasharray': `${this.len}px ${this.len}px`,
'stroke-dashoffset': `${((100 - this.percent) / 100 * this.len)}px`,
'transition': 'stroke-dashoffset 0.6s ease 0s, stroke 0.6s ease'
};
}
return style;
},
wrapClasses () {
return `${prefixCls}`;

11
src/components/collapse/collapse.vue
View file

@ -15,6 +15,10 @@
},
value: {
type: [Array, String]
},
simple: {
type: Boolean,
default: false
}
},
data () {
@ -24,7 +28,12 @@
},
computed: {
classes () {
return `${prefixCls}`;
return [
`${prefixCls}`,
{
[`${prefixCls}-simple`]: this.simple
}
];
}
},
mounted () {

6
src/components/collapse/panel.vue
View file

@ -1,7 +1,7 @@
<template>
<div :class="itemClasses">
<div :class="headerClasses" @click="toggle">
<Icon type="arrow-right-b"></Icon>
<Icon type="ios-arrow-forward" v-if="!hideArrow"></Icon>
<slot></slot>
</div>
<collapse-transition>
@ -22,6 +22,10 @@
props: {
name: {
type: String
},
hideArrow: {
type: Boolean,
default: false
}
},
data () {

14
src/components/color-picker/color-picker.vue
View file

@ -25,7 +25,7 @@
<div
v-show="value === '' && !visible"
:class="[prefixCls + '-color-empty']">
<i :class="[iconPrefixCls, iconPrefixCls + '-ios-close-empty']"></i>
<i :class="[iconPrefixCls, iconPrefixCls + '-ios-close']"></i>
</div>
<div
v-show="value || visible"
@ -87,7 +87,6 @@
ref="clear"
:tabindex="0"
size="small"
type="ghost"
@click.native="handleClear"
@keydown.enter="handleClear"
@keydown.native.esc="closer"
@ -169,11 +168,12 @@ export default {
default: false,
},
size: {
type: String,
validator(value) {
return oneOf(value, ['small', 'large', 'default']);
},
default: 'default',
default () {
return this.$IVIEW.size === '' ? 'default' : this.$IVIEW.size;
}
},
hideDropDown: {
type: Boolean,
@ -201,7 +201,9 @@ export default {
},
transfer: {
type: Boolean,
default: false,
default () {
return this.$IVIEW.transfer === '' ? false : this.$IVIEW.transfer;
}
},
name: {
type: String,
@ -248,7 +250,7 @@ export default {
arrowClasses() {
return [
this.iconPrefixCls,
`${this.iconPrefixCls}-arrow-down-b`,
`${this.iconPrefixCls}-ios-arrow-down`,
`${this.inputPrefixCls}-icon`,
`${this.inputPrefixCls}-icon-normal`,
];

2
src/components/date-picker/base/confirm.vue
View file

@ -3,7 +3,7 @@
<i-button :class="timeClasses" size="small" type="text" :disabled="timeDisabled" v-if="showTime" @click="handleToggleTime">
{{labels.time}}
</i-button>
<i-button size="small" type="ghost" @click.native="handleClear" @keydown.enter.native="handleClear">
<i-button size="small" @click.native="handleClear" @keydown.enter.native="handleClear">
{{labels.clear}}
</i-button>
<i-button size="small" type="primary" @click.native="handleSuccess" @keydown.enter.native="handleSuccess">

16
src/components/date-picker/panel/Date/date-range.vue
View file

@ -11,12 +11,12 @@
<div :class="[datePrefixCls + '-header']" v-show="currentView !== 'time'">
<span
:class="iconBtnCls('prev', '-double')"
@click="prevYear('left')"><Icon type="ios-arrow-left"></Icon></span>
@click="prevYear('left')"><Icon type="ios-arrow-back"></Icon></span>
<span
v-if="leftPickerTable === 'date-table'"
:class="iconBtnCls('prev')"
@click="prevMonth('left')"
v-show="currentView === 'date'"><Icon type="ios-arrow-left"></Icon></span>
v-show="currentView === 'date'"><Icon type="ios-arrow-back"></Icon></span>
<date-panel-label
:date-panel-label="leftDatePanelLabel"
:current-view="leftDatePanelView"
@ -24,12 +24,12 @@
<span
v-if="splitPanels || leftPickerTable !== 'date-table'"
:class="iconBtnCls('next', '-double')"
@click="nextYear('left')"><Icon type="ios-arrow-right"></Icon></span>
@click="nextYear('left')"><Icon type="ios-arrow-forward"></Icon></span>
<span
v-if="splitPanels && leftPickerTable === 'date-table'"
:class="iconBtnCls('next')"
@click="nextMonth('left')"
v-show="currentView === 'date'"><Icon type="ios-arrow-right"></Icon></span>
v-show="currentView === 'date'"><Icon type="ios-arrow-forward"></Icon></span>
</div>
<component
:is="leftPickerTable"
@ -53,24 +53,24 @@
<span
v-if="splitPanels || rightPickerTable !== 'date-table'"
:class="iconBtnCls('prev', '-double')"
@click="prevYear('right')"><Icon type="ios-arrow-left"></Icon></span>
@click="prevYear('right')"><Icon type="ios-arrow-back"></Icon></span>
<span
v-if="splitPanels && rightPickerTable === 'date-table'"
:class="iconBtnCls('prev')"
@click="prevMonth('right')"
v-show="currentView === 'date'"><Icon type="ios-arrow-left"></Icon></span>
v-show="currentView === 'date'"><Icon type="ios-arrow-back"></Icon></span>
<date-panel-label
:date-panel-label="rightDatePanelLabel"
:current-view="rightDatePanelView"
:date-prefix-cls="datePrefixCls"></date-panel-label>
<span
:class="iconBtnCls('next', '-double')"
@click="nextYear('right')"><Icon type="ios-arrow-right"></Icon></span>
@click="nextYear('right')"><Icon type="ios-arrow-forward"></Icon></span>
<span
v-if="rightPickerTable === 'date-table'"
:class="iconBtnCls('next')"
@click="nextMonth('right')"
v-show="currentView === 'date'"><Icon type="ios-arrow-right"></Icon></span>
v-show="currentView === 'date'"><Icon type="ios-arrow-forward"></Icon></span>
</div>
<component
:is="rightPickerTable"

8
src/components/date-picker/panel/Date/date.vue
View file

@ -10,24 +10,24 @@
<div :class="[datePrefixCls + '-header']" v-show="currentView !== 'time'">
<span
:class="iconBtnCls('prev', '-double')"
@click="changeYear(-1)"><Icon type="ios-arrow-left"></Icon></span>
@click="changeYear(-1)"><Icon type="ios-arrow-back"></Icon></span>
<span
v-if="pickerTable === 'date-table'"
:class="iconBtnCls('prev')"
@click="changeMonth(-1)"
v-show="currentView === 'date'"><Icon type="ios-arrow-left"></Icon></span>
v-show="currentView === 'date'"><Icon type="ios-arrow-back"></Icon></span>
<date-panel-label
:date-panel-label="datePanelLabel"
:current-view="pickerTable.split('-').shift()"
:date-prefix-cls="datePrefixCls"></date-panel-label>
<span
:class="iconBtnCls('next', '-double')"
@click="changeYear(+1)"><Icon type="ios-arrow-right"></Icon></span>
@click="changeYear(+1)"><Icon type="ios-arrow-forward"></Icon></span>
<span
v-if="pickerTable === 'date-table'"
:class="iconBtnCls('next')"
@click="changeMonth(+1)"
v-show="currentView === 'date'"><Icon type="ios-arrow-right"></Icon></span>
v-show="currentView === 'date'"><Icon type="ios-arrow-forward"></Icon></span>
</div>
<div :class="[prefixCls + '-content']">
<component

11
src/components/date-picker/picker.vue
View file

@ -171,6 +171,9 @@
size: {
validator (value) {
return oneOf(value, ['small', 'large', 'default']);
},
default () {
return this.$IVIEW.size === '' ? 'default' : this.$IVIEW.size;
}
},
placeholder: {
@ -185,7 +188,9 @@
},
transfer: {
type: Boolean,
default: false
default () {
return this.$IVIEW.transfer === '' ? false : this.$IVIEW.transfer;
}
},
name: {
type: String
@ -259,8 +264,8 @@
},
iconType () {
let icon = 'ios-calendar-outline';
if (this.type === 'time' || this.type === 'timerange') icon = 'ios-clock-outline';
if (this.showClose) icon = 'ios-close';
if (this.type === 'time' || this.type === 'timerange') icon = 'ios-time-outline';
if (this.showClose) icon = 'ios-close-circle';
return icon;
},
transition () {

57
src/components/divider/divider.vue Normal file
View file

@ -0,0 +1,57 @@
<template>
<div :class="classes">
<span v-if="hasSlot" :class="slotClasses">
<slot></slot>
</span>
</div>
</template>
<script>
import {oneOf} from '../../utils/assist';
const prefixCls = 'ivu-divider';
export default {
name: 'Divider',
props: {
type: {
type: String,
default: 'horizontal',
validator (value) {
return oneOf(value, ['horizontal', 'vertical']);
}
},
orientation: {
type: String,
default: 'center',
validator (value) {
return oneOf(value, ['left', 'right', 'center']);
}
},
dashed: {
type: Boolean,
default: false,
}
},
computed: {
hasSlot() {
return !!this.$slots.default;
},
classes() {
return [
`${prefixCls}`,
`${prefixCls}-${this.type}`,
{
[`${prefixCls}-with-text-${this.orientation}`]: this.hasSlot,
[`${prefixCls}-dashed`]: !!this.dashed
}
];
},
slotClasses() {
return [
`${prefixCls}-inner-text`,
];
}
}
};
</script>

3
src/components/divider/index.js Normal file
View file

@ -0,0 +1,3 @@
import Divider from './divider.vue';
export default Divider;

31
src/components/dropdown/dropdown.vue
View file

@ -4,7 +4,7 @@
v-click-outside="onClickoutside"
@mouseenter="handleMouseenter"
@mouseleave="handleMouseleave">
<div :class="[prefixCls + '-rel']" ref="reference" @click="handleClick"><slot></slot></div>
<div :class="relClasses" ref="reference" @click="handleClick" @contextmenu.prevent="handleRightClick"><slot></slot></div>
<transition name="transition-drop">
<Drop
:class="dropdownCls"
@ -33,7 +33,7 @@
props: {
trigger: {
validator (value) {
return oneOf(value, ['click', 'hover', 'custom']);
return oneOf(value, ['click', 'hover', 'custom', 'contextMenu']);
},
default: 'hover'
},
@ -49,7 +49,9 @@
},
transfer: {
type: Boolean,
default: false
default () {
return this.$IVIEW.transfer === '' ? false : this.$IVIEW.transfer;
}
}
},
computed: {
@ -60,6 +62,14 @@
return {
[prefixCls + '-transfer']: this.transfer
};
},
relClasses () {
return [
`${prefixCls}-rel`,
{
[`${prefixCls}-rel-user-select-none`]: this.trigger === 'contextMenu'
}
];
}
},
data () {
@ -89,6 +99,13 @@
}
this.currentVisible = !this.currentVisible;
},
handleRightClick () {
if (this.trigger === 'custom') return false;
if (this.trigger !== 'contextMenu') {
return false;
}
this.currentVisible = !this.currentVisible;
},
handleMouseenter () {
if (this.trigger === 'custom') return false;
if (this.trigger !== 'hover') {
@ -113,6 +130,7 @@
},
onClickoutside (e) {
this.handleClose();
this.handleRightClose();
if (this.currentVisible) this.$emit('on-clickoutside', e);
},
handleClose () {
@ -122,6 +140,13 @@
}
this.currentVisible = false;
},
handleRightClose () {
if (this.trigger === 'custom') return false;
if (this.trigger !== 'contextMenu') {
return false;
}
this.currentVisible = false;
},
hasParent () {
// const $parent = this.$parent.$parent.$parent;
const $parent = findComponentUpward(this, 'Dropdown');

19
src/components/icon/icon.vue
View file

@ -7,13 +7,26 @@
export default {
name: 'Icon',
props: {
type: String,
type: {
type: String,
default: ''
},
size: [Number, String],
color: String
color: String,
custom: {
type: String,
default: ''
}
},
computed: {
classes () {
return `${prefixCls} ${prefixCls}-${this.type}`;
return [
`${prefixCls}`,
{
[`${prefixCls}-${this.type}`]: this.type !== '',
[`${this.custom}`]: this.custom !== '',
}
];
},
styles () {
let style = {};

3
src/components/input-number/input-number.vue
View file

@ -89,6 +89,9 @@
size: {
validator (value) {
return oneOf(value, ['small', 'large', 'default']);
},
default () {
return this.$IVIEW.size === '' ? 'default' : this.$IVIEW.size;
}
},
disabled: {

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

@ -2,10 +2,12 @@
<div :class="wrapClasses">
<template v-if="type !== 'textarea'">
<div :class="[prefixCls + '-group-prepend']" v-if="prepend" v-show="slotReady"><slot name="prepend"></slot></div>
<i class="ivu-icon" :class="['ivu-icon-ios-close', prefixCls + '-icon', prefixCls + '-icon-clear' , prefixCls + '-icon-normal']" v-if="clearable && currentValue" @click="handleClear"></i>
<i class="ivu-icon" :class="['ivu-icon-ios-close-circle', prefixCls + '-icon', prefixCls + '-icon-clear' , prefixCls + '-icon-normal']" v-if="clearable && currentValue" @click="handleClear"></i>
<i class="ivu-icon" :class="['ivu-icon-' + icon, prefixCls + '-icon', prefixCls + '-icon-normal']" v-else-if="icon" @click="handleIconClick"></i>
<i class="ivu-icon ivu-icon-ios-search" :class="[prefixCls + '-icon', prefixCls + '-icon-normal', prefixCls + '-search-icon']" v-else-if="search && enterButton === false" @click="handleSearch"></i>
<span class="ivu-input-suffix" v-else-if="showSuffix"><slot name="suffix"><i class="ivu-icon" :class="['ivu-icon-' + suffix]" v-if="suffix"></i></slot></span>
<transition name="fade">
<i class="ivu-icon ivu-icon-load-c ivu-load-loop" :class="[prefixCls + '-icon', prefixCls + '-icon-validate']" v-if="!icon"></i>
<i class="ivu-icon ivu-icon-ios-loading ivu-load-loop" :class="[prefixCls + '-icon', prefixCls + '-icon-validate']" v-if="!icon"></i>
</transition>
<input
:id="elementId"
@ -31,6 +33,11 @@
@input="handleInput"
@change="handleChange">
<div :class="[prefixCls + '-group-append']" v-if="append" v-show="slotReady"><slot name="append"></slot></div>
<div :class="[prefixCls + '-group-append', prefixCls + '-search']" v-else-if="search && enterButton" @click="handleSearch">
<i class="ivu-icon ivu-icon-ios-search" v-if="enterButton === true"></i>
<template v-else>{{ enterButton }}</template>
</div>
<span class="ivu-input-prefix" v-else-if="showPrefix"><slot name="prefix"><i class="ivu-icon" :class="['ivu-icon-' + prefix]" v-if="prefix"></i></slot></span>
</template>
<textarea
v-else
@ -83,6 +90,9 @@
size: {
validator (value) {
return oneOf(value, ['small', 'large', 'default']);
},
default () {
return this.$IVIEW.size === '' ? 'default' : this.$IVIEW.size;
}
},
placeholder: {
@ -142,6 +152,22 @@
return oneOf(value, ['hard', 'soft']);
},
default: 'soft'
},
prefix: {
type: String,
default: ''
},
suffix: {
type: String,
default: ''
},
search: {
type: Boolean,
default: false
},
enterButton: {
type: [Boolean, String],
default: false
}
},
data () {
@ -151,7 +177,9 @@
prepend: true,
append: true,
slotReady: false,
textareaStyles: {}
textareaStyles: {},
showPrefix: false,
showSuffix: false
};
},
computed: {
@ -161,11 +189,12 @@
{
[`${prefixCls}-wrapper-${this.size}`]: !!this.size,
[`${prefixCls}-type`]: this.type,
[`${prefixCls}-group`]: this.prepend || this.append,
[`${prefixCls}-group-${this.size}`]: (this.prepend || this.append) && !!this.size,
[`${prefixCls}-group`]: this.prepend || this.append || (this.search && this.enterButton),
[`${prefixCls}-group-${this.size}`]: (this.prepend || this.append || (this.search && this.enterButton)) && !!this.size,
[`${prefixCls}-group-with-prepend`]: this.prepend,
[`${prefixCls}-group-with-append`]: this.append,
[`${prefixCls}-hide-icon`]: this.append // #554
[`${prefixCls}-group-with-append`]: this.append || (this.search && this.enterButton),
[`${prefixCls}-hide-icon`]: this.append, // #554
[`${prefixCls}-with-search`]: (this.search && this.enterButton)
}
];
},
@ -174,7 +203,9 @@
`${prefixCls}`,
{
[`${prefixCls}-${this.size}`]: !!this.size,
[`${prefixCls}-disabled`]: this.disabled
[`${prefixCls}-disabled`]: this.disabled,
[`${prefixCls}-with-prefix`]: this.showPrefix,
[`${prefixCls}-with-suffix`]: this.showSuffix || (this.search && this.enterButton === false)
}
];
},
@ -190,6 +221,7 @@
methods: {
handleEnter (event) {
this.$emit('on-enter', event);
if (this.search) this.$emit('on-search', this.currentValue);
},
handleKeydown (event) {
this.$emit('on-keydown', event);
@ -262,6 +294,11 @@
this.$emit('input', '');
this.setCurrentValue('');
this.$emit('on-change', e);
},
handleSearch () {
if (this.disabled) return false;
this.$refs.input.focus();
this.$emit('on-search', this.currentValue);
}
},
watch: {
@ -273,6 +310,8 @@
if (this.type !== 'textarea') {
this.prepend = this.$slots.prepend !== undefined;
this.append = this.$slots.append !== undefined;
this.showPrefix = this.prefix !== '' || this.$slots.prefix !== undefined;
this.showSuffix = this.suffix !== '' || this.$slots.suffix !== undefined;
} else {
this.prepend = false;
this.append = false;

4
src/components/layout/sider.vue
View file

@ -3,7 +3,7 @@
:class="wrapClasses"
:style="wrapStyles">
<span v-show="showZeroTrigger" @click="toggleCollapse" :class="zeroWidthTriggerClasses">
<i class="ivu-icon ivu-icon-navicon-round"></i>
<i class="ivu-icon ivu-icon-ios-menu"></i>
</span>
<div :class="childClasses">
<slot></slot>
@ -98,7 +98,7 @@
triggerIconClasses () {
return [
'ivu-icon',
`ivu-icon-chevron-${this.reverseArrow ? 'right' : 'left'}`,
`ivu-icon-ios-arrow-${this.reverseArrow ? 'forward' : 'back'}`,
`${prefixCls}-trigger-icon`,
];
},

2
src/components/loading-bar/index.js
View file

@ -55,7 +55,7 @@ export default {
});
timer = setInterval(() => {
percent += Math.floor(Math.random () * 3 + 5);
percent += Math.floor(Math.random () * 3 + 1);
if (percent > 95) {
clearTimer();
}

15
src/components/menu/menu-item.vue
View file

@ -1,15 +1,18 @@
<template>
<li :class="classes" @click.stop="handleClick" :style="itemStyle"><slot></slot></li>
<a v-if="to" :href="linkUrl" :target="target" :class="classes" @click="handleClickItem" :style="itemStyle"><slot></slot></a>
<li v-else :class="classes" @click.stop="handleClickItem" :style="itemStyle"><slot></slot></li>
</template>
<script>
import Emitter from '../../mixins/emitter';
import { findComponentUpward } from '../../utils/assist';
const prefixCls = 'ivu-menu';
import mixin from './mixin';
import mixinsLink from '../../mixins/link';
const prefixCls = 'ivu-menu';
export default {
name: 'MenuItem',
mixins: [ Emitter, mixin ],
mixins: [ Emitter, mixin, mixinsLink ],
props: {
name: {
type: [String, Number],
@ -18,7 +21,7 @@
disabled: {
type: Boolean,
default: false
}
},
},
data () {
return {
@ -43,7 +46,7 @@
}
},
methods: {
handleClick () {
handleClickItem (event) {
if (this.disabled) return;
let parent = findComponentUpward(this, 'Submenu');
@ -53,6 +56,8 @@
} else {
this.dispatch('Menu', 'on-menu-item-select', this.name);
}
this.handleCheckClick(event);
}
},
mounted () {

12
src/components/message/index.js
View file

@ -13,11 +13,11 @@ let messageInstance;
let name = 1;
const iconTypes = {
'info': 'information-circled',
'success': 'checkmark-circled',
'warning': 'android-alert',
'error': 'close-circled',
'loading': 'load-c'
'info': 'ios-information-circle',
'success': 'ios-checkmark-circle',
'warning': 'ios-alert',
'error': 'ios-close-circle',
'loading': 'ios-loading'
};
function getMessageInstance () {
@ -46,7 +46,7 @@ function notice (content = '', duration = defaults.duration, type, onClose = fun
transitionName: 'move-up',
content: `
<div class="${prefixCls}-custom-content ${prefixCls}-${type}">
<i class="${iconPrefixCls} ${iconPrefixCls}-${iconType}${loadCls}"></i>
<i class="${iconPrefixCls} ${iconPrefixCls}-${iconType} ${loadCls}"></i>
<span>${content}</span>
</div>
`,

50
src/components/modal/confirm.js
View file

@ -62,6 +62,22 @@ Modal.newInstance = properties => {
attrs: {
class: `${prefixCls}-body`
}
}, [
h('div', {
domProps: {
innerHTML: this.body
}
})
]);
}
// when render with no title, hide head
let head_render;
if (this.title) {
head_render = h('div', {
attrs: {
class: `${prefixCls}-head`
}
}, [
h('div', {
class: this.iconTypeCls
@ -71,8 +87,11 @@ Modal.newInstance = properties => {
})
]),
h('div', {
attrs: {
class: `${prefixCls}-head-title`
},
domProps: {
innerHTML: this.body
innerHTML: this.title
}
})
]);
@ -98,20 +117,7 @@ Modal.newInstance = properties => {
class: prefixCls
}
}, [
h('div', {
attrs: {
class: `${prefixCls}-head`
}
}, [
h('div', {
attrs: {
class: `${prefixCls}-head-title`
},
domProps: {
innerHTML: this.title
}
})
]),
head_render,
body_render,
h('div', {
attrs: {
@ -124,8 +130,8 @@ Modal.newInstance = properties => {
computed: {
iconTypeCls () {
return [
`${prefixCls}-body-icon`,
`${prefixCls}-body-icon-${this.iconType}`
`${prefixCls}-head-icon`,
`${prefixCls}-head-icon-${this.iconType}`
];
},
iconNameCls () {
@ -192,19 +198,19 @@ Modal.newInstance = properties => {
switch (props.icon) {
case 'info':
modal.$parent.iconName = 'information-circled';
modal.$parent.iconName = 'ios-information-circle';
break;
case 'success':
modal.$parent.iconName = 'checkmark-circled';
modal.$parent.iconName = 'ios-checkmark-circle';
break;
case 'warning':
modal.$parent.iconName = 'android-alert';
modal.$parent.iconName = 'ios-alert';
break;
case 'error':
modal.$parent.iconName = 'close-circled';
modal.$parent.iconName = 'ios-close-circle';
break;
case 'confirm':
modal.$parent.iconName = 'help-circled';
modal.$parent.iconName = 'ios-help-circle';
break;
}

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

@ -1,18 +1,21 @@
<template>
<div v-transfer-dom :data-transfer="transfer">
<transition :name="transitionNames[1]">
<div :class="maskClasses" v-show="visible" @click="mask"></div>
<div :class="maskClasses" v-show="visible" v-if="showMask" @click="handleMask"></div>
</transition>
<div :class="wrapClasses" @click="handleWrapClick">
<transition :name="transitionNames[0]" @after-leave="animationFinish">
<div :class="classes" :style="mainStyles" v-show="visible">
<div :class="[prefixCls + '-content']">
<div :class="contentClasses" ref="content" :style="contentStyles">
<a :class="[prefixCls + '-close']" v-if="closable" @click="close">
<slot name="close">
<Icon type="ios-close-empty"></Icon>
<Icon type="ios-close"></Icon>
</slot>
</a>
<div :class="[prefixCls + '-header']" v-if="showHead"><slot name="header"><div :class="[prefixCls + '-header-inner']">{{ title }}</div></slot></div>
<div :class="[prefixCls + '-header']"
@mousedown="handleMoveStart"
v-if="showHead"
><slot name="header"><div :class="[prefixCls + '-header-inner']">{{ title }}</div></slot></div>
<div :class="[prefixCls + '-body']"><slot></slot></div>
<div :class="[prefixCls + '-footer']" v-if="!footerHide">
<slot name="footer">
@ -34,6 +37,8 @@
import Emitter from '../../mixins/emitter';
import ScrollbarMixins from './mixins-scrollbar';
import { on, off } from '../../utils/dom';
const prefixCls = 'ivu-modal';
export default {
@ -93,8 +98,22 @@
}
},
transfer: {
type: Boolean,
default () {
return this.$IVIEW.transfer === '' ? true : this.$IVIEW.transfer;
}
},
fullscreen: {
type: Boolean,
default: false
},
mask: {
type: Boolean,
default: true
},
dragable: {
type: Boolean,
default: false
}
},
data () {
@ -103,7 +122,14 @@
wrapShow: false,
showHead: true,
buttonLoading: false,
visible: this.value
visible: this.value,
dragData: {
x: null,
y: null,
dragX: null,
dragY: null,
dragging: false
}
};
},
computed: {
@ -112,7 +138,8 @@
`${prefixCls}-wrap`,
{
[`${prefixCls}-hidden`]: !this.wrapShow,
[`${this.className}`]: !!this.className
[`${this.className}`]: !!this.className,
[`${prefixCls}-no-mask`]: !this.showMask
}
];
},
@ -120,13 +147,32 @@
return `${prefixCls}-mask`;
},
classes () {
return `${prefixCls}`;
return [
`${prefixCls}`,
{
[`${prefixCls}-fullscreen`]: this.fullscreen,
[`${prefixCls}-fullscreen-no-header`]: this.fullscreen && !this.showHead,
[`${prefixCls}-fullscreen-no-footer`]: this.fullscreen && this.footerHide
}
];
},
contentClasses () {
return [
`${prefixCls}-content`,
{
[`${prefixCls}-content-no-mask`]: !this.showMask,
[`${prefixCls}-content-drag`]: this.dragable,
[`${prefixCls}-content-dragging`]: this.dragable && this.dragData.dragging
}
];
},
mainStyles () {
let style = {};
const width = parseInt(this.width);
const styleWidth = {
const styleWidth = this.dragData.x !== null ? {
top: 0
} : {
width: width <= 100 ? `${width}%` : `${width}px`
};
@ -136,6 +182,22 @@
return style;
},
contentStyles () {
let style = {};
if (this.dragable) {
if (this.dragData.x !== null) style.left = `${this.dragData.x}px`;
if (this.dragData.y !== null) style.top = `${this.dragData.y}px`;
const width = parseInt(this.width);
const styleWidth = {
width: width <= 100 ? `${width}%` : `${width}px`
};
Object.assign(style, styleWidth);
}
return style;
},
localeOkText () {
if (this.okText === undefined) {
return this.t('i.modal.okText');
@ -149,6 +211,9 @@
} else {
return this.cancelText;
}
},
showMask () {
return this.dragable ? false : this.mask;
}
},
methods: {
@ -157,15 +222,15 @@
this.$emit('input', false);
this.$emit('on-cancel');
},
mask () {
if (this.maskClosable) {
handleMask () {
if (this.maskClosable && this.showMask) {
this.close();
}
},
handleWrapClick (event) {
// use indexOf,do not use === ,because ivu-modal-wrap can have other custom className
const className = event.target.getAttribute('class');
if (className && className.indexOf(`${prefixCls}-wrap`) > -1) this.mask();
if (className && className.indexOf(`${prefixCls}-wrap`) > -1) this.handleMask();
},
cancel () {
this.close();
@ -188,6 +253,51 @@
},
animationFinish() {
this.$emit('on-hidden');
},
handleMoveStart (event) {
if (!this.dragable) return false;
const $content = this.$refs.content;
const rect = $content.getBoundingClientRect();
this.dragData.x = rect.x;
this.dragData.y = rect.y;
const distance = {
x: event.clientX,
y: event.clientY
};
this.dragData.dragX = distance.x;
this.dragData.dragY = distance.y;
this.dragData.dragging = true;
on(window, 'mousemove', this.handleMoveMove);
on(window, 'mouseup', this.handleMoveEnd);
},
handleMoveMove (event) {
if (!this.dragData.dragging) return false;
const distance = {
x: event.clientX,
y: event.clientY
};
const diff_distance = {
x: distance.x - this.dragData.dragX,
y: distance.y - this.dragData.dragY
};
this.dragData.x += diff_distance.x;
this.dragData.y += diff_distance.y;
this.dragData.dragX = distance.x;
this.dragData.dragY = distance.y;
},
handleMoveEnd () {
this.dragData.dragging = false;
off(window, 'mousemove', this.handleMoveMove);
off(window, 'mouseup', this.handleMoveEnd);
}
},
mounted () {

11
src/components/notice/index.js
View file

@ -10,10 +10,10 @@ let noticeInstance;
let name = 1;
const iconTypes = {
'info': 'information-circled',
'success': 'checkmark-circled',
'warning': 'android-alert',
'error': 'close-circled'
'info': 'ios-information-circle',
'success': 'ios-checkmark-circle',
'warning': 'ios-alert',
'error': 'ios-close-circle'
};
function getNoticeInstance () {
@ -57,11 +57,12 @@ function notice (type, options) {
`;
} else {
const iconType = iconTypes[type];
const outlineIcon = with_desc === '' ? '' : '-outline';
withIcon = true;
content = `
<div class="${prefixCls}-custom-content ${prefixCls}-with-icon ${prefixCls}-with-${type} ${with_desc}">
<span class="${prefixCls}-icon ${prefixCls}-icon-${type}">
<i class="${iconPrefixCls} ${iconPrefixCls}-${iconType}"></i>
<i class="${iconPrefixCls} ${iconPrefixCls}-${iconType}${outlineIcon}"></i>
</span>
<div class="${prefixCls}-title">${title}</div>
<div class="${prefixCls}-desc">${desc}</div>

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

@ -4,7 +4,7 @@
:title="t('i.page.prev')"
:class="prevClasses"
@click="prev">
<a><i class="ivu-icon ivu-icon-ios-arrow-left"></i></a>
<a><i class="ivu-icon ivu-icon-ios-arrow-back"></i></a>
</li>
<div :class="simplePagerClasses" :title="currentPage + '/' + allPages">
<input
@ -22,7 +22,7 @@
:title="t('i.page.next')"
:class="nextClasses"
@click="next">
<a><i class="ivu-icon ivu-icon-ios-arrow-right"></i></a>
<a><i class="ivu-icon ivu-icon-ios-arrow-forward"></i></a>
</li>
</ul>
<ul :class="wrapClasses" :style="styles" v-else>
@ -33,22 +33,24 @@
:title="t('i.page.prev')"
:class="prevClasses"
@click="prev">
<a><i class="ivu-icon ivu-icon-ios-arrow-left"></i></a>
<a><template v-if="prevText !== ''">{{ prevText }}</template><i v-else class="ivu-icon ivu-icon-ios-arrow-back"></i></a>
</li>
<li title="1" :class="firstPageClasses" @click="changePage(1)"><a>1</a></li>
<li :title="t('i.page.prev5')" v-if="currentPage - 3 > 1" :class="[prefixCls + '-item-jump-prev']" @click="fastPrev"><a><i class="ivu-icon ivu-icon-ios-arrow-left"></i></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="currentPage - 3" v-if="currentPage === 5" :class="[prefixCls + '-item']" @click="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 - 1" v-if="currentPage - 1 > 1" :class="[prefixCls + '-item']" @click="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 + 1" v-if="currentPage + 1 < allPages" :class="[prefixCls + '-item']" @click="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="t('i.page.next5')" v-if="currentPage + 3 < allPages" :class="[prefixCls + '-item-jump-next']" @click="fastNext"><a><i class="ivu-icon ivu-icon-ios-arrow-right"></i></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="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="allPages" v-if="allPages > 1" :class="lastPageClasses" @click="changePage(allPages)"><a>{{ allPages }}</a></li>
<li
:title="t('i.page.next')"
:class="nextClasses"
@click="next">
<a><i class="ivu-icon ivu-icon-ios-arrow-right"></i></a>
<a><template v-if="nextText !== ''">{{ nextText }}</template><i v-else class="ivu-icon ivu-icon-ios-arrow-forward"></i></a>
</li>
<Options
:show-sizer="showSizer"
@ -104,7 +106,9 @@
},
transfer: {
type: Boolean,
default: false
default () {
return this.$IVIEW.transfer === '' ? false : this.$IVIEW.transfer;
}
},
size: {
validator (value) {
@ -132,6 +136,14 @@
},
styles: {
type: Object
},
prevText: {
type: String,
default: ''
},
nextText: {
type: String,
default: ''
}
},
data () {
@ -188,7 +200,8 @@
return [
`${prefixCls}-prev`,
{
[`${prefixCls}-disabled`]: this.currentPage === 1
[`${prefixCls}-disabled`]: this.currentPage === 1,
[`${prefixCls}-custom-text`]: this.prevText !== ''
}
];
},
@ -196,7 +209,8 @@
return [
`${prefixCls}-next`,
{
[`${prefixCls}-disabled`]: this.currentPage === this.allPages
[`${prefixCls}-disabled`]: this.currentPage === this.allPages,
[`${prefixCls}-custom-text`]: this.nextText !== ''
}
];
},

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

@ -27,7 +27,7 @@
<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>
<i class="ivu-icon ivu-icon-ios-help-circle"></i>
<div :class="[prefixCls + '-body-message']"><slot name="title">{{ title }}</slot></div>
</div>
<div :class="[prefixCls + '-footer']">
@ -36,9 +36,9 @@
</div>
</div>
<div :class="[prefixCls + '-inner']" v-if="!confirm">
<div :class="[prefixCls + '-title']" v-if="showTitle" ref="title"><slot name="title"><div :class="[prefixCls + '-title-inner']">{{ title }}</div></slot></div>
<div :class="[prefixCls + '-body']">
<div :class="[prefixCls + '-body-content']"><slot name="content"><div :class="[prefixCls + '-body-content-inner']">{{ content }}</div></slot></div>
<div :class="[prefixCls + '-title']" :style="contentPaddingStyle" v-if="showTitle" ref="title"><slot name="title"><div :class="[prefixCls + '-title-inner']">{{ title }}</div></slot></div>
<div :class="[prefixCls + '-body']" :style="contentPaddingStyle">
<div :class="contentClasses"><slot name="content"><div :class="[prefixCls + '-body-content-inner']">{{ content }}</div></slot></div>
</div>
</div>
</div>
@ -96,10 +96,20 @@
},
transfer: {
type: Boolean,
default: false
default () {
return this.$IVIEW.transfer === '' ? false : this.$IVIEW.transfer;
}
},
popperClass: {
type: String
},
wordWrap: {
type: Boolean,
default: false
},
// default by css: 8px 16px
padding: {
type: String
}
},
data () {
@ -149,6 +159,19 @@
} else {
return this.cancelText;
}
},
contentClasses () {
return [
`${prefixCls}-body-content`,
{
[`${prefixCls}-body-content-word-wrap`]: this.wordWrap
}
];
},
contentPaddingStyle () {
const styles = {};
if (this.padding !== '') styles['padding'] = this.padding;
return styles;
}
},
methods: {

22
src/components/progress/progress.vue
View file

@ -2,7 +2,7 @@
<div :class="wrapClasses">
<div :class="outerClasses">
<div :class="innerClasses">
<div :class="bgClasses" :style="bgStyle"></div>
<div :class="bgClasses" :style="bgStyle"></div><div :class="successBgClasses" :style="successBgStyle"></div>
</div>
</div>
<span v-if="!hideInfo" :class="textClasses">
@ -30,6 +30,10 @@
type: Number,
default: 0
},
successPercent: {
type: Number,
default: 0
},
status: {
validator (value) {
return oneOf(value, ['normal', 'active', 'wrong', 'success']);
@ -62,10 +66,10 @@
let type = '';
switch (this.currentStatus) {
case 'wrong':
type = 'ios-close';
type = 'ios-close-circle';
break;
case 'success':
type = 'ios-checkmark';
type = 'ios-checkmark-circle';
break;
}
@ -80,6 +84,15 @@
height: `${this.strokeWidth}px`
};
},
successBgStyle () {
return this.vertical ? {
height: `${this.successPercent}%`,
width: `${this.strokeWidth}px`
} : {
width: `${this.successPercent}%`,
height: `${this.strokeWidth}px`
};
},
wrapClasses () {
return [
`${prefixCls}`,
@ -105,6 +118,9 @@
},
bgClasses () {
return `${prefixCls}-bg`;
},
successBgClasses () {
return `${prefixCls}-success-bg`;
}
},
created () {

3
src/components/radio/radio-group.vue
View file

@ -24,6 +24,9 @@
size: {
validator (value) {
return oneOf(value, ['small', 'large', 'default']);
},
default () {
return this.$IVIEW.size === '' ? 'default' : this.$IVIEW.size;
}
},
type: {

3
src/components/radio/radio.vue
View file

@ -46,6 +46,9 @@
size: {
validator (value) {
return oneOf(value, ['small', 'large', 'default']);
},
default () {
return this.$IVIEW.size === '' ? 'default' : this.$IVIEW.size;
}
},
name: {

47
src/components/rate/rate.vue
View file

@ -5,8 +5,21 @@
v-for="item in count"
:class="starCls(item)"
@mousemove="handleMousemove(item, $event)"
:key="item"
@click="handleClick(item)">
<span :class="[prefixCls + '-star-content']" type="half"></span>
<template v-if="!showCharacter">
<span :class="[prefixCls + '-star-content']" type="half"></span>
</template>
<template v-else>
<span :class="[prefixCls + '-star-first']" type="half">
<template v-if="character !== ''">{{ character }}</template>
<i v-else :class="iconClasses" type="half"></i>
</span>
<span :class="[prefixCls + '-star-second']">
<template v-if="character !== ''">{{ character }}</template>
<i v-else :class="iconClasses"></i>
</span>
</template>
</div>
<div :class="[prefixCls + '-text']" v-if="showText" v-show="currentValue > 0">
<slot><span>{{ currentValue }}</span> <span v-if="currentValue <= 1">{{ t('i.rate.star') }}</span><span v-else>{{ t('i.rate.stars') }}</span></slot>
@ -17,11 +30,14 @@
import Locale from '../../mixins/locale';
import Emitter from '../../mixins/emitter';
import Icon from '../icon/icon.vue';
const prefixCls = 'ivu-rate';
export default {
name: 'Rate',
mixins: [ Locale, Emitter ],
components: { Icon },
props: {
count: {
type: Number,
@ -49,6 +65,18 @@
clearable: {
type: Boolean,
default: false
},
character: {
type: String,
default: ''
},
icon: {
type: String,
default: ''
},
customIcon: {
type: String,
default: ''
}
},
data () {
@ -68,6 +96,18 @@
[`${prefixCls}-disabled`]: this.disabled
}
];
},
iconClasses () {
return [
'ivu-icon',
{
[`ivu-icon-${this.icon}`]: this.icon !== '',
[`${this.customIcon}`]: this.customIcon !== '',
}
];
},
showCharacter () {
return this.character !== '' || this.icon !== '' || this.customIcon !== '';
}
},
watch: {
@ -95,8 +135,9 @@
}
return [
`${prefixCls}-star`,
{
{
[`${prefixCls}-star`]: !this.showCharacter,
[`${prefixCls}-star-chart`]: this.showCharacter,
[`${prefixCls}-star-full`]: (!isLast && full) || (isLast && !this.isHalf),
[`${prefixCls}-star-half`]: isLast && this.isHalf,
[`${prefixCls}-star-zero`]: !full

2
src/components/scroll/loading-component.vue
View file

@ -2,7 +2,7 @@
<div :class="wrapperClasses">
<div :class="spinnerClasses">
<Spin fix>
<Icon type="load-c" size="18" :class="iconClasses"></Icon>
<Icon type="ios-loading" size="18" :class="iconClasses"></Icon>
<div v-if="text" :class="textClasses">{{text}}</div>
</Spin>

6
src/components/select/select-head.vue
View file

@ -2,7 +2,7 @@
<div @click="onHeaderClick">
<div class="ivu-tag ivu-tag-checked" v-for="item in selectedMultiple">
<span class="ivu-tag-text">{{ item.label }}</span>
<Icon type="ios-close-empty" @click.native.stop="removeTag(item)"></Icon>
<Icon type="ios-close" @click.native.stop="removeTag(item)"></Icon>
</div>
<span
:class="singleDisplayClasses"
@ -25,8 +25,8 @@
@blur="onInputFocus"
ref="input">
<Icon type="ios-close" :class="[prefixCls + '-arrow']" v-if="resetSelect" @click.native.stop="onClear"></Icon>
<Icon type="arrow-down-b" :class="[prefixCls + '-arrow']" v-if="!resetSelect && !remote && !disabled"></Icon>
<Icon type="ios-close-circle" :class="[prefixCls + '-arrow']" v-if="resetSelect" @click.native.stop="onClear"></Icon>
<Icon type="ios-arrow-down" :class="[prefixCls + '-arrow']" v-if="!resetSelect && !remote && !disabled"></Icon>
</div>
</template>
<script>

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

@ -71,7 +71,6 @@
</div>
</template>
<script>
import Icon from '../icon';
import Drop from './dropdown.vue';
import {directive as clickOutside} from 'v-click-outside-x';
import TransferDom from '../../directives/transfer-dom';
@ -141,7 +140,7 @@
export default {
name: 'iSelect',
mixins: [ Emitter, Locale ],
components: { FunctionalOptions, Drop, Icon, SelectHead },
components: { FunctionalOptions, Drop, SelectHead },
directives: { clickOutside, TransferDom },
props: {
value: {
@ -188,6 +187,9 @@
size: {
validator (value) {
return oneOf(value, ['small', 'large', 'default']);
},
default () {
return this.$IVIEW.size === '' ? 'default' : this.$IVIEW.size;
}
},
labelInValue: {
@ -205,7 +207,9 @@
},
transfer: {
type: Boolean,
default: false
default () {
return this.$IVIEW.transfer === '' ? false : this.$IVIEW.transfer;
}
},
// Use for AutoComplete
autoComplete: {

5
src/components/spin/spin.vue
View file

@ -20,7 +20,10 @@
props: {
size: {
validator (value) {
return oneOf(value, ['small', 'large']);
return oneOf(value, ['small', 'large', 'default']);
},
default () {
return this.$IVIEW.size === '' ? 'default' : this.$IVIEW.size;
}
},
fix: {

2
src/components/split/index.js Normal file
View file

@ -0,0 +1,2 @@
import Split from './split.vue';
export default Split;

155
src/components/split/split.vue Normal file
View file

@ -0,0 +1,155 @@
<template>
<div ref="outerWrapper" :class="wrapperClasses">
<div v-if="isHorizontal" :class="`${prefix}-horizontal`">
<div :style="{right: `${anotherOffset}%`}" :class="[`${prefix}-pane`, 'left-pane']"><slot name="left"/></div>
<div :class="`${prefix}-trigger-con`" :style="{left: `${offset}%`}" @mousedown="handleMousedown">
<slot name="trigger">
<trigger mode="vertical"/>
</slot>
</div>
<div :style="{left: `${offset}%`}" :class="[`${prefix}-pane`, 'right-pane']"><slot name="right"/></div>
</div>
<div v-else :class="`${prefix}-vertical`">
<div :style="{bottom: `${anotherOffset}%`}" :class="[`${prefix}-pane`, 'top-pane']"><slot name="top"/></div>
<div :class="`${prefix}-trigger-con`" :style="{top: `${offset}%`}" @mousedown="handleMousedown">
<slot name="trigger">
<trigger mode="horizontal"/>
</slot>
</div>
<div :style="{top: `${offset}%`}" :class="[`${prefix}-pane`, 'bottom-pane']"><slot name="bottom"/></div>
</div>
</div>
</template>
<script>
import { oneOf } from '../../utils/assist';
import { on, off } from '../../utils/dom';
import Trigger from './trigger.vue';
export default {
name: 'Split',
components: {
Trigger
},
props: {
value: {
type: [Number, String],
default: 0.5
},
mode: {
validator (value) {
return oneOf(value, ['horizontal', 'vertical']);
},
default: 'horizontal'
},
min: {
type: [Number, String],
default: '40px'
},
max: {
type: [Number, String],
default: '40px'
}
},
/**
* Events
* @on-move-start
* @on-moving 返回值：事件对象，但是在事件对象中加入了两个参数：atMin(当前是否在最小值处), atMax(当前是否在最大值处)
* @on-move-end
*/
data () {
return {
prefix: 'ivu-split',
offset: 0,
oldOffset: 0,
isMoving: false
};
},
computed: {
wrapperClasses () {
return [
`${this.prefix}-wrapper`,
this.isMoving ? 'no-select' : ''
];
},
isHorizontal () {
return this.mode === 'horizontal';
},
anotherOffset () {
return 100 - this.offset;
},
valueIsPx () {
return typeof this.value === 'string';
},
offsetSize () {
return this.isHorizontal ? 'offsetWidth' : 'offsetHeight';
},
computedMin () {
return this.getComputedThresholdValue('min');
},
computedMax () {
return this.getComputedThresholdValue('max');
}
},
methods: {
px2percent (numerator, denominator) {
return parseFloat(numerator) / parseFloat(denominator);
},
getComputedThresholdValue (type) {
let size = this.$refs.outerWrapper[this.offsetSize];
if (this.valueIsPx) return typeof this[type] === 'string' ? this[type] : size * this[type];
else return typeof this[type] === 'string' ? this.px2percent(this[type], size) : this[type];
},
getMin (value1, value2) {
if (this.valueIsPx) return `${Math.min(parseFloat(value1), parseFloat(value2))}px`;
else return Math.min(value1, value2);
},
getMax (value1, value2) {
if (this.valueIsPx) return `${Math.max(parseFloat(value1), parseFloat(value2))}px`;
else return Math.max(value1, value2);
},
getAnotherOffset (value) {
let res = 0;
if (this.valueIsPx) res = `${this.$refs.outerWrapper[this.offsetSize] - parseFloat(value)}px`;
else res = 1 - value;
return res;
},
handleMove (e) {
let pageOffset = this.isHorizontal ? e.pageX : e.pageY;
let offset = pageOffset - this.initOffset;
let outerWidth = this.$refs.outerWrapper[this.offsetSize];
let value = this.valueIsPx ? `${parseFloat(this.oldOffset) + offset}px` : (this.px2percent(outerWidth * this.oldOffset + offset, outerWidth));
let anotherValue = this.getAnotherOffset(value);
if (parseFloat(value) <= parseFloat(this.computedMin)) value = this.getMax(value, this.computedMin);
if (parseFloat(anotherValue) <= parseFloat(this.computedMax)) value = this.getAnotherOffset(this.getMax(anotherValue, this.computedMax));
e.atMin = this.value === this.computedMin;
e.atMax = this.valueIsPx ? this.getAnotherOffset(this.value) === this.computedMax : this.getAnotherOffset(this.value).toFixed(5) === this.computedMax.toFixed(5);
this.$emit('input', value);
this.$emit('on-moving', e);
},
handleUp () {
this.isMoving = false;
off(document, 'mousemove', this.handleMove);
off(document, 'mouseup', this.handleUp);
this.$emit('on-move-end');
},
handleMousedown (e) {
this.initOffset = this.isHorizontal ? e.pageX : e.pageY;
this.oldOffset = this.value;
this.isMoving = true;
on(document, 'mousemove', this.handleMove);
on(document, 'mouseup', this.handleUp);
this.$emit('on-move-start');
}
},
watch: {
value () {
this.offset = (this.valueIsPx ? this.px2percent(this.value, this.$refs.outerWrapper[this.offsetSize]) : this.value) * 10000 / 100;
}
},
mounted () {
this.$nextTick(() => {
this.offset = (this.valueIsPx ? this.px2percent(this.value, this.$refs.outerWrapper[this.offsetSize]) : this.value) * 10000 / 100;
});
}
};
</script>

39
src/components/split/trigger.vue Normal file
View file

@ -0,0 +1,39 @@
<template>
<div :class="classes">
<div :class="barConClasses">
<i :class="`${prefix}-bar`" v-once v-for="i in 8" :key="`trigger-${i}`"></i>
</div>
</div>
</template>
<script>
export default {
name: 'Trigger',
props: {
mode: String
},
data () {
return {
prefix: 'ivu-split-trigger',
initOffset: 0
};
},
computed: {
isVertical () {
return this.mode === 'vertical';
},
classes () {
return [
this.prefix,
this.isVertical ? `${this.prefix}-vertical` : `${this.prefix}-horizontal`
];
},
barConClasses () {
return [
`${this.prefix}-bar-con`,
this.isVertical ? 'vertical' : 'horizontal'
];
}
}
};
</script>

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

@ -69,9 +69,9 @@
icon = this.icon;
} else {
if (this.currentStatus == 'finish') {
icon = 'ios-checkmark-empty';
icon = 'ios-checkmark';
} else if (this.currentStatus == 'error') {
icon = 'ios-close-empty';
icon = 'ios-close';
}
}

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

@ -41,10 +41,17 @@
size: {
validator (value) {
return oneOf(value, ['large', 'small', 'default']);
},
default () {
return this.$IVIEW.size === '' ? 'default' : this.$IVIEW.size;
}
},
name: {
type: String
},
loading: {
type: Boolean,
default: false
}
},
data () {
@ -59,7 +66,8 @@
{
[`${prefixCls}-checked`]: this.currentValue === this.trueValue,
[`${prefixCls}-disabled`]: this.disabled,
[`${prefixCls}-${this.size}`]: !!this.size
[`${prefixCls}-${this.size}`]: !!this.size,
[`${prefixCls}-loading`]: this.loading,
}
];
},
@ -70,7 +78,7 @@
methods: {
toggle (event) {
event.preventDefault();
if (this.disabled) {
if (this.disabled || this.loading) {
return false;
}

29
src/components/table/cell.vue
View file

@ -1,14 +1,21 @@
<template>
<div :class="classes" ref="cell">
<template v-if="renderType === 'index'"><span>{{naturalIndex + 1}}</span></template>
<template v-if="renderType === 'index'"><span>{{ column.indexMethod ? column.indexMethod(row) : (naturalIndex + 1) }}</span></template>
<template v-if="renderType === 'selection'">
<Checkbox :value="checked" @click.native.stop="handleClick" @on-change="toggleSelect" :disabled="disabled"></Checkbox>
</template>
<template v-if="renderType === 'html'"><span v-html="row[column.key]"></span></template>
<template v-if="renderType === 'normal'"><span>{{row[column.key]}}</span></template>
<template v-if="renderType === 'normal'">
<template v-if="column.tooltip">
<Tooltip transfer :content="row[column.key]" :disabled="!showTooltip" :max-width="300" class="ivu-table-cell-tooltip">
<span ref="content" @mouseenter="handleTooltipIn" @mouseleave="handleTooltipOut" class="ivu-table-cell-tooltip-content">{{ row[column.key] }}</span>
</Tooltip>
</template>
<span v-else>{{row[column.key]}}</span>
</template>
<template v-if="renderType === 'expand' && !row._disableExpand">
<div :class="expandCls" @click="toggleExpand">
<Icon type="ios-arrow-right"></Icon>
<Icon type="ios-arrow-forward"></Icon>
</div>
</template>
<Cell
@ -23,10 +30,11 @@
import Cell from './expand';
import Icon from '../icon/icon.vue';
import Checkbox from '../checkbox/checkbox.vue';
import Tooltip from '../tooltip/tooltip.vue';
export default {
name: 'TableCell',
components: { Icon, Checkbox, Cell },
components: { Icon, Checkbox, Cell, Tooltip },
props: {
prefixCls: String,
row: Object,
@ -45,7 +53,8 @@
return {
renderType: '',
uid: -1,
context: this.$parent.$parent.$parent.currentContext
context: this.$parent.$parent.$parent.currentContext,
showTooltip: false, // 鼠标滑过overflow文本时，再检查是否需要显示
};
},
computed: {
@ -55,7 +64,8 @@
{
[`${this.prefixCls}-hidden`]: !this.fixed && this.column.fixed && (this.column.fixed === 'left' || this.column.fixed === 'right'),
[`${this.prefixCls}-cell-ellipsis`]: this.column.ellipsis || false,
[`${this.prefixCls}-cell-with-expand`]: this.renderType === 'expand'
[`${this.prefixCls}-cell-with-expand`]: this.renderType === 'expand',
[`${this.prefixCls}-cell-with-selection`]: this.renderType === 'selection'
}
];
},
@ -77,6 +87,13 @@
},
handleClick () {
// 放置 Checkbox 冒泡
},
handleTooltipIn () {
const $content = this.$refs.content;
this.showTooltip = $content.scrollWidth > $content.offsetWidth;
},
handleTooltipOut () {
this.showTooltip = false;
}
},
created () {

9
src/components/table/table-head.vue
View file

@ -21,8 +21,8 @@
<span v-if="!column.renderHeader" :class="{[prefixCls + '-cell-sort']: column.sortable}" @click="handleSortByHead(getColumn(rowIndex, index)._index)">{{ column.title || '#' }}</span>
<render-header v-else :render="column.renderHeader" :column="column" :index="index"></render-header>
<span :class="[prefixCls + '-sort']" v-if="column.sortable">
<i class="ivu-icon ivu-icon-arrow-up-b" :class="{on: getColumn(rowIndex, index)._sortType === 'asc'}" @click="handleSort(getColumn(rowIndex, index)._index, 'asc')"></i>
<i class="ivu-icon ivu-icon-arrow-down-b" :class="{on: getColumn(rowIndex, index)._sortType === 'desc'}" @click="handleSort(getColumn(rowIndex, index)._index, 'desc')"></i>
<i class="ivu-icon ivu-icon-md-arrow-dropup" :class="{on: getColumn(rowIndex, index)._sortType === 'asc'}" @click="handleSort(getColumn(rowIndex, index)._index, 'asc')"></i>
<i class="ivu-icon ivu-icon-md-arrow-dropdown" :class="{on: getColumn(rowIndex, index)._sortType === 'desc'}" @click="handleSort(getColumn(rowIndex, index)._index, 'desc')"></i>
</span>
<Poptip
v-if="isPopperShow(column)"
@ -32,7 +32,7 @@
transfer
@on-popper-hide="handleFilterHide(getColumn(rowIndex, index)._index)">
<span :class="[prefixCls + '-filter']">
<i class="ivu-icon ivu-icon-funnel" :class="{on: getColumn(rowIndex, index)._isFiltered}"></i>
<i class="ivu-icon ivu-icon-ios-funnel" :class="{on: getColumn(rowIndex, index)._isFiltered}"></i>
</span>
<div slot="content" :class="[prefixCls + '-filter-list']" v-if="getColumn(rowIndex, index)._filterMultiple">
@ -128,7 +128,8 @@
return [
`${this.prefixCls}-cell`,
{
[`${this.prefixCls}-hidden`]: !this.fixed && column.fixed && (column.fixed === 'left' || column.fixed === 'right')
[`${this.prefixCls}-hidden`]: !this.fixed && column.fixed && (column.fixed === 'left' || column.fixed === 'right'),
[`${this.prefixCls}-cell-with-selection`]: column.type === 'selection'
}
];
},

3
src/components/table/table.vue
View file

@ -130,6 +130,9 @@
size: {
validator (value) {
return oneOf(value, ['small', 'large', 'default']);
},
default () {
return this.$IVIEW.size === '' ? 'default' : this.$IVIEW.size;
}
},
width: {

2
src/components/tabs/tabs.vue
View file

@ -19,7 +19,7 @@
<Icon v-if="item.icon !== ''" :type="item.icon"></Icon>
<Render v-if="item.labelType === 'function'" :render="item.label"></Render>
<template v-else>{{ item.label }}</template>
<Icon v-if="showClose(item)" type="ios-close-empty" @click.native.stop="handleRemove(index)"></Icon>
<Icon v-if="showClose(item)" type="ios-close" @click.native.stop="handleRemove(index)"></Icon>
</div>
</div>
</div>

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

@ -3,20 +3,22 @@
<div :class="classes" @click.stop="check" :style="wraperStyles">
<span :class="dotClasses" v-if="showDot" :style="bgColorStyle"></span>
<span :class="textClasses" :style="textColorStyle"><slot></slot></span>
<Icon v-if="closable" :class="iconClass" :color="lineColor" type="ios-close-empty" @click.native.stop="close"></Icon>
<Icon v-if="closable" :class="iconClass" :color="lineColor" type="ios-close" @click.native.stop="close"></Icon>
</div>
</transition>
<div v-else :class="classes" @click.stop="check" :style="wraperStyles">
<span :class="dotClasses" v-if="showDot" :style="bgColorStyle"></span>
<span :class="textClasses" :style="textColorStyle"><slot></slot></span>
<Icon v-if="closable" :class="iconClass" :color="lineColor" type="ios-close-empty" @click.native.stop="close"></Icon>
<Icon v-if="closable" :class="iconClass" :color="lineColor" type="ios-close" @click.native.stop="close"></Icon>
</div>
</template>
<script>
import Icon from '../icon';
import { oneOf } from '../../utils/assist';
const prefixCls = 'ivu-tag';
const initColorList = ['blue', 'green', 'red', 'yellow', 'default'];
const initColorList = ['default', 'primary', 'success', 'warning', 'error', 'blue', 'green', 'red', 'yellow', 'pink', 'magenta', 'volcano', 'orange', 'gold', 'lime', 'cyan', 'geekblue', 'purple'];
const colorList = ['pink', 'magenta', 'volcano', 'orange', 'gold', 'lime', 'cyan', 'geekblue', 'purple'];
export default {
name: 'Tag',
components: { Icon },
@ -74,7 +76,7 @@
return [
`${prefixCls}-text`,
this.type === 'border' ? (oneOf(this.color, initColorList) ? `${prefixCls}-color-${this.color}` : '') : '',
(this.type !== 'dot' && this.type !== 'border' && this.color !== 'default') ? (this.isChecked ? `${prefixCls}-color-white` : '') : ''
(this.type !== 'dot' && this.type !== 'border' && this.color !== 'default') ? (this.isChecked && colorList.indexOf(this.color) < 0 ? `${prefixCls}-color-white` : '') : ''
];
},
dotClasses () {

2
src/components/time/time.js
View file

@ -65,7 +65,7 @@ export const getRelativeTime = timeStamp => {
let resStr = '';
const dirStr = IS_EARLY ? '前' : '后';
// 少于等于59秒
if (diff <= 59) resStr = diff + '秒' + dirStr;
if (diff <= 59) resStr = parseInt(diff) + '秒' + dirStr;
// 多于59秒，少于等于59分钟59秒
else if (diff > 59 && diff <= 3599) resStr = Math.floor(diff / 60) + '分钟' + dirStr;
// 多于59分钟59秒，少于等于23小时59分钟59秒

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

@ -5,7 +5,7 @@
</div>
<transition name="fade">
<div
:class="[prefixCls + '-popper']"
:class="[prefixCls + '-popper', prefixCls + '-' + theme]"
ref="popper"
v-show="!disabled && (visible || always)"
@mouseenter="handleShowPopper"
@ -14,7 +14,7 @@
v-transfer-dom>
<div :class="[prefixCls + '-content']">
<div :class="[prefixCls + '-arrow']"></div>
<div :class="[prefixCls + '-inner']"><slot name="content">{{ content }}</slot></div>
<div :class="innerClasses" :style="innerStyles"><slot name="content">{{ content }}</slot></div>
</div>
</div>
</transition>
@ -60,7 +60,18 @@
},
transfer: {
type: Boolean,
default: false
default () {
return this.$IVIEW.transfer === '' ? false : this.$IVIEW.transfer;
}
},
theme: {
validator (value) {
return oneOf(value, ['dark', 'light']);
},
default: 'dark'
},
maxWidth: {
type: [String, Number]
}
},
data () {
@ -68,6 +79,21 @@
prefixCls: prefixCls
};
},
computed: {
innerStyles () {
const styles = {};
if (this.maxWidth) styles['max-width'] = `${this.maxWidth}px`;
return styles;
},
innerClasses () {
return [
`${prefixCls}-inner`,
{
[`${prefixCls}-inner-with-width`]: !!this.maxWidth
}
];
}
},
watch: {
content () {
this.updatePopper();

4
src/components/transfer/operation.vue
View file

@ -1,10 +1,10 @@
<template>
<div :class="prefixCls + '-operation'">
<i-button type="primary" size="small" :disabled="!rightActive" @click.native="moveToLeft">
<Icon type="ios-arrow-left"></Icon> {{ operations[0] }}
<Icon type="ios-arrow-back"></Icon> <span>{{ operations[0] }}</span>
</i-button>
<i-button type="primary" size="small" :disabled="!leftActive" @click.native="moveToRight">
{{ operations[1] }} <Icon type="ios-arrow-right"></Icon>
<span>{{ operations[1] }}</span> <Icon type="ios-arrow-forward"></Icon>
</i-button>
</div>
</template>

2
src/components/transfer/search.vue
View file

@ -34,7 +34,7 @@
},
computed: {
icon () {
return this.query === '' ? 'ios-search' : 'ios-close';
return this.query === '' ? 'ios-search' : 'ios-close-circle';
}
},
methods: {

4
src/components/tree/node.vue
View file

@ -3,8 +3,8 @@
<ul :class="classes">
<li>
<span :class="arrowClasses" @click="handleExpand">
<Icon v-if="showArrow" type="arrow-right-b"></Icon>
<Icon v-if="showLoading" type="load-c" class="ivu-load-loop"></Icon>
<Icon v-if="showArrow" type="md-arrow-dropright"></Icon>
<Icon v-if="showLoading" type="ios-loading" class="ivu-load-loop"></Icon>
</span>
<Checkbox
v-if="showCheckbox"

10
src/components/upload/upload-list.vue
View file

@ -8,7 +8,7 @@
<Icon :type="format(file)"></Icon> {{ file.name }}
</span>
<Icon
type="ios-close-empty"
type="ios-close"
:class="[prefixCls + '-list-remove']"
v-show="file.status === 'finished'"
@click.native="handleRemove(file)"></Icon>
@ -63,10 +63,10 @@
},
format (file) {
const format = file.name.split('.').pop().toLocaleLowerCase() || '';
let type = 'document';
let type = 'ios-document-outline';
if (['gif','jpg','jpeg','png','bmp','webp'].indexOf(format) > -1) {
type = 'image';
type = 'ios-image';
}
if (['mp4','m3u8','rmvb','avi','swf','3gp','mkv','flv'].indexOf(format) > -1) {
type = 'ios-film';
@ -75,10 +75,10 @@
type = 'ios-musical-notes';
}
if (['doc','txt','docx','pages','epub','pdf'].indexOf(format) > -1) {
type = 'document-text';
type = 'md-document';
}
if (['numbers','csv','xls','xlsx'].indexOf(format) > -1) {
type = 'stats-bars';
type = 'ios-stats';
}
if (['keynote','ppt','pptx'].indexOf(format) > -1) {
type = 'ios-videocam';

Some files were not shown because too many files have changed in this diff Show more