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

Merge branch '2.0' into 2.0

Browse source
This commit is contained in:
nodephp 2018-10-29 15:04:40 +08:00 • committed by GitHub
commit eeaf90df89
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
453 changed files with 86037 additions and 26227 deletions
Download patch file Download diff file Expand all files Collapse all files

19
examples/app.vue
View file

@ -1,11 +1,14 @@
<style lang="less">
@import "../src/styles/index.less";
</style>
<style scoped>
nav { margin-bottom: 40px; }
ul { display: flex; flex-wrap: wrap; }
li { display: inline-block; }
li + li { border-left: solid 1px #bbb; padding-left: 10px; margin-left: 10px; }
<style lang="less" scoped>
nav {
margin-bottom: 40px;
ul { display: flex; flex-wrap: wrap; }
li { display: inline-block; }
li + li { border-left: solid 1px #bbb; padding-left: 10px; margin-left: 10px; }
}
.container{ padding: 10px 40px 0; }
.v-link-active { color: #bbb; }
</style>
@ -13,8 +16,10 @@ li + li { border-left: solid 1px #bbb; padding-left: 10px; margin-left: 10px; }
<div class="container">
<nav>
<ul>
<li><router-link to="/split">Split</router-link></li>
<li><router-link to="/layout">Layout</router-link></li>
<li><router-link to="/affix">Affix</router-link></li>
<li><router-link to="/anchor">Anchor</router-link></li>
<li><router-link to="/grid">Grid</router-link></li>
<li><router-link to="/button">Button</router-link></li>
<li><router-link to="/input">Input</router-link></li>
@ -59,6 +64,10 @@ li + li { border-left: solid 1px #bbb; padding-left: 10px; margin-left: 10px; }
<li><router-link to="/color-picker">ColorPicker</router-link></li>
<li><router-link to="/auto-complete">AutoComplete</router-link></li>
<li><router-link to="/scroll">Scroll</router-link></li>
<li><router-link to="/divider">Divider</router-link></li>
<li><router-link to="/time">Time</router-link></li>
<li><router-link to="/cell">Cell</router-link></li>
<li><router-link to="/drawer">Drawer</router-link></li>
</ul>
</nav>
<router-view></router-view>

30
examples/main.js
View file

@ -1,6 +1,7 @@
/**
* Created by aresn on 16/6/20.
*/
import 'babel-polyfill';
import Vue from 'vue';
import VueRouter from 'vue-router';
import App from './app.vue';
@ -9,7 +10,9 @@ import iView from '../src/index';
import locale from '../src/locale/lang/zh-CN';
Vue.use(VueRouter);
Vue.use(iView, { locale });
Vue.use(iView, {
locale
});
// 开启debug模式
Vue.config.debug = true;
@ -17,7 +20,12 @@ Vue.config.debug = true;
// 路由配置
const router = new VueRouter({
esModule: false,
mode: 'history',
routes: [
{
path: '/split',
component: (resolve) => require(['./routers/split.vue'], resolve)
},
{
path: '/layout',
component: (resolve) => require(['./routers/layout.vue'], resolve)
@ -26,6 +34,10 @@ const router = new VueRouter({
path: '/affix',
component: (resolve) => require(['./routers/affix.vue'], resolve)
},
{
path: '/anchor',
component: (resolve) => require(['./routers/anchor.vue'], resolve)
},
{
path: '/grid',
component: (resolve) => require(['./routers/grid.vue'], resolve)
@ -201,6 +213,22 @@ const router = new VueRouter({
{
path: '/scroll',
component: (resolve) => require(['./routers/scroll.vue'], resolve)
},
{
path: '/divider',
component: (resolve) => require(['./routers/divider.vue'], resolve)
},
{
path: '/time',
component: (resolve) => require(['./routers/time.vue'], resolve)
},
{
path: '/cell',
component: (resolve) => require(['./routers/cell.vue'], resolve)
},
{
path: '/drawer',
component: (resolve) => require(['./routers/drawer.vue'], resolve)
}
]
});

37
examples/routers/alert.vue
View file

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

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>

107
examples/routers/avatar.vue
View file

@ -1,80 +1,55 @@
<template>
<div>
<Avatar icon="person" size="large" style="background-color: #fde3cf;color: #f56a00"></Avatar>
<Avatar icon="person"></Avatar>
<Avatar icon="person" size="small"></Avatar>
<Avatar icon="person" size="large" shape="square"></Avatar>
<Avatar icon="person" shape="square"></Avatar>
<Avatar icon="person" size="small" shape="square"></Avatar>
<br><br>
<Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" size="large"></Avatar>
<Avatar src="https://avatars2.githubusercontent.com/u/5370542?v=4&s=460"></Avatar>
<Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" size="small"></Avatar>
<Avatar src="https://avatars2.githubusercontent.com/u/5370542?v=4&s=460" size="large" shape="square"></Avatar>
<Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" shape="square"></Avatar>
<Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" size="small" shape="square"></Avatar>
<br><br>
<Avatar size="large">Leo</Avatar>
<Avatar size="large">A</Avatar>
<Avatar size="default">A</Avatar>
<Avatar size="small">A</Avatar>
<Avatar size="large">Tomserm</Avatar>
<Avatar size="large">{{ name }}</Avatar>
{{ name }}
<br><br>
<Badge dot>
<Avatar icon="person" shape="square"></Avatar>
</Badge>
<Badge :count="3">
<Avatar icon="person" shape="square"></Avatar>
</Badge>
<Button @click="change">change</Button>
<Menu mode="horizontal" :theme="theme1" active-name="1">
<MenuItem name="1">
<Icon type="ios-paper"></Icon>
内容管理
</MenuItem>
<MenuItem name="2">
<Icon type="ios-people"></Icon>
用户管理
</MenuItem>
<Submenu name="3">
<template slot="title">
<Icon type="stats-bars"></Icon>
统计分析
</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="settings"></Icon>
综合设置
</MenuItem>
<div>
<Avatar icon="person"></Avatar>
<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>
</Menu>
<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" />
</div>
</template>
<script>
const UserList = ['二', '小二', '三', '二个人'];
const ColorList = ['#f56a00', '#7265e6', '#ffbf00', '#00a2ae'];
export default {
data () {
return {
name: 'Aresn',
theme1: 'dark'
user: UserList[0],
color: ColorList[0]
}
},
methods: {
change () {
this.name = 'Tomserm'
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];
}
}
}

61
examples/routers/badge.vue
View file

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

5
examples/routers/breadcrumb.vue
View file

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

440
examples/routers/button.vue
View file

File diff suppressed because one or more lines are too long

2
examples/routers/card.vue
View file

@ -2,7 +2,7 @@
<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>

72
examples/routers/carousel.vue
View file

@ -1,40 +1,3 @@
<template>
<div>
<Carousel v-model="v1" dots="inside" trigger="hover" autoplay loop radius-dot easing="fade">
<Carousel-item>
<div class="demo-carousel">1</div>
</Carousel-item>
<Carousel-item>
<div class="demo-carousel">2</div>
</Carousel-item>
<Carousel-item>
<div class="demo-carousel">3</div>
</Carousel-item>
<Carousel-item>
<div class="demo-carousel">4</div>
</Carousel-item>
</Carousel>
{{ v1 }}
<div @click="v1 = 0">change v1</div>
</div>
</template>
<script>
export default {
data () {
return {
v1: 0
};
},
methods: {
push () {
this.pushItem.push('test');
},
slideChange (from, to) {
this.log.push(`From ${from} To ${to}`);
}
}
}
</script>
<style>
.demo-carousel{
height: 200px;
@ -44,4 +7,37 @@
font-size: 20px;
background: #506b9e;
}
</style>
</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>

105
examples/routers/cascader.vue
View file

@ -1,66 +1,61 @@
<template>
<div style="margin: 100px;width: 300px;">
<Cascader v-model="value" :data="data" change-on-select></Cascader>
</div>
<Cascader :data="data4" :load-data="loadData"></Cascader>
</template>
<script>
export default {
data () {
return {
value: ['beijing', 'gugong'],
data: []
data4: [
{
value: 'beijing',
label: '北京',
children: [],
loading: false
},
{
value: 'hangzhou',
label: '杭州',
children: [],
loading:false
}
]
}
},
mounted () {
setTimeout(() => {
this.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: '狮子林',
}
]
}
],
}];
}, 100)
methods: {
loadData (item, callback) {
item.loading = true;
setTimeout(() => {
if (item.value === 'beijing') {
item.children = [
{
value: 'talkingdata',
label: 'TalkingData'
},
{
value: 'baidu',
label: '百度'
},
{
value: 'sina',
label: '新浪'
}
];
} else if (item.value === 'hangzhou') {
item.children = [
{
value: 'ali',
label: '阿里巴巴'
},
{
value: '163',
label: '网易'
}
];
}
item.loading = false;
callback();
}, 1000);
}
}
}
</script>

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>

63
examples/routers/circle.vue
View file

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

48
examples/routers/collapse.vue
View file

@ -1,9 +1,21 @@
<template>
<div style="width: 400px;margin: 200px;">
<Collapse v-model="v1" accordion>
<Panel name="1">
<div>
<Collapse accordion v-model="value3" simple>
<Panel name="1" hide-arrow>
史蒂夫·乔布斯
<p slot="content">史蒂夫·乔布斯（Steve Jobs），1955年2月24日生于美国加利福尼亚州旧金山，美国发明家、企业家、美国苹果公司联合创办人。</p>
<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">
斯蒂夫·盖瑞·沃兹尼亚克
@ -14,17 +26,33 @@
<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 {
props: {},
data () {
return {
v1: '2'
value3: ['1', '2', '3'],
value4: '1-1',
value5: ['21', '22', '23']
};
},
computed: {},
methods: {}
}
};
</script>
</script>

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

@ -1,41 +1,17 @@
<template>
<div style="margin: 100px;">
{{ color }}
<!--<Input placeholder="请输入..." size="large" style="width: 50px;"></Input>-->
<color-picker @on-change="c1" @on-active-change="c2" v-model="color" placement="bottom-start" size="large"></color-picker>
<Date-picker transfer type="date" placeholder="选择日期" style="width: 200px"></Date-picker>
<color-picker :transfer="true" ref="xxx" v-model="color" format="rgb" alpha :recommend="true"></color-picker>
<color-picker v-model="color2" format="hsv" :alpha="true" :recommend="false"></color-picker>
<!--<Date-picker type="date" placeholder="选择日期" style="width: 200px"></Date-picker>-->
<color-picker v-model="color" placement="bottom-start" size="small"></color-picker>
<Date-picker type="date" placeholder="选择日期" size="small" style="width: 200px"></Date-picker>
<Button @click="setColor">set color</Button>
<br><br><br><br>
<ColorPicker v-model="color7" :hue="false"></ColorPicker>
{{ color1 }}
<ColorPicker v-model="color1" />
<ColorPicker v-model="color2" :editable="false"/>
</div>
</template>
<script>
export default {
props: {},
data () {
return {
color: 'rgba(12,34,255,.85)',
color2: '',
color7: '#19be6b'
color1: '#19be6b',
color2: ''
};
},
computed: {},
methods: {
setColor () {
this.color = '#26bc77';
},
c1 (d) {
console.log(d);
},
c2 (d) {
console.log(d);
}
}
};
</script>
</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>

190
examples/routers/date.vue
View file

@ -1,43 +1,45 @@
<!--<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>
<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>-->
@ -150,18 +152,54 @@
<!--<template>-->
<!--<div>-->
<!--<Date-picker type="datetime" placeholder="选择日期和时间" style="width: 200px"></Date-picker>-->
<!--<br>-->
<!--<Date-picker type="datetime" format="yyyy-MM-dd HH:mm" placeholder="选择日期和时间（不含秒）" style="width: 200px"></Date-picker>-->
<!--<br>-->
<!--<Date-picker type="datetimerange" placeholder="选择日期和时间" style="width: 300px"></Date-picker>-->
<!--<br>-->
<!--<Date-picker type="datetimerange" format="yyyy-MM-dd HH:mm" placeholder="选择日期和时间（不含秒）" style="width: 300px"></Date-picker>-->
<!--<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>-->
@ -189,33 +227,43 @@
<!--<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>
<DatePicker v-model="value" @on-change="handleChange" type="datetimerange" placeholder="Select date" style="width: 400px"></DatePicker>
<DatePicker v-model="value2" type="datetime" @on-change="handleChange" style="width: 200px"></DatePicker>
<TimePicker type="time" placeholder="Select time" style="width: 168px"></TimePicker>
{{ value }}
<br>
{{ value2 }}
<br><br>
<DatePicker type="year" v-model="value3" placeholder="Select year" style="width: 200px"></DatePicker>
<DatePicker type="month" v-model="value4" placeholder="Select month" style="width: 200px"></DatePicker>
<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 {
data () {
return {
value: ['2018-03-05 10:00:00', '2018-05-15 10:01:00'],
value2: '2018-02-05 10:09:00',
value3: '1978',
value4: '1978-05'
}
},
methods: {
handleChange (v) {
console.log(v);
}
}
}
</script>

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

@ -0,0 +1,75 @@
<template>
<Row :gutter="16">
<i-col span="12">
<Card title="horizontal divider">
<div>
<p>
iView is a set of UI components and widgets built on Vue.js.
iView is a set of UI components and widgets built on Vue.js.
iView is a set of UI components and widgets built on Vue.js.
</p>
<Divider/>
<p>
iView is a set of UI components and widgets built on Vue.js.
iView is a set of UI components and widgets built on Vue.js.
iView is a set of UI components and widgets built on Vue.js.
</p>
<Divider>iView </Divider>
<p>
iView is a set of UI components and widgets built on Vue.js.
iView is a set of UI components and widgets built on Vue.js.
iView is a set of UI components and widgets built on Vue.js.
</p>
<Divider dashed/>
<p>
iView is a set of UI components and widgets built on Vue.js.
iView is a set of UI components and widgets built on Vue.js.
iView is a set of UI components and widgets built on Vue.js.
</p>
<Divider orientation="left">iView</Divider>
<p>
iView is a set of UI components and widgets built on Vue.js.
iView is a set of UI components and widgets built on Vue.js.
iView is a set of UI components and widgets built on Vue.js.
</p>
<Divider orientation="right">iView</Divider>
<p>
iView is a set of UI components and widgets built on Vue.js.
iView is a set of UI components and widgets built on Vue.js.
iView is a set of UI components and widgets built on Vue.js.
</p>
</div>
</Card>
</i-col>
<i-col span="12">
<Card title="vertical divider">
<div>
iView
<Divider type="vertical" />
<a href="#">Components</a>
<Divider type="vertical" />
<a href="#">Divider</a>
</div>
</Card>
</i-col>
</Row>
</template>
<script>
export default {}
</script>
<style>
</style>

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

@ -0,0 +1,219 @@
<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;">
</div>
<Drawer v-model="visible" width="70" 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>
<Drawer v-model="visible2" 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" 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('关闭了');
}
}
};
</script>
<style>
body{
height: 2000px;
}
</style>

54
examples/routers/dropdown.vue
View file

@ -1,17 +1,45 @@
<template>
<Dropdown trigger="click" style="margin-left: 20px">
<a href="javascript:void(0)">
click 触发
<Icon type="arrow-down-b"></Icon>
</a>
<DropdownMenu slot="list">
<DropdownItem>驴打滚</DropdownItem>
<DropdownItem>炸酱面</DropdownItem>
<DropdownItem>豆汁儿</DropdownItem>
<DropdownItem>冰糖葫芦</DropdownItem>
<DropdownItem>北京烤鸭</DropdownItem>
</DropdownMenu>
</Dropdown>
<div>
<Dropdown trigger="hover">
<a href="javascript:void(0)">
下拉菜单
<Icon type="ios-arrow-down"></Icon>
</a>
<DropdownMenu slot="list">
<DropdownItem>驴打滚</DropdownItem>
<DropdownItem 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 {

903
examples/routers/form.vue
View file

@ -1,426 +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>
<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">
<!--<Input v-model="formValidate.mail" placeholder="请输入邮箱"></Input>-->
<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">
<!--<Input v-model="formValidate.mail" placeholder="请输入邮箱"></Input>-->
<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">
<!--<Input v-model="formValidate.mail" placeholder="请输入邮箱"></Input>-->
<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>
<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 {
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: [],
formItem: {
input: '',
select: '',
radio: 'male',
checkbox: [],
switch: true,
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' }
]
slider: [20, 50],
textarea: ''
}
}
},
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>

163
examples/routers/grid.vue
View file

@ -1,25 +1,152 @@
<style>
/*.ivu-col div{*/
/*background: rgba(0,153,229,.7);*/
/*}*/
.view {
height: 100px;
width: 100px;
background: yellow;
}
</style>
<template>
<div>
<Row :gutter="64">
<Card>
<i-col span="6">
<div>col-6</div>
</i-col>
<i-col span="6">
<div>col-6</div>
</i-col>
<i-col span="6">
<div>col-6</div>
</i-col>
<i-col span="6">
<div>col-6</div>
</i-col>
</Card>
<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>

111
examples/routers/input-number.vue
View file

@ -1,39 +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>
<!--<Input-number :max="max" name="he" :min="-1" v-model="v1" :autofocus="autofocus"></Input-number>-->
<!--{{ v1 }}-->
<!--<div @click="c">change v1</div>-->
<!--<div @click="changeMax">change max</div>-->
<!--<Input-number disabled :max="10" :min="1" :step="1.2" v-model="v2"></Input-number>-->
<!--<Input-number :max="10" :min="1" v-model="obj.v"></Input-number>-->
<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>
<!-- <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 {
props: {},
data () {
return {
v1: 1,
v2: 1,
max: 10,
autofocus: true,
obj: {
},
value1: 1.0,
value2: 1
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
};
},
computed: {},
methods: {
c () {
this.v1 = 5;
focus (e) {
e.target.select();
},
changeMax () {
this.max++;
change (v) {
console.log(v);
}
}
};
</script>
</script>

165
examples/routers/input.vue
View file

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

9
examples/routers/layout.vue
View file

@ -1,10 +1,13 @@
<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">
@ -52,6 +55,12 @@ export default {
methods: {
toggleCollapse () {
this.$refs.side.toggleCollapse();
},
change () {
this.isCollapsed = !this.isCollapsed;
},
changed (res) {
console.log(res)
}
},
watch: {

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

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

120
examples/routers/menu.vue
View file

@ -1,97 +1,45 @@
<template>
<div>
<Menu :theme="theme1" active-name="1" accordion @on-select="handleSelect" @on-open-change="handleOpen" :open-names="openArr">
<Menu-item name="1">
<Icon type="ios-paper"></Icon>
一级1
</Menu-item>
<Menu-item name="2">
<Icon type="ios-people"></Icon>
一级2
</Menu-item>
<Submenu name="3">
<template slot="title">
<Icon type="ios-people"></Icon>
一级3
</template>
<Menu-item name="3-1">二级1</Menu-item>
<Menu-item name="3-2">二级2</Menu-item>
<Submenu name="3-3">
<template slot="title">
<Icon type="stats-bars"></Icon>
二级3
</template>
<Menu-item name="3-3-1">三级1</Menu-item>
<Menu-item name="3-3-2">三级2</Menu-item>
<Submenu name="3-3-3">
<template slot="title">
<Icon type="stats-bars"></Icon>
三级3
</template>
<Menu-item name="3-3-3-1">四级1</Menu-item>
<Menu-item name="3-3-3-2">四级2</Menu-item>
<MenuGroup title="Menu-Group">
<MenuItem name="3-3-3-3-1">
<Icon type="document-text"></Icon>
Group-item1
</MenuItem>
<MenuItem name="3-3-3-3-2">
<Icon type="chatbubbles"></Icon>
Group-item2
</MenuItem>
</MenuGroup>
</Submenu>
<Submenu name="3-3-4">
<template slot="title">
<Icon type="stats-bars"></Icon>
三级4
</template>
<Menu-item name="3-3-4-1">四级1</Menu-item>
<Menu-item name="3-3-4-2">四级2</Menu-item>
</Submenu>
</Submenu>
<Submenu name="3-4">
<template slot="title">
<Icon type="stats-bars"></Icon>
二级4
</template>
<Menu-item name="3-4-1">三级1</Menu-item>
<Menu-item name="3-4-2">三级2</Menu-item>
</Submenu>
</Submenu>
<Menu-item name="4">
<Icon type="settings"></Icon>
一级4
</Menu-item>
</Menu>
<br>
<p>切换主题</p>
<Radio-group v-model="theme1">
<Radio label="light"></Radio>
<Radio label="dark"></Radio>
<Radio label="primary"></Radio>
</Radio-group>
<Input v-model="value4" icon="ios-clock-outline" placeholder="请输入..." style="width: 200px"></Input>
</div>
<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: 'dark',
value4: '',
openArr: ['3', '3-3', '3-3-3']
};
theme1: 'light'
}
},
methods: {
handleSelect (name) {
// console.log(name);
return name;
},
handleOpen (openArr) {
// console.log(openArr);
return openArr;
hs (n) {
console.log(n);
}
}
};
}
</script>

63
examples/routers/message.vue
View file

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

175
examples/routers/modal.vue
View file

@ -1,45 +1,150 @@
<template>
<div>
<Button @click="instance('info')">Info</Button>
<Button @click="instance('success')">Success</Button>
<Button @click="instance('warning')">Warning</Button>
<Button @click="instance('error')">Error</Button>
<Button type="primary" @click="modal1 = true">Display dialog box</Button>
<Modal
v-model="modal1"
title="Common Modal dialog box title"
@on-ok="ok"
@on-cancel="cancel">
<p>Content of dialog</p>
<p>Content of dialog</p>
<p>Content of dialog</p>
<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 {
methods: {
instance (type) {
const title = 'Title';
const content = '<p>Content of dialog</p><p>Content of dialog</p>';
switch (type) {
case 'info':
this.$Modal.info({
title: title,
content: content,
closable: true
});
break;
case 'success':
this.$Modal.success({
title: title,
content: content
});
break;
case 'warning':
this.$Modal.warning({
title: title,
content: content
});
break;
case 'error':
this.$Modal.error({
title: title,
content: content
});
break;
}
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>

106
examples/routers/notice.vue
View file

@ -1,85 +1,39 @@
<template>
<div>
<p>带描述信息</p>
<Button @click="normal(false)">普通</Button>
<Button @click="info(false)">消息</Button>
<Button @click="success(false)">成功</Button>
<Button @click="warning(false)">警告</Button>
<Button @click="error(false)">错误</Button>
<Button @click="testRender()">render</Button>
<p>仅标题</p>
<Button @click="info(true)">消息</Button>
<Button @click="success(true)">成功</Button>
<Button @click="warning(true)">警告</Button>
<Button @click="error(true)">错误</Button>
<Button @click="destroy()">销毁</Button>
</div>
<Select v-model="model1" style="width:200px">
<Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
</Select>
</template>
<script>
export default {
methods: {
normal (nodesc) {
this.$Notice.open({
title: 'google',
duration: 0,
desc: nodesc ? '' : '这里是通知描述这里,是通知描述这里是通知描述这里,是通知描述这里,是通知描述这里是通知描述这里是通知描述',
render (h) {
return h('span', {}, 'sdsdfsdf');
}
});
},
info (nodesc) {
this.$Notice.info({
// title: '这是通知标题',
duration: 0,
desc: nodesc ? '' : '这里是通知描述这里,是通知描述这里是通知描述这里,是通知描述这里,是通知描述这里是通知描述这里是通知描述',
render (h) {
return h('span', {}, 'sdsdfsdf');
}
});
},
success () {
this.$Notice.success({
title: '这是通知标题',
desc: '当你定义了render之后，这个描述会被覆盖',
render: h => {
return h('span', {}, [
'这是',
h('Button', {props: {type: 'text'}}, 'render'),
'函数渲染的'
]);
data () {
return {
cityList: [
{
value: 'New York',
label: 'New York'
},
duration: 0
});
},
warning (nodesc) {
this.$Notice.warning({
title: '这是通知标题',
desc: nodesc ? '' : '这里是通知描述这里,是通知描述这里是通知描述这里,是通知描述这里,是通知描述这里是通知描述这里是通知描述',
});
},
error (nodesc) {
this.$Notice.error({
title: '这是通知标题',
desc: nodesc ? '' : '这里是通知描述这里,是通知描述这里是通知描述这里,是通知描述这里,是通知描述这里是通知描述这里是通知描述'
});
},
testRender () {
this.$Notice.info({
title: '这是通知标题',
duration: 0,
// desc: '当你定义了render之后，这个描述会被覆盖',
render: h => {
return h('span', {}, [
'这是',
h('Button', {props: {type: 'text'}}, 'render'),
'函数渲染的'
]);
{
value: 'London',
label: 'London'
},
});
},
destroy () {
this.$Notice.destroy();
{
value: 'Sydney',
label: 'Sydney'
},
{
value: 'Ottawa',
label: 'Ottawa'
},
{
value: 'Paris',
label: 'Paris'
},
{
value: 'Canberra',
label: 'Canberra'
}
],
model1: 'Sydney'
}
}
}

29
examples/routers/page.vue
View file

@ -1,10 +1,37 @@
<template>
<div>
<Page :total="total" show-sizer show-elevator show-total :current.sync="current"></Page>
<Page prev-text="上一页" next-text="下一页" :total="total" show-sizer show-elevator show-total :current.sync="current"></Page>
{{ current }}
<Button type="primary" @click="subject">- 1</Button>
<Button type="primary" @click="change">Change</Button>
<Page :current="2" :total="50" simple></Page>
<div style="margin:10px 0px">
<Page :total="1000" show-sizer show-elevator show-total :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>

91
examples/routers/poptip.vue
View file

@ -1,22 +1,87 @@
<template>
<div style="margin: 200px;">
<Poptip title="提示标题" transfer>
<div slot="content" style="padding: 50px">
<Button>click me</Button>
</div>
<Button>click 激活</Button>
</Poptip>
<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 {
methods: {
ok () {
this.$Message.info('点击了确定');
},
cancel () {
this.$Message.info('点击了取消');
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>

48
examples/routers/progress.vue
View file

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

14
examples/routers/rate.vue
View file

@ -2,6 +2,14 @@
<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>-->
@ -17,7 +25,11 @@
valueHalf: 2.5,
valueText: 3,
valueCustomText: 4.0,
valueDisabled: 2.4
valueDisabled: 2.4,
valueClear: 1,
valueClearHalf: 1.5,
characterValue: 2.5,
cv: 3.5
}
}
}

249
examples/routers/select.vue
View file

@ -1,235 +1,15 @@
<!--<template>-->
<!--<div>-->
<!--{{ model10 }} - -->
<!--{{ model11 }}-->
<!--<Select v-model="model10" style="width:260px">-->
<!--<Option v-for="(item, index) in cityList" :value="item.value" :key="index">{{ item.label }}</Option>-->
<!--</Select>-->
<!--<Select v-model="model11" style="width:260px">-->
<!--<Option v-for="(item, index) in cityList" :value="item.value" :key="index">{{ item.label }}</Option>-->
<!--</Select>-->
<!--</div>-->
<!--</template>-->
<!--<script>-->
<!--export default {-->
<!--data () {-->
<!--return {-->
<!--cityList: [],-->
<!--model10: '',-->
<!--model11: '',-->
<!--model12: ''-->
<!--}-->
<!--},-->
<!--mounted () {-->
<!--setTimeout(() => {-->
<!--this.cityList = [-->
<!--{-->
<!--value: 'beijing',-->
<!--label: '北京市'-->
<!--},-->
<!--{-->
<!--value: 'shanghai',-->
<!--label: '上海市'-->
<!--},-->
<!--{-->
<!--value: 'shenzhen',-->
<!--label: '深圳市'-->
<!--},-->
<!--{-->
<!--value: 'hangzhou',-->
<!--label: '杭州市'-->
<!--},-->
<!--{-->
<!--value: 'nanjing',-->
<!--label: '南京市'-->
<!--},-->
<!--{-->
<!--value: 'chongqing',-->
<!--label: '重庆市'-->
<!--}-->
<!--];-->
<!--}, 1000);-->
<!--}-->
<!--}-->
<!--</script>-->
<!--<template>-->
<!--<div>-->
<!--<Select v-model="value">-->
<!--<Option v-for="item in list" :value="item.value" :label="item.label" :key="item.value"></Option>-->
<!--</Select>-->
<!--<Button @click="setList">set list</Button>-->
<!--</div>-->
<!--</template>-->
<!--<script>-->
<!--export default {-->
<!--data () {-->
<!--return {-->
<!--value: '',-->
<!--list: []-->
<!--}-->
<!--},-->
<!--methods: {-->
<!--setList () {-->
<!--let list = [];-->
<!--for (let i = 0; i < 400; i++) {-->
<!--list.push({-->
<!--value: 'value' + i,-->
<!--label: 'label' + i-->
<!--});-->
<!--}-->
<!--this.list = list;-->
<!--}-->
<!--}-->
<!--}-->
<!--</script>-->
<!--<template>-->
<!--<div style="width: 400px;margin: 50px;">-->
<!--<div>data: {{ model13 }}</div>-->
<!--<Row>-->
<!--<Col span="12" style="padding-right:10px">-->
<!--<Select-->
<!--size="small"-->
<!--placeholder="提示提示"-->
<!--v-model="model13"-->
<!--filterable-->
<!--remote-->
<!--transfer-->
<!--:remote-method="remoteMethod1"-->
<!--:loading="loading1">-->
<!--<Option v-for="(option, index) in options1" :value="option.value" :key="index">{{option.label}}</Option>-->
<!--</Select>-->
<!--</Col>-->
<!--<Col span="12">-->
<!--<Select-->
<!--v-model="model14"-->
<!--multiple-->
<!--filterable-->
<!--remote-->
<!--:remote-method="remoteMethod2"-->
<!--:loading="loading2">-->
<!--<Option v-for="(option, index) in options2" :value="option.value" :key="index">{{option.label}}</Option>-->
<!--</Select>-->
<!--</Col>-->
<!--</Row>-->
<!--</div>-->
<!--</template>-->
<!--<script>-->
<!--export default {-->
<!--data () {-->
<!--return {-->
<!--model13: '',-->
<!--loading1: false,-->
<!--options1: [],-->
<!--model14: [],-->
<!--loading2: false,-->
<!--options2: [],-->
<!--list: ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New hampshire', 'New jersey', 'New mexico', 'New york', 'North carolina', 'North dakota', 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode island', 'South carolina', 'South dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 'Virginia', 'Washington', 'West virginia', 'Wisconsin', 'Wyoming']-->
<!--}-->
<!--},-->
<!--methods: {-->
<!--remoteMethod1 (query) {-->
<!--if (query !== '') {-->
<!--this.loading1 = true;-->
<!--setTimeout(() => {-->
<!--this.loading1 = false;-->
<!--const list = this.list.map(item => {-->
<!--return {-->
<!--value: item,-->
<!--label: item-->
<!--};-->
<!--});-->
<!--this.options1 = list.filter(item => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1);-->
<!--}, 200);-->
<!--} else {-->
<!--this.options1 = [];-->
<!--}-->
<!--},-->
<!--remoteMethod2 (query) {-->
<!--if (query !== '') {-->
<!--this.loading2 = true;-->
<!--setTimeout(() => {-->
<!--this.loading2 = false;-->
<!--const list = this.list.map(item => {-->
<!--return {-->
<!--value: item,-->
<!--label: item-->
<!--};-->
<!--});-->
<!--this.options2 = list.filter(item => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1);-->
<!--}, 200);-->
<!--} else {-->
<!--this.options2 = [];-->
<!--}-->
<!--}-->
<!--}-->
<!--}-->
<!--</script>-->
<!--<template>-->
<!--<div style="width: 300px">-->
<!--<Select-->
<!--v-model="model14"-->
<!--multiple-->
<!--filterable-->
<!--remote-->
<!--:remote-method="remoteMethod2"-->
<!--:loading="loading2">-->
<!--<Option v-for="(option, index) in options2" :value="option.value" :key="index">{{option.label}}</Option>-->
<!--</Select>-->
<!--</div>-->
<!--</template>-->
<!--<script>-->
<!--export default {-->
<!--data () {-->
<!--return {-->
<!--model13: '',-->
<!--loading1: false,-->
<!--options1: [],-->
<!--model14: [],-->
<!--loading2: false,-->
<!--options2: [],-->
<!--list: ['a', 'b', 'c']-->
<!--}-->
<!--},-->
<!--methods: {-->
<!--remoteMethod2 (query) {-->
<!--if (query !== '') {-->
<!--this.loading2 = true;-->
<!--setTimeout(() => {-->
<!--this.loading2 = false;-->
<!--const list = this.list.map(item => {-->
<!--return {-->
<!--value: item,-->
<!--label: item-->
<!--};-->
<!--});-->
<!--this.options2 = list.filter(item => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1);-->
<!--}, 200);-->
<!--} else {-->
<!--this.options2 = [];-->
<!--}-->
<!--}-->
<!--}-->
<!--}-->
<!--</script>-->
<template>
<Row>
<Col span="12" style="padding-right:10px">
<Select v-model="model11" disabled filterable>
<div>
<Select v-model="model1" style="width:200px">
<Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
</Select>
</Col>
<Col span="12">
<!--<Select v-model="model12" filterable multiple>-->
<!--<Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>-->
<!--</Select>-->
<Input v-model="model13" disabled="" />
</Col>
</Row>
<Select v-model="model2" multiple style="width:200px">
<Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
</Select>
<Button type="primary" @click="changeData">changeData</Button>
</div>
</template>
<script>
export default {
@ -261,11 +41,14 @@
label: 'Canberra'
}
],
model11: 'New York',
model12: [],
model13: 'New York'
model1: '',
model2: []
}
},
methods: {
changeData() {
this.model2.push('Canberra')
}
}
}
</script>

145
examples/routers/slider.vue
View file

@ -1,68 +1,103 @@
<!--<template>-->
<!--<div style="margin: 0 400px;">-->
<!--<Slider v-model="valueSingle" @on-change="updateSingleDisplayValue"></Slider>-->
<!--<Button @click="randomSingle">change</Button> {{singleDisplayValue}}-->
<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="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>
<!--<Slider v-model="valueRange" range @on-change="updateRangeDisplayValue"></Slider>-->
<!--<Button @click="randomRange">change</Button> {{rangeDisplayValue}}-->
<!--<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 {-->
<!--valueSingle: 10,-->
<!--valueRange: [20, 50],-->
<!--singleDisplayValue: 10,-->
<!--rangeDisplayValue: [20, 50]-->
<!--};-->
<!--modal1: false,-->
<!--value2: [20, 50],-->
<!--}-->
<!--},-->
<!--methods: {-->
<!--updateSingleDisplayValue (val){-->
<!--console.log('updateSingleDisplayValue', val);-->
<!--this.singleDisplayValue = val;-->
<!--ok () {-->
<!--this.$Message.info('Clicked ok');-->
<!--},-->
<!--updateRangeDisplayValue (val){-->
<!--console.log('updateRangeDisplayValue', val);-->
<!--this.rangeDisplayValue = val.join(' - ');-->
<!--},-->
<!--randomSingle () {-->
<!--this.valueSingle = this.random(0, 100);-->
<!--},-->
<!--randomRange () {-->
<!--this.valueRange = [this.random(0, 50), this.random(50, 100)];-->
<!--},-->
<!--random (min, max){-->
<!--return Math.round(Math.random() * (max - min)) + min;-->
<!--cancel () {-->
<!--this.$Message.info('Clicked cancel');-->
<!--}-->
<!--}-->
<!--};-->
<!--}-->
<!--</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>

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>

34
examples/routers/switch.vue
View file

@ -1,18 +1,46 @@
<template>
<div>
<i-switch v-model="m1" true-value="yes" false-value="no">
<i-switch v-model="m1" :loading="loading">
<span slot="open">开</span>
<span slot="close">关</span>
</i-switch>
{{ m1 }}
<div @click="m1 = 'no'">toggle</div>
<div @click="m1 = !m1">toggle</div>
<div @click="loading = !loading">loading</div>
<br><br>
<i-switch size="large" loading></i-switch>
<i-switch></i-switch>
<i-switch size="small" v-model="m1" :loading="loading"></i-switch>
<br><br>
<i-switch>
<span slot="open">开</span>
<span slot="close">关</span>
</i-switch>
<i-switch>
<Icon type="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: 'yes'
m1: true,
disabled: true,
loading: false
}
},
methods: {

43
examples/routers/table.vue
View file

@ -1,21 +1,21 @@
<template>
<div>
<Table border ref="selection" :columns="columns4" :data="data1" @drag="true" @on-drag-drop="onDragDrop"></Table>
<Button @click="handleSetData">Set Data</Button>
<Button @click="handleClearData">Clear Data</Button>
<Button @click="handleSelectAll(true)">Set all selected</Button>
<Button @click="handleSelectAll(false)">Cancel all selected</Button>
<Table ref="currentRowTable" :columns="columns3" :data="data1" @drag="true" @on-drag-drop="onDragDrop"></Table>
<Button @click="handleClearCurrentRow">Clear</Button>
</div>
</template>
<script>
export default {
data () {
return {
columns4: [
columns3: [
{
type: 'selection',
type: 'index',
width: 60,
align: 'center'
align: 'center',
indexMethod (row) {
return row._index;
}
},
{
title: 'Name',
@ -27,30 +27,21 @@
},
{
title: 'Address',
key: 'address'
key: 'address',
tooltip: true
}
],
data1: [
]
}
},
methods: {
handleSelectAll (status) {
this.$refs.selection.selectAll(status);
},
handleSetData () {
this.data1 = [
{
name: 'John Brown',
age: 18,
address: 'New York No. 1 Lake Park',
address: '自定义渲染列，使用 Vue 的 Render 函数。传入两个参数，第一个是 h，第二个为对象，包含 row、column 和 index，分别指当前行数据，当前列数据，当前行索引，详见示例。自定义渲染列，使用 Vue 的 Render 函数。传入两个参数，第一个是 h，第二个为对象，包含 row、column 和 index，分别指当前行数据，当前列数据，当前行索引，详见示例。自定义渲染列，使用 Vue 的 Render 函数。传入两个参数，第一个是 h，第二个为对象，包含 row、column 和 index，分别指当前行数据，当前列数据，当前行索引，详见示例。',
date: '2016-10-03'
},
{
name: 'Jim Green',
age: 24,
address: 'London No. 1 Lake Park',
address: 'London No. 1 Lake Park自定义渲染列，使用 Vue 的 Render 函',
date: '2016-10-01'
},
{
@ -65,10 +56,12 @@
address: 'Ottawa No. 2 Lake Park',
date: '2016-10-04'
}
];
},
handleClearData () {
this.data1 = [];
]
}
},
methods: {
handleClearCurrentRow () {
this.$refs.currentRowTable.clearCurrentRow();
},
onDragDrop(a,b){
console.log(a,b)

176
examples/routers/tabs.vue
View file

@ -1,77 +1,5 @@
<!--<template>-->
<!--<Tabs value="name1" :animated="false">-->
<!--<Tab-pane label="test" name="test">-->
<!--<Tabs type="card" v-bind:animated="true">-->
<!--<Tab-pane label="标签2一">标签2一的内容</Tab-pane>-->
<!--<Tab-pane label="标签2二">标签2二的内容</Tab-pane>-->
<!--<Tab-pane label="标签2三">标签2三的内容</Tab-pane>-->
<!--</Tabs>-->
<!--</Tab-pane>-->
<!--<Tab-pane :label="label1" name="name1">-->
<!--<Table :columns="columns1" :data="data1"></Table>-->
<!--</Tab-pane>-->
<!--<Tab-pane label="标签二" name="name2">-->
<!--<Table :columns="columns1" :data="data1"></Table>-->
<!--</Tab-pane>-->
<!--<Tab-pane label="标签三" name="name3">-->
<!--<Table :columns="columns1" :data="data1"></Table>-->
<!--</Tab-pane>-->
<!--</Tabs>-->
<!--</template>-->
<!--<script>-->
<!--export default {-->
<!--data () {-->
<!--return {-->
<!--label1: (h) => {-->
<!--return h('div', [-->
<!--h('span', '标签一'),-->
<!--h('Button', 'button')-->
<!--]);-->
<!--},-->
<!--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>
<Tabs type="card" closable @on-tab-remove="handleTabRemove">
<template>
<Tabs type="card" closable @on-tab-remove="handleTabRemove" :beforeRemove="handleBeforeRemove">
<TabPane label="标签一" v-if="tab0">标签一的内容</TabPane>
<TabPane label="标签二" v-if="tab1">标签二的内容</TabPane>
<TabPane label="标签三" v-if="tab2">标签三的内容</TabPane>
@ -89,93 +17,23 @@
methods: {
handleTabRemove (name) {
this['tab' + name] = false;
}
}
}
</script> -->
},
handleBeforeRemove (index) {
console.log(index);
<!--<template>-->
<!--<div>-->
<!--<Button type="ghost" @click="toFirst" size="small">to first</Button>-->
<!--<Button type="ghost" @click="toLast" size="small">to last</Button>-->
<!--<Tabs type="card" :animated="animated" v-model="activeTab">-->
<!--<TabPane v-for="tab in tabs" :key="tab" :label="'标签' + tab" :name="tab+''" closable>标签{{ tab }}</TabPane>-->
<!--<div slot="extra">-->
<!--<Button type="ghost" @click="handleTabsAdd" size="small">增加</Button>-->
<!--</div>-->
<!--</Tabs>-->
<!--</div>-->
<!--</template>-->
<!--<script>-->
<!--export default {-->
<!--data () {-->
<!--return {-->
<!--tabs: 2,-->
<!--activeTab:"2",-->
<!--animated:true-->
<!--}-->
<!--},-->
<!--methods: {-->
<!--handleTabsAdd () {-->
<!--this.tabs ++;-->
<!--this.activeTab = this.tabs + '';-->
<!--},-->
<!--toFirst () {-->
<!--this.activeTab = '1';-->
<!--},-->
<!--toLast () {-->
<!--this.activeTab = this.tabs+'';-->
<!--}-->
<!--}-->
<!--}-->
<!--</script>-->
<!--<template>-->
<!--<div>-->
<!--<Tabs type="card">-->
<!--<TabPane v-for="tab in tabs" :key="tab" :label="'标签' + tab">标签{{ tab }}</TabPane>-->
<!--</Tabs>-->
<!--<Button type="ghost" @click="handleTabsAdd" size="small">增加</Button>-->
<!--<Button type="ghost" @click="handleTabsMin" size="small">减少</Button>-->
<!--</div>-->
<!--</template>-->
<!--<script>-->
<!--export default {-->
<!--data () {-->
<!--return {-->
<!--tabs: 2-->
<!--}-->
<!--},-->
<!--methods: {-->
<!--handleTabsAdd () {-->
<!--this.tabs ++;-->
<!--},-->
<!--handleTabsMin () {-->
<!--this.tabs &#45;&#45;;-->
<!--}-->
<!--}-->
<!--}-->
<!--</script>-->
<template>
<Tabs type="card">
<TabPane v-for="tab in tabs" :key="tab" :label="'标签' + tab">标签{{ tab }}</TabPane>
<Button type="ghost" @click="handleTabsAdd" size="small" slot="extra">增加</Button>
</Tabs>
</template>
<script>
export default {
data () {
return {
tabs: 2
}
},
methods: {
handleTabsAdd () {
this.tabs ++;
return new Promise((resolve, reject) => {
this.$Modal.confirm({
title: 'Title',
content: '<p>Content of dialog</p><p>Content of dialog</p>',
onOk: () => {
resolve();
},
onCancel: () => {
reject();
}
});
});
}
}
}
</script>

52
examples/routers/tag.vue
View file

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

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>

9
examples/routers/tooltip.vue
View file

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

42
examples/routers/transfer.vue
View file

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

176
examples/routers/upload.vue
View file

@ -1,175 +1,17 @@
<template>
<div>
<div class="demo-upload-list" v-for="item in uploadList">
<template v-if="item.status === 'finished'">
<img :src="item.url">
<div class="demo-upload-list-cover">
<Icon type="ios-eye-outline" @click.native="handleView(item.name)"></Icon>
<Icon type="ios-trash-outline" @click.native="handleRemove(item)"></Icon>
</div>
</template>
<template v-else>
<i-progress v-if="item.showProgress" :percent="item.percentage" hide-info></i-progress>
</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
ref="upload"
:show-upload-list="false"
:default-file-list="defaultList"
:on-success="handleSuccess"
:format="['jpg','jpeg','png']"
:max-size="2048"
:on-format-error="handleFormatError"
:on-exceeded-size="handleMaxSize"
@on-progress="handleProgress"
:before-upload="handleBeforeUpload"
multiple
type="drag"
action="//jsonplaceholder.typicode.com/posts/"
style="display: inline-block;width:58px;">
<div style="width: 58px;height:58px;line-height: 58px;">
<Icon type="camera" size="20"></Icon>
</div>
</Upload>
{{ visible }}
</div>
</Upload>
</template>
<script>
export default {
data () {
return {
defaultList: [
{
'name': 'a42bdcc1178e62b4694c830f028db5c0',
'url': 'https://o5wwk8baw.qnssl.com/a42bdcc1178e62b4694c830f028db5c0/avatar'
},
{
'name': 'bc7521e033abdd1e92222d733590f104',
'url': 'https://o5wwk8baw.qnssl.com/bc7521e033abdd1e92222d733590f104/avatar'
}
],
imgName: '',
visible: false,
uploadList: []
}
},
computed: {
// uploadList () {
// return this.$refs.upload ? this.$refs.upload.fileList : [];
// }
},
watch: {
},
mounted () {
this.uploadList = this.$refs.upload.fileList;
// console.log(this.$refs.upload.fileList)
},
methods: {
handleView (name) {
this.imgName = name;
this.visible = true;
},
handleRemove (file) {
// 从 upload 实例删除数据
const fileList = this.$refs.upload.fileList;
this.$refs.upload.fileList.splice(fileList.indexOf(file), 1);
},
handleSuccess (res, file) {
// 因为上传过程为实例，这里模拟添加 url
file.url = 'https://o5wwk8baw.qnssl.com/7eb99afb9d5f317c912f08b5212fd69a/avatar';
file.name = '7eb99afb9d5f317c912f08b5212fd69a';
},
handleFormatError (file) {
this.$Notice.warning({
title: '文件格式不正确',
desc: '文件 ' + file.name + ' 格式不正确，请上传 jpg 或 png 格式的图片。'
});
},
handleMaxSize (file) {
this.$Notice.warning({
title: '超出文件大小限制',
desc: '文件 ' + file.name + ' 太大，不能超过 2M。'
});
},
handleBeforeUpload () {
const check = this.uploadList.length < 5;
if (!check) {
this.$Notice.warning({
title: '最多只能上传 5 张图片。'
});
}
return check;
},
handleProgress (s) {
console.log(s)
}
}
}
</script>
<style>
.demo-upload-list{
display: inline-block;
width: 60px;
height: 60px;
text-align: center;
line-height: 60px;
border: 1px solid transparent;
border-radius: 4px;
overflow: hidden;
background: #fff;
position: relative;
box-shadow: 0 1px 1px rgba(0,0,0,.2);
margin-right: 4px;
}
.demo-upload-list img{
width: 100%;
height: 100%;
}
.demo-upload-list-cover{
display: none;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0,0,0,.6);
}
.demo-upload-list:hover .demo-upload-list-cover{
display: block;
}
.demo-upload-list-cover i{
color: #fff;
font-size: 20px;
cursor: pointer;
margin: 0 2px;
}
</style>
<!--<template>-->
<!--<div>-->
<!--<Upload action="//jsonplaceholder.typicode.com/posts/" :before-upload="handleBeforeUpload" ref="file">-->
<!--<i-button type="ghost" icon="ios-cloud-upload-outline">选择文件</i-button>-->
<!--</Upload>-->
<!--<i-button @click.native="handleUpload">上传</i-button>-->
<!--</div>-->
<!--</template>-->
<!--<script>-->
<!--export default {-->
<!--data () {-->
<!--return {-->
<!--file: null-->
<!--}-->
<!--},-->
<!--methods: {-->
<!--handleBeforeUpload (file) {-->
<!--this.file = file;-->
<!--return false;-->
<!--},-->
<!--handleUpload () {-->
<!--this.$refs.file.post(this.file);-->
<!--}-->
<!--}-->
<!--}-->
<!--</script>-->