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

update the master branch to the latest

Browse source
This commit is contained in:
梁灏 2019-08-27 09:42:40 +08:00
parent 67d534df27
commit 23a0ba9831
611 changed files with 122648 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

33
examples/routers/affix.vue Normal file
View file

@ -0,0 +1,33 @@
<style>
body{
/*height: 2000px;*/
}
.demo-affix{
width: 100px;
height: 30px;
background: #f60;
color: #fff
}
</style>
<template>
<div>
<Affix>
<div class="demo-affix">固定在最顶部</div>
</Affix>
<div v-for="(item,index) in arr">{{item}}</div>
</div>
</template>
<script>
export default {
data(){
return {
arr: []
}
},
created(){
for(let i = 0 ; i < 100 ; i++){
this.arr.push(i);
}
}
}
</script>

70
examples/routers/alert.vue Normal file
View file

@ -0,0 +1,70 @@
<template>
<div>
<Alert>
An info prompt
<template slot="desc">Content of prompt. Content of prompt. Content of prompt. Content of prompt. </template>
</Alert>
<Alert type="success">
A success prompt
<template slot="desc">Content of prompt. Content of prompt. Content of prompt. Content of prompt. </template>
</Alert>
<Alert type="warning">
A warning prompt
<template slot="desc">
Content of prompt. Content of prompt. Content of prompt.
</template>
</Alert>
<Alert type="error">
An error prompt
<span slot="desc">
Custom error description copywriting. <Icon type="help-circled" size="14"></Icon>
</span>
</Alert>
<Alert type="info" show-icon closable>消息提示文案</Alert>
<Alert type="success" show-icon>成功提示文案</Alert>
<Alert type="warning" show-icon>警告提示文案</Alert>
<Alert type="error" show-icon>错误提示文案</Alert>
<Alert show-icon>
消息提示文案
<template slot="desc">消息提示的描述文案消息提示的描述文案消息提示的描述文案消息提示的描述文案消息提示的描述文案</template>
</Alert>
<Alert type="success" show-icon>
成功提示文案
<span slot="desc">成功的提示描述文案成功的提示描述文案成功的提示描述文案成功的提示描述文案成功的提示描述文案</span>
</Alert>
<Alert type="warning" show-icon>
警告提示文案
<template slot="desc">
警告的提示描述文案警告的提示描述文案警告的提示描述文案
</template>
</Alert>
<Alert type="error" show-icon>
错误提示文案
<span slot="desc">
自定义错误描述文案。
</span>
</Alert>
<Alert show-icon closable>
自定义图标
<Icon type="ios-bulb-outline" slot="icon"></Icon>
<template slot="desc">自定义图标文案自定义图标文案自定义图标文案自定义图标文案自定义图标文案</template>
</Alert>
<Alert banner type="warning">Notice: notification contents...</Alert>
<Alert banner closable type="warning">Notice: notification contents...</Alert>
<Alert closable>An info prompt</Alert>
<Alert type="success" show-icon closable>
A success prompt
<span slot="desc">Content of prompt. Content of prompt. Content of prompt. Content of prompt. </span>
</Alert>
<Alert type="warning" closable>
Custom closing content
<span slot="close">No longer prompt</span>
</Alert>
</div>
</template>
<script>
import { Alert, Icon } from 'iview';
export default {
components: { Alert, Icon }
}
</script>

114
examples/routers/anchor.vue Normal file
View file

@ -0,0 +1,114 @@
<template>
<div class="anchor-wrapper">
<div class="link-wrapper">
<Button @click="changeCon">修改为Window</Button>
<Button @click="andLink">添加一个连接</Button>
<Anchor :bounds="100" @on-change="handleChange" @on-select="handleSelect" :style="{right: '100px'}" :affix="true" :offset-top="30" :scroll-offset="100" :container="scrollCon" show-ink>
<AnchorLink v-if="(link - 1) % 30 === 0" v-for="link in 300" :key="`link${link}`" :href="`#title-${link}`" :title="`title-${link}`">
<AnchorLink :scroll-offset="20" v-if="link === 61" href="#title-child-69" title="title-child-69"/>
</AnchorLink>
<AnchorLink :scroll-offset="200" href="#lishi" title="李氏专跳"/>
<AnchorLink v-if="showNewLink" href="#new-link" title="这是动态添加的连接"/>
</Anchor>
</div>
<div v-if="con === 'div'" ref="listWrapper" id="listWrapper" class="list-wrapper">
<div style="height: 100px;"></div>
<template v-for="i in 300">
<h1 v-if="(i - 1) % 30 === 0" :key="`h1${i}`" :id="`title-${i}`">{{ `title-${i}` }}</h1>
<h1 v-if="i === 69" :key="`h1${i}`" :id="`title-child-${i}`">{{ `title-${i}` }}</h1>
<h1 v-if="i === 75" :key="`h1${i}`" :id="`title-child-${i}`">{{ `title-${i}` }}</h1>
<p v-else :key="`p${i}`">{{ `content-row-index-${i}` }}</p>
<Collapse v-if="i === 3" v-model="value1" :key="`collapse-${i}`">
<Panel name="1">
史蒂夫·乔布斯
<p v-for="index in 50" :key="`ppp-${index}`" slot="content">{{ index }}</p>
</Panel>
<Panel name="2">
斯蒂夫·盖瑞·沃兹尼亚克
<p slot="content">斯蒂夫·盖瑞·沃兹尼亚克（Stephen Gary Wozniak），美国电脑工程师，曾与史蒂夫·乔布斯合伙创立苹果电脑（今之苹果公司）。斯蒂夫·盖瑞·沃兹尼亚克曾就读于美国科罗拉多大学，后转学入美国著名高等学府加州大学伯克利分校（UC Berkeley）并获得电机工程及计算机（EECS）本科学位（1987年）。</p>
</Panel>
<Panel name="3">
乔纳森·伊夫
<p slot="content">乔纳森·伊夫是一位工业设计师，现任Apple公司设计师兼资深副总裁，英国爵士。他曾参与设计了iPod，iMac，iPhone，iPad等众多苹果产品。除了乔布斯，他是对苹果那些著名的产品最有影响力的人。</p>
</Panel>
</Collapse>
</template>
<h1 id="lishi">李氏专跳</h1>
<p v-for="i in 100" :key="`chinese-${i}`">这是信息司大是大非胜多负少的{{i}}</p>
<!-- <h1 id="new-link">这是新添加的哦哦哦哦哦 哦 </h1>
<p v-for="i in 50" :key="`new-${i}`">这是信息司大是大非胜多负少的{{i}}</p> -->
</div>
<div v-else>
<template v-for="i in 300">
<h1 v-if="(i - 1) % 30 === 0" :key="`h1${i}`" :id="`title-${i}`">{{ `title-${i}` }}</h1>
<h1 v-if="i === 69" :key="`h1${i}`" :id="`title-child-${i}`">{{ `title-${i}` }}</h1>
<h1 v-if="i === 75" :key="`h1${i}`" :id="`title-child-${i}`">{{ `title-${i}` }}</h1>
<p v-else :key="`p${i}`">{{ `content-row-index-${i}` }}</p>
<Collapse v-if="i === 3" v-model="value1" :key="`collapse-${i}`">
<Panel name="1">
史蒂夫·乔布斯
<p v-for="index in 50" :key="`ppp-${index}`" slot="content">{{ index }}</p>
</Panel>
<Panel name="2">
斯蒂夫·盖瑞·沃兹尼亚克
<p slot="content">斯蒂夫·盖瑞·沃兹尼亚克（Stephen Gary Wozniak），美国电脑工程师，曾与史蒂夫·乔布斯合伙创立苹果电脑（今之苹果公司）。斯蒂夫·盖瑞·沃兹尼亚克曾就读于美国科罗拉多大学，后转学入美国著名高等学府加州大学伯克利分校（UC Berkeley）并获得电机工程及计算机（EECS）本科学位（1987年）。</p>
</Panel>
<Panel name="3">
乔纳森·伊夫
<p slot="content">乔纳森·伊夫是一位工业设计师，现任Apple公司设计师兼资深副总裁，英国爵士。他曾参与设计了iPod，iMac，iPhone，iPad等众多苹果产品。除了乔布斯，他是对苹果那些著名的产品最有影响力的人。</p>
</Panel>
</Collapse>
</template>
<h1 id="new-link">这是新添加的哦哦哦哦哦 哦 </h1>
<p v-for="i in 50" :key="`new-${i}`">这是信息司大是大非胜多负少的{{i}}</p>
<h1 id="lishi">李氏专跳</h1>
<p v-for="i in 50" :key="`chinese-${i}`">这是信息司大是大非胜多负少的{{i}}</p>
</div>
</div>
</template>
<script>
export default {
data () {
return {
container: null,
value1: '1',
scrollCon: '',
con: 'div',
showNewLink: false
}
},
methods: {
changeCon () {
this.con = 'window';
this.scrollCon = undefined;
},
handleChange (newHref, oldHref) {
console.log(`${oldHref} => ${newHref}`)
},
handleSelect (href) {
console.log(`select ${href}`)
},
andLink () {
this.showNewLink = true;
}
},
mounted () {
this.scrollCon = this.$refs.listWrapper
}
}
</script>
<style lang="less">
.anchor-wrapper{
.link-wrapper{
position: absolute;
top: 200px;
right: 100px;
width: 200px;
}
.list-wrapper{
height: 600px;
overflow: auto;
}
}
</style>

40
examples/routers/auto-complete.vue Normal file
View file

@ -0,0 +1,40 @@
<template>
<div style="margin: 100px;width: 200px;">
<AutoComplete placement="top" transfer v-model="value" icon="ios-search" :data="data" @on-search="handleSearch" @on-change="hc" :filter-method="fm">
<!--<Option v-for="item in data" :value="item" :label="item" :key="item">-->
<!--<span style="color: red">{{ item }}</span>-->
<!--</Option>-->
</AutoComplete>
</div>
</template>
<script>
export default {
props: {
},
data () {
return {
value: '',
data: [],
// data: ['Burns Bay Road', 'Downing Street', 'Wall Street']
};
},
computed: {},
methods: {
handleSearch (value) {
this.data = !value ? [] : [
value + '@qq.com',
value + '@sina.com',
value + '@163.com'
]
},
hc (v) {
// console.log(v)
},
fm (value, item) {
return item.toUpperCase().indexOf(value.toUpperCase()) !== -1;
}
}
};
</script>

62
examples/routers/avatar.vue Normal file
View file

@ -0,0 +1,62 @@
<template>
<div class="demo-avatar">
<Avatar :style="{background: color}">{{ user }}</Avatar>
<Button size="small" @click="handleChange">Change</Button>
<div>
<div class="demo-avatar">
<Avatar icon="ios-person" size="large" />
<Avatar icon="ios-person" />
<Avatar icon="ios-person" size="small" />
</div>
<div class="demo-avatar">
<Avatar shape="square" icon="ios-person" size="large" />
<Avatar shape="square" icon="ios-person" />
<Avatar shape="square" icon="ios-person" size="small" />
</div>
</div>
<div class="demo-avatar">
<Avatar icon="ios-person" />
<Avatar>U</Avatar>
<Avatar>USER</Avatar>
<Avatar src="https://i.loli.net/2017/08/21/599a521472424.jpg" />
<Avatar style="color: #f56a00;background-color: #fde3cf">U</Avatar>
<Avatar style="background-color: #87d068" icon="ios-person" />
</div>
<div class="demo-avatar-badge">
<Badge :count="1">
<Avatar shape="square" icon="ios-person" />
</Badge>
<Badge dot>
<Avatar shape="square" icon="ios-person" />
</Badge>
</div>
<br><br><br>
<Avatar custom-icon="ivu-icon-ios-person" />
<Avatar :src="src" size="large" @on-error="handleError" />
</div>
</template>
<script>
const UserList = ['二', '小二', '三', '二个人'];
const ColorList = ['#f56a00', '#7265e6', '#ffbf00', '#00a2ae'];
export default {
data () {
return {
user: UserList[0],
color: ColorList[0],
src: 'https://dev-file.iviewui.com/userinfoPDvn9gKWYihR24SpgC319vXY8qniCqj41/avatar'
}
},
methods: {
handleChange () {
const index = UserList.indexOf(this.user);
this.user = index < UserList.length - 1 ? UserList[index + 1] : UserList[0];
this.color = index < ColorList.length - 1 ? ColorList[index + 1] : ColorList[0];
},
handleError () {
this.src = 'https://dev-file.iviewui.com/userinfoPDvn9gKWYihR24SpgC319vXY8qniCqj4/avatar';
}
}
}
</script>

22
examples/routers/back-top.vue Normal file
View file

@ -0,0 +1,22 @@
<style>
body{
/*height: 2000px;*/
}
</style>
<template>
<BackTop>
</BackTop>
</template>
<script>
export default {
data(){
return {
}
},
mounted(){
}
}
</script>

94
examples/routers/badge.vue Normal file
View file

@ -0,0 +1,94 @@
<style scoped>
.demo-badge{
width: 42px;
height: 42px;
background: #eee;
border-radius: 6px;
display: inline-block;
}
</style>
<style>
.demo-badge-alone{
background: #5cb85c !important;
}
</style>
<template>
<div>
<Badge :count="count">
<a href="#" class="demo-badge"></a>
</Badge>
<Badge :count="0" showZero>
<a href="#" class="demo-badge"></a>
</Badge>
<Button @click="setCount">set count</Button>
<br><br>
<Badge text="hot">
<Button type="ghost">Hello</Button>
</Badge>
<br><br>
<div>
<Badge status="success" />
<Badge status="error" />
<Badge status="default" />
<Badge status="processing" />
<Badge status="warning" />
<br />
<Badge status="success" text="Success" />
<br />
<Badge status="error" text="Error" />
<br />
<Badge status="default" text="Default" />
<br />
<Badge status="processing" text="Processing" />
<br />
<Badge status="warning" text="Warning" />
</div>
<div style="margin: 50px">
<Badge dot>
<a href="//iviewui.com">我是一个链接</a>
</Badge>
<br><br>
<Badge :count="10" :offset="[-5, -5]">
<a href="//iviewui.com">我是一个链接</a>
</Badge>
</div>
<div>
<Badge :count="count" type="primary">
<a href="#" class="demo-badge"></a>
</Badge>
<Badge :count="count" type="success">
<a href="#" class="demo-badge"></a>
</Badge>
<Badge :count="count" type="normal">
<a href="#" class="demo-badge"></a>
</Badge>
<Badge :count="count" type="info">
<a href="#" class="demo-badge"></a>
</Badge>
<Badge :count="count" type="error">
<a href="#" class="demo-badge"></a>
</Badge>
<Badge :count="count" type="warning">
<a href="#" class="demo-badge"></a>
</Badge>
<Badge :count="count">
<a href="#" class="demo-badge"></a>
</Badge>
</div>
</div>
</template>
<script>
export default {
props: {},
data () {
return {
count: 5
};
},
methods: {
setCount () {
this.count = 10;
}
}
};
</script>

36
examples/routers/breadcrumb.vue Normal file
View file

@ -0,0 +1,36 @@
<style>
.demo-breadcrumb-separator{
color: #ff5500;
padding: 0 5px;
}
</style>
<template>
<div>
<Breadcrumb separator="<b class='demo-breadcrumb-separator'>=></b>">
<Breadcrumb-item to="/button">Home4</Breadcrumb-item>
<Breadcrumb-item to="//iviewui.com" target="_blank">Home4</Breadcrumb-item>
<Breadcrumb-item :to="{name: 'icon', params: { userId: 123 }}">Components</Breadcrumb-item>
<Breadcrumb-item>Breadcrumb</Breadcrumb-item>
</Breadcrumb>
<Breadcrumb separator="">
<Breadcrumb-item href="/">
<template>Home</template>
<template slot="separator">
<b style="color: #ff5500;">-></b>
</template>
</Breadcrumb-item>
<Breadcrumb-item href="/components/page">
<template>Breadcrumb</template>
<template slot="separator">
<b style="color: #ff5500;">-></b>
</template>
</Breadcrumb-item>
<Breadcrumb-item>Breadcrumb</Breadcrumb-item>
</Breadcrumb>
</div>
</template>
<script>
export default {
}
</script>

528
examples/routers/button.vue Normal file
View file

File diff suppressed because one or more lines are too long

88
examples/routers/card.vue Normal file
View file

@ -0,0 +1,88 @@
<template>
<Card style="width:350px">
<p slot="title">
<Icon type="ios-film-outline"></Icon>
<span>经典电影</span>
</p>
<a href="#" slot="extra" @click.prevent="changeLimit">
<Icon type="ios-loop-strong"></Icon>
换一换
</a>
<ul>
<li v-for="item in movieList">
<a :href="item.url" target="_blank">{{ item.name }}</a>
<span>
<!--<Icon type="ios-star" v-for="n in 4"></Icon><Icon type="ios-star" v-if="item.rate >= 9.5"></Icon><Icon type="ios-star-half" v-else></Icon>-->
{{ item.rate }}
</span>
</li>
</ul>
</Card>
</template>
<script>
export default {
data () {
return {
limitNum: 5,
limitFrom: 0,
movieList: [
{
name: '肖申克的救赎',
url: 'https://movie.douban.com/subject/1292052/',
rate: 9.6
},
{
name: '这个杀手不太冷',
url: 'https://movie.douban.com/subject/1295644/',
rate: 9.4
},
{
name: '霸王别姬',
url: 'https://movie.douban.com/subject/1291546/',
rate: 9.5
},
{
name: '阿甘正传',
url: 'https://movie.douban.com/subject/1292720/',
rate: 9.4
},
{
name: '美丽人生',
url: 'https://movie.douban.com/subject/1292063/',
rate: 9.5
},
{
name: '千与千寻',
url: 'https://movie.douban.com/subject/1291561/',
rate: 9.2
},
{
name: '辛德勒的名单',
url: 'https://movie.douban.com/subject/1295124/',
rate: 9.4
},
{
name: '海上钢琴师',
url: 'https://movie.douban.com/subject/1292001/',
rate: 9.2
},
{
name: '机器人总动员',
url: 'https://movie.douban.com/subject/2131459/',
rate: 9.3
},
{
name: '盗梦空间',
url: 'https://movie.douban.com/subject/3541415/',
rate: 9.2
}
]
}
},
methods: {
changeLimit () {
this.limitFrom = this.limitFrom === 0 ? 5 : 0;
}
}
}
</script>

43
examples/routers/carousel.vue Normal file
View file

@ -0,0 +1,43 @@
<style>
.demo-carousel{
height: 200px;
line-height: 200px;
text-align: center;
color: #fff;
font-size: 20px;
background: #506b9e;
}
</style>
<template>
<div style="width: 400px;">
<Carousel v-model="value1" loop arrow="always" @on-change="handleChange">
<CarouselItem>
<div class="demo-carousel">1</div>
</CarouselItem>
<CarouselItem>
<div class="demo-carousel">2</div>
</CarouselItem>
<CarouselItem>
<div class="demo-carousel">3</div>
</CarouselItem>
<CarouselItem>
<div class="demo-carousel">4</div>
</CarouselItem>
</Carousel>
<Button @click="value1 = 2">change</Button>
</div>
</template>
<script>
export default {
data () {
return {
value1: 0
}
},
methods: {
handleChange (old, newval) {
console.log(old, newval);
}
}
}
</script>

77
examples/routers/cascader.vue Normal file
View file

@ -0,0 +1,77 @@
<template>
<div>
<Row>
<i-col span="18">
<i-button v-on:click="setValue">setValue</i-button>
</i-col>
<i-col span="4">
<Cascader :data="data" v-model="value1" transfer></Cascader>
</i-col>
</Row>
</div>
</template>
<script>
export default {
data () {
return {
value1: [],
data: [{
value: '9ecec83c-cf6b-4cfe-aa75-eb3510875331',
label: '北京',
children: [{
value: 'a873a9bd-7d75-4f46-9369-4d25a1feb13c',
label: '故宫'
}, {
value: 'tiantan',
label: '天坛'
}, {
value: 'wangfujing',
label: '王府井'
}]
}, {
value: 'ca7c0fbc-728d-42e8-b111-f5f73cf9171b',
label: '江苏',
children: [{
value: 'a89d891b-5c50-44c0-87b4-d4f934edc921',
label: '南京',
children: [{
value: '44736384-0ede-41ba-bf7a-59c84241851a',
label: '夫子庙中国第一庙来自南京',
children:[{
value: '44736384-0ede-41ba-bf7a-59c84241851c',
label:'自定义产品系统来自黑龙江地区'
}]
}]
}, {
value: 'suzhou',
label: '苏州',
children: [{
value: 'zhuozhengyuan',
label: '拙政园',
}, {
value: 'shizilin',
label: '狮子林',
}]
}],
}]
}
},
methods: {
setValue() {
var v = "ca7c0fbc-728d-42e8-b111-f5f73cf9171b,a89d891b-5c50-44c0-87b4-d4f934edc921,44736384-0ede-41ba-bf7a-59c84241851a";
var x = v.split(',')
var x1 = x[0].toString();
var x2 = x[1].toString();
var x3 = x[2].toString();
this.value1 = x;
}
},
mounted () {
}
}
</script>
<style>
</style>

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" target="_blank"></Cell>
</CellGroup>
</Card>
</div>
</template>
<script>
export default {
data(){
return {
switch1: false
}
},
methods: {
handleClick (name) {
console.log(name);
}
}
}
</script>

58
examples/routers/checkbox.vue Normal file
View file

@ -0,0 +1,58 @@
<template>
<div>
<Checkbox
:indeterminate="true"
:value="false"
size="large">全选</Checkbox>
<Checkbox
:indeterminate="true"
:value="false"
size="default">全选</Checkbox>
<Checkbox
:indeterminate="true"
:value="false"
size="small">全选</Checkbox>
<div>
<Checkbox size="large" true-value="true" false-value="false" v-model="testValue1">Apple</Checkbox>
<Checkbox true-value="true" false-value="false" v-model="testValue1" disabled>Apple</Checkbox>
<Checkbox size="small" true-value="true" false-value="false" v-model="testValue1">Apple</Checkbox>
{{ testValue1 }}
</div>
<div>
<Checkbox :true-value="0" :false-value="1" v-model="testValue2">test number</Checkbox>
{{ testValue2 }}
</div>
<Checkbox-group v-model="fruit" size="large">
<Checkbox v-for="item in tags" :label="item.label" :key="item.label" true-value="true"></Checkbox>
</Checkbox-group>
<div>{{ fruit }}</div>
</div>
</template>
<script>
export default {
data () {
return {
social: ['facebook', 'github'],
fruit: ['苹果'],
tags: [],
testValue1: null,
testValue2: null
};
},
mounted () {
setTimeout(() => {
this.tags = [
{
label: '香蕉'
},
{
label: '苹果'
},
{
label: '西瓜'
}
];
}, 1000);
}
};
</script>

20
examples/routers/circle.vue Normal file
View file

@ -0,0 +1,20 @@
<template>
<div>
<i-circle :percent="80">
<span class="demo-i-circle-inner" style="font-size:24px">80%</span>
</i-circle>
<i-circle :percent="100" stroke-color="#5cb85c">
<Icon type="ios-checkmark" size="60" style="color:#5cb85c"></Icon>
</i-circle>
<i-circle :percent="35" stroke-color="#ff5500">
<span class="demo-i-circle-inner">
<Icon type="ios-close" size="50" style="color:#ff5500"></Icon>
</span>
</i-circle>
</div>
</template>
<script>
export default {
}
</script>

58
examples/routers/collapse.vue Normal file
View file

@ -0,0 +1,58 @@
<template>
<div>
<Collapse accordion v-model="value3" simple>
<Panel name="1" hide-arrow>
史蒂夫·乔布斯
<div slot="content">
史蒂夫·乔布斯（Steve Jobs），1955年2月24日生于美国加利福尼亚州旧金山，美国发明家、企业家、美国苹果公司联合创办人。
<Collapse accordion v-model="value4">
<Panel name="1-1">
iPhone
<p slot="content">iPhone，是美国苹果公司研发的智能手机，它搭载iOS操作系统。第一代iPhone于2007年1月9日由苹果公司前首席执行官史蒂夫·乔布斯发布，并在2007年6月29日正式发售。</p>
</Panel>
<Panel name="1-2">
iPad
<p slot="content">iPad是由苹果公司于2010年开始发布的平板电脑系列，定位介于苹果的智能手机iPhone和笔记本电脑产品之间，（屏幕中有4个虚拟程序固定栏）与iPhone布局一样，提供浏览网站、收发电子邮件、观看电子书、播放音频或视频、玩游戏等功能。由英国出生的设计主管乔纳森·伊夫（Jonathan Ive）（有些翻译为 乔纳森·艾维）领导的团队设计的，这个圆滑、超薄的产品反映出了伊夫对德国天才设计师Dieter Rams的崇敬之情。</p>
</Panel>
</Collapse>
</div>
</Panel>
<Panel name="2">
斯蒂夫·盖瑞·沃兹尼亚克
<p slot="content">斯蒂夫·盖瑞·沃兹尼亚克（Stephen Gary Wozniak），美国电脑工程师，曾与史蒂夫·乔布斯合伙创立苹果电脑（今之苹果公司）。斯蒂夫·盖瑞·沃兹尼亚克曾就读于美国科罗拉多大学，后转学入美国著名高等学府加州大学伯克利分校（UC Berkeley）并获得电机工程及计算机（EECS）本科学位（1987年）。</p>
</Panel>
<Panel name="3">
乔纳森·伊夫
<p slot="content">乔纳森·伊夫是一位工业设计师，现任Apple公司设计师兼资深副总裁，英国爵士。他曾参与设计了iPod，iMac，iPhone，iPad等众多苹果产品。除了乔布斯，他是对苹果那些著名的产品最有影响力的人。</p>
</Panel>
</Collapse>
<br/>
<br/>
<Collapse v-model="value5">
<Panel name="21">
斯蒂夫·盖瑞·沃兹尼亚克
<p slot="content">斯蒂夫·盖瑞·沃兹尼亚克（Stephen Gary Wozniak），美国电脑工程师，曾与史蒂夫·乔布斯合伙创立苹果电脑（今之苹果公司）。斯蒂夫·盖瑞·沃兹尼亚克曾就读于美国科罗拉多大学，后转学入美国著名高等学府加州大学伯克利分校（UC Berkeley）并获得电机工程及计算机（EECS）本科学位（1987年）。</p>
</Panel>
<Panel name="22">
乔纳森·伊夫
<p slot="content">乔纳森·伊夫是一位工业设计师，现任Apple公司设计师兼资深副总裁，英国爵士。他曾参与设计了iPod，iMac，iPhone，iPad等众多苹果产品。除了乔布斯，他是对苹果那些著名的产品最有影响力的人。</p>
</Panel>
<Panel name="23">
乔纳森·伊夫
<p slot="content">乔纳森·伊夫是一位工业设计师，现任Apple公司设计师兼资深副总裁，英国爵士。他曾参与设计了iPod，iMac，iPhone，iPad等众多苹果产品。除了乔布斯，他是对苹果那些著名的产品最有影响力的人。</p>
</Panel>
</Collapse>
</div>
</template>
<script>
export default {
data () {
return {
value3: ['1', '2', '3'],
value4: '1-1',
value5: ['21', '22', '23']
};
}
};
</script>

13
examples/routers/color-picker.vue Normal file
View file

@ -0,0 +1,13 @@
<template>
<ColorPicker v-model="color1" transfer />
</template>
<script>
export default {
data () {
return {
color1: '#19be6b',
color2: ''
}
}
}
</script>

32
examples/routers/custem-menu-item.vue Normal file
View file

@ -0,0 +1,32 @@
<template>
<Submenu :name="`${parentName}`">
<template slot="title">
<span>{{ parentItem.name }}</span>
</template>
<template v-for="item in children">
<custem-menu-item v-if="item.children && item.children.length !== 0" :key="`menu-${item.name}`" :parent-item="item"></custem-menu-item>
<menu-item v-else :name="`${item.name}`" :key="`menu-${item.name}`">{{ item.name }}</menu-item>
</template>
</Submenu>
</template>
<script>
export default {
name: 'custemMenuItem',
props: {
parentItem: {
type: Object,
default: () => {}
},
theme: String,
iconSize: Number
},
computed: {
parentName () {
return this.parentItem.name
},
children () {
return this.parentItem.children
}
}
}
</script>

269
examples/routers/date.vue Normal file
View file

@ -0,0 +1,269 @@
<!--
<template>
<div>
{{ value1 }}
<Date-picker v-model="value1" type="datetimerange" placeholder="选择日期" style="width: 200px" @on-change="hc"></Date-picker>
<Button @click="setDate">set date</Button>
<Button @click="getDate">get date</Button>
&lt;!&ndash;<Date-picker v-model="value2" type="daterange" placeholder="选择日期" style="width: 200px"></Date-picker>&ndash;&gt;
&lt;!&ndash;<Date-picker transfer type="datetimerange" placeholder="选择日期" style="width: 200px" @on-change="changeDate"></Date-picker>&ndash;&gt;
</div>
</template>
<script>
export default {
data () {
return {
value1: ['2014-10-10 10:00:01', '2017-10-10 10:00:00'],
value2: []
}
},
methods: {
changeDate(date){
console.log(date);
},
setDate () {
this.value1 = ['2016-10-10', '2017-10-10'];
},
getDate () {
const date = new Date(this.value1);
console.log(date.getMonth()+1)
},
hc (d) {
console.log(d);
}
}
}
</script>
<style>
body{
width: 100%;
}
</style>
-->
<!--<template>-->
<!--<row>-->
<!--<i-col span="12">-->
<!--<Date-picker type="date" :options="options1" placeholder="选择日期" style="width: 200px"></Date-picker>-->
<!--</i-col>-->
<!--<i-col span="12">-->
<!--<Date-picker type="daterange" :options="options2" placement="bottom-end" placeholder="选择日期" style="width: 200px"></Date-picker>-->
<!--</i-col>-->
<!--</row>-->
<!--</template>-->
<!--<script>-->
<!--export default {-->
<!--data () {-->
<!--return {-->
<!--options1: {-->
<!--shortcuts: [-->
<!--{-->
<!--text: '今天',-->
<!--value () {-->
<!--return new Date();-->
<!--},-->
<!--onClick: (picker) => {-->
<!--this.$Message.info('点击了今天');-->
<!--}-->
<!--},-->
<!--{-->
<!--text: '昨天',-->
<!--value () {-->
<!--const date = new Date();-->
<!--date.setTime(date.getTime() - 3600 * 1000 * 24);-->
<!--return date;-->
<!--},-->
<!--onClick: (picker) => {-->
<!--this.$Message.info('点击了昨天');-->
<!--}-->
<!--},-->
<!--{-->
<!--text: '一周前',-->
<!--value () {-->
<!--const date = new Date();-->
<!--date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);-->
<!--return date;-->
<!--},-->
<!--onClick: (picker) => {-->
<!--this.$Message.info('点击了一周前');-->
<!--}-->
<!--}-->
<!--]-->
<!--},-->
<!--options2: {-->
<!--shortcuts: [-->
<!--{-->
<!--text: '最近一周',-->
<!--value () {-->
<!--const end = new Date();-->
<!--const start = new Date();-->
<!--start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);-->
<!--return [start, end];-->
<!--}-->
<!--},-->
<!--{-->
<!--text: '最近一个月',-->
<!--value () {-->
<!--const end = new Date();-->
<!--const start = new Date();-->
<!--start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);-->
<!--return [start, end];-->
<!--}-->
<!--},-->
<!--{-->
<!--text: '最近三个月',-->
<!--value () {-->
<!--const end = new Date();-->
<!--const start = new Date();-->
<!--start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);-->
<!--return [start, end];-->
<!--}-->
<!--}-->
<!--]-->
<!--}-->
<!--}-->
<!--}-->
<!--}-->
<!--</script>-->
<!--<template>-->
<!--<row>-->
<!--<i-col span="12">-->
<!--<Date-picker :value="value1" format="yyyy年MM月dd日" type="date" placeholder="选择日期" style="width: 200px"></Date-picker>-->
<!--</i-col>-->
<!--<i-col span="12">-->
<!--<Date-picker :value="value2" format="yyyy/MM/dd" type="daterange" placement="bottom-end" placeholder="选择日期" style="width: 200px"></Date-picker>-->
<!--</i-col>-->
<!--</row>-->
<!--</template>-->
<!--<script>-->
<!--export default {-->
<!--data () {-->
<!--return {-->
<!--value1: '2016-01-01',-->
<!--value2: ['2016-01-01', '2016-02-15']-->
<!--}-->
<!--}-->
<!--}-->
<!--</script>-->
<!--<template>-->
<!--<div>-->
<!--<div style="width: 50%; float: left;">-->
<!--<Date-picker type="date" placeholder="选择日期和时间" style="width: 200px"></Date-picker> | Single date, no date-->
<!--<br>-->
<!--<Date-picker type="datetime" placeholder="选择日期和时间" style="width: 200px"></Date-picker> | Single datetime, no date-->
<!--<br>-->
<!--<Date-picker type="datetime" v-model="dateString" placeholder="选择日期和时间" style="width: 200px"></Date-picker> | Single datetime, string date-->
<!--<br>-->
<!--<Date-picker type="datetime" v-model="singleDate" placeholder="选择日期和时间" style="width: 200px"></Date-picker> | Single datetime, date object-->
<!--<br>-->
<!--<Date-picker type="datetime" format="yyyy-MM-dd HH:mm" placeholder="选择日期和时间（不含秒）" style="width: 200px"></Date-picker> | Single datetime, format yyyy-MM-dd HH:mm-->
<!--<br>-->
<!--<Date-picker type="date" multiple style="width: 200px"></Date-picker> | Single date, multiple-->
<!--<br>-->
<!--<Date-picker type="date" multiple style="width: 200px" show-week-numbers></Date-picker> | Single date, multiple, show week numbers-->
<!--<br>-->
<!--<Date-picker type="date" format="yyyy-MM-dd HH:mm" placeholder="选择日期和时间（不含秒）" style="width: 200px"></Date-picker> | Single date, format MM-dd HH:mm-->
<!--<br>-->
<!--<Date-picker type="datetime" :start-date="minDate" v-model="singleDate" placeholder="选择日期和时间" style="width: 200px"></Date-picker> | Single datetime, date object, start date-->
<!--<br>-->
<!--</div>-->
<!--<div style="width: 50%; float: right;">-->
<!--<Date-picker type="datetimerange" :value="dateRange" placeholder="选择日期和时间" style="width: 300px"></Date-picker> | DateTimeRange, date objects-->
<!--<br>-->
<!--<Date-picker type="daterange" placeholder="选择日期和时间" style="width: 300px"></Date-picker> | Range, no dates-->
<!--<br>-->
<!--<Date-picker type="daterange" split-panels placeholder="选择日期和时间" style="width: 300px"></Date-picker> | Range, no dates, split panels-->
<!--<br>-->
<!--<Date-picker type="datetimerange" format="yyyy-MM-dd HH:mm" placeholder="选择日期和时间（不含秒）" style="width: 300px"></Date-picker> | DateTimeRange, format yyyy-MM-dd HH:mm-->
<!--</div>-->
<!--<div style="width: 50%; float: right;">-->
<!--<TimePicker type="timerange" placeholder="Select time" style="width: 168px"></TimePicker>-->
<!--</div>-->
<!--</div>-->
<!--</template>-->
<!--<script>-->
<!--export default {-->
<!--data(){-->
<!--const now = new Date().getTime();-->
<!--const oneMonth = 2592e6;-->
<!--return {-->
<!--dateString: '2018-01-03 20:52:59',-->
<!--singleDate: new Date(1978, 4, 10),-->
<!--dateRange: [new Date(2010, 4, 1), new Date()],-->
<!--minDate: new Date(2010, 4, 1),-->
<!--maxDate: new Date(now + oneMonth)-->
<!--}-->
<!--}-->
<!--}-->
<!--</script>-->
<!--<template>-->
<!--<row>-->
<!--<i-col span="12">-->
<!--<Time-picker type="time" placeholder="选择时间" style="width: 168px"></Time-picker>-->
<!--</i-col>-->
<!--<i-col span="12">-->
<!--<Time-picker type="timerange" placement="bottom-end" placeholder="选择时间" style="width: 168px"></Time-picker>-->
<!--</i-col>-->
<!--</row>-->
<!--</template>-->
<!--<script>-->
<!--export default {-->
<!--data () {-->
<!--return {-->
<!--t1: ''-->
<!--}-->
<!--}-->
<!--}-->
<!--</script>-->
<!--<template>-->
<!--<div>-->
<!--<DatePicker v-model="value" @on-change="handleChange" type="daterange" placeholder="Select date" style="width: 200px"></DatePicker>-->
<!--</div>-->
<!--</template>-->
<!--<script>-->
<!--export default {-->
<!--data () {-->
<!--return {-->
<!--value: []-->
<!--}-->
<!--},-->
<!--methods: {-->
<!--handleChange (v) {-->
<!--console.log(v);-->
<!--}-->
<!--}-->
<!--}-->
<!--</script>-->
<template>
<div style="width: 500px;margin: 100px;">
<p><input type="text"></p>
<DatePicker type="month" show-week-numbers placeholder="Select date" style="width: 200px"></DatePicker>
<DatePicker type="year" show-week-numbers placeholder="Select date" style="width: 200px"></DatePicker>
<DatePicker type="date" transfer show-week-numbers placeholder="Select date" style="width: 400px"></DatePicker>
<DatePicker type="datetime" show-week-numbers confirm placeholder="Select date" style="width: 400px"></DatePicker>
<DatePicker type="daterange" transfer show-week-numbers placeholder="Select date" style="width: 400px"></DatePicker>
<DatePicker type="datetimerange" transfer show-week-numbers placeholder="Select date" style="width: 400px"></DatePicker>
<Time-Picker :steps="[1, 1, 15]" :value="new Date()"></Time-Picker>
</div>
</template>
<script>
export default {
}
</script>

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

@ -0,0 +1,96 @@
<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 size="small">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>iView Developer</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 orientation="left" size="small">iView Developer</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 orientation="right">iView Developer</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>
<Divider type="vertical" dashed />
<a href="#">ABCDE</a>
</div>
</Card>
</i-col>
</Row>
</template>
<script>
export default {}
</script>
<style>
</style>

235
examples/routers/drawer.vue Normal file
View file

@ -0,0 +1,235 @@
<template>
<div>
<Button @click="visible = true">show1</Button>
<Button @click="visible2 = true">show2</Button>
<Button @click="visible3 = true">show3</Button>
<div style="width: 500px;height:500px;background: green;position: relative;">
<Drawer v-model="visible" placement="left" :before-close="handleBeforeClose" draggable inner :transfer="false" width="50" @on-resize-width="hrw" title="抽屉标题" :styles="styles" @on-close="handleClose">
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<Button @click="visible2 = true">show2</Button>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
</Drawer>
</div>
<Drawer v-model="visible2" draggable title="抽屉标题" placement="right">
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容22</p>
</Drawer>
<Drawer v-model="visible3" draggable placement="left">
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容22</p>
</Drawer>
</div>
</template>
<script>
export default {
data () {
return {
visible: false,
visible2: false,
visible3: false,
styles: {
height: 'calc(100% - 55px)',
paddingBottom: '53px',
},
ms: {
backgroundColor: 'rgba(255,0,255,0.5)'
}
};
},
methods: {
handleClose () {
this.$Message.info('关闭了');
},
hrw (w) {
console.log(w);
},
handleBeforeClose () {
return new Promise((resolve, reject) => {
this.$Modal.confirm({
title: '关闭确认',
content: '您确认要关闭抽屉吗？',
onOk: () => {
resolve();
},
onCancel: () => {
reject();
}
});
});
}
}
};
</script>
<style>
body{
height: 2000px;
}
</style>

48
examples/routers/dropdown.vue Normal file
View file

@ -0,0 +1,48 @@
<template>
<div>
<Dropdown trigger="hover">
<a href="javascript:void(0)">
下拉菜单
<Icon type="ios-arrow-down"></Icon>
</a>
<DropdownMenu slot="list">
<DropdownItem>驴打滚</DropdownItem>
<DropdownItem selected>炸酱面</DropdownItem>
<DropdownItem disabled>豆汁儿</DropdownItem>
<DropdownItem>冰糖葫芦</DropdownItem>
<DropdownItem divided>北京烤鸭</DropdownItem>
</DropdownMenu>
</Dropdown>
<Dropdown trigger="click">
<a href="javascript:void(0)">
下拉菜单
<Icon type="ios-arrow-down"></Icon>
</a>
<DropdownMenu slot="list">
<DropdownItem>驴打滚</DropdownItem>
<DropdownItem selected>炸酱面</DropdownItem>
<DropdownItem disabled>豆汁儿</DropdownItem>
<DropdownItem>冰糖葫芦</DropdownItem>
<DropdownItem divided>北京烤鸭</DropdownItem>
</DropdownMenu>
</Dropdown>
<Dropdown trigger="contextMenu">
<a href="javascript:void(0)">
下拉菜单
<Icon type="ios-arrow-down"></Icon>
</a>
<DropdownMenu slot="list">
<DropdownItem>驴打滚</DropdownItem>
<DropdownItem>炸酱面</DropdownItem>
<DropdownItem disabled>豆汁儿</DropdownItem>
<DropdownItem>冰糖葫芦</DropdownItem>
<DropdownItem divided>北京烤鸭</DropdownItem>
</DropdownMenu>
</Dropdown>
</div>
</template>
<script>
export default {
}
</script>

503
examples/routers/form.vue Normal file
View file

@ -0,0 +1,503 @@
<!--<template>-->
<!--<div>-->
<!--<Tabs type="card">-->
<!--<TabPane label="默认大小">-->
<!--<Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">-->
<!--<Form-item label-for="autocomplete" prop="name">-->
<!--<span slot="label"><Icon type="ionic"></Icon></span>-->
<!--<AutoComplete element-id="autocomplete" v-model="formValidate.name" :data="['Li','Liang','Zhang']" placeholder="请输入姓名" icon="ios-search"></AutoComplete>-->
<!--</Form-item>-->
<!--<Form-item label-for="input" label="介绍" prop="desc">-->
<!--<Input element-id="input" icon="ios-search" v-model="formValidate.desc" type="text" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入..."></Input>-->
<!--</Form-item>-->
<!--<Form-item label="邮箱" prop="mail">-->
<!--&lt;!&ndash;<Input v-model="formValidate.mail" placeholder="请输入邮箱"></Input>&ndash;&gt;-->
<!--<ColorPicker v-model="formValidate.mail"></ColorPicker>-->
<!--</Form-item>-->
<!--<Form-item label-for="select" label="城市" prop="city">-->
<!--<Select element-id="select" filterable v-model="formValidate.city" placeholder="请选择所在地">-->
<!--<Option value="beijing">北京市</Option>-->
<!--<Option value="shanghai">上海市</Option>-->
<!--<Option value="shenzhen">深圳市</Option>-->
<!--</Select>-->
<!--</Form-item>-->
<!--<Form-item label-for="date" label="选择日期" prop="date">-->
<!--<Date-picker element-id="date" type="date" placeholder="选择日期" v-model="formValidate.date"></Date-picker>-->
<!--</Form-item>-->
<!--<Form-item label-for="cascader" label="级联选择" prop="cascader">-->
<!--<Cascader elementId="cascader" :data="dataCascader" v-model="formValidate.cascader"></Cascader>-->
<!--</Form-item>-->
<!--<Form-item label-for="inputnumber" label="数字框" prop="inputnumber">-->
<!--<InputNumber elementId="inputnumber" :max="10" :min="1" v-model="formValidate.inputnumber"></InputNumber>-->
<!--</Form-item>-->
<!--<Form-item label="选择日期">-->
<!--<Row>-->
<!--<Col span="11">-->
<!--<Form-item prop="date">-->
<!--<Date-picker type="date" placeholder="选择日期" v-model="formValidate.date"></Date-picker>-->
<!--</Form-item>-->
<!--</Col>-->
<!--<Col span="2" style="text-align: center">-</Col>-->
<!--<Col span="11">-->
<!--<Form-item prop="time">-->
<!--<Time-picker type="time" placeholder="选择时间" v-model="formValidate.time"></Time-picker>-->
<!--</Form-item>-->
<!--</Col>-->
<!--</Row>-->
<!--</Form-item>-->
<!--<Form-item label="性别" prop="gender">-->
<!--<Radio-group v-model="formValidate.gender">-->
<!--<Radio label="male">男</Radio>-->
<!--<Radio label="female">女</Radio>-->
<!--</Radio-group>-->
<!--</Form-item>-->
<!--<Form-item label="爱好" prop="interest">-->
<!--<Checkbox-group v-model="formValidate.interest">-->
<!--<Checkbox label="吃饭"></Checkbox>-->
<!--<Checkbox label="睡觉"></Checkbox>-->
<!--<Checkbox label="跑步"></Checkbox>-->
<!--<Checkbox label="看电影"></Checkbox>-->
<!--</Checkbox-group>-->
<!--</Form-item>-->
<!--<Form-item>-->
<!--<Button type="primary" @click="handleSubmit('formValidate')" icon="ios-cloud-upload-outline">提交</Button>-->
<!--<Button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px" icon="ios-reload">重置</Button>-->
<!--</Form-item>-->
<!--</Form>-->
<!--</TabPane>-->
<!--<TabPane label="小表单">-->
<!--<Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">-->
<!--<Form-item label-for="autocomplete" prop="name">-->
<!--<span slot="label"><Icon type="ionic"></Icon></span>-->
<!--<AutoComplete element-id="autocomplete" v-model="formValidate.name" :data="['Li','Liang','Zhang']" placeholder="请输入姓名" icon="ios-search" size="small"></AutoComplete>-->
<!--</Form-item>-->
<!--<Form-item label-for="input" label="介绍" prop="desc">-->
<!--<Input element-id="input" icon="ios-search" size="small" v-model="formValidate.desc" type="text" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入..."></Input>-->
<!--</Form-item>-->
<!--<Form-item label="邮箱" prop="mail">-->
<!--&lt;!&ndash;<Input v-model="formValidate.mail" placeholder="请输入邮箱"></Input>&ndash;&gt;-->
<!--<ColorPicker v-model="formValidate.mail" size="small"></ColorPicker>-->
<!--</Form-item>-->
<!--<Form-item label-for="select" label="城市" prop="city">-->
<!--<Select element-id="select" filterable v-model="formValidate.city" placeholder="请选择所在地" size="small">-->
<!--<Option value="beijing">北京市</Option>-->
<!--<Option value="shanghai">上海市</Option>-->
<!--<Option value="shenzhen">深圳市</Option>-->
<!--</Select>-->
<!--</Form-item>-->
<!--<Form-item label-for="date" label="选择日期" prop="date">-->
<!--<Date-picker element-id="date" type="date" placeholder="选择日期" v-model="formValidate.date" size="small"></Date-picker>-->
<!--</Form-item>-->
<!--<Form-item label-for="cascader" label="级联选择" prop="cascader">-->
<!--<Cascader elementId="cascader" :data="dataCascader" v-model="formValidate.cascader" size="small"></Cascader>-->
<!--</Form-item>-->
<!--<Form-item label-for="inputnumber" label="数字框" prop="inputnumber">-->
<!--<InputNumber elementId="inputnumber" :max="10" :min="1" v-model="formValidate.inputnumber" size="small"></InputNumber>-->
<!--</Form-item>-->
<!--<Form-item label="选择日期">-->
<!--<Row>-->
<!--<Col span="11">-->
<!--<Form-item prop="date">-->
<!--<Date-picker type="date" placeholder="选择日期" v-model="formValidate.date" size="small"></Date-picker>-->
<!--</Form-item>-->
<!--</Col>-->
<!--<Col span="2" style="text-align: center">-</Col>-->
<!--<Col span="11">-->
<!--<Form-item prop="time">-->
<!--<Time-picker type="time" placeholder="选择时间" v-model="formValidate.time" size="small"></Time-picker>-->
<!--</Form-item>-->
<!--</Col>-->
<!--</Row>-->
<!--</Form-item>-->
<!--<Form-item label="性别" prop="gender">-->
<!--<Radio-group v-model="formValidate.gender" size="small">-->
<!--<Radio label="male">男</Radio>-->
<!--<Radio label="female">女</Radio>-->
<!--</Radio-group>-->
<!--</Form-item>-->
<!--<Form-item label="爱好" prop="interest" size="small">-->
<!--<Checkbox-group v-model="formValidate.interest">-->
<!--<Checkbox label="吃饭"></Checkbox>-->
<!--<Checkbox label="睡觉"></Checkbox>-->
<!--<Checkbox label="跑步"></Checkbox>-->
<!--<Checkbox label="看电影"></Checkbox>-->
<!--</Checkbox-group>-->
<!--</Form-item>-->
<!--<Form-item>-->
<!--<Button type="primary" @click="handleSubmit('formValidate')" size="small" icon="ios-cloud-upload-outline">提交</Button>-->
<!--<Button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px" size="small" icon="ios-reload">重置</Button>-->
<!--</Form-item>-->
<!--</Form>-->
<!--</TabPane>-->
<!--<TabPane label="大表单">-->
<!--<Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">-->
<!--<Form-item label-for="autocomplete" prop="name">-->
<!--<span slot="label"><Icon type="ionic"></Icon></span>-->
<!--<AutoComplete element-id="autocomplete" v-model="formValidate.name" :data="['Li','Liang','Zhang']" placeholder="请输入姓名" icon="ios-search" size="large"></AutoComplete>-->
<!--</Form-item>-->
<!--<Form-item label-for="input" label="介绍" prop="desc">-->
<!--<Input element-id="input" icon="ios-search" size="large" v-model="formValidate.desc" type="text" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入..."></Input>-->
<!--</Form-item>-->
<!--<Form-item label="邮箱" prop="mail">-->
<!--&lt;!&ndash;<Input v-model="formValidate.mail" placeholder="请输入邮箱"></Input>&ndash;&gt;-->
<!--<ColorPicker v-model="formValidate.mail" size="large"></ColorPicker>-->
<!--</Form-item>-->
<!--<Form-item label-for="select" label="城市" prop="city">-->
<!--<Select element-id="select" filterable v-model="formValidate.city" placeholder="请选择所在地" size="large">-->
<!--<Option value="beijing">北京市</Option>-->
<!--<Option value="shanghai">上海市</Option>-->
<!--<Option value="shenzhen">深圳市</Option>-->
<!--</Select>-->
<!--</Form-item>-->
<!--<Form-item label-for="date" label="选择日期" prop="date">-->
<!--<Date-picker element-id="date" type="date" placeholder="选择日期" v-model="formValidate.date" size="large"></Date-picker>-->
<!--</Form-item>-->
<!--<Form-item label-for="cascader" label="级联选择" prop="cascader">-->
<!--<Cascader elementId="cascader" :data="dataCascader" v-model="formValidate.cascader" size="large"></Cascader>-->
<!--</Form-item>-->
<!--<Form-item label-for="inputnumber" label="数字框" prop="inputnumber">-->
<!--<InputNumber elementId="inputnumber" :max="10" :min="1" v-model="formValidate.inputnumber" size="large"></InputNumber>-->
<!--</Form-item>-->
<!--<Form-item label="选择日期">-->
<!--<Row>-->
<!--<Col span="11">-->
<!--<Form-item prop="date">-->
<!--<Date-picker type="date" placeholder="选择日期" v-model="formValidate.date" size="large"></Date-picker>-->
<!--</Form-item>-->
<!--</Col>-->
<!--<Col span="2" style="text-align: center">-</Col>-->
<!--<Col span="11">-->
<!--<Form-item prop="time">-->
<!--<Time-picker type="time" placeholder="选择时间" v-model="formValidate.time" size="large"></Time-picker>-->
<!--</Form-item>-->
<!--</Col>-->
<!--</Row>-->
<!--</Form-item>-->
<!--<Form-item label="性别" prop="gender">-->
<!--<Radio-group v-model="formValidate.gender" size="large">-->
<!--<Radio label="male">男</Radio>-->
<!--<Radio label="female">女</Radio>-->
<!--</Radio-group>-->
<!--</Form-item>-->
<!--<Form-item label="爱好" prop="interest" size="large">-->
<!--<Checkbox-group v-model="formValidate.interest">-->
<!--<Checkbox label="吃饭"></Checkbox>-->
<!--<Checkbox label="睡觉"></Checkbox>-->
<!--<Checkbox label="跑步"></Checkbox>-->
<!--<Checkbox label="看电影"></Checkbox>-->
<!--</Checkbox-group>-->
<!--</Form-item>-->
<!--<Form-item>-->
<!--<Button type="primary" @click="handleSubmit('formValidate')" size="large" icon="ios-cloud-upload-outline">提交</Button>-->
<!--<Button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px" size="large" icon="ios-reload">重置</Button>-->
<!--</Form-item>-->
<!--</Form>-->
<!--</TabPane>-->
<!--</Tabs>-->
<!--<div style="margin: 100px">-->
<!--<form action="/">-->
<!--<Input name="f1"></Input>-->
<!--<i-switch name="f2" :true-value="1" :false-value="2"></i-switch>-->
<!--<Select v-model="model1" multiple style="width:200px" name="f3">-->
<!--<Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>-->
<!--</Select>-->
<!--<AutoComplete-->
<!--v-model="value1"-->
<!--:data="data1"-->
<!--@on-search="handleSearch1"-->
<!--placeholder="input here"-->
<!--name="f4"-->
<!--style="width:200px"></AutoComplete>-->
<!--<Slider v-model="value11" name="f5"></Slider>-->
<!--<DatePicker type="date" placeholder="选择日期" style="width: 200px" name="f6"></DatePicker>-->
<!--<TimePicker type="time" placeholder="选择时间" style="width: 168px" name="f7"></TimePicker>-->
<!--<Cascader :data="datac" v-model="valuec" name="f8"></Cascader>-->
<!--<Rate v-model="valuer" name="f9"></Rate>-->
<!--<ColorPicker v-model="color" name="f10" />-->
<!--<button type="submit">test</button>-->
<!--</form>-->
<!--</div>-->
<!--</div>-->
<!--</template>-->
<!--<script>-->
<!--export default {-->
<!--data () {-->
<!--return {-->
<!--dataCascader: [{-->
<!--value: 'beijing',-->
<!--label: '北京',-->
<!--children: [-->
<!--{-->
<!--value: 'gugong',-->
<!--label: '故宫'-->
<!--},-->
<!--{-->
<!--value: 'tiantan',-->
<!--label: '天坛'-->
<!--},-->
<!--{-->
<!--value: 'wangfujing',-->
<!--label: '王府井'-->
<!--}-->
<!--]-->
<!--}, {-->
<!--value: 'jiangsu',-->
<!--label: '江苏',-->
<!--children: [-->
<!--{-->
<!--value: 'nanjing',-->
<!--label: '南京',-->
<!--children: [-->
<!--{-->
<!--value: 'fuzimiao',-->
<!--label: '夫子庙',-->
<!--}-->
<!--]-->
<!--},-->
<!--{-->
<!--value: 'suzhou',-->
<!--label: '苏州',-->
<!--children: [-->
<!--{-->
<!--value: 'zhuozhengyuan',-->
<!--label: '拙政园',-->
<!--},-->
<!--{-->
<!--value: 'shizilin',-->
<!--label: '狮子林',-->
<!--}-->
<!--]-->
<!--}-->
<!--],-->
<!--}],-->
<!--color: '#19be6b',-->
<!--valuer: 3,-->
<!--valuec: [],-->
<!--datac: [{-->
<!--value: 'beijing',-->
<!--label: '北京',-->
<!--children: [-->
<!--{-->
<!--value: 'gugong',-->
<!--label: '故宫'-->
<!--},-->
<!--{-->
<!--value: 'tiantan',-->
<!--label: '天坛'-->
<!--},-->
<!--{-->
<!--value: 'wangfujing',-->
<!--label: '王府井'-->
<!--}-->
<!--]-->
<!--}, {-->
<!--value: 'jiangsu',-->
<!--label: '江苏',-->
<!--children: [-->
<!--{-->
<!--value: 'nanjing',-->
<!--label: '南京',-->
<!--children: [-->
<!--{-->
<!--value: 'fuzimiao',-->
<!--label: '夫子庙',-->
<!--}-->
<!--]-->
<!--},-->
<!--{-->
<!--value: 'suzhou',-->
<!--label: '苏州',-->
<!--children: [-->
<!--{-->
<!--value: 'zhuozhengyuan',-->
<!--label: '拙政园',-->
<!--},-->
<!--{-->
<!--value: 'shizilin',-->
<!--label: '狮子林',-->
<!--}-->
<!--]-->
<!--}-->
<!--],-->
<!--}],-->
<!--value1: '',-->
<!--value11: 25,-->
<!--data1: [],-->
<!--cityList: [-->
<!--{-->
<!--value: 'beijing',-->
<!--label: '北京市'-->
<!--},-->
<!--{-->
<!--value: 'shanghai',-->
<!--label: '上海市'-->
<!--},-->
<!--{-->
<!--value: 'shenzhen',-->
<!--label: '深圳市'-->
<!--},-->
<!--{-->
<!--value: 'hangzhou',-->
<!--label: '杭州市'-->
<!--},-->
<!--{-->
<!--value: 'nanjing',-->
<!--label: '南京市'-->
<!--},-->
<!--{-->
<!--value: 'chongqing',-->
<!--label: '重庆市'-->
<!--}-->
<!--],-->
<!--model1: [],-->
<!--name: '',-->
<!--formValidate: {-->
<!--name: '',-->
<!--mail: '',-->
<!--city: '',-->
<!--gender: '',-->
<!--interest: [],-->
<!--date: '',-->
<!--time: '',-->
<!--desc: '',-->
<!--cascader: [],-->
<!--inputnumber: 1-->
<!--},-->
<!--ruleValidate: {-->
<!--name: [-->
<!--{ required: true, message: '姓名不能为空', trigger: 'change' }-->
<!--],-->
<!--mail: [-->
<!--{ required: true, message: '邮箱不能为空', trigger: 'change' }-->
<!--],-->
<!--city: [-->
<!--{ required: true, message: '请选择城市', trigger: 'change' }-->
<!--],-->
<!--gender: [-->
<!--{ required: true, message: '请选择性别', trigger: 'change' }-->
<!--],-->
<!--interest: [-->
<!--{ required: true, type: 'array', min: 1, message: '至少选择一个爱好', trigger: 'change' },-->
<!--{ type: 'array', max: 2, message: '最多选择两个爱好', trigger: 'change' }-->
<!--],-->
<!--date: [-->
<!--{ required: true, type: 'date', message: '请选择日期', trigger: 'change' }-->
<!--],-->
<!--time: [-->
<!--{ required: true, type: 'date', message: '请选择时间', trigger: 'change' }-->
<!--],-->
<!--desc: [-->
<!--{ required: true, message: '请输入个人介绍', trigger: 'blur' },-->
<!--{ type: 'string', min: 20, message: '介绍不能少于20字', trigger: 'blur' }-->
<!--]-->
<!--}-->
<!--}-->
<!--},-->
<!--methods: {-->
<!--handleSubmit (name) {-->
<!--this.$refs[name].validate((valid) => {-->
<!--if (valid) {-->
<!--this.$Message.success('提交成功!');-->
<!--} else {-->
<!--this.$Message.error('表单验证失败!');-->
<!--}-->
<!--})-->
<!--},-->
<!--handleReset (name) {-->
<!--this.$refs[name].resetFields();-->
<!--},-->
<!--handleSearch1 (value) {-->
<!--this.data1 = !value ? [] : [-->
<!--value,-->
<!--value + value,-->
<!--value + value + value-->
<!--];-->
<!--}-->
<!--}-->
<!--}-->
<!--</script>-->
<template>
<Form :model="formItem" :label-width="80">
<FormItem label="Input">
<Input v-model="formItem.input" placeholder="Enter something..."></Input>
</FormItem>
<FormItem label="Select">
<Select v-model="formItem.select">
<Option value="beijing">New York</Option>
<Option value="shanghai">London</Option>
<Option value="shenzhen">Sydney</Option>
</Select>
</FormItem>
<FormItem label="DatePicker">
<Row>
<Col span="11">
<DatePicker type="date" placeholder="Select date" v-model="formItem.date"></DatePicker>
</Col>
<Col span="2" style="text-align: center">-</Col>
<Col span="11">
<TimePicker type="time" placeholder="Select time" v-model="formItem.time"></TimePicker>
</Col>
</Row>
</FormItem>
<FormItem label="Radio">
<RadioGroup v-model="formItem.radio">
<Radio label="male">Male</Radio>
<Radio label="female">Female</Radio>
</RadioGroup>
</FormItem>
<FormItem label="Checkbox">
<CheckboxGroup v-model="formItem.checkbox">
<Checkbox label="Eat"></Checkbox>
<Checkbox label="Sleep"></Checkbox>
<Checkbox label="Run"></Checkbox>
<Checkbox label="Movie"></Checkbox>
</CheckboxGroup>
</FormItem>
<FormItem label="Switch">
<i-switch v-model="formItem.switch" size="large">
<span slot="open">On</span>
<span slot="close">Off</span>
</i-switch>
</FormItem>
<FormItem label="Slider">
<Slider v-model="formItem.slider" range></Slider>
</FormItem>
<FormItem label="Text">
<Input v-model="formItem.textarea" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="Enter something..."></Input>
</FormItem>
<FormItem>
<Button type="primary">Submit</Button>
<Button type="primary" ghost style="margin-left: 8px">Cancel</Button>
</FormItem>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</Form>
</template>
<script>
export default {
data () {
return {
formItem: {
input: '',
select: '',
radio: 'male',
checkbox: [],
switch: true,
date: '',
time: '',
slider: [20, 50],
textarea: ''
}
}
}
}
</script>

166
examples/routers/grid.vue Normal file
View file

@ -0,0 +1,166 @@
<style>
.view {
height: 100px;
width: 100px;
background: yellow;
}
</style>
<template>
<div>
<Row type='flex' justify='center'>
<i-col span='21' class="offset-header">
<Row type='flex' :gutter='16' justify='space-between'>
<i-col :order='25'>
<div class="view">
<label>245</label>
</div>
</i-col>
<i-col :xs='12' :sm='12' :md='8' :lg='8' :order='1'>
<div class="view" >
<label>1</label>
</div>
</i-col>
<i-col :xs='12' :sm='12' :md='8' :lg='8' :order='2'>
<div class="view" >
<label>2</label>
</div>
</i-col>
<i-col :xs='12' :sm='12' :md='8' :lg='8' :order='3'>
<div class="view" >
<label>3</label>
</div>
</i-col>
<i-col :xs='12' :sm='12' :md='8' :lg='8' :order='4'>
<div class="view" >
<label>4</label>
</div>
</i-col>
<i-col :xs='12' :sm='12' :md='8' :lg='8' :order='5'>
<div class="view" >
<label>5</label>
</div>
</i-col>
<i-col :xs='12' :sm='12' :md='8' :lg='8' :order='6'>
<div class="view" >
<label>6</label>
</div>
</i-col>
<i-col :xs='12' :sm='12' :md='8' :lg='8' :order='7'>
<div class="view" >
<label>2</label>
</div>
</i-col>
<i-col :xs='12' :sm='12' :md='8' :lg='8' :order='8'>
<div class="view" >
<label>2</label>
</div>
</i-col>
<i-col :xs='12' :sm='12' :md='8' :lg='8' :order='9'>
<div class="view" >
<label>2</label>
</div>
</i-col>
<i-col :xs='12' :sm='12' :md='8' :lg='8' :order='10'>
<div class="view" >
<label>2</label>
</div>
</i-col>
<i-col :xs='12' :sm='12' :md='8' :lg='8' :order='11'>
<div class="view" >
<label>2</label>
</div>
</i-col>
<i-col :xs='12' :sm='12' :md='8' :lg='8' :order='12'>
<div class="view" >
<label>2</label>
</div>
</i-col>
<i-col :xs='12' :sm='12' :md='8' :lg='8' :order='13'>
<div class="view" >
<label>12</label>
</div>
</i-col>
<i-col :xs='12' :sm='12' :md='8' :lg='8' :order='14'>
<div class="view" >
<label>2</label>
</div>
</i-col>
<i-col :xs='12' :sm='12' :md='8' :lg='8' :order='15'>
<div class="view" >
<label>2</label>
</div>
</i-col>
<i-col :xs='12' :sm='12' :md='8' :lg='8' :order='16'>
<div class="view" >
<label>2</label>
</div>
</i-col>
<i-col :xs='12' :sm='12' :md='8' :lg='8' :order='17'>
<div class="view" >
<label>2</label>
</div>
</i-col>
<i-col :xs='12' :sm='12' :md='8' :lg='8' :order='18'>
<div class="view" >
<label>2</label>
</div>
</i-col>
<i-col :xs='12' :sm='12' :md='8' :lg='8' :order='19'>
<div class="view" >
<label>2</label>
</div>
</i-col>
<i-col :xs='12' :sm='12' :md='8' :lg='8' :order='20'>
<div class="view" >
<label>2</label>
</div>
</i-col>
<i-col :xs='12' :sm='12' :md='8' :lg='8' :order='21'>
<div class="view" >
<label>2</label>
</div>
</i-col>
<i-col :xs='12' :sm='12' :md='8' :lg='8' :order='22'>
<div class="view" >
<label>2</label>
</div>
</i-col>
<i-col :xs='12' :sm='12' :md='8' :lg='8' :order='23'>
<div class="view" >
<label>2</label>
</div>
</i-col>
<i-col :xs='12' :sm='12' :md='8' :lg='8' :order='24'>
<div class="view" >
<label>2</label>
</div>
</i-col>
<i-col :xs='12' :sm='12' :md='8' :lg='8' :order='25'>
<div class="view" >
<label>25-------</label>
</div>
</i-col>
<i-col :xs='12' :sm='12' :md='8' :lg='8' :order='26'>
<div class="view" >
<label>26------</label>
</div>
</i-col>
</Row>
</i-col>
</Row>
</div>
</template>
<script>
export default {
data () {
return {
n: 2
}
},
methods: {
add () {
this.n++;
}
}
}
</script>

15
examples/routers/icon.vue Normal file
View file

File diff suppressed because one or more lines are too long

102
examples/routers/input-number.vue Normal file
View file

@ -0,0 +1,102 @@
<!--<template>-->
<!--<div>-->
<!--&lt;!&ndash;<Input-number :max="max" name="he" :min="-1" v-model="v1" :autofocus="autofocus"></Input-number>&ndash;&gt;-->
<!--&lt;!&ndash;{{ v1 }}&ndash;&gt;-->
<!--&lt;!&ndash;<div @click="c">change v1</div>&ndash;&gt;-->
<!--&lt;!&ndash;<div @click="changeMax">change max</div>&ndash;&gt;-->
<!--&lt;!&ndash;<Input-number disabled :max="10" :min="1" :step="1.2" v-model="v2"></Input-number>&ndash;&gt;-->
<!--&lt;!&ndash;<Input-number :max="10" :min="1" v-model="obj.v"></Input-number>&ndash;&gt;-->
<!--<InputNumber :editable="false" :max="10" :min="1" :step="1.2" v-model="value2"></InputNumber>-->
<!--<InputNumber :precision="1" :max="10" :min="1" :step="0.1" v-model="value1"></InputNumber>-->
<!--</div>-->
<!--</template>-->
<!--<script>-->
<!--export default {-->
<!--props: {},-->
<!--data () {-->
<!--return {-->
<!--v1: 1,-->
<!--v2: 1,-->
<!--max: 10,-->
<!--autofocus: true,-->
<!--obj: {-->
<!--},-->
<!--value1: 1.0,-->
<!--value2: 1-->
<!--};-->
<!--},-->
<!--computed: {},-->
<!--methods: {-->
<!--c () {-->
<!--this.v1 = 5;-->
<!--},-->
<!--changeMax () {-->
<!--this.max++;-->
<!--}-->
<!--}-->
<!--};-->
<!--</script>-->
<template>
<div>
<!-- <InputNumber :max="1000000000" :min="1" v-model="value1" :formatter="formatter" :parser="parser" @on-change="change" style="width: 200px"></InputNumber>
<InputNumber :max="1000000000" :min="1" v-model="value2" :formatter="formatter2" :parser="parser2" @on-change="change" style="width: 200px"></InputNumber>
<InputNumber @on-change="change" style="width: 200px"></InputNumber>
<InputNumber v-model="valueNull" @on-change="change" style="width: 200px"></InputNumber>
<InputNumber v-model="valueNull" @on-change="change" :formatter="formatter" :parser="parser" style="width: 200px"></InputNumber>
<InputNumber v-model="value2" @on-focus="focus" style="width: 200px"></InputNumber>
<InputNumber v-model="value3" style="width: 200px" placeholder="Enter something..."></InputNumber> -->
<InputNumber v-model="valueNull" style="width: 200px" :min='1' :max='10000' :precision='2' ></InputNumber>
<InputNumber v-model="valueNull" style="width: 200px" ></InputNumber>
<div style="margin:10px 0px">
<InputNumber :activeChange="false" v-model="valueNull" style="width: 200px" :min='1' :max='10000' :precision='2' ></InputNumber>
<InputNumber :activeChange="false" v-model="valueNull" style="width: 200px" ></InputNumber>
</div>
<div style="margin:10px 0px">
<InputNumber
:max="10000"
v-model="value9"
:formatter="value => `$ ${value}`.replace(/B(?=(d{3})+(?!d))/g, ',')"
:parser="value => value.replace(/\$s?|(,*)/g, '')"></InputNumber>
<InputNumber
:max="100"
v-model="value10"
:formatter="value => `${value}%`"
:parser="value => value.replace('%', '')"></InputNumber>
</div>
</div>
</template>
<script>
export default {
data () {
return {
value1: 1800000,
value2: 55,
value3: 100,
valueNull:null,
formatter: (value) => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ','),
parser: (value) => value.replace(/\$\s?|(,*)/g, ''),
formatter2: (value) => `${value}%`,
parser2: (value) => value.replace('%', ''),
value9: 1000,
value10: 100
};
},
methods: {
focus (e) {
e.target.select();
},
change (v) {
console.log(v);
}
}
};
</script>

166
examples/routers/input.vue Normal file
View file

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

77
examples/routers/layout.vue Normal file
View file

@ -0,0 +1,77 @@
<template>
<div class="layout-demo-con">
<Button @click="change">修改Sider绑定的变量来控制收缩</Button>
<Layout :style="{minHeight: '100vh'}">
<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'}">
<p v-for="i in 100" :key="i">{{ i }}</p>
</Content>
<Footer>sdfsdsdfsdfs</Footer>
</Layout>
</Layout>
</div>
</template>
<script>
export default {
data () {
return {
isCollapsed: false
};
},
methods: {
toggleCollapse () {
this.$refs.side.toggleCollapse();
},
change () {
this.isCollapsed = !this.isCollapsed;
},
changed (res) {
console.log(res)
}
},
watch: {
isCollapsed (val) {
// console.log(val)
}
}
};
</script>
<style lang="less" scoped>
.layout-demo-con{
height: 100%;
}
</style>

120
examples/routers/list.vue Normal file
View file

@ -0,0 +1,120 @@
<template>
<div>
<h2>small size</h2>
<List header="Header" footer="Footer" size="small" :split="false">
<ListItem v-for="item in data1" :key="item">
{{ item }}
</ListItem>
</List>
<h2>default size</h2>
<List header="Header" footer="Footer">
<ListItem v-for="item in data1" :key="item">
{{ item }}
</ListItem>
</List>
<h2>large size</h2>
<List header="Header" footer="Footer" border size="large">
<ListItem v-for="item in data1" :key="item">
{{ item }}
</ListItem>
</List>
<Divider>没有 </Divider>
<List>
<ListItem v-for="item in data2" :key="item.title">
<ListItemMeta :avatar="item.avatar" :title="item.title" :description="item.description">
</ListItemMeta>
一段内容
</ListItem>
</List>
<Divider>带有 Action</Divider>
<List>
<ListItem v-for="item in data2" :key="item.title">
<ListItemMeta :avatar="item.avatar" :title="item.title" :description="item.description">
</ListItemMeta>
一段内容
<template slot="action">
<li>
<a href="">edit</a>
<!-- <Button typr="primary">编辑</Button>-->
</li>
<li>
<a href="">more</a>
<!-- <Button>删除</Button>-->
</li>
</template>
</ListItem>
</List>
<Divider>带图片</Divider>
<List item-layout="vertical">
<ListItem v-for="item in data2" :key="item.title">
<ListItemMeta :avatar="item.avatar" :title="item.title" :description="item.description">
</ListItemMeta>
We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.
<template slot="action">
<li>
<Icon type="ios-star-outline" /> 156
</li>
<li>
<Icon type="ios-thumbs-up-outline" /> 156
</li>
<li>
<Icon type="ios-chatbubbles-outline" /> 10
</li>
</template>
<template slot="extra">
<img src="https://dev-file.iviewui.com/5wxHCQMUyrauMCGSVEYVxHR5JmvS7DpH/large" style="width: 280px">
</template>
</ListItem>
</List>
</div>
</template>
<script>
export default {
data () {
return {
data1: [
'Racing car sprays burning fuel into crowd.',
'Japanese princess to wed commoner.',
'Australian walks 100km after outback crash.',
'Man charged over missing wedding girl.',
'Los Angeles battles huge wildfires.',
],
data2: [
{
title: 'This is a title 1',
description: 'This is the description, This is the description, This is the description.',
avatar: 'https://dev-file.iviewui.com/userinfoPDvn9gKWYihR24SpgC319vXY8qniCqj4/avatar'
},
{
title: 'This is a title 2',
description: 'This is the description, This is the description, This is the description.',
avatar: 'https://dev-file.iviewui.com/userinfoPDvn9gKWYihR24SpgC319vXY8qniCqj4/avatar'
},
{
title: 'This is a title 3',
description: 'This is the description, This is the description, This is the description.',
avatar: 'https://dev-file.iviewui.com/userinfoPDvn9gKWYihR24SpgC319vXY8qniCqj4/avatar'
},
{
title: 'This is a title 4',
description: 'This is the description, This is the description, This is the description.',
avatar: 'https://dev-file.iviewui.com/userinfoPDvn9gKWYihR24SpgC319vXY8qniCqj4/avatar'
},
{
title: 'This is a title 5',
description: 'This is the description, This is the description, This is the description.',
avatar: 'https://dev-file.iviewui.com/userinfoPDvn9gKWYihR24SpgC319vXY8qniCqj4/avatar'
}
]
};
}
};
</script>

29
examples/routers/loading-bar.vue Normal file
View file

@ -0,0 +1,29 @@
<template>
<div>
<i-button @click.native="start">Start</i-button>
<i-button @click.native="finish">Finish</i-button>
<i-button @click.native="error">Error</i-button>
</div>
</template>
<script>
export default {
methods: {
start () {
this.$Loading.start();
},
finish () {
this.$Loading.finish();
},
error () {
this.$Loading.error();
}
},
created () {
// this.$Loading.config({
// color: '#5cb85c',
// failedColor: '#f0ad4e',
// height: 5
// });
}
}
</script>

45
examples/routers/menu.vue Normal file
View file

@ -0,0 +1,45 @@
<template>
<Menu mode="horizontal" :theme="theme1" active-name="3-4" @on-select="hs">
<MenuItem name="1" to="/button" target="_blank">
<Icon type="ios-paper" />
内容管理
</MenuItem>
<MenuItem name="2">
<Icon type="ios-people" />
用户管理
</MenuItem>
<Submenu name="3">
<template slot="title">
<Icon type="ios-stats" />
统计分析
</template>
<MenuGroup title="使用">
<MenuItem name="3-1">新增和启动</MenuItem>
<MenuItem name="3-2">活跃分析</MenuItem>
<MenuItem name="3-3">时段分析</MenuItem>
</MenuGroup>
<MenuGroup title="留存">
<MenuItem name="3-4">用户留存</MenuItem>
<MenuItem name="3-5">流失用户</MenuItem>
</MenuGroup>
</Submenu>
<MenuItem name="4">
<Icon type="ios-construct" />
综合设置
</MenuItem>
</Menu>
</template>
<script>
export default {
data () {
return {
theme1: 'light'
}
},
methods: {
hs (n) {
console.log(n);
}
}
}
</script>

45
examples/routers/message.vue Normal file
View file

@ -0,0 +1,45 @@
<template>
<div>
<Button type="primary" @click="info">Display info prompt</Button>
<Button @click="success">Display success prompt</Button>
<Button @click="warning">Display warning prompt</Button>
<Button @click="error">Display error prompt</Button>
<Button @click="loading">Display loading...</Button>
<Button @click="closable">Display a closable message</Button>
</div>
</template>
<script>
export default {
methods: {
info () {
this.$Message.info({
content: '这是一条普通的提示',
duration: 1000
});
},
success () {
this.$Message.success('This is a success tip');
},
warning () {
this.$Message.warning('This is a warning tip');
},
error () {
this.$Message.error('This is an error tip');
},
loading () {
const msg = this.$Message.loading({
content: 'Loading...',
duration: 0
});
setTimeout(msg, 3000);
},
closable () {
this.$Message.info({
content: 'Tips for manual closing',
duration: 1000,
closable: true
});
}
}
}
</script>

150
examples/routers/modal.vue Normal file
View file

@ -0,0 +1,150 @@
<template>
<div>
<Button type="primary" @click="modal1 = true">Display dialog box</Button>
<Modal
v-model="modal1"
title="Common Modal dialog box title"
@on-ok="ok"
@on-cancel="cancel">
<p>Content of dialog</p>
<p>Content of dialog</p>
<p>Content of dialog</p>
<Button @click="openMessage">Message</Button>
<Select v-model="model1" style="width:200px" :transfer="false">
<Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
</Select>
<Select v-model="model1" style="width:200px" :transfer="true">
<Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
</Select>
<Dropdown transfer>
<a href="javascript:void(0)">
下拉菜单
<Icon type="ios-arrow-down"></Icon>
</a>
<DropdownMenu slot="list">
<DropdownItem>驴打滚</DropdownItem>
<DropdownItem>炸酱面</DropdownItem>
<DropdownItem disabled>豆汁儿</DropdownItem>
<DropdownItem>冰糖葫芦</DropdownItem>
<DropdownItem divided>北京烤鸭</DropdownItem>
</DropdownMenu>
</Dropdown>
<DatePicker type="date" placeholder="Select date" style="width: 200px" transfer></DatePicker>
<Cascader :data="data" v-model="value1" transfer></Cascader>
<Tooltip content="Here is the prompt text" transfer>
A balloon appears when the mouse passes over this text
</Tooltip>
<Poptip trigger="hover" title="Title" content="content" transfer>
<Button>Hover</Button>
</Poptip>
<Button type="primary" @click="handleSpinShow">整页显示，3秒后关闭</Button>
</Modal>
<Select v-model="model1" style="width:200px" :transfer="false">
<Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
</Select>
<Select v-model="model1" style="width:200px" :transfer="true">
<Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
</Select>
</div>
</template>
<script>
export default {
data () {
return {
modal1: false,
cityList: [
{
value: 'New York',
label: 'New York'
},
{
value: 'London',
label: 'London'
},
{
value: 'Sydney',
label: 'Sydney'
},
{
value: 'Ottawa',
label: 'Ottawa'
},
{
value: 'Paris',
label: 'Paris'
},
{
value: 'Canberra',
label: 'Canberra'
}
],
model1: '',
value1: [],
data: [{
value: 'beijing',
label: '北京',
children: [
{
value: 'gugong',
label: '故宫'
},
{
value: 'tiantan',
label: '天坛'
},
{
value: 'wangfujing',
label: '王府井'
}
]
}, {
value: 'jiangsu',
label: '江苏',
children: [
{
value: 'nanjing',
label: '南京',
children: [
{
value: 'fuzimiao',
label: '夫子庙',
}
]
},
{
value: 'suzhou',
label: '苏州',
children: [
{
value: 'zhuozhengyuan',
label: '拙政园',
},
{
value: 'shizilin',
label: '狮子林',
}
]
}
],
}]
}
},
methods: {
ok () {
// this.$Message.info('Clicked ok');
},
cancel () {
// this.$Message.info('Clicked cancel');
},
openMessage () {
this.$Message.info({
content: 'hello world',
duration: 2
});
},
handleSpinShow () {
this.$Spin.show();
},
}
}
</script>

67
examples/routers/more.vue Normal file
View file

@ -0,0 +1,67 @@
<style lang="less">
.vertical-center-modal{
display: flex;
align-items: center;
justify-content: center;
.ivu-modal{
top: 0;
}
}
.placeholder {
min-height: 2000px;
width: 1px;
}
</style>
<template>
<i-button @click="modal9 = true">距离顶部 20px</i-button>
<Modal
title="对话框标题"
:visible.sync="modal9"
:style="{top: '20px'}">
<p>对话框内容</p>
<p>对话框内容</p>
<p>对话框内容</p>
</Modal>
<i-button @click="modal10 = true">垂直居中</i-button>
<Modal
title="对话框标题"
:visible.sync="modal10"
class-name="vertical-center-modal">
<p>对话框内容</p>
<p>对话框内容</p>
<p>对话框内容</p>
</Modal>
<i-button @click="instance(true)">Create Instance Scrollable</i-button>
<i-button @click="instance(false)">Create Instance Non-scrollable</i-button>
<div class="placeholder"></div>
</template>
<script>
export default {
data () {
return {
modal9: false,
modal10: false,
modal1: false,
scrollable: false
}
},
methods: {
ok () {
this.$nextTick(() => this.modal1 = true);
this.$Message.info('点击了确定');
},
cancel () {
this.$Message.info('点击了取消');
},
instance (scrollable) {
this.$Modal.info({
title: 'test',
content: 'test',
scrollable: scrollable
});
}
}
}
</script>

40
examples/routers/notice.vue Normal file
View file

@ -0,0 +1,40 @@
<template>
<Select v-model="model1" style="width:200px">
<Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
</Select>
</template>
<script>
export default {
data () {
return {
cityList: [
{
value: 'New York',
label: 'New York'
},
{
value: 'London',
label: 'London'
},
{
value: 'Sydney',
label: 'Sydney'
},
{
value: 'Ottawa',
label: 'Ottawa'
},
{
value: 'Paris',
label: 'Paris'
},
{
value: 'Canberra',
label: 'Canberra'
}
],
model1: 'Sydney'
}
}
}
</script>

54
examples/routers/page.vue Normal file
View file

@ -0,0 +1,54 @@
<template>
<div>
<Page prev-text="上一页" next-text="下一页" :total="total" show-sizer show-elevator show-total :current.sync="current"></Page>
{{ current }}
<Button type="primary" @click="subject">- 1</Button>
<Button type="primary" @click="change">Change</Button>
<Page :current="2" :total="50" simple></Page>
<div style="margin:10px 0px">
<Page :total="1000" show-sizer show-elevator show-total :current="12"></Page>
</div>
<div style="margin:10px 0px">
<Page :total="1000" show-sizer show-elevator show-total :current="12"></Page>
</div>
<div style="margin:100px 0px">
<Page :total="500" show-sizer show-elevator show-total ></Page>
</div>
<div style="margin:100px 0px">
<Page :total="500" show-sizer show-elevator ></Page>
</div>
<div style="margin:100px 0px">
<Page :total="500" show-sizer show-elevator ></Page>
</div>
<div style="margin:10px 0px">
<Page :total="500" show-sizer ></Page>
</div>
<div style="margin: 10px 0px">
<Page :total="40" size="small"></Page>
<br><br>
<Page :total="40" size="small" show-elevator show-sizer></Page>
<br><br>
<Page :total="40" size="small" show-total></Page>
<br><br>
</div>
</div>
</template>
<script>
export default {
data () {
return {
current: 1,
total: 21
}
},
methods: {
subject() {
this.total -= 1;
},
change() {
this.current = 1;
}
}
}
</script>

87
examples/routers/poptip.vue Normal file
View file

@ -0,0 +1,87 @@
<template>
<div style="margin: 200px">
<Tabs value="name1">
<TabPane label="标签一" name="name1">
<!-- <div style="width: 200px;height:300px;overflow: auto;">
<Poptip title="提示标题" content="标签一的内容" placement="left" transfer >
<Button id="aaa">左边</Button>
</Poptip>
<Poptip title="提示标题" content="标签一的内容" placement="right" transfer>
<Button id="aaa">右边</Button>
</Poptip>
<Poptip title="提示标题" content="标签一的内容" placement="top" transfer>
<Button id="aaa">上边</Button>
</Poptip>
<Poptip title="提示标题" content="标签一的内容" placement="bottom" transfer>
<Button id="aaa">下边</Button>
</Poptip>
</div> -->
<div>
<Poptip title="提示标题" content="标签一的内容">
<Button id="aaa">点击显示</Button>
<div slot="content">
<Button @click='loadData(15)'>15条数据</Button>
<Button @click='loadData(10)'>10条数据</Button>
<Button @click='loadData(5)'>5条数据</Button>
<Button @click='loadData(3)'>3条数据</Button>
<Table :columns='columns1' :data='data1'>
</Table>
</div>
</Poptip>
</div>
</TabPane>
<TabPane label="标签二" name="name2">标签二的内容</TabPane>
</Tabs>
</div>
</template>
<script>
export default {
data () {
return {
options: {
},
columns1:[
{
title: 'Data1',
key: 'data1',
width: 100,
},
{
title: 'Data2',
key: 'data2',
width: 100
},
{
title: 'Data3',
key: 'data3',
width: 100
},
{
title: 'Data4',
key: 'data4',
width: 100
}
],
data1:[],
}
},
created(){
this.loadData(5);
},
methods:{
loadData(num){
let data = [];
for (let i=0; i<num; i++) {
data.push({
data1:Math.random()*1000000,
data2:Math.random()*100000000,
data3:Math.random()*10000000000,
data4:Math.random()*1000000000000,
})
}
this.data1 = data
},
}
}
</script>

20
examples/routers/progress.vue Normal file
View file

@ -0,0 +1,20 @@
<template>
<div style="height: 300px;">
<Progress vertical :percent="25"></Progress>
<Progress vertical :percent="45" status="active"></Progress>
<Progress vertical :percent="65" status="wrong"></Progress>
<Progress vertical :percent="100"></Progress>
<Progress vertical :percent="25" hide-info></Progress>
<Progress :percent="25"></Progress>
<Progress :percent="45" status="active"></Progress>
<Progress :percent="65" status="wrong"></Progress>
<Progress :percent="100"></Progress>
<Progress :percent="25" hide-info></Progress>
</div>
</template>
<script>
export default {
}
</script>

54
examples/routers/radio.vue Normal file
View file

@ -0,0 +1,54 @@
<template>
<div>
<Radio size="large" v-model="single">Radio</Radio>
<Radio size="default" v-model="single">Radio</Radio>
<Radio size="small" v-model="single">Radio</Radio>
<br><br>
<Radio-group v-model="phone">
<Radio label="apple">
<Icon type="social-apple"></Icon>
<span>Apple</span>
</Radio>
<Radio label="android">
<Icon type="social-android"></Icon>
<span>Android</span>
</Radio>
<Radio label="windows">
<Icon type="social-windows"></Icon>
<span>Windows</span>
</Radio>
</Radio-group>
<Radio-group v-model="button2" type="button" size="large">
<Radio label="北京"></Radio>
<Radio label="上海" disabled></Radio>
<Radio label="深圳"></Radio>
<Radio label="杭州"></Radio>
</Radio-group>
<Radio-group v-model="button2" type="button" size="default">
<Radio label="北京"></Radio>
<Radio label="上海" disabled></Radio>
<Radio label="深圳"></Radio>
<Radio label="杭州"></Radio>
</Radio-group>
<Radio-group v-model="button2" type="button" size="small">
<Radio label="北京"></Radio>
<Radio label="上海" disabled></Radio>
<Radio label="深圳"></Radio>
<Radio label="杭州"></Radio>
</Radio-group>
</div>
</template>
<script>
export default {
data () {
return {
single: true,
phone: '',
button2: '北京',
};
},
methods: {
}
};
</script>

36
examples/routers/rate.vue Normal file
View file

@ -0,0 +1,36 @@
<template>
<div>
<Rate v-model="value"></Rate>
<Rate allow-half v-model="valueHalf"></Rate>
<Rate clearable v-model="valueClear"></Rate>
<Rate clearable allow-half v-model="valueClearHalf"></Rate>
<Rate
allow-half
show-text
v-model="characterValue"
character="好"/>
<Rate allow-half v-model="cv" icon="ios-heart" />
<!--<Rate show-text v-model="valueText"></Rate>-->
<!--<Rate show-text allow-half v-model="valueCustomText">-->
<!--<span style="color: #f5a623">{{ valueCustomText }}</span>-->
<!--</Rate>-->
<!--<Rate disabled allow-half v-model="valueDisabled"></Rate>-->
</div>
</template>
<script>
export default {
data () {
return {
value: 0,
valueHalf: 2.5,
valueText: 3,
valueCustomText: 4.0,
valueDisabled: 2.4,
valueClear: 1,
valueClearHalf: 1.5,
characterValue: 2.5,
cv: 3.5
}
}
}
</script>

56
examples/routers/scroll.vue Normal file
View file

@ -0,0 +1,56 @@
<template>
<Scroll :on-reach-edge="loadData">
<section v-for="item in list">
<div class="city">
<p>{{ item }}</p>
</div>
</section>
</Scroll>
</template>
<script>
export default {
data () {
return {
list: [1,2,3,4,5,6,7,8,9,10]
}
},
methods: {
loadData (dir) {
return new Promise(resolve => {
setTimeout(() => {
if (dir > 0) {
const first = this.list[0];
for (let i = 1; i < 11; i++) {
this.list.unshift(first - i);
}
} else {
const last = this.list[this.list.length - 1];
for (let i = 1; i < 11; i++) {
this.list.push(last + i);
}
}
resolve();
}, 500);
});
}
}
}
</script>
<style>
section {
margin: 20px;
}
section > div {
width: 300px;
padding: 15px;
margin: 5px;
background-color: #ddf;
border: 1px solid #446;
border-radius: 5px;
margin: 0 auto;
}
.ivu-scroll-container {
height: 500px;
}
</style>

92
examples/routers/select.vue Normal file
View file

@ -0,0 +1,92 @@
<template>
<div style="margin: 100px;">
<Select v-model="model1" filterable style="width:200px" prefix="ios-albums">
<Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
</Select>
<Select v-model="model10" filterable :max-tag-count="2" multiple style="width:400px">
<Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
</Select>
<Select v-model="model10" filterable :max-tag-count="2" multiple style="width:400px" prefix="ios-albums">
<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">
<Icon type="ios-alarm" slot="prefix" color="red" />
<Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
</Select>
<Select v-model="model1" style="width:200px">
<Avatar src="https://dev-file.iviewui.com/userinfoPDvn9gKWYihR24SpgC319vXY8qniCqj4/avatar" slot="prefix" size="small" />
<Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
</Select>
<Select v-model="model10" :max-tag-count="3" :max-tag-placeholder="more" multiple style="width:400px" prefix="ios-albums">
<Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
</Select>
<br><br>
<Select size="small" v-model="model1" style="width:200px" prefix="ios-albums">
<Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
</Select>
<Select size="small" v-model="model10" multiple style="width:400px" prefix="ios-albums">
<Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
</Select>
<br><br>
<Select size="large" v-model="model1" style="width:200px" prefix="ios-albums">
<Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
</Select>
<Select size="large" v-model="model10" multiple style="width:400px" prefix="ios-albums">
<Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
</Select>
</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'
}
],
model1: '',
model10: []
}
},
methods: {
more (num) {
return 'more' + num;
}
}
}
</script>

103
examples/routers/slider.vue Normal file
View file

@ -0,0 +1,103 @@
<template>
<Form :model="formItem" :label-width="80">
<FormItem label="Input">
<Input v-model="formItem.input" placeholder="Enter something..."></Input>
</FormItem>
<FormItem label="Select">
<Select v-model="formItem.select">
<Option value="beijing">New York</Option>
<Option value="shanghai">London</Option>
<Option value="shenzhen">Sydney</Option>
</Select>
</FormItem>
<FormItem label="DatePicker">
<Row>
<Col span="11">
<DatePicker type="date" placeholder="Select date" v-model="formItem.date"></DatePicker>
</Col>
<Col span="2" style="text-align: center">-</Col>
<Col span="11">
<TimePicker type="time" placeholder="Select time" v-model="formItem.time"></TimePicker>
</Col>
</Row>
</FormItem>
<FormItem label="Radio">
<RadioGroup v-model="formItem.radio">
<Radio label="male">Male</Radio>
<Radio label="female">Female</Radio>
</RadioGroup>
</FormItem>
<FormItem label="Checkbox">
<CheckboxGroup v-model="formItem.checkbox">
<Checkbox label="Eat"></Checkbox>
<Checkbox label="Sleep"></Checkbox>
<Checkbox label="Run"></Checkbox>
<Checkbox label="Movie"></Checkbox>
</CheckboxGroup>
</FormItem>
<FormItem label="Switch">
<i-switch v-model="formItem.switch" size="large">
<span slot="open">On</span>
<span slot="close">Off</span>
</i-switch>
</FormItem>
<FormItem label="Slider">
<Slider v-model="formItem.slider" range></Slider>
</FormItem>
<FormItem label="Text">
<Input v-model="formItem.textarea" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="Enter something..."></Input>
</FormItem>
<FormItem>
<Button type="primary">Submit</Button>
<Button type="default" ghost style="margin-left: 8px">Cancel</Button>
</FormItem>
</Form>
</template>
<script>
export default {
data () {
return {
formItem: {
input: '',
select: '',
radio: 'male',
checkbox: [],
switch: true,
date: '',
time: '',
slider: [20, 50],
textarea: ''
}
}
}
}
</script>
<!--<template>-->
<!--<div>-->
<!--<Button type="primary" @click="modal1 = true">Display dialog box</Button>-->
<!--<Modal v-model="modal1">-->
<!--<Slider v-model="value2" range show-tip="always"></Slider>-->
<!--</Modal>-->
<!--</div>-->
<!--</template>-->
<!--<script>-->
<!--export default {-->
<!--data () {-->
<!--return {-->
<!--modal1: false,-->
<!--value2: [20, 50],-->
<!--}-->
<!--},-->
<!--methods: {-->
<!--ok () {-->
<!--this.$Message.info('Clicked ok');-->
<!--},-->
<!--cancel () {-->
<!--this.$Message.info('Clicked cancel');-->
<!--}-->
<!--}-->
<!--}-->
<!--</script>-->

207
examples/routers/spin.vue Normal file
View file

@ -0,0 +1,207 @@
<!--<style>-->
<!--.demo-spin-icon-load{-->
<!--animation: ani-demo-spin 1s linear infinite;-->
<!--}-->
<!--@keyframes ani-demo-spin {-->
<!--from { transform: rotate(0deg);}-->
<!--50% { transform: rotate(180deg);}-->
<!--to { transform: rotate(360deg);}-->
<!--}-->
<!--.demo-spin-col{-->
<!--height: 100px;-->
<!--position: relative;-->
<!--border: 1px solid #eee;-->
<!--}-->
<!--/*loading*/-->
<!--.loader{-->
<!--width: 30px;-->
<!--height: 30px;-->
<!--position: relative;-->
<!--margin: 0 auto;-->
<!--}-->
<!--.circular {-->
<!-- -webkit-animation: rotate 2s linear infinite;-->
<!--animation: rotate 2s linear infinite;-->
<!--height: 100%;-->
<!-- -webkit-transform-origin: center center;-->
<!-- -ms-transform-origin: center center;-->
<!--transform-origin: center center;-->
<!--width: 100%;-->
<!--position: absolute;-->
<!--top: 0;-->
<!--bottom: 0;-->
<!--left: 0;-->
<!--right: 0;-->
<!--margin: auto;-->
<!--}-->
<!--.path {-->
<!--stroke-dasharray: 1, 200;-->
<!--stroke-dashoffset: 0;-->
<!-- -webkit-animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;-->
<!--animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;-->
<!--stroke-linecap: round;-->
<!--}-->
<!--@-webkit-keyframes-->
<!--rotate { 100% {-->
<!-- -webkit-transform: rotate(360deg);-->
<!--transform: rotate(360deg);-->
<!--}-->
<!--}-->
<!--@keyframes-->
<!--rotate { 100% {-->
<!-- -webkit-transform: rotate(360deg);-->
<!--transform: rotate(360deg);-->
<!--}-->
<!--}-->
<!--@-webkit-keyframes-->
<!--dash { 0% {-->
<!--stroke-dasharray: 1, 200;-->
<!--stroke-dashoffset: 0;-->
<!--}-->
<!--50% {-->
<!--stroke-dasharray: 89, 200;-->
<!--stroke-dashoffset: -35;-->
<!--}-->
<!--100% {-->
<!--stroke-dasharray: 89, 200;-->
<!--stroke-dashoffset: -124;-->
<!--}-->
<!--}-->
<!--@keyframes-->
<!--dash { 0% {-->
<!--stroke-dasharray: 1, 200;-->
<!--stroke-dashoffset: 0;-->
<!--}-->
<!--50% {-->
<!--stroke-dasharray: 89, 200;-->
<!--stroke-dashoffset: -35;-->
<!--}-->
<!--100% {-->
<!--stroke-dasharray: 89, 200;-->
<!--stroke-dashoffset: -124;-->
<!--}-->
<!--}-->
<!--@-webkit-keyframes-->
<!--color { 100%, 0% {-->
<!--stroke: #d62d20;-->
<!--}-->
<!--40% {-->
<!--stroke: #0057e7;-->
<!--}-->
<!--66% {-->
<!--stroke: #008744;-->
<!--}-->
<!--80%, 90% {-->
<!--stroke: #ffa700;-->
<!--}-->
<!--}-->
<!--@keyframes-->
<!--color { 100%, 0% {-->
<!--stroke: #d62d20;-->
<!--}-->
<!--40% {-->
<!--stroke: #0057e7;-->
<!--}-->
<!--66% {-->
<!--stroke: #008744;-->
<!--}-->
<!--80%, 90% {-->
<!--stroke: #ffa700;-->
<!--}-->
<!--}-->
<!--</style>-->
<!--<template>-->
<!--<div>-->
<!--<Row>-->
<!--<i-col class="demo-spin-col" span="8">-->
<!--<Spin fix>加载中...</Spin>-->
<!--</i-col>-->
<!--<i-col class="demo-spin-col" span="8">-->
<!--<Spin fix>-->
<!--<Icon type="load-c" size=18 class="demo-spin-icon-load"></Icon>-->
<!--<div>Loading</div>-->
<!--</Spin>-->
<!--</i-col>-->
<!--<i-col class="demo-spin-col" span="8">-->
<!--<Spin fix>-->
<!--<div class="loader">-->
<!--<svg class="circular" viewBox="25 25 50 50">-->
<!--<circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="5" stroke-miterlimit="10"></circle>-->
<!--</svg>-->
<!--</div>-->
<!--</Spin>-->
<!--</i-col>-->
<!--</Row>-->
<!--</div>-->
<!--</template>-->
<!--<script>-->
<!--// 部分样式代码冗长，未作展示-->
<!--export default {-->
<!--}-->
<!--</script>-->
<style>
.demo-spin-article{
/*width: 400px;*/
/*height: 200px;*/
padding: 10px;
position: relative;
border: 1px solid red;
text-align: center;
}
.demo-spin-article h3{
font-size: 22px;
}
.demo-spin-article address{
color: #999;
font-style: normal;
font-size: 14px;
}
.demo-spin-article p {
font-size: 16px;
}
</style>
<template>
<div>
<div class="demo-spin-article">
<h3>登金陵凤凰台</h3>
<address>李白</address>
<article>
<p>凤凰台上凤凰游，凤去台空江自流。</p>
<p>吴宫花草埋幽径，晋代衣冠成古丘。</p>
<p>三山半落青天外，二水中分白鹭洲。</p>
<p>总为浮云能蔽日，长安不见使人愁。</p>
</article>
<Spin size="large" fix v-if="spinShow">
<!--<Icon type="load-c" size=18 class="demo-spin-icon-load"></Icon>-->
<!--<div>Loading</div>-->
</Spin>
</div>
<br>
切换显示状态：<i-switch @on-change="spinShow = !spinShow"></i-switch>
<Button @click="show">show</Button>
<Button @click="hide">hide</Button>
</div>
</template>
<script>
export default {
data () {
return {
spinShow: true
}
},
methods: {
show () {
this.$Spin.show();
setTimeout(() => {
this.$Spin.hide();
}, 3000)
},
hide () {
this.$Spin.hide();
}
}
}
</script>

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

@ -0,0 +1,90 @@
<template>
<div>
<div class="demo-split">
<Split v-model="split1">
<div slot="left" class="demo-split-pane">
左边面板
</div>
<div slot="right" class="demo-split-pane">
右边面板
</div>
</Split>
</div>
<div class="demo-split">
<Split v-model="split1" mode="vertical">
<div slot="left" class="demo-split-pane">
左边面板
</div>
<div slot="right" class="demo-split-pane">
右边面板
</div>
</Split>
</div>
</div>
</template>
<script>
export default {
name: 'split_pane_page',
data () {
return {
offset: 0.6,
offsetVertical: '250px',
split1: 0.5
}
},
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>
<style>
.demo-split{
height: 300px;
border: 1px solid #dddee1;
}
</style>

145
examples/routers/steps.vue Normal file
View file

@ -0,0 +1,145 @@
<template>
<div>
<Steps :current="index">
<!--<Step title="开始"></Step>-->
<Step v-for="(item, index) in activitiList" :title="item.approveUserName" :key="index" :content="item.startTime"></Step>
<!--<Step title="结束"></Step>-->
</Steps>
<Button @click="change">change</Button>
<br><br><br><br>
<hr>
<!--<Steps :current="1" size="small">-->
<!--<Step title="已完成" content="这里是该步骤的描述信息这里是该步骤的描述信息这里是该步骤的描述信息"></Step>-->
<!--<Step title="进行中" content="这里是该步骤的描述信息"></Step>-->
<!--<Step title="待进行" content="这里是该步骤的描述信息这里是该步骤的描述信息这里是该步骤的描述信息"></Step>-->
<!--<Step title="待进行" content="这里是该步骤的描述信息"></Step>-->
<!--</Steps>-->
<!--<br>-->
<!--<Steps :current="2">-->
<!--<Step title="已完成"></Step>-->
<!--<Step title="进行中"></Step>-->
<!--<Step title="待进行"></Step>-->
<!--<Step title="待进行"></Step>-->
<!--</Steps>-->
<!--<br>-->
<!--<Steps :current="1" size="small">-->
<!--<Step title="已完成"></Step>-->
<!--<Step title="进行中"></Step>-->
<!--<Step title="待进行"></Step>-->
<!--<Step title="待进行"></Step>-->
<!--</Steps>-->
<!--<br>-->
<!--<Steps :current="1" direction="vertical" size="small">-->
<!--<Step title="注册" icon="person-add"></Step>-->
<!--<Step title="上传头像" icon="camera" content="这里是该步骤的描述信息这里是该步骤的描述信息这里是该步骤的描述信息"></Step>-->
<!--<Step title="验证邮箱" icon="email"></Step>-->
<!--</Steps>-->
<!--<Steps :current="1" direction="vertical">-->
<!--<Step title="注册" icon="person-add"></Step>-->
<!--<Step title="上传头像" icon="camera" content="这里是该步骤的描述信息这里是该步骤的描述信息这里是该步骤的描述信息"></Step>-->
<!--<Step title="验证邮箱" icon="email"></Step>-->
<!--</Steps>-->
<!--<Steps :current="-1" direction="vertical">-->
<!--<Step title="注册" icon="person-add"></Step>-->
<!--<Step title="上传头像" icon="camera" content="这里是该步骤的描述信息这里是该步骤的描述信息这里是该步骤的描述信息"></Step>-->
<!--<Step title="验证邮箱" status="finish" icon="email"></Step>-->
<!--</Steps>-->
<!--<br>-->
<!--<p>当前正在进行第 {{ current + 1 }} 步</p>-->
<!--<Steps :current="current">-->
<!--<Step title="步骤1"></Step>-->
<!--<Step title="步骤2"></Step>-->
<!--<Step title="步骤3"></Step>-->
<!--<Step title="步骤4"></Step>-->
<!--</Steps>-->
<!--<br>-->
<!--<i-button type="primary" @click.native="next">下一步</i-button>-->
<!--<br><br><br>-->
<!--<Steps :current="1" direction="vertical" size="small">-->
<!--<Step title="已完成" content="这里是该步骤的描述信息这里是该步骤的描述信息这里是该步骤的描述信息"></Step>-->
<!--<Step title="进行中" content="这里是该步骤的描述信息"></Step>-->
<!--<Step title="待进行" content="这里是该步骤的描述信息这里是该步骤的描述信息这里是该步骤的描述信息"></Step>-->
<!--<Step title="待进行" content="这里是该步骤的描述信息"></Step>-->
<!--</Steps>-->
<!--<br><br>-->
<!--<Steps :current="1" status="error">-->
<!--<Step title="已完成" content="这里是该步骤的描述信息"></Step>-->
<!--<Step title="进行中" content="这里是该步骤的描述信息"></Step>-->
<!--<Step title="待进行" content="这里是该步骤的描述信息"></Step>-->
<!--<Step title="待进行" content="这里是该步骤的描述信息"></Step>-->
<!--</Steps>-->
<!--<Steps direction="vertical" :current="3">-->
<!--<Step title="已完成" content="这里是该步骤的描述信息">-->
<!--<div style="font-size: 16px; color: green">这里是该步骤的描述信息1</div>-->
<!--</Step>-->
<!--<Step title="进行中" content="这里是该步骤的描述信息">-->
<!--<div style="font-size: 24px; color: red">这里是该步骤的描述信息2</div>-->
<!--</Step>-->
<!--<Step title="待进行" content="这里是该步骤的描述信息">-->
<!--<div style="font-size: 46px; color: blue">这里是该步骤的描述信息3</div>-->
<!--</Step>-->
<!--<Step title="待进行" content="这里是该步骤的描述信息">-->
<!--<div style="font-size: 24px; color: green">这里是该步骤的描述信息4</div>-->
<!--</Step>-->
<!--</Steps>-->
</div>
</template>
<script>
export default {
props: {
},
data () {
return {
total: 512,
current: 0,
index:0,
activitiList:[
{
approveUserName:'123',
startTime:'1'
},{
approveUserName:'123',
startTime:'2'
}
],
changeList:[
{
approveUserName:'456',
startTime:'1'
},{
approveUserName:'456',
startTime:'2'
},{
approveUserName:'456',
startTime:'3'
},{
approveUserName:'456',
startTime:'4'
},{
approveUserName:'456',
startTime:'5'
}
]
}
},
computed: {
},
methods: {
next () {
if (this.current == 3) {
this.current = 0;
} else {
this.current += 1;
}
},
change () {
this.activitiList = this.activitiList.concat(this.changeList);
}
},
mounted () {
// this.change();
}
}
</script>

52
examples/routers/switch.vue Normal file
View file

@ -0,0 +1,52 @@
<template>
<div>
<i-switch v-model="m1" :loading="loading">
<span slot="open">开</span>
<span slot="close">关</span>
</i-switch>
{{ m1 }}
<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="md-checkmark" slot="open"></Icon>
<Icon type="md-close" slot="close"></Icon>
</i-switch>
<br><br>
<i-switch size="large">
<span slot="open">开启</span>
<span slot="close">关闭</span>
</i-switch>
<i-switch size="large" v-model="m1" :loading="loading">
<span slot="open">ON</span>
<span slot="close">OFF</span>
</i-switch>
<br><br>
<i-switch :disabled="disabled"></i-switch>
<Button type="primary" @click="disabled = !disabled">Toggle Disabled</Button>
</div>
</template>
<script>
export default {
data () {
return {
m1: true,
disabled: true,
loading: false
}
},
methods: {
change (status) {
console.log(status)
}
}
}
</script>

72
examples/routers/table.vue Normal file
View file

@ -0,0 +1,72 @@
<template>
<div>
<Table tooltip-theme="light" ref="currentRowTable" :columns="columns3" :data="data1" :draggable="true" @on-drag-drop="onDragDrop"></Table>
<Button @click="handleClearCurrentRow">Clear</Button>
</div>
</template>
<script>
export default {
data () {
return {
columns3: [
{
type: 'index',
width: 60,
align: 'center',
indexMethod (row) {
return row._index;
}
},
{
title: 'Name',
key: 'name'
},
{
title: 'Age',
key: 'age'
},
{
title: 'Address',
key: 'address',
tooltip: true
}
],
data1: [
{
name: 'John Brown',
age: 18,
address: '自定义渲染列，使用 Vue 的 Render 函数。传入两个参数，第一个是 h，第二个为对象，包含 row、column 和 index，分别指当前行数据，当前列数据，当前行索引，详见示例。自定义渲染列，使用 Vue 的 Render 函数。传入两个参数，第一个是 h，第二个为对象，包含 row、column 和 index，分别指当前行数据，当前列数据，当前行索引，详见示例。自定义渲染列，使用 Vue 的 Render 函数。传入两个参数，第一个是 h，第二个为对象，包含 row、column 和 index，分别指当前行数据，当前列数据，当前行索引，详见示例。',
date: '2016-10-03'
},
{
name: 'Jim Green',
age: 24,
address: 'London No. 1 Lake Park自定义渲染列，使用 Vue 的 Render 函',
date: '2016-10-01'
},
{
name: 'Joe Black',
age: 30,
address: 'Sydney No. 1 Lake Park',
date: '2016-10-02'
},
{
name: 'Jon Snow',
age: 26,
address: 'Ottawa No. 2 Lake Park',
date: '2016-10-04'
}
]
}
},
methods: {
handleClearCurrentRow () {
this.$refs.currentRowTable.clearCurrentRow();
},
onDragDrop(a,b){
console.log(a,b);
this.data1.splice(b,1,...this.data1.splice(a, 1 , this.data1[b]));
}
}
}
</script>

76
examples/routers/tabs.vue Normal file
View file

@ -0,0 +1,76 @@
<!--<template>-->
<!-- <Tabs :animated="false" value="name1">-->
<!-- <Tab-pane label="标签一" name="name1">-->
<!-- <Table :columns="columns1"></Table>-->
<!-- </Tab-pane>-->
<!-- <Tab-pane label="标签二" name="name2">-->
<!-- <Table :columns="columns1"></Table>-->
<!-- </Tab-pane>-->
<!-- <Tab-pane label="标签三" name="name3">-->
<!-- <Table :columns="columns1" ></Table>-->
<!-- </Tab-pane>-->
<!-- </Tabs>-->
<!--</template>-->
<!--<script>-->
<!-- export default {-->
<!-- data() {-->
<!-- return {-->
<!-- columns1: [-->
<!-- {-->
<!-- title: '姓名',-->
<!-- key: 'name'-->
<!-- },-->
<!-- {-->
<!-- title: '年龄',-->
<!-- key: 'age'-->
<!-- },-->
<!-- {-->
<!-- title: '地址',-->
<!-- key: 'address'-->
<!-- }-->
<!-- ],-->
<!-- data1: [-->
<!-- {-->
<!-- name: '王小明',-->
<!-- age: 18,-->
<!-- address: '北京市朝阳区芍药居'-->
<!-- },-->
<!-- {-->
<!-- name: '张小刚',-->
<!-- age: 25,-->
<!-- address: '北京市海淀区西二旗'-->
<!-- },-->
<!-- {-->
<!-- name: '李小红',-->
<!-- age: 30,-->
<!-- address: '上海市浦东新区世纪大道'-->
<!-- },-->
<!-- {-->
<!-- name: '周小伟',-->
<!-- age: 26,-->
<!-- address: '深圳市南山区深南大道'-->
<!-- }-->
<!-- ]-->
<!-- }-->
<!-- }-->
<!-- }-->
<!--</script>-->
<template>
<div>
<Button @click="showSecond = !showSecond">change</Button>
<Tabs value="name1">
<TabPane label="标签一" name="name1" :index="1">标签一的内容</TabPane>
<TabPane label="标签二" name="name2" :index="2" v-if="showSecond">标签二的内容</TabPane>
<TabPane label="标签三" name="name3" :index="3">标签三的内容</TabPane>
</Tabs>
</div>
</template>
<script>
export default {
data () {
return {
showSecond: false
}
}
}
</script>

105
examples/routers/tag.vue Normal file
View file

@ -0,0 +1,105 @@
<template>
<div>
<div>
<Tag color="default">default</Tag>
<Tag color="primary">primary</Tag>
<Tag color="success">success</Tag>
<Tag color="error">error</Tag>
<Tag color="warning">warning</Tag>
<Tag color="magenta">magenta</Tag>
<Tag color="red">red</Tag>
<Tag color="volcano">volcano</Tag>
<Tag color="orange">orange</Tag>
<Tag color="gold">gold</Tag>
<Tag color="gold">不错</Tag>
<Tag color="lime">lime</Tag>
<Tag color="green">green</Tag>
<Tag color="cyan">cyan</Tag>
<Tag color="blue">blue</Tag>
<Tag color="geekblue">geekblue</Tag>
<Tag color="purple">purple</Tag>
<Tag color="white">purple</Tag>
</div>
<Tag checkable>标签一</Tag>
<Tag>标签二</Tag>
<Tag v-if="show" closable @on-close="handleClose">标签三</Tag>
<br><br>
<Tag type="border" checkable>标签三</Tag>
<Tag type="border" closable>标签四</Tag>
<Tag type="dot">标签一</Tag>
<Tag type="dot" closable>标签二</Tag>
<br><br>
<Tag closable color="primary" checkable>标签一</Tag>
<Tag closable color="success" checkable>标签二</Tag>
<Tag closable color="error" checkable>标签三</Tag>
<Tag closable color="warning" checkable>标签四</Tag>
<br><br>
<Tag color="primary" checkable>标签一</Tag>
<Tag color="success" checkable>标签二</Tag>
<Tag color="error" checkable>标签三</Tag>
<Tag color="warning" checkable>标签四</Tag>
<br><br>
<Tag closable color="#EF6AFF" checkable>标签一</Tag>
<Tag color="#EF6AFF" checkable>标签一</Tag>
<Tag type="border" closable color="#EF6AFF" checkable>标签二</Tag>
<Tag type="dot" closable color="#EF6AFF" checkable>标签三</Tag>
<Tag closable color="default" checkable>标签四</Tag>
<br><br>
<Tag closable color="#EF6AFF">标签一</Tag>
<Tag type="border" closable color="#EF6AFF">标签二</Tag>
<Tag type="dot" closable color="#EF6AFF">标签三</Tag>
<Tag closable color="default">标签四</Tag>
<br><br>
<Tag type="border" closable color="primary" checkable>标签一</Tag>
<Tag type="border" closable color="success">标签二</Tag>
<Tag type="border" closable color="error">标签三</Tag>
<Tag type="border" closable color="warning">标签四</Tag>
<br><br>
<Tag type="dot" closable color="primary" checkable>标签一</Tag>
<Tag type="dot" closable color="success">标签二</Tag>
<Tag type="dot" closable color="error">标签三</Tag>
<Tag type="dot" closable color="warning">标签四</Tag>
<br><br>
<Tag v-for="item in count" :key="item" :name="item" closable @on-close="handleClose2">标签{{ item + 1 }}</Tag>
<Button icon="ios-plus-empty" type="dashed" size="small" @click="handleAdd">添加标签</Button>
<br><br><hr><br>
<Tag :checked="checked" checkable>test</Tag>
<Button @click="toggle">
Toggle
</Button>
<span>{{ checked }}</span>
<br><br>
<Tag type="dot" color="gold">标签四</Tag>
</div>
</template>
<script>
export default {
data () {
return {
show: true,
count: [0, 1, 2],
checked: true
};
},
methods: {
handleClose () {
this.show = false;
},
handleAdd () {
if (this.count.length) {
this.count.push(this.count[this.count.length - 1] + 1);
} else {
this.count.push(0);
}
},
handleClose2 (event, name) {
const index = this.count.indexOf(name);
this.count.splice(index, 1);
},
toggle() {
this.checked = !this.checked;
}
}
};
</script>

23
examples/routers/time.vue Normal file
View file

@ -0,0 +1,23 @@
<template>
<div>
<Time :time="time1" />
<br>
<Time :time="time2" />
<br>
<Time :time="time3" :interval="1" />
<br>
<Time :time="time4" />
</div>
</template>
<script>
export default {
data () {
return {
time1: (new Date()).getTime() - 60 * 59 * 1000,
time2: (new Date()).getTime() - 86400 * 3 * 1000,
time3: (new Date()).getTime() - 1 * 1000,
time4: (new Date()).getTime() - 86400 * 60 * 1000,
};
}
};
</script>

61
examples/routers/timeline.vue Normal file
View file

@ -0,0 +1,61 @@
<style scoped>
.time{
font-size: 14px;
font-weight: bold;
}
.content{
padding-left: 5px;
}
</style>
<template>
<div>
<Timeline>
<Timeline-item>
<p class="time">1976年</p>
<p class="content">Apple I 问世</p>
</Timeline-item>
<Timeline-item>
<p class="time">1984年</p>
<p class="content">发布 Macintosh</p>
</Timeline-item>
<Timeline-item>
<p class="time">2007年</p>
<p class="content">发布 iPhone</p>
</Timeline-item>
<Timeline-item>
<p class="time">2010年</p>
<p class="content">发布 iPad</p>
</Timeline-item>
<Timeline-item>
<p class="time">2011年10月5日</p>
<p class="content">史蒂夫·乔布斯去世</p>
</Timeline-item>
</Timeline>
<Timeline>
<Timeline-item color="green">发布1.0版本</Timeline-item>
<Timeline-item color="green">发布2.0版本</Timeline-item>
<Timeline-item color="red">严重故障</Timeline-item>
<Timeline-item color="blue">发布3.0版本</Timeline-item>
</Timeline>
<Timeline pending>
<Timeline-item>发布1.0版本</Timeline-item>
<Timeline-item>发布2.0版本</Timeline-item>
<Timeline-item>发布3.0版本</Timeline-item>
<Timeline-item><a href="#">查看更多</a></Timeline-item>
</Timeline>
<Timeline>
<Timeline-item color="green">
<Icon type="trophy" slot="dot"></Icon>
<span>发布里程碑版本</span>
</Timeline-item>
<Timeline-item>发布1.0版本</Timeline-item>
<Timeline-item>发布2.0版本</Timeline-item>
<Timeline-item>发布3.0版本</Timeline-item>
</Timeline>
</div>
</template>
<script>
export default {
}
</script>

28
examples/routers/tooltip.vue Normal file
View file

@ -0,0 +1,28 @@
<template>
<div style="margin: 200px;">
<Tooltip always placement="top-end" :content="text" :delay="1000" theme="light">
<Button @click="disabled = true">延时1秒显示</Button>
</Tooltip>
<Tooltip always :max-width="200" content="我的文本超级无敌长我的文本超级无敌长我的文本超级无敌长我的文本超级无敌长我的文本超级无敌长我的文本超级无敌长">
<Button @click="handleChange">change</Button>
</Tooltip>
<Button @click="handleChange">change</Button>
<Poptip title="Title" padding="0" width="250" word-wrap content="我的文本超级，无敌,长我的文本超级无敌长我的文本超级无敌长我的文本超级无敌长我的文本超级无敌长我的文本超级无敌长">
<Button>Click</Button>
</Poptip>
</div>
</template>
<script>
export default {
data () {
return {
text: 'Tooltip 文字提示'
};
},
methods: {
handleChange () {
this.text = '提示'
}
}
}
</script>

57
examples/routers/transfer.vue Normal file
View file

@ -0,0 +1,57 @@
<template>
<Transfer
:data="data3"
:target-keys="targetKeys3"
:list-style="listStyle"
:render-format="render3"
:operations="['To left','To right']"
filterable
@on-change="handleChange3">
<div :style="{float: 'right', margin: '5px'}">
<Button type="ghost" size="small" @click="reloadMockData">Refresh</Button>
</div>
</Transfer>
</template>
<script>
export default {
data () {
return {
data3: this.getMockData(),
targetKeys3: this.getTargetKeys(),
listStyle: {
width: '250px',
height: '300px'
}
}
},
methods: {
getMockData () {
let mockData = [];
for (let i = 1; i <= 20; i++) {
mockData.push({
key: i.toString(),
label: 'Content ' + i,
description: 'The desc of content ' + i,
disabled: Math.random() * 3 < 1
});
}
return mockData;
},
getTargetKeys () {
return this.getMockData()
.filter(() => Math.random() * 2 > 1)
.map(item => item.key);
},
handleChange3 (newTargetKeys) {
this.targetKeys3 = newTargetKeys;
},
render3 (item) {
return item.label + ' - ' + item.description;
},
reloadMockData () {
this.data3 = this.getMockData();
this.targetKeys3 = this.getTargetKeys();
}
}
}
</script>

43
examples/routers/tree.vue Normal file
View file

@ -0,0 +1,43 @@
<template>
<Tree :data="data2" check-directly show-checkbox></Tree>
</template>
<script>
export default {
data () {
return {
data2: [
{
title: 'parent 1',
expand: true,
children: [
{
title: 'parent 1-1',
expand: true,
children: [
{
title: 'leaf 1-1-1'
},
{
title: 'leaf 1-1-2'
}
]
},
{
title: 'parent 1-2',
expand: true,
children: [
{
title: 'leaf 1-2-1'
},
{
title: 'leaf 1-2-1'
}
]
}
]
}
]
}
}
}
</script>

17
examples/routers/upload.vue Normal file
View file

@ -0,0 +1,17 @@
<template>
<Upload
multiple
type="drag"
paste
action="//jsonplaceholder.typicode.com/posts/">
<div style="padding: 20px 0">
<Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
<p>Click or drag files here to upload</p>
</div>
</Upload>
</template>
<script>
export default {
}
</script>