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 ## Who's using iView
- [TalkingData](http://www.talkingdata.com/) - [TalkingData](http://www.talkingdata.com/)
- [Alibaba](http://www.alibaba.com/) - [Alibaba 阿里巴巴](http://www.alibaba.com/)
- [Tencent](https://www.tencent.com/) - [Baidu 百度](https://www.baidu.com/)
- [JD](http://www.jd.com/) - [Tencent 腾讯](https://www.tencent.com/)
- [DiDi](http://www.didichuxing.com/) - [Toutiao 今日头条](https://www.toutiao.com/)
- [Meituan](http://www.meituan.com/) - [JD 京东](http://www.jd.com/)
- [Sina](http://www.sina.com.cn/) - [DiDi 滴滴](http://www.didichuxing.com/)
- [Lenovo](https://www.lenovo.com.cn/) - [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. > 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"> <div class="container">
<nav> <nav>
<ul> <ul>
<li><router-link to="/split">Split</router-link></li>
<li><router-link to="/layout">Layout</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="/affix">Affix</router-link></li>
<li><router-link to="/anchor">Anchor</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="/color-picker">ColorPicker</router-link></li>
<li><router-link to="/auto-complete">AutoComplete</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="/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="/time">Time</router-link></li>
<li><router-link to="/cell">Cell</router-link></li>
</ul> </ul>
</nav> </nav>
<router-view></router-view> <router-view></router-view>

21
examples/main.js
View file

@ -6,11 +6,13 @@ import Vue from 'vue';
import VueRouter from 'vue-router'; import VueRouter from 'vue-router';
import App from './app.vue'; import App from './app.vue';
import iView from '../src/index'; import iView from '../src/index';
import locale from '../src/locale/lang/en-US'; // import locale from '../src/locale/lang/en-US';
// import locale from '../src/locale/lang/zh-CN'; import locale from '../src/locale/lang/zh-CN';
Vue.use(VueRouter); Vue.use(VueRouter);
Vue.use(iView, { locale }); Vue.use(iView, {
locale
});
// 开启debug模式 // 开启debug模式
Vue.config.debug = true; Vue.config.debug = true;
@ -18,7 +20,12 @@ Vue.config.debug = true;
// 路由配置 // 路由配置
const router = new VueRouter({ const router = new VueRouter({
esModule: false, esModule: false,
mode: 'history',
routes: [ routes: [
{
path: '/split',
component: (resolve) => require(['./routers/split.vue'], resolve)
},
{ {
path: '/layout', path: '/layout',
component: (resolve) => require(['./routers/layout.vue'], resolve) component: (resolve) => require(['./routers/layout.vue'], resolve)
@ -207,9 +214,17 @@ const router = new VueRouter({
path: '/scroll', path: '/scroll',
component: (resolve) => require(['./routers/scroll.vue'], resolve) component: (resolve) => require(['./routers/scroll.vue'], resolve)
}, },
{
path: '/divider',
component: (resolve) => require(['./routers/divider.vue'], resolve)
},
{ {
path: '/time', path: '/time',
component: (resolve) => require(['./routers/time.vue'], resolve) 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> <template>
<div> <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="success" show-icon>成功提示文案</Alert>
<Alert type="warning" show-icon banner>警告提示文案</Alert> <Alert type="warning" show-icon>警告提示文案</Alert>
<Alert type="error" show-icon>错误提示文案</Alert> <Alert type="error" show-icon>错误提示文案</Alert>
<Alert show-icon> <Alert show-icon>
消息提示文案 消息提示文案
@ -26,9 +46,20 @@
</Alert> </Alert>
<Alert show-icon closable> <Alert show-icon closable>
自定义图标 自定义图标
<Icon type="ios-lightbulb-outline" slot="icon"></Icon> <Icon type="ios-bulb-outline" slot="icon"></Icon>
<template slot="desc">自定义图标文案自定义图标文案自定义图标文案自定义图标文案自定义图标文案</template> <template slot="desc">自定义图标文案自定义图标文案自定义图标文案自定义图标文案自定义图标文案</template>
</Alert> </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> </div>
</template> </template>
<script> <script>

61
examples/routers/badge.vue
View file

@ -14,10 +14,67 @@
</style> </style>
<template> <template>
<div> <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> <a href="#" class="demo-badge"></a>
</Badge> </Badge>
<Button @click="setCount">set count</Button> <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> </div>
</template> </template>
<script> <script>
@ -25,7 +82,7 @@
props: {}, props: {},
data () { data () {
return { return {
count: 50 count: 5
}; };
}, },
methods: { methods: {

5
examples/routers/breadcrumb.vue
View file

@ -7,8 +7,9 @@
<template> <template>
<div> <div>
<Breadcrumb separator="<b class='demo-breadcrumb-separator'>=></b>"> <Breadcrumb separator="<b class='demo-breadcrumb-separator'>=></b>">
<Breadcrumb-item to="/">Home4</Breadcrumb-item> <Breadcrumb-item to="/button">Home4</Breadcrumb-item>
<Breadcrumb-item :to="{name: 'user', params: { userId: 123 }}">Components</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-item>Breadcrumb</Breadcrumb-item>
</Breadcrumb> </Breadcrumb>
<Breadcrumb separator=""> <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> <template>
<div> <div style="width: 400px;">
<Carousel v-model="v1" dots="outside" @on-change="hc" :autoplay="false"> <Carousel v-model="value1" loop arrow="always" @on-change="handleChange">
<Carousel-item> <CarouselItem>
<div class="demo-case-img"> <div class="demo-carousel">1</div>
<img src="https://file.iviewui.com/dist/84b3cded4163febf9dae090e76129322.png"> </CarouselItem>
</div> <CarouselItem>
</Carousel-item> <div class="demo-carousel">2</div>
<Carousel-item> </CarouselItem>
<div class="demo-case-img"> <CarouselItem>
<img src="https://file.iviewui.com/dist/84b3cded4163febf9dae090e76129322.png"> <div class="demo-carousel">3</div>
</div> </CarouselItem>
</Carousel-item> <CarouselItem>
<Carousel-item> <div class="demo-carousel">4</div>
<div class="demo-case-img"> </CarouselItem>
<img src="https://file.iviewui.com/dist/84b3cded4163febf9dae090e76129322.png">
</div>
</Carousel-item>
</Carousel> </Carousel>
<Button @click="v1 = 2">change</Button> <Button @click="value1 = 2">change</Button>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
data () { data () {
return { return {
v1: 0 value1: 0
} }
}, },
methods: { methods: {
hc (...args) { handleChange (old, newval) {
console.log(args); console.log(old, newval);
} }
} }
} }
</script> </script>
<style lang="less">
.demo-case-img {
img{
width: 500px;
}
}
</style>

106
examples/routers/cascader.vue
View file

@ -1,64 +1,60 @@
<template> <template>
<div> <Cascader :data="data4" :load-data="loadData"></Cascader>
<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>
</template> </template>
<script> <script>
export default { export default {
data () { data () {
return { return {
data: [{ data4: [
value: 1, {
label: '北京', value: 'beijing',
children: [ label: '北京',
{ children: [],
value: 11, loading: false
label: '故宫' },
}, {
{ value: 'hangzhou',
value: 12, label: '杭州',
label: '天坛' children: [],
}, loading:false
{ }
value: 13, ]
label: '王府井' }
} },
] methods: {
}, { loadData (item, callback) {
value: 2, item.loading = true;
label: '江苏', setTimeout(() => {
children: [ if (item.value === 'beijing') {
{ item.children = [
value: 21, {
label: '南京', value: 'talkingdata',
children: [ label: 'TalkingData'
{ },
value: 211, {
label: '夫子庙', value: 'baidu',
} label: '百度'
] },
}, {
{ value: 'sina',
value: 22, label: '新浪'
label: '苏州', }
children: [ ];
{ } else if (item.value === 'hangzhou') {
value: 221, item.children = [
label: '拙政园', {
}, value: 'ali',
{ label: '阿里巴巴'
value: 222, },
label: '狮子林', {
} value: '163',
] label: '网易'
} }
], ];
}], }
value3: [] 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> <template>
<i-circle <div>
:size="250" <i-circle :percent="80">
:trail-width="4" <span class="demo-i-circle-inner" style="font-size:24px">80%</span>
:stroke-width="5" </i-circle>
:percent="75" <i-circle :percent="100" stroke-color="#5cb85c">
stroke-linecap="square" <Icon type="ios-checkmark" size="60" style="color:#5cb85c"></Icon>
stroke-color="#43a3fb"> </i-circle>
<div class="demo-circle-custom"> <i-circle :percent="35" stroke-color="#ff5500">
<h1>{{ 42001776 }}</h1> <span class="demo-i-circle-inner">
<p>消费人群规模</p> <Icon type="ios-close" size="50" style="color:#ff5500"></Icon>
<span> </span>
总占人数 </i-circle>
<i>75%</i> </div>
</span>
</div>
</i-circle>
</template> </template>
<script> <script>
export default { export default {

4
examples/routers/collapse.vue
View file

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

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

@ -5,18 +5,15 @@
<color-picker <color-picker
v-model="color" v-model="color"
placement="bottom-start" placement="bottom-start"
size="large"
@on-change="c1" @on-change="c1"
@on-active-change="c2"></color-picker> @on-active-change="c2"></color-picker>
<Input value="hello" style="display: inline-block" /> <Input value="hello" style="display: inline-block" />
<Date-picker <Date-picker
transfer
type="date" type="date"
placeholder="选择日期" placeholder="选择日期"
style="width: 200px"></Date-picker> style="width: 200px"></Date-picker>
<color-picker <color-picker
ref="xxx" ref="xxx"
:transfer="true"
v-model="color" v-model="color"
:recommend="true" :recommend="true"
format="rgb" format="rgb"
@ -32,17 +29,15 @@
<color-picker <color-picker
v-model="color" v-model="color"
placement="bottom-start" placement="bottom-start"
size="small"></color-picker> ></color-picker>
<Date-picker <Date-picker
type="date" type="date"
placeholder="选择日期" placeholder="选择日期"
size="small"
style="width: 200px"></Date-picker> style="width: 200px"></Date-picker>
<color-picker <color-picker
ref="yyy" ref="yyy"
:colors="colors" :colors="colors"
v-model="color" v-model="color"
transfer
format="rgb" format="rgb"
alpha></color-picker> alpha></color-picker>
<Button @click="setColor">set color</Button> <Button @click="setColor">set color</Button>
@ -57,7 +52,6 @@
v-model="color7" v-model="color7"
:hue="false" :hue="false"
:hide-drop-down="hideDropDown" :hide-drop-down="hideDropDown"
transfer
@on-open-change="onOpenChange"></ColorPicker> @on-open-change="onOpenChange"></ColorPicker>
<br><br><br><br> <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> <template>
<div> <div>
<div> <Dropdown trigger="hover">
<Dropdown trigger="click" style="margin-left: 20px" placement="right-start" > <a href="javascript:void(0)">
<a href="javascript:void(0)"> 下拉菜单
right-start <Icon type="ios-arrow-down"></Icon>
<Icon type="arrow-down-b"></Icon> </a>
</a> <DropdownMenu slot="list">
<DropdownMenu slot="list"> <DropdownItem>驴打滚</DropdownItem>
<DropdownItem>驴打滚</DropdownItem> <DropdownItem>炸酱面</DropdownItem>
<DropdownItem>炸酱面</DropdownItem> <DropdownItem disabled>豆汁儿</DropdownItem>
<DropdownItem>豆汁儿</DropdownItem> <DropdownItem>冰糖葫芦</DropdownItem>
<DropdownItem>冰糖葫芦</DropdownItem> <DropdownItem divided>北京烤鸭</DropdownItem>
<DropdownItem>北京烤鸭</DropdownItem> </DropdownMenu>
</DropdownMenu> </Dropdown>
</Dropdown> <Dropdown trigger="click">
<Dropdown trigger="click" style="margin-left: 20px" placement="right-end" > <a href="javascript:void(0)">
<a href="javascript:void(0)"> 下拉菜单
right-end <Icon type="ios-arrow-down"></Icon>
<Icon type="arrow-down-b"></Icon> </a>
</a> <DropdownMenu slot="list">
<DropdownMenu slot="list"> <DropdownItem>驴打滚</DropdownItem>
<DropdownItem>驴打滚</DropdownItem> <DropdownItem>炸酱面</DropdownItem>
<DropdownItem>炸酱面</DropdownItem> <DropdownItem disabled>豆汁儿</DropdownItem>
<DropdownItem>豆汁儿</DropdownItem> <DropdownItem>冰糖葫芦</DropdownItem>
<DropdownItem>冰糖葫芦</DropdownItem> <DropdownItem divided>北京烤鸭</DropdownItem>
<DropdownItem>北京烤鸭</DropdownItem> </DropdownMenu>
</DropdownMenu> </Dropdown>
</Dropdown> <Dropdown trigger="contextMenu">
<a href="javascript:void(0)">
<Dropdown trigger="click" style="margin-left: 20px" placement="bottom-start" > 下拉菜单
<a href="javascript:void(0)"> <Icon type="ios-arrow-down"></Icon>
bottom-start </a>
<Icon type="arrow-down-b"></Icon> <DropdownMenu slot="list">
</a> <DropdownItem>驴打滚</DropdownItem>
<DropdownMenu slot="list"> <DropdownItem>炸酱面</DropdownItem>
<DropdownItem>驴打滚</DropdownItem> <DropdownItem disabled>豆汁儿</DropdownItem>
<DropdownItem>炸酱面</DropdownItem> <DropdownItem>冰糖葫芦</DropdownItem>
<DropdownItem>豆汁儿</DropdownItem> <DropdownItem divided>北京烤鸭</DropdownItem>
<DropdownItem>冰糖葫芦</DropdownItem> </DropdownMenu>
<DropdownItem>北京烤鸭</DropdownItem> </Dropdown>
</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>
</div> </div>
</template> </template>
<script> <script>

157
examples/routers/input.vue
View file

@ -1,16 +1,161 @@
<template> <template>
<div style="width: 200px;margin: 100px;"> <!--<div>-->
{{ value6 }} <!--<Input v-model="value" placeholder="Enter something..." style="width: 300px"></Input>-->
<Input v-model="value5" type="textarea" placeholder="Enter something..."></Input> <!--<Input v-model="value11">-->
<Input v-model="value6" type="textarea" :rows="4" placeholder="Enter something..."></Input> <!--<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> </div>
</template> </template>
<script> <script>
export default { export default {
data () { data () {
return { return {
value5: '', value: '',
value6: '' 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 () { created () {
this.$Loading.config({ // this.$Loading.config({
color: '#5cb85c', // color: '#5cb85c',
failedColor: '#f0ad4e', // failedColor: '#f0ad4e',
height: 5 // height: 5
}); // });
} }
} }
</script> </script>

6
examples/routers/menu.vue
View file

@ -1,6 +1,6 @@
<template> <template>
<div> <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"> <Submenu name="1">
<template slot="title"> <template slot="title">
<Icon type="ios-analytics"></Icon> <Icon type="ios-analytics"></Icon>
@ -20,8 +20,8 @@
<Icon type="ios-filing"></Icon> <Icon type="ios-filing"></Icon>
Navigation Two Navigation Two
</template> </template>
<MenuItem name="2-1">Option 5</MenuItem> <MenuItem name="2-1" to="/button">Option 5</MenuItem>
<MenuItem name="2-2">Option 6</MenuItem> <MenuItem name="2-2" to="//iviewui.com" target="_blank">Option 6</MenuItem>
<Submenu name="3"> <Submenu name="3">
<template slot="title">Submenu</template> <template slot="title">Submenu</template>
<MenuItem name="3-1">Option 7</MenuItem> <MenuItem name="3-1">Option 7</MenuItem>

63
examples/routers/message.vue
View file

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

54
examples/routers/modal.vue
View file

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

16
examples/routers/notice.vue
View file

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

22
examples/routers/page.vue
View file

@ -1,28 +1,36 @@
<template> <template>
<div> <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 }} {{ current }}
<Button type="primary" @click="subject">- 1</Button> <Button type="primary" @click="subject">- 1</Button>
<Button type="primary" @click="change">Change</Button> <Button type="primary" @click="change">Change</Button>
<Page :current="2" :total="50" simple></Page> <Page :current="2" :total="50" simple></Page>
<div style="margin:10px 0px"> <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>
<div style="margin:10px 0px"> <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>
<div style="margin:100px 0px"> <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>
<div style="margin:100px 0px"> <div style="margin:100px 0px">
<Page :total="500" show-sizer show-elevator transfer ></Page> <Page :total="500" show-sizer show-elevator ></Page>
</div> </div>
<div style="margin:100px 0px"> <div style="margin:100px 0px">
<Page :total="500" show-sizer show-elevator transfer ></Page> <Page :total="500" show-sizer show-elevator ></Page>
</div> </div>
<div style="margin:10px 0px"> <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>
</div> </div>
</template> </template>

2
examples/routers/poptip.vue
View file

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

48
examples/routers/progress.vue
View file

@ -1,42 +1,20 @@
<template> <template>
<div> <div style="height: 300px;">
<i-progress :percent="percent"></i-progress> <Progress vertical :percent="25"></Progress>
<Button-group size="large"> <Progress vertical :percent="45" status="active"></Progress>
<Button icon="ios-plus-empty" @click.native="add"></Button> <Progress vertical :percent="65" status="wrong"></Progress>
<Button icon="ios-minus-empty" @click.native="minus"></Button> <Progress vertical :percent="100"></Progress>
</Button-group> <Progress vertical :percent="25" hide-info></Progress>
<i-progress :percent="25" :stroke-width="5"></i-progress>
<i-progress :percent="100"> <Progress :percent="25"></Progress>
<Icon type="checkmark-circled"></Icon> <Progress :percent="45" status="active"></Progress>
<span>成功</span> <Progress :percent="65" status="wrong"></Progress>
</i-progress> <Progress :percent="100"></Progress>
<i-progress :percent="percent"></i-progress> <Progress :percent="25" hide-info></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> </div>
</template> </template>
<script> <script>
export default { 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> </script>

8
examples/routers/rate.vue
View file

@ -4,6 +4,12 @@
<Rate allow-half v-model="valueHalf"></Rate> <Rate allow-half v-model="valueHalf"></Rate>
<Rate clearable v-model="valueClear"></Rate> <Rate clearable v-model="valueClear"></Rate>
<Rate clearable allow-half v-model="valueClearHalf"></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 v-model="valueText"></Rate>-->
<!--<Rate show-text allow-half v-model="valueCustomText">--> <!--<Rate show-text allow-half v-model="valueCustomText">-->
<!--<span style="color: #f5a623">{{ valueCustomText }}</span>--> <!--<span style="color: #f5a623">{{ valueCustomText }}</span>-->
@ -22,6 +28,8 @@
valueDisabled: 2.4, valueDisabled: 2.4,
valueClear: 1, valueClear: 1,
valueClearHalf: 1.5, 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> <template>
<div> <Select v-model="model1" style="width:200px">
<Select <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
v-model="model1" </Select>
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>
</template> </template>
<script> <script>
export default { export default {
data() { data () {
return { return {
cityList: [ cityList: [
{ {
value: 'New York', value: 'New York',
label: 'New York', label: 'New York'
}, },
{ {
value: '中国', value: 'London',
label: '中国', label: 'London'
}, },
{ {
value: 'Sydney', value: 'Sydney',
label: 'Sydney', label: 'Sydney'
}, },
{ {
value: 'Ottawa', value: 'Ottawa',
label: 'Ottawa', label: 'Ottawa'
}, },
{ {
value: 'Paris', value: 'Paris',
label: 'Paris', label: 'Paris'
}, },
{ {
value: 'Canberra', value: 'Canberra',
label: 'Canberra', label: 'Canberra'
}, }
], ],
model1: '', model1: ''
model10: [], }
model11: [], }
}; }
},
methods: {
onClear() {
console.log('onClear');
},
},
};
</script> </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> <template>
<div> <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="open">开</span>
<span slot="close">关</span> <span slot="close">关</span>
</i-switch> </i-switch>
{{ m1 }} {{ 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> </div>
</template> </template>
<script> <script>
export default { export default {
data () { data () {
return { return {
m1: 'yes' m1: true,
disabled: true,
loading: false
} }
}, },
methods: { methods: {

495
examples/routers/table.vue
View file

@ -1,350 +1,47 @@
<style>
table {
border-collapse: collapse;
border-spacing: 0;
}
</style>
<template> <template>
<div> <div>
<!-- <br><br><br><br><br> --> <Table ref="currentRowTable" :columns="columns3" :data="data1"></Table>
<!-- <Table border :show-header='false' :columns="columns1" height="500" :data="data1"></Table> --> <Button @click="handleClearCurrentRow">Clear</Button>
<!-- <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>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
data () { data () {
return { return {
isCollapsed: false, columns3: [
columns1: [
{ {
title: 'Name', type: 'index',
key: 'name', width: 60,
align: 'center', align: 'center',
minWidth: 100, indexMethod (row) {
maxWidth: 200, return row._index;
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';
}
} }
}, },
{
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', title: 'Name',
key: 'name' key: 'name'
}, },
{ {
title: 'Age', title: 'Age',
key: 'age', key: 'age'
sortable: true
}, },
{ {
title: 'Address', title: 'Address',
key: 'address' key: 'address',
tooltip: true
} }
], ],
data5: [ data1: [
{ {
name: 'John Brown', name: 'John Brown',
age: 18, 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' date: '2016-10-03'
}, },
{ {
name: 'Jim Green', name: 'Jim Green',
age: 24, age: 24,
address: 'London No. 1 Lake Park', address: 'London No. 1 Lake Park自定义渲染列，使用 Vue 的 Render 函',
date: '2016-10-01' date: '2016-10-01'
}, },
{ {
@ -359,172 +56,12 @@ table {
address: 'Ottawa No. 2 Lake Park', address: 'Ottawa No. 2 Lake Park',
date: '2016-10-04' 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: { methods: {
toggleCollapse () { handleClearCurrentRow () {
this.$refs.side.toggleCollapse(); this.$refs.currentRowTable.clearCurrentRow();
},
change () {
this.isCollapsed = !this.isCollapsed;
},
changed (res) {
console.log(res)
}
},
watch: {
isCollapsed (val) {
// console.log(val)
} }
} }
} }

52
examples/routers/tag.vue
View file

@ -1,5 +1,25 @@
<template> <template>
<div> <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 checkable>标签一</Tag>
<Tag>标签二</Tag> <Tag>标签二</Tag>
<Tag v-if="show" closable @on-close="handleClose">标签三</Tag> <Tag v-if="show" closable @on-close="handleClose">标签三</Tag>
@ -9,15 +29,15 @@
<Tag type="dot">标签一</Tag> <Tag type="dot">标签一</Tag>
<Tag type="dot" closable>标签二</Tag> <Tag type="dot" closable>标签二</Tag>
<br><br> <br><br>
<Tag closable color="blue" checkable>标签一</Tag> <Tag closable color="primary" checkable>标签一</Tag>
<Tag closable color="green" checkable>标签二</Tag> <Tag closable color="success" checkable>标签二</Tag>
<Tag closable color="red" checkable>标签三</Tag> <Tag closable color="error" checkable>标签三</Tag>
<Tag closable color="yellow" checkable>标签四</Tag> <Tag closable color="warning" checkable>标签四</Tag>
<br><br> <br><br>
<Tag color="blue" checkable>标签一</Tag> <Tag color="primary" checkable>标签一</Tag>
<Tag color="green" checkable>标签二</Tag> <Tag color="success" checkable>标签二</Tag>
<Tag color="red" checkable>标签三</Tag> <Tag color="error" checkable>标签三</Tag>
<Tag color="yellow" checkable>标签四</Tag> <Tag color="warning" checkable>标签四</Tag>
<br><br> <br><br>
<Tag closable color="#EF6AFF" checkable>标签一</Tag> <Tag closable color="#EF6AFF" checkable>标签一</Tag>
<Tag color="#EF6AFF" checkable>标签一</Tag> <Tag color="#EF6AFF" checkable>标签一</Tag>
@ -30,15 +50,15 @@
<Tag type="dot" closable color="#EF6AFF">标签三</Tag> <Tag type="dot" closable color="#EF6AFF">标签三</Tag>
<Tag closable color="default">标签四</Tag> <Tag closable color="default">标签四</Tag>
<br><br> <br><br>
<Tag type="border" closable color="blue" checkable>标签一</Tag> <Tag type="border" closable color="primary" checkable>标签一</Tag>
<Tag type="border" closable color="green">标签二</Tag> <Tag type="border" closable color="success">标签二</Tag>
<Tag type="border" closable color="red">标签三</Tag> <Tag type="border" closable color="error">标签三</Tag>
<Tag type="border" closable color="yellow">标签四</Tag> <Tag type="border" closable color="warning">标签四</Tag>
<br><br> <br><br>
<Tag type="dot" closable color="blue" checkable>标签一</Tag> <Tag type="dot" closable color="primary" checkable>标签一</Tag>
<Tag type="dot" closable color="green">标签二</Tag> <Tag type="dot" closable color="success">标签二</Tag>
<Tag type="dot" closable color="red">标签三</Tag> <Tag type="dot" closable color="error">标签三</Tag>
<Tag type="dot" closable color="yellow">标签四</Tag> <Tag type="dot" closable color="warning">标签四</Tag>
<br><br> <br><br>
<Tag v-for="item in count" :key="item" :name="item" closable @on-close="handleClose2">标签{{ item + 1 }}</Tag> <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> <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="1526608921" />
<Time :time="1652839997" /> <Time :time="1652839997" />
<Time :time="ddd" :interval="1" /> <Time :time="ddd" :interval="1" />
</div> </div>
</template> </template>
<script> <script>
export default { export default {
data () { data () {
return { return {
ddd: new Date('2018-04-27 14:23:00') ddd: new Date()
}; };
}, },
computed: {}, computed: {},

9
examples/routers/tooltip.vue
View file

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

42
examples/routers/transfer.vue
View file

@ -1,16 +1,27 @@
<template> <template>
<Transfer <Transfer
:data="data1" :data="data3"
:target-keys="targetKeys1" :target-keys="targetKeys3"
:render-format="render1" :list-style="listStyle"
@on-change="handleChange1"></Transfer> :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> </template>
<script> <script>
export default { export default {
data () { data () {
return { return {
data1: this.getMockData(), data3: this.getMockData(),
targetKeys1: this.getTargetKeys() targetKeys3: this.getTargetKeys(),
listStyle: {
width: '250px',
height: '300px'
}
} }
}, },
methods: { methods: {
@ -19,8 +30,8 @@
for (let i = 1; i <= 20; i++) { for (let i = 1; i <= 20; i++) {
mockData.push({ mockData.push({
key: i.toString(), key: i.toString(),
label: '内容' + i, label: 'Content ' + i,
description: '内容' + i + '的描述信息', description: 'The desc of content ' + i,
disabled: Math.random() * 3 < 1 disabled: Math.random() * 3 < 1
}); });
} }
@ -31,14 +42,15 @@
.filter(() => Math.random() * 2 > 1) .filter(() => Math.random() * 2 > 1)
.map(item => item.key); .map(item => item.key);
}, },
render1 (item) { handleChange3 (newTargetKeys) {
return item.label; this.targetKeys3 = newTargetKeys;
}, },
handleChange1 (newTargetKeys, direction, moveKeys) { render3 (item) {
console.log(newTargetKeys); return item.label + ' - ' + item.description;
console.log(direction); },
console.log(moveKeys); reloadMockData () {
this.targetKeys1 = newTargetKeys; 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> <span :class="descClasses"><slot name="desc"></slot></span>
<a :class="closeClasses" v-if="closable" @click="close"> <a :class="closeClasses" v-if="closable" @click="close">
<slot name="close"> <slot name="close">
<Icon type="ios-close-empty"></Icon> <Icon type="ios-close"></Icon>
</slot> </slot>
</a> </a>
</div> </div>
@ -80,19 +80,20 @@
switch (this.type) { switch (this.type) {
case 'success': case 'success':
type = 'checkmark-circled'; type = 'ios-checkmark-circle';
break; break;
case 'info': case 'info':
type = 'information-circled'; type = 'ios-information-circle';
break; break;
case 'warning': case 'warning':
type = 'android-alert'; type = 'ios-alert';
break; break;
case 'error': case 'error':
type = 'close-circled'; type = 'ios-close-circle';
break; break;
} }
if (this.desc) type += '-outline';
return type; return type;
} }
}, },

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

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

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

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

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

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

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

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

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

@ -1,20 +1,25 @@
<template> <template>
<span v-if="dot" :class="classes" ref="badge"> <span v-if="dot" :class="classes" ref="badge">
<slot></slot> <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>
<span v-else :class="classes" ref="badge"> <span v-else :class="classes" ref="badge">
<slot></slot> <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> </span>
</template> </template>
<script> <script>
import { oneOf } from '../../utils/assist';
const prefixCls = 'ivu-badge'; const prefixCls = 'ivu-badge';
export default { export default {
name: 'Badge', name: 'Badge',
props: { props: {
count: [Number, String], count: Number,
dot: { dot: {
type: Boolean, type: Boolean,
default: false default: false
@ -23,7 +28,28 @@
type: [Number, String], type: [Number, String],
default: 99 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: { computed: {
classes () { classes () {
@ -37,11 +63,29 @@
`${prefixCls}-count`, `${prefixCls}-count`,
{ {
[`${this.className}`]: !!this.className, [`${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 () { finalCount () {
if (this.text !== '') return this.text;
return parseInt(this.count) >= parseInt(this.overflowCount) ? `${this.overflowCount}+` : this.count; return parseInt(this.count) >= parseInt(this.overflowCount) ? `${this.overflowCount}+` : this.count;
}, },
badge () { 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 () { alone () {
return this.$slots.default === undefined; return this.$slots.default === undefined;

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

@ -9,7 +9,7 @@
></render-cell> ></render-cell>
</div> </div>
<a :class="[baseClass + '-close']" @click="close" v-if="closable"> <a :class="[baseClass + '-close']" @click="close" v-if="closable">
<i class="ivu-icon ivu-icon-ios-close-empty"></i> <i class="ivu-icon ivu-icon-ios-close"></i>
</a> </a>
</template> </template>
<template v-if="type === 'message'"> <template v-if="type === 'message'">
@ -21,7 +21,7 @@
></render-cell> ></render-cell>
</div> </div>
<a :class="[baseClass + '-close']" @click="close" v-if="closable"> <a :class="[baseClass + '-close']" @click="close" v-if="closable">
<i class="ivu-icon ivu-icon-ios-close-empty"></i> <i class="ivu-icon ivu-icon-ios-close"></i>
</a> </a>
</div> </div>
</template> </template>

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

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

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

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

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

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

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

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

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

@ -1,8 +1,8 @@
<template> <template>
<li :class="classes"> <li :class="classes">
{{ data.label }} {{ data.label }}
<i v-if="showArrow" class="ivu-icon ivu-icon-ios-arrow-right"></i> <i v-if="showArrow" class="ivu-icon ivu-icon-ios-arrow-forward"></i>
<i v-if="showLoading" class="ivu-icon ivu-icon-load-c ivu-load-loop"></i> <i v-if="showLoading" class="ivu-icon ivu-icon-ios-loading ivu-load-loop"></i>
</li> </li>
</template> </template>
<script> <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: { size: {
validator (value) { validator (value) {
return oneOf(value, ['small', 'large', 'default']); 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: { size: {
validator (value) { validator (value) {
return oneOf(value, ['small', 'large', 'default']); return oneOf(value, ['small', 'large', 'default']);
},
default () {
return this.$IVIEW.size === '' ? 'default' : this.$IVIEW.size;
} }
}, },
name: { name: {

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

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

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

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

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

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

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

@ -25,7 +25,7 @@
<div <div
v-show="value === '' && !visible" v-show="value === '' && !visible"
:class="[prefixCls + '-color-empty']"> :class="[prefixCls + '-color-empty']">
<i :class="[iconPrefixCls, iconPrefixCls + '-ios-close-empty']"></i> <i :class="[iconPrefixCls, iconPrefixCls + '-ios-close']"></i>
</div> </div>
<div <div
v-show="value || visible" v-show="value || visible"
@ -87,7 +87,6 @@
ref="clear" ref="clear"
:tabindex="0" :tabindex="0"
size="small" size="small"
type="ghost"
@click.native="handleClear" @click.native="handleClear"
@keydown.enter="handleClear" @keydown.enter="handleClear"
@keydown.native.esc="closer" @keydown.native.esc="closer"
@ -169,11 +168,12 @@ export default {
default: false, default: false,
}, },
size: { size: {
type: String,
validator(value) { validator(value) {
return oneOf(value, ['small', 'large', 'default']); return oneOf(value, ['small', 'large', 'default']);
}, },
default: 'default', default () {
return this.$IVIEW.size === '' ? 'default' : this.$IVIEW.size;
}
}, },
hideDropDown: { hideDropDown: {
type: Boolean, type: Boolean,
@ -201,7 +201,9 @@ export default {
}, },
transfer: { transfer: {
type: Boolean, type: Boolean,
default: false, default () {
return this.$IVIEW.transfer === '' ? false : this.$IVIEW.transfer;
}
}, },
name: { name: {
type: String, type: String,
@ -248,7 +250,7 @@ export default {
arrowClasses() { arrowClasses() {
return [ return [
this.iconPrefixCls, this.iconPrefixCls,
`${this.iconPrefixCls}-arrow-down-b`, `${this.iconPrefixCls}-ios-arrow-down`,
`${this.inputPrefixCls}-icon`, `${this.inputPrefixCls}-icon`,
`${this.inputPrefixCls}-icon-normal`, `${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"> <i-button :class="timeClasses" size="small" type="text" :disabled="timeDisabled" v-if="showTime" @click="handleToggleTime">
{{labels.time}} {{labels.time}}
</i-button> </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}} {{labels.clear}}
</i-button> </i-button>
<i-button size="small" type="primary" @click.native="handleSuccess" @keydown.enter.native="handleSuccess"> <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'"> <div :class="[datePrefixCls + '-header']" v-show="currentView !== 'time'">
<span <span
:class="iconBtnCls('prev', '-double')" :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 <span
v-if="leftPickerTable === 'date-table'" v-if="leftPickerTable === 'date-table'"
:class="iconBtnCls('prev')" :class="iconBtnCls('prev')"
@click="prevMonth('left')" @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
:date-panel-label="leftDatePanelLabel" :date-panel-label="leftDatePanelLabel"
:current-view="leftDatePanelView" :current-view="leftDatePanelView"
@ -24,12 +24,12 @@
<span <span
v-if="splitPanels || leftPickerTable !== 'date-table'" v-if="splitPanels || leftPickerTable !== 'date-table'"
:class="iconBtnCls('next', '-double')" :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 <span
v-if="splitPanels && leftPickerTable === 'date-table'" v-if="splitPanels && leftPickerTable === 'date-table'"
:class="iconBtnCls('next')" :class="iconBtnCls('next')"
@click="nextMonth('left')" @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> </div>
<component <component
:is="leftPickerTable" :is="leftPickerTable"
@ -53,24 +53,24 @@
<span <span
v-if="splitPanels || rightPickerTable !== 'date-table'" v-if="splitPanels || rightPickerTable !== 'date-table'"
:class="iconBtnCls('prev', '-double')" :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 <span
v-if="splitPanels && rightPickerTable === 'date-table'" v-if="splitPanels && rightPickerTable === 'date-table'"
:class="iconBtnCls('prev')" :class="iconBtnCls('prev')"
@click="prevMonth('right')" @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
:date-panel-label="rightDatePanelLabel" :date-panel-label="rightDatePanelLabel"
:current-view="rightDatePanelView" :current-view="rightDatePanelView"
:date-prefix-cls="datePrefixCls"></date-panel-label> :date-prefix-cls="datePrefixCls"></date-panel-label>
<span <span
:class="iconBtnCls('next', '-double')" :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 <span
v-if="rightPickerTable === 'date-table'" v-if="rightPickerTable === 'date-table'"
:class="iconBtnCls('next')" :class="iconBtnCls('next')"
@click="nextMonth('right')" @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> </div>
<component <component
:is="rightPickerTable" :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'"> <div :class="[datePrefixCls + '-header']" v-show="currentView !== 'time'">
<span <span
:class="iconBtnCls('prev', '-double')" :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 <span
v-if="pickerTable === 'date-table'" v-if="pickerTable === 'date-table'"
:class="iconBtnCls('prev')" :class="iconBtnCls('prev')"
@click="changeMonth(-1)" @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
:date-panel-label="datePanelLabel" :date-panel-label="datePanelLabel"
:current-view="pickerTable.split('-').shift()" :current-view="pickerTable.split('-').shift()"
:date-prefix-cls="datePrefixCls"></date-panel-label> :date-prefix-cls="datePrefixCls"></date-panel-label>
<span <span
:class="iconBtnCls('next', '-double')" :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 <span
v-if="pickerTable === 'date-table'" v-if="pickerTable === 'date-table'"
:class="iconBtnCls('next')" :class="iconBtnCls('next')"
@click="changeMonth(+1)" @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>
<div :class="[prefixCls + '-content']"> <div :class="[prefixCls + '-content']">
<component <component

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

@ -171,6 +171,9 @@
size: { size: {
validator (value) { validator (value) {
return oneOf(value, ['small', 'large', 'default']); return oneOf(value, ['small', 'large', 'default']);
},
default () {
return this.$IVIEW.size === '' ? 'default' : this.$IVIEW.size;
} }
}, },
placeholder: { placeholder: {
@ -185,7 +188,9 @@
}, },
transfer: { transfer: {
type: Boolean, type: Boolean,
default: false default () {
return this.$IVIEW.transfer === '' ? false : this.$IVIEW.transfer;
}
}, },
name: { name: {
type: String type: String
@ -259,8 +264,8 @@
}, },
iconType () { iconType () {
let icon = 'ios-calendar-outline'; let icon = 'ios-calendar-outline';
if (this.type === 'time' || this.type === 'timerange') icon = 'ios-clock-outline'; if (this.type === 'time' || this.type === 'timerange') icon = 'ios-time-outline';
if (this.showClose) icon = 'ios-close'; if (this.showClose) icon = 'ios-close-circle';
return icon; return icon;
}, },
transition () { 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" v-click-outside="onClickoutside"
@mouseenter="handleMouseenter" @mouseenter="handleMouseenter"
@mouseleave="handleMouseleave"> @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"> <transition name="transition-drop">
<Drop <Drop
:class="dropdownCls" :class="dropdownCls"
@ -33,7 +33,7 @@
props: { props: {
trigger: { trigger: {
validator (value) { validator (value) {
return oneOf(value, ['click', 'hover', 'custom']); return oneOf(value, ['click', 'hover', 'custom', 'contextMenu']);
}, },
default: 'hover' default: 'hover'
}, },
@ -49,7 +49,9 @@
}, },
transfer: { transfer: {
type: Boolean, type: Boolean,
default: false default () {
return this.$IVIEW.transfer === '' ? false : this.$IVIEW.transfer;
}
} }
}, },
computed: { computed: {
@ -60,6 +62,14 @@
return { return {
[prefixCls + '-transfer']: this.transfer [prefixCls + '-transfer']: this.transfer
}; };
},
relClasses () {
return [
`${prefixCls}-rel`,
{
[`${prefixCls}-rel-user-select-none`]: this.trigger === 'contextMenu'
}
];
} }
}, },
data () { data () {
@ -89,6 +99,13 @@
} }
this.currentVisible = !this.currentVisible; this.currentVisible = !this.currentVisible;
}, },
handleRightClick () {
if (this.trigger === 'custom') return false;
if (this.trigger !== 'contextMenu') {
return false;
}
this.currentVisible = !this.currentVisible;
},
handleMouseenter () { handleMouseenter () {
if (this.trigger === 'custom') return false; if (this.trigger === 'custom') return false;
if (this.trigger !== 'hover') { if (this.trigger !== 'hover') {
@ -113,6 +130,7 @@
}, },
onClickoutside (e) { onClickoutside (e) {
this.handleClose(); this.handleClose();
this.handleRightClose();
if (this.currentVisible) this.$emit('on-clickoutside', e); if (this.currentVisible) this.$emit('on-clickoutside', e);
}, },
handleClose () { handleClose () {
@ -122,6 +140,13 @@
} }
this.currentVisible = false; this.currentVisible = false;
}, },
handleRightClose () {
if (this.trigger === 'custom') return false;
if (this.trigger !== 'contextMenu') {
return false;
}
this.currentVisible = false;
},
hasParent () { hasParent () {
// const $parent = this.$parent.$parent.$parent; // const $parent = this.$parent.$parent.$parent;
const $parent = findComponentUpward(this, 'Dropdown'); const $parent = findComponentUpward(this, 'Dropdown');

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -4,7 +4,7 @@
:title="t('i.page.prev')" :title="t('i.page.prev')"
:class="prevClasses" :class="prevClasses"
@click="prev"> @click="prev">
<a><i class="ivu-icon ivu-icon-ios-arrow-left"></i></a> <a><i class="ivu-icon ivu-icon-ios-arrow-back"></i></a>
</li> </li>
<div :class="simplePagerClasses" :title="currentPage + '/' + allPages"> <div :class="simplePagerClasses" :title="currentPage + '/' + allPages">
<input <input
@ -22,7 +22,7 @@
:title="t('i.page.next')" :title="t('i.page.next')"
:class="nextClasses" :class="nextClasses"
@click="next"> @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> </li>
</ul> </ul>
<ul :class="wrapClasses" :style="styles" v-else> <ul :class="wrapClasses" :style="styles" v-else>
@ -33,22 +33,24 @@
:title="t('i.page.prev')" :title="t('i.page.prev')"
:class="prevClasses" :class="prevClasses"
@click="prev"> @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>
<li title="1" :class="firstPageClasses" @click="changePage(1)"><a>1</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 - 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 - 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" v-if="currentPage != 1 && currentPage != allPages" :class="[prefixCls + '-item',prefixCls + '-item-active']"><a>{{ currentPage }}</a></li>
<li :title="currentPage + 1" v-if="currentPage + 1 < allPages" :class="[prefixCls + '-item']" @click="changePage(currentPage + 1)"><a>{{ currentPage + 1 }}</a></li> <li :title="currentPage + 1" v-if="currentPage + 1 < allPages" :class="[prefixCls + '-item']" @click="changePage(currentPage + 1)"><a>{{ currentPage + 1 }}</a></li>
<li :title="currentPage + 2" v-if="currentPage + 2 < allPages" :class="[prefixCls + '-item']" @click="changePage(currentPage + 2)"><a>{{ currentPage + 2 }}</a></li> <li :title="currentPage + 2" v-if="currentPage + 2 < allPages" :class="[prefixCls + '-item']" @click="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="allPages" v-if="allPages > 1" :class="lastPageClasses" @click="changePage(allPages)"><a>{{ allPages }}</a></li>
<li <li
:title="t('i.page.next')" :title="t('i.page.next')"
:class="nextClasses" :class="nextClasses"
@click="next"> @click="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> </li>
<Options <Options
:show-sizer="showSizer" :show-sizer="showSizer"
@ -104,7 +106,9 @@
}, },
transfer: { transfer: {
type: Boolean, type: Boolean,
default: false default () {
return this.$IVIEW.transfer === '' ? false : this.$IVIEW.transfer;
}
}, },
size: { size: {
validator (value) { validator (value) {
@ -132,6 +136,14 @@
}, },
styles: { styles: {
type: Object type: Object
},
prevText: {
type: String,
default: ''
},
nextText: {
type: String,
default: ''
} }
}, },
data () { data () {
@ -188,7 +200,8 @@
return [ return [
`${prefixCls}-prev`, `${prefixCls}-prev`,
{ {
[`${prefixCls}-disabled`]: this.currentPage === 1 [`${prefixCls}-disabled`]: this.currentPage === 1,
[`${prefixCls}-custom-text`]: this.prevText !== ''
} }
]; ];
}, },
@ -196,7 +209,8 @@
return [ return [
`${prefixCls}-next`, `${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 + '-arrow']"></div>
<div :class="[prefixCls + '-inner']" v-if="confirm"> <div :class="[prefixCls + '-inner']" v-if="confirm">
<div :class="[prefixCls + '-body']"> <div :class="[prefixCls + '-body']">
<i class="ivu-icon ivu-icon-help-circled"></i> <i class="ivu-icon ivu-icon-ios-help-circle"></i>
<div :class="[prefixCls + '-body-message']"><slot name="title">{{ title }}</slot></div> <div :class="[prefixCls + '-body-message']"><slot name="title">{{ title }}</slot></div>
</div> </div>
<div :class="[prefixCls + '-footer']"> <div :class="[prefixCls + '-footer']">
@ -36,9 +36,9 @@
</div> </div>
</div> </div>
<div :class="[prefixCls + '-inner']" v-if="!confirm"> <div :class="[prefixCls + '-inner']" v-if="!confirm">
<div :class="[prefixCls + '-title']" v-if="showTitle" ref="title"><slot name="title"><div :class="[prefixCls + '-title-inner']">{{ title }}</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']"> <div :class="[prefixCls + '-body']" :style="contentPaddingStyle">
<div :class="[prefixCls + '-body-content']"><slot name="content"><div :class="[prefixCls + '-body-content-inner']">{{ content }}</div></slot></div> <div :class="contentClasses"><slot name="content"><div :class="[prefixCls + '-body-content-inner']">{{ content }}</div></slot></div>
</div> </div>
</div> </div>
</div> </div>
@ -96,10 +96,20 @@
}, },
transfer: { transfer: {
type: Boolean, type: Boolean,
default: false default () {
return this.$IVIEW.transfer === '' ? false : this.$IVIEW.transfer;
}
}, },
popperClass: { popperClass: {
type: String type: String
},
wordWrap: {
type: Boolean,
default: false
},
// default by css: 8px 16px
padding: {
type: String
} }
}, },
data () { data () {
@ -149,6 +159,19 @@
} else { } else {
return this.cancelText; 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: { methods: {

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

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

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

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

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

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

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

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

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

@ -2,7 +2,7 @@
<div :class="wrapperClasses"> <div :class="wrapperClasses">
<div :class="spinnerClasses"> <div :class="spinnerClasses">
<Spin fix> <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> <div v-if="text" :class="textClasses">{{text}}</div>
</Spin> </Spin>

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

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

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

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

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

@ -20,7 +20,10 @@
props: { props: {
size: { size: {
validator (value) { validator (value) {
return oneOf(value, ['small', 'large']); return oneOf(value, ['small', 'large', 'default']);
},
default () {
return this.$IVIEW.size === '' ? 'default' : this.$IVIEW.size;
} }
}, },
fix: { 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; icon = this.icon;
} else { } else {
if (this.currentStatus == 'finish') { if (this.currentStatus == 'finish') {
icon = 'ios-checkmark-empty'; icon = 'ios-checkmark';
} else if (this.currentStatus == 'error') { } 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: { size: {
validator (value) { validator (value) {
return oneOf(value, ['large', 'small', 'default']); return oneOf(value, ['large', 'small', 'default']);
},
default () {
return this.$IVIEW.size === '' ? 'default' : this.$IVIEW.size;
} }
}, },
name: { name: {
type: String type: String
},
loading: {
type: Boolean,
default: false
} }
}, },
data () { data () {
@ -59,7 +66,8 @@
{ {
[`${prefixCls}-checked`]: this.currentValue === this.trueValue, [`${prefixCls}-checked`]: this.currentValue === this.trueValue,
[`${prefixCls}-disabled`]: this.disabled, [`${prefixCls}-disabled`]: this.disabled,
[`${prefixCls}-${this.size}`]: !!this.size [`${prefixCls}-${this.size}`]: !!this.size,
[`${prefixCls}-loading`]: this.loading,
} }
]; ];
}, },
@ -70,7 +78,7 @@
methods: { methods: {
toggle (event) { toggle (event) {
event.preventDefault(); event.preventDefault();
if (this.disabled) { if (this.disabled || this.loading) {
return false; return false;
} }

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

@ -1,14 +1,21 @@
<template> <template>
<div :class="classes" ref="cell"> <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'"> <template v-if="renderType === 'selection'">
<Checkbox :value="checked" @click.native.stop="handleClick" @on-change="toggleSelect" :disabled="disabled"></Checkbox> <Checkbox :value="checked" @click.native.stop="handleClick" @on-change="toggleSelect" :disabled="disabled"></Checkbox>
</template> </template>
<template v-if="renderType === 'html'"><span v-html="row[column.key]"></span></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"> <template v-if="renderType === 'expand' && !row._disableExpand">
<div :class="expandCls" @click="toggleExpand"> <div :class="expandCls" @click="toggleExpand">
<Icon type="ios-arrow-right"></Icon> <Icon type="ios-arrow-forward"></Icon>
</div> </div>
</template> </template>
<Cell <Cell
@ -23,10 +30,11 @@
import Cell from './expand'; import Cell from './expand';
import Icon from '../icon/icon.vue'; import Icon from '../icon/icon.vue';
import Checkbox from '../checkbox/checkbox.vue'; import Checkbox from '../checkbox/checkbox.vue';
import Tooltip from '../tooltip/tooltip.vue';
export default { export default {
name: 'TableCell', name: 'TableCell',
components: { Icon, Checkbox, Cell }, components: { Icon, Checkbox, Cell, Tooltip },
props: { props: {
prefixCls: String, prefixCls: String,
row: Object, row: Object,
@ -45,7 +53,8 @@
return { return {
renderType: '', renderType: '',
uid: -1, uid: -1,
context: this.$parent.$parent.$parent.currentContext context: this.$parent.$parent.$parent.currentContext,
showTooltip: false, // 鼠标滑过overflow文本时，再检查是否需要显示
}; };
}, },
computed: { computed: {
@ -55,7 +64,8 @@
{ {
[`${this.prefixCls}-hidden`]: !this.fixed && this.column.fixed && (this.column.fixed === 'left' || this.column.fixed === 'right'), [`${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-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 () { handleClick () {
// 放置 Checkbox 冒泡 // 放置 Checkbox 冒泡
},
handleTooltipIn () {
const $content = this.$refs.content;
this.showTooltip = $content.scrollWidth > $content.offsetWidth;
},
handleTooltipOut () {
this.showTooltip = false;
} }
}, },
created () { 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> <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> <render-header v-else :render="column.renderHeader" :column="column" :index="index"></render-header>
<span :class="[prefixCls + '-sort']" v-if="column.sortable"> <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-md-arrow-dropup" :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-dropdown" :class="{on: getColumn(rowIndex, index)._sortType === 'desc'}" @click="handleSort(getColumn(rowIndex, index)._index, 'desc')"></i>
</span> </span>
<Poptip <Poptip
v-if="isPopperShow(column)" v-if="isPopperShow(column)"
@ -32,7 +32,7 @@
transfer transfer
@on-popper-hide="handleFilterHide(getColumn(rowIndex, index)._index)"> @on-popper-hide="handleFilterHide(getColumn(rowIndex, index)._index)">
<span :class="[prefixCls + '-filter']"> <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> </span>
<div slot="content" :class="[prefixCls + '-filter-list']" v-if="getColumn(rowIndex, index)._filterMultiple"> <div slot="content" :class="[prefixCls + '-filter-list']" v-if="getColumn(rowIndex, index)._filterMultiple">
@ -128,7 +128,8 @@
return [ return [
`${this.prefixCls}-cell`, `${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: { size: {
validator (value) { validator (value) {
return oneOf(value, ['small', 'large', 'default']); return oneOf(value, ['small', 'large', 'default']);
},
default () {
return this.$IVIEW.size === '' ? 'default' : this.$IVIEW.size;
} }
}, },
width: { width: {

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

@ -19,7 +19,7 @@
<Icon v-if="item.icon !== ''" :type="item.icon"></Icon> <Icon v-if="item.icon !== ''" :type="item.icon"></Icon>
<Render v-if="item.labelType === 'function'" :render="item.label"></Render> <Render v-if="item.labelType === 'function'" :render="item.label"></Render>
<template v-else>{{ item.label }}</template> <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> </div>
</div> </div>

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

@ -3,20 +3,22 @@
<div :class="classes" @click.stop="check" :style="wraperStyles"> <div :class="classes" @click.stop="check" :style="wraperStyles">
<span :class="dotClasses" v-if="showDot" :style="bgColorStyle"></span> <span :class="dotClasses" v-if="showDot" :style="bgColorStyle"></span>
<span :class="textClasses" :style="textColorStyle"><slot></slot></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> </div>
</transition> </transition>
<div v-else :class="classes" @click.stop="check" :style="wraperStyles"> <div v-else :class="classes" @click.stop="check" :style="wraperStyles">
<span :class="dotClasses" v-if="showDot" :style="bgColorStyle"></span> <span :class="dotClasses" v-if="showDot" :style="bgColorStyle"></span>
<span :class="textClasses" :style="textColorStyle"><slot></slot></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> </div>
</template> </template>
<script> <script>
import Icon from '../icon'; import Icon from '../icon';
import { oneOf } from '../../utils/assist'; import { oneOf } from '../../utils/assist';
const prefixCls = 'ivu-tag'; 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 { export default {
name: 'Tag', name: 'Tag',
components: { Icon }, components: { Icon },
@ -74,7 +76,7 @@
return [ return [
`${prefixCls}-text`, `${prefixCls}-text`,
this.type === 'border' ? (oneOf(this.color, initColorList) ? `${prefixCls}-color-${this.color}` : '') : '', 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 () { dotClasses () {

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

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

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

@ -5,7 +5,7 @@
</div> </div>
<transition name="fade"> <transition name="fade">
<div <div
:class="[prefixCls + '-popper']" :class="[prefixCls + '-popper', prefixCls + '-' + theme]"
ref="popper" ref="popper"
v-show="!disabled && (visible || always)" v-show="!disabled && (visible || always)"
@mouseenter="handleShowPopper" @mouseenter="handleShowPopper"
@ -14,7 +14,7 @@
v-transfer-dom> v-transfer-dom>
<div :class="[prefixCls + '-content']"> <div :class="[prefixCls + '-content']">
<div :class="[prefixCls + '-arrow']"></div> <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>
</div> </div>
</transition> </transition>
@ -60,7 +60,18 @@
}, },
transfer: { transfer: {
type: Boolean, 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 () { data () {
@ -68,6 +79,21 @@
prefixCls: prefixCls 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: { watch: {
content () { content () {
this.updatePopper(); this.updatePopper();

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

@ -1,10 +1,10 @@
<template> <template>
<div :class="prefixCls + '-operation'"> <div :class="prefixCls + '-operation'">
<i-button type="primary" size="small" :disabled="!rightActive" @click.native="moveToLeft"> <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>
<i-button type="primary" size="small" :disabled="!leftActive" @click.native="moveToRight"> <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> </i-button>
</div> </div>
</template> </template>

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

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

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

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

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

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

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