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

save

Browse source
This commit is contained in:
prefert 2020-09-03 15:53:31 +08:00
parent 8f9d3604e6
commit 5bb83ff8e5
258 changed files with 12974 additions and 7838 deletions
Download patch file Download diff file Expand all files Collapse all files

156
examples/routers/auto-complete.vue
View file

@ -1,51 +1,131 @@
<template>
<div style="margin: 100px;width: 200px;">
<div style="margin: 100px">
<AutoComplete
placement="top"
transfer
v-model="value"
icon="ios-search"
:data="data"
@on-search="onHandleSearch"
@on-change="onChange"
@on-select="onSelect"
>
<!--<Option v-for="item in data" :value="item" :label="item" :key="item">-->
<!--<span style="color: red">{{ item }}</span>-->
<!--</Option>-->
v-model="value4"
icon="ios-search"
placeholder="input here"
placement="bottom-start"
style="width:300px">
<div class="demo-auto-complete-item" v-for="item in data4">
<div class="demo-auto-complete-group">
<span>{{ item.title }}</span>
<a href="https://www.google.com/search?q=iView" target="_blank">更多</a>
</div>
<Option v-for="option in item.children" :value="option.title" :key="option.title">
<span class="demo-auto-complete-title">{{ option.title }}</span>
<span class="demo-auto-complete-count">{{ option.count }} 人关注</span>
</Option>
</div>
<a href="https://www.google.com/search?q=iView" target="_blank" class="demo-auto-complete-more">查看所有结果</a>
</AutoComplete>
<!-- <Select v-model="model1" style="width:200px">-->
<!-- <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>-->
<!-- </Select>-->
</div>
</template>
<script>
export default {
props: {},
data () {
return {
value: "",
source: ["1", "2", "3", "11", "12", "13"],
data: []
};
},
computed: {},
methods: {
onHandleSearch (value) {
let result = [];
for (let val of this.source) {
if (val.includes(value)) {
result.push(val);
value4: '',
data4: [
{
title: '话题',
children: [
{
title: 'iView',
count: 10000,
},
{
title: 'iView UI',
count: 10600,
}
]
},
{
title: '问题',
children: [
{
title: 'iView UI 有多好',
count: 60100,
},
{
title: 'iView 是啥',
count: 30010,
}
]
},
{
title: '文章',
children: [
{
title: 'iView 是一个设计语言',
count: 100000,
}
]
}
}
this.data = result;
},
onSelect (e) {
console.log('onSelect', e);
},
onChange (v) {
console.log("onChange", v);
},
fm (value, item) {
return item.toUpperCase().indexOf(value.toUpperCase()) !== -1;
],
cityList: [
{
value: 'New York',
label: 'New York'
},
{
value: 'London',
label: 'London'
},
{
value: 'Sydney',
label: 'Sydney'
},
{
value: 'Ottawa',
label: 'Ottawa'
},
{
value: 'Paris',
label: 'Paris'
},
{
value: 'Canberra',
label: 'Canberra'
}
],
model1: ''
}
}
};
}
</script>
<style>
.demo-auto-complete-item{
padding: 4px 0;
border-bottom: 1px solid #F6F6F6;
}
.demo-auto-complete-group{
font-size: 12px;
padding: 4px 6px;
}
.demo-auto-complete-group span{
color: #666;
font-weight: bold;
}
.demo-auto-complete-group a{
float: right;
}
.demo-auto-complete-count{
float: right;
color: #999;
}
.demo-auto-complete-more{
display: block;
margin: 0 auto;
padding: 4px;
text-align: center;
font-size: 12px;
}
</style>

5
examples/routers/avatar.vue
View file

@ -34,6 +34,11 @@
<Avatar custom-icon="ivu-icon-ios-person" />
<Avatar :src="src" size="large" @on-error="handleError" />
<Divider></Divider>
<Avatar src="https://i.loli.net/2017/08/21/599a521472424.jpg" size="64" shape="square" />
<Avatar src="https://i.loli.net/2017/08/21/599a521472424.jpg" size="64" shape="circle" />
<Avatar icon="ios-person" size="64" shape="circle" />
<Avatar size="42">U</Avatar>
</div>
</template>
<script>

46
examples/routers/badge.vue
View file

@ -20,10 +20,22 @@
<Badge :count="0" showZero>
<a href="#" class="demo-badge"></a>
</Badge>
<Badge>
<Icon type="md-time" slot="count" size="16" color="#ff6600" />
<a href="#" class="demo-badge"></a>
</Badge>
<Button @click="setCount">set count</Button>
<Divider></Divider>
<Badge :count="count" text="new">
<a href="#" class="demo-badge"></a>
</Badge>
<Badge :count="count">
<a href="#" class="demo-badge"></a>
<span slot="text">hhh</span>
</Badge>
<br><br>
<Badge text="hot">
<Button type="ghost">Hello</Button>
<Button type="primary" ghost>Hello</Button>
</Badge>
<br><br>
<div>
@ -34,6 +46,9 @@
<Badge status="warning" />
<br />
<Badge status="success" text="Success" />
<Badge status="success">
<strong slot="text">Success</strong>
</Badge>
<br />
<Badge status="error" text="Error" />
<br />
@ -75,6 +90,33 @@
<a href="#" class="demo-badge"></a>
</Badge>
</div>
<Divider></Divider>
<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" />
<br />
<Badge color="blue" text="blue" />
<Badge color="green" text="green" />
<Badge color="red" text="red" />
<Badge color="yellow" text="yellow" />
<Badge color="pink" text="pink" />
<Badge color="magenta" text="magenta" />
<Badge color="volcano" text="volcano" />
<Badge color="orange" text="orange" />
<Badge color="gold" text="gold" />
<Badge color="lime" text="lime" />
<Badge color="cyan" text="cyan" />
<Badge color="geekblue" text="geekblue" />
<Badge color="purple" text="purple" />
<br />
<Badge color="#2db7f5" text="#2db7f5" />
<Badge color="#f50" text="#f50" />
</div>
</template>
<script>
@ -91,4 +133,4 @@
}
}
};
</script>
</script>

110
examples/routers/button.vue
View file

@ -1,14 +1,22 @@
<template>
<div>
<Divider>vue-router 3.1 bug</Divider>
<Button to="/button">跳转到 Button（当前路径）</Button>
<Button to="/button" replace>跳转到 Button（当前路径, replace）</Button>
<Divider></Divider>
<Button icon="logo-github" size="small" shape="circle"></Button>
<Button icon="logo-github" size="large" shape="circle"></Button>
<Button icon="logo-github" shape="circle"></Button>
<Button icon="logo-github" size="large" shape="circle"></Button>
<Button icon="logo-github" size="small"></Button>
<Button size="small">EN</Button>
<Button icon="logo-github"></Button>
<Button>EN</Button>
<Button icon="logo-github" size="large"></Button>
<Button size="large">EN</Button>
<ButtonGroup size="small">
<Button icon="logo-github"></Button>
<Button icon="logo-twitter"></Button>
@ -16,13 +24,15 @@
EN
</Button>
</ButtonGroup>
<ButtonGroup>
<Button icon="logo-github"></Button>
<Button icon="logo-twitter"></Button>
<Button>
EN
ENs
</Button>
</ButtonGroup>
<ButtonGroup size="large">
<Button icon="logo-github"></Button>
<Button icon="logo-twitter"></Button>
@ -68,15 +78,28 @@
<Button type="error" ghost disabled>Error</Button>
<Button type="text" ghost disabled>Text</Button>
</div>
<Divider></Divider>
<Button type="primary">普通按钮</Button>
<Button type="primary" to="/">普通按钮</Button>
<Button type="primary" size="small">普通按钮</Button>
<Button type="primary" to="/" size="small">普通按钮</Button>
<Button type="primary" size="large">普通按钮</Button>
<Button type="primary" to="/" size="large">普通按钮</Button>
<Button type="primary" size="large" shape="circle">普通按钮</Button>
<Button type="primary" to="/" size="large" shape="circle">普通按钮</Button>
<br><br><br>
<Button type="primary" icon="ios-information-circle" size="small">Search</Button>
<Button type="primary" icon="ios-information-circle" size="default">Search</Button>
<Button type="primary" icon="ios-information-circle" size="large">Search</Button>
<br><br><br>
<Button to="/menu" @click="hc">Open Menu</Button>
<Button @click="hc">Open Menu2</Button>
<Button to="/menu" @click="hc">Open Menu2</Button>
<Button to="/menu" replace>Open Menu Replace</Button>
<Button to="//iviewui.com" target="_blank">Open iView</Button>
<hr>
<Button @click="hc">链接按钮</Button>
<Button to="/menu" @click="hc">链接按钮</Button>
<hr>
<Icon custom="i-icon i-icon-search" />
<Icon custom="i-icon i-icon-video" size="24" color="#ff6600" />
<Icon custom="i-icon i-icon-time" />
@ -155,8 +178,8 @@
</Button>
</Button-group>
<Button-group>
<Button type="primary" icon="ios-skipbackward"></Button>
<Button type="primary" icon="ios-skipforward"></Button>
<Button type="primary" icon="ios-skip-backward"></Button>
<Button type="primary" icon="ios-skip-forward"></Button>
</Button-group>
<Button-group>
<Button type="default" icon="ios-color-wand-outline"></Button>
@ -178,8 +201,8 @@
</Button>
</Button-group>
<Button-group shape="circle">
<Button type="primary" icon="ios-skipbackward"></Button>
<Button type="primary" icon="ios-skipforward"></Button>
<Button type="primary" icon="ios-skip-backward"></Button>
<Button type="primary" icon="ios-skip-forward"></Button>
</Button-group>
<Button-group shape="circle">
<Button type="default" icon="ios-color-wand-outline"></Button>
@ -223,10 +246,81 @@
<br><br>
<Button to="/icon">Open New Window</Button>
<br><br><br>
<ButtonGroup vertical size="small">
<Button icon="logo-facebook"></Button>
<Button icon="logo-twitter"></Button>
<Button icon="logo-googleplus"></Button>
<Button icon="logo-tumblr"></Button>
</ButtonGroup>
<ButtonGroup vertical>
<Button icon="logo-facebook"></Button>
<Button icon="logo-twitter"></Button>
<Button icon="logo-googleplus"></Button>
<Button icon="logo-tumblr"></Button>
</ButtonGroup>
<ButtonGroup vertical size="large">
<Button icon="logo-facebook"></Button>
<Button icon="logo-twitter"></Button>
<Button icon="logo-googleplus"></Button>
<Button icon="logo-tumblr"></Button>
</ButtonGroup>
<br><br>
<Button>
<Icon type="md-alert" />
左右图标
<Icon type="ios-aperture" />
</Button>
<Button>
左右图标
<Icon type="ios-aperture" />
</Button>
<Button>
<Icon type="md-alert" />
左右图标
</Button>
<Button icon="md-alert">
左右图标
</Button>
<Divider></Divider>
<div>
<RadioGroup v-model="buttonSize" type="button">
<Radio label="large">Large</Radio>
<Radio label="default">Default</Radio>
<Radio label="small">small</Radio>
</RadioGroup>
<br><br>
<Button :size="buttonSize" type="primary">Primary</Button>
<Button :size="buttonSize" type="default">Default</Button>
<Button :size="buttonSize" type="dashed">Dashed</Button>
<Button :size="buttonSize" type="text">Text</Button>
<br><br>
<Button :size="buttonSize" icon="md-download" type="primary" shape="circle"></Button>
<Button :size="buttonSize" icon="md-download" type="primary">Download</Button>
<br><br>
<ButtonGroup :size="buttonSize">
<Button :size="buttonSize" type="primary">
<Icon type="ios-arrow-back" />
Backward
</Button>
<Button :size="buttonSize" type="primary">
Forward
<Icon type="ios-arrow-forward" />
</Button>
</ButtonGroup>
</div>
<Divider></Divider>
<Button to="http://baidu.com" replace>http跳转</Button>
<Button to="https://iviewui.com" replace>https跳转</Button>
<Button :to="{path: '/icon'}">Router 对象跳转</Button>
</div>
</template>
<script>
export default {
data () {
return {
buttonSize: 'large'
}
},
methods: {
hc (data) {
console.log(data);
@ -525,4 +619,4 @@
.i-icon-financial_fill:before { content: "\e765"; }
.i-icon-commodity:before { content: "\e766"; }
</style>
</style>

2
examples/routers/card.vue
View file

@ -1,5 +1,5 @@
<template>
<Card style="width:350px">
<Card style="width:350px" to="/button">
<p slot="title">
<Icon type="ios-film-outline"></Icon>
<span>经典电影</span>

72
examples/routers/carousel.vue
View file

@ -1,9 +1,18 @@
<style>
.demo-carousel{
height: 200px;
line-height: 200px;
text-align: center;
color: #fff;
font-size: 20px;
background: #506b9e;
}
</style>
<template>
<div>
<!--#6076-->
<Carousel loop @on-change="onChange">
<div style="width: 400px;">
<Carousel v-model="value1" loop arrow="always" @on-change="handleChange">
<CarouselItem>
<div class="demo-carousel">111111111111</div>
<div class="demo-carousel">1</div>
</CarouselItem>
<CarouselItem>
<div class="demo-carousel">2</div>
@ -15,67 +24,20 @@
<div class="demo-carousel">4</div>
</CarouselItem>
</Carousel>
<Button @click="value1 = 2">change</Button>
</div>
</template>
<script>
export default {
data () {
return {
value1: 0
}
},
methods: {
onChange(oldIndex,newIndex){
console.log(oldIndex,newIndex,'------')
handleChange (old, newval) {
console.log(old, newval);
}
},
mounted () {
}
}
</script>
<style>
.demo-carousel{
height: 100px;
}
</style>
<!--<style>-->
<!-- .demo-carousel{-->
<!-- height: 200px;-->
<!-- line-height: 200px;-->
<!-- text-align: center;-->
<!-- font-size: 20px;-->
<!-- }-->
<!--</style>-->
<!--<template>-->
<!-- <div>-->
<!-- <Carousel v-model="value1" loop @on-change="handleChange" @on-click="handlerClick">-->
<!-- <CarouselItem v-for="it in 4" :key="it">-->
<!-- <div class="demo-carousel">-->
<!-- {{it}}<Button @click="handlerIndexClick(it)">点击事件</Button>-->
<!-- </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,'-&#45;&#45;on-change');-->
<!-- },-->
<!-- handlerClick(index){-->
<!-- console.log(index,'&#45;&#45;&#45;&#45;&#45;&#45;on-click');-->
<!-- },-->
<!-- handlerIndexClick(it){-->
<!-- console.log(it,'&#45;&#45;&#45;&#45;&#45;&#45;it')-->
<!-- }-->
<!-- },-->
<!-- }-->
<!--</script>-->

166
examples/routers/cascader.vue
View file

@ -1,141 +1,61 @@
<template>
<div>
<Alert show-icon>#6158</Alert>
<Cascader :data="data" v-model="value" :load-data="loadData"></Cascader>
<Cascader :data="data2" v-model="value2" change-on-select :load-data="loadData" @on-change="handlerChange"></Cascader>
<p style="margin-top:2rem">异步加载数据同时赋初值会导致不能正确的显示</p>
<p>所有数据均相同，第二个级联增加change-on-select</p>
<p>第一个北京、故宫、故宫3级正常</p>
<p>第二个强制将值设置为['beijing']</p>
<div style="margin: 100px;width: 200px;">
<Cascader :data="data" v-model="value1"></Cascader>
</div>
</template>
<script>
export default {
data () {
return {
value: ['beijing','gugong','gugong3'],
value2: ['beijing','gugong','gugong3'],
value1: [],
data: [{
value: 'beijing',
label: '北京',
level: 1,
loading: false,
children: [
{
value: 'gugong',
label: '故宫'
},
{
value: 'tiantan',
label: '天坛'
},
{
value: 'wangfujing',
label: '王府井'
}
]
}],
data2: [{
value: 'beijing',
label: '北京',
level: 1,
loading: false,
}, {
value: 'jiangsu',
label: '江苏',
children: [
]
{
value: 'nanjing',
label: '南京',
children: [
{
value: 'fuzimiao',
label: '夫子庙',
}
]
},
{
value: 'suzhou',
label: '苏州',
children: [
{
value: 'zhuozhengyuan',
label: '拙政园',
},
{
value: 'shizilin',
label: '狮子林',
}
]
}
],
}]
}
},
methods: {
handlerChange(val,selectData){
console.log(val,selectData,'-----val');
},
loadData(item,callback){
item.loading = true;
setTimeout(() => {
if(item.level === 1){
item.children=[
{label: '故宫',value:'gugong',level: 2,loading: false,children:[]},
{label: '故宫2',value:'gugong2',level: 2,children:[]}
];
}else if(item.level === 2){
item.children=[{label: '故宫3级',value:'gugong3',level: 3}]
}
item.loading = false;
callback();
}, 600);
}
},
mounted () {
}
}
</script>
<!--<template>-->
<!-- <div>-->
<!-- <Row>-->
<!-- <i-col span="18">-->
<!-- <i-button v-on:click="setValue">setValue</i-button>-->
<!-- </i-col>-->
<!-- <i-col span="4">-->
<!-- <Cascader :data="data" v-model="value1" transfer></Cascader>-->
<!-- </i-col>-->
<!-- </Row>-->
<!-- </div>-->
<!--</template>-->
<!--<script>-->
<!-- export default {-->
<!-- data () {-->
<!-- return {-->
<!-- value1: [],-->
<!-- data: [{-->
<!-- value: '9ecec83c-cf6b-4cfe-aa75-eb3510875331',-->
<!-- label: '北京',-->
<!-- children: [{-->
<!-- value: 'a873a9bd-7d75-4f46-9369-4d25a1feb13c',-->
<!-- label: '故宫'-->
<!-- }, {-->
<!-- value: 'tiantan',-->
<!-- label: '天坛'-->
<!-- }, {-->
<!-- value: 'wangfujing',-->
<!-- label: '王府井'-->
<!-- }]-->
<!-- }, {-->
<!-- value: 'ca7c0fbc-728d-42e8-b111-f5f73cf9171b',-->
<!-- label: '江苏',-->
<!-- children: [{-->
<!-- value: 'a89d891b-5c50-44c0-87b4-d4f934edc921',-->
<!-- label: '南京',-->
<!-- children: [{-->
<!-- value: '44736384-0ede-41ba-bf7a-59c84241851a',-->
<!-- label: '夫子庙中国第一庙来自南京',-->
<!-- children:[{-->
<!-- value: '44736384-0ede-41ba-bf7a-59c84241851c',-->
<!-- label:'自定义产品系统来自黑龙江地区'-->
<!-- }]-->
<!-- }]-->
<!-- }, {-->
<!-- value: 'suzhou',-->
<!-- label: '苏州',-->
<!-- children: [{-->
<!-- value: 'zhuozhengyuan',-->
<!-- label: '拙政园',-->
<!-- }, {-->
<!-- value: 'shizilin',-->
<!-- label: '狮子林',-->
<!-- }]-->
<!-- }],-->
<!-- }]-->
<!-- }-->
<!-- },-->
<!-- methods: {-->
<!-- setValue() {-->
<!-- var v = "ca7c0fbc-728d-42e8-b111-f5f73cf9171b,a89d891b-5c50-44c0-87b4-d4f934edc921,44736384-0ede-41ba-bf7a-59c84241851a";-->
<!-- var x = v.split(',')-->
<!-- var x1 = x[0].toString();-->
<!-- var x2 = x[1].toString();-->
<!-- var x3 = x[2].toString();-->
<!-- this.value1 = x;-->
<!-- }-->
<!-- },-->
<!-- mounted () {-->
<!-- }-->
<!-- }-->
<!--</script>-->
<!--<style>-->
<!--</style>-->

86
examples/routers/checkbox.vue
View file

@ -26,6 +26,58 @@
<Checkbox v-for="item in tags" :label="item.label" :key="item.label" true-value="true"></Checkbox>
</Checkbox-group>
<div>{{ fruit }}</div>
<Divider></Divider>
<CheckboxGroup v-model="fruit" size="small">
<Checkbox label="香蕉"></Checkbox>
<Checkbox label="苹果"></Checkbox>
<Checkbox label="西瓜"></Checkbox>
</CheckboxGroup>
<br>
<CheckboxGroup v-model="fruit" size="default">
<Checkbox label="香蕉"></Checkbox>
<Checkbox label="苹果"></Checkbox>
<Checkbox label="西瓜"></Checkbox>
</CheckboxGroup>
<br>
<CheckboxGroup v-model="fruit" size="large">
<Checkbox label="香蕉"></Checkbox>
<Checkbox label="苹果"></Checkbox>
<Checkbox label="西瓜"></Checkbox>
</CheckboxGroup>
<Divider></Divider>
<div style="border-bottom: 1px solid #e9e9e9;padding-bottom:6px;margin-bottom:6px;">
<Checkbox
:indeterminate="indeterminate"
:value="checkAll"
@click.prevent.native="handleCheckAll">全选</Checkbox>
</div>
<CheckboxGroup v-model="checkAllGroup" @on-change="checkAllGroupChange">
<Checkbox label="香蕉"></Checkbox>
<Checkbox label="苹果"></Checkbox>
<Checkbox label="西瓜"></Checkbox>
</CheckboxGroup>
<Divider></Divider>
<CheckboxGroup v-model="fruit" size="small">
<Checkbox label="香蕉" border></Checkbox>
<Checkbox label="苹果" border></Checkbox>
<Checkbox label="西瓜" border></Checkbox>
</CheckboxGroup>
<br>
<CheckboxGroup v-model="fruit" size="default">
<Checkbox label="香蕉" border></Checkbox>
<Checkbox label="苹果" border disabled></Checkbox>
<Checkbox label="西瓜" border></Checkbox>
</CheckboxGroup>
<br>
<CheckboxGroup v-model="fruit" size="large">
<Checkbox label="香蕉" border></Checkbox>
<Checkbox label="苹果" border></Checkbox>
<Checkbox label="西瓜" border></Checkbox>
</CheckboxGroup>
<Divider></Divider>
<Checkbox v-model="single" size="small" border>单独</Checkbox>
<Checkbox v-model="single" size="default" border disabled>单独</Checkbox>
<Checkbox v-model="single" size="large" border>单独</Checkbox>
</div>
</template>
<script>
@ -36,9 +88,41 @@
fruit: ['苹果'],
tags: [],
testValue1: null,
testValue2: null
testValue2: null,
indeterminate: true,
checkAll: false,
checkAllGroup: ['香蕉', '西瓜'],
single: false
};
},
methods: {
handleCheckAll () {
if (this.indeterminate) {
this.checkAll = false;
} else {
this.checkAll = !this.checkAll;
}
this.indeterminate = false;
if (this.checkAll) {
this.checkAllGroup = ['香蕉', '苹果', '西瓜'];
} else {
this.checkAllGroup = [];
}
},
checkAllGroupChange (data) {
if (data.length === 3) {
this.indeterminate = false;
this.checkAll = true;
} else if (data.length > 0) {
this.indeterminate = true;
this.checkAll = false;
} else {
this.indeterminate = false;
this.checkAll = false;
}
}
},
mounted () {
setTimeout(() => {
this.tags = [

8
examples/routers/circle.vue
View file

@ -11,6 +11,14 @@
<Icon type="ios-close" size="50" style="color:#ff5500"></Icon>
</span>
</i-circle>
<Divider></Divider>
<i-circle :percent="80" dashboard stroke-linecap="square">
<span class="demo-circle-inner" style="font-size:24px">80%</span>
</i-circle>
<Divider></Divider>
<i-circle :percent="80" dashboard stroke-linecap="square" :stroke-color="['#108ee9', '#87d068']">
<span class="demo-circle-inner" style="font-size:24px">80%</span>
</i-circle>
</div>
</template>
<script>

86
examples/routers/date.vue
View file

@ -250,7 +250,7 @@
<template>
<div style="width: 500px;margin: 100px;">
<p><input type="text"></p>
<DatePicker type="month" show-week-numbers placeholder="Select date" style="width: 200px"></DatePicker>
<DatePicker type="year" show-week-numbers placeholder="Select date" style="width: 200px"></DatePicker>
@ -260,12 +260,88 @@
<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>
<DatePicker type="daterange" split-panels placeholder="Select date" style="width: 200px"></DatePicker>
<Divider>快捷方式</Divider>
<Row>
<Col span="12">
<DatePicker type="date" :options="options1" placeholder="Select date" style="width: 200px"></DatePicker>
</Col>
<Col span="12">
<DatePicker type="daterange" :options="options2" placement="bottom-end" placeholder="Select date" style="width: 200px"></DatePicker>
</Col>
</Row>
</div>
</template>
<script>
export default {
};
data () {
return {
options1: {
shortcuts: [
{
text: 'Today',
value () {
return new Date();
},
onClick: (picker) => {
this.$Message.info('Click today');
}
},
{
text: 'Yesterday',
value () {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24);
return date;
},
onClick: (picker) => {
this.$Message.info('Click yesterday');
}
},
{
text: 'One week',
value () {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
return date;
},
onClick: (picker) => {
this.$Message.info('Click a week ago');
}
}
]
},
options2: {
shortcuts: [
{
text: '1 week',
value () {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
return [start, end];
}
},
{
text: '1 month',
value () {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
return [start, end];
}
},
{
text: '3 months',
value () {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
return [start, end];
}
}
]
}
}
}
}
</script>

147
examples/routers/dropdown.vue
View file

@ -1,48 +1,129 @@
<template>
<div>
<Dropdown trigger="hover">
<a href="javascript:void(0)">
下拉菜单
<Icon type="ios-arrow-down"></Icon>
</a>
<DropdownMenu slot="list">
<DropdownItem>驴打滚</DropdownItem>
<DropdownItem selected>炸酱面</DropdownItem>
<DropdownItem disabled>豆汁儿</DropdownItem>
<DropdownItem>冰糖葫芦</DropdownItem>
<DropdownItem divided>北京烤鸭</DropdownItem>
</DropdownMenu>
</Dropdown>
<Dropdown trigger="click">
<a href="javascript:void(0)">
下拉菜单
<Icon type="ios-arrow-down"></Icon>
</a>
<DropdownMenu slot="list">
<DropdownItem>驴打滚</DropdownItem>
<DropdownItem selected>炸酱面</DropdownItem>
<DropdownItem disabled>豆汁儿</DropdownItem>
<DropdownItem>冰糖葫芦</DropdownItem>
<DropdownItem divided>北京烤鸭</DropdownItem>
</DropdownMenu>
</Dropdown>
<Dropdown trigger="contextMenu">
<a href="javascript:void(0)">
下拉菜单
<Icon type="ios-arrow-down"></Icon>
</a>
<DatePicker :capture="false" size="small" v-model="updatedate" type="datetimerange" placement="bottom-end" placeholder="请输入变更时间" style="width: 150px"></DatePicker>
<Dropdown trigger="click" transfer @on-click="aaaa(111)">
<Button size="small" type="primary">
更多
<Icon type="md-arrow-dropdown" />
</Button>
<DropdownMenu slot="list">
<DropdownItem>驴打滚</DropdownItem>
<DropdownItem>炸酱面</DropdownItem>
<DropdownItem disabled>豆汁儿</DropdownItem>
<DropdownItem>豆汁儿</DropdownItem>
<DropdownItem>冰糖葫芦</DropdownItem>
<DropdownItem divided>北京烤鸭</DropdownItem>
<DropdownItem>北京烤鸭</DropdownItem>
<DropdownItem>驴打滚</DropdownItem>
<DropdownItem>炸酱面</DropdownItem>
<DropdownItem>豆汁儿</DropdownItem>
<DropdownItem>冰糖葫芦</DropdownItem>
<DropdownItem>北京烤鸭</DropdownItem>
<DropdownItem>驴打滚</DropdownItem>
<DropdownItem>炸酱面</DropdownItem>
<DropdownItem>豆汁儿</DropdownItem>
<DropdownItem>冰糖葫芦</DropdownItem>
<DropdownItem>北京烤鸭</DropdownItem>
</DropdownMenu>
</Dropdown>
<Cascader :data="data" v-model="value1" transfer style="width: 200px"></Cascader>
<Select v-model="model1" multiple transfer style="width:200px">
<Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
</Select>
<Poptip trigger="click" transfer title="Title" content="content">
<Button>Hover</Button>
</Poptip>
<ColorPicker v-model="color1" transfer />
</div>
</template>
<script>
export default {
data () {
return {
updatedate:null,
color1: '#19be6b',
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: '狮子林',
}
]
}
],
}],
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: []
}
},
methods: {
aaaa(){
this.$Message.info("aaaaa")
}
},
mounted () {
}
}
</script>

892
examples/routers/form.vue
View file

@ -1,502 +1,418 @@
<!--<template>-->
<!--<div>-->
<!--<Tabs type="card">-->
<!--<TabPane label="默认大小">-->
<!--<Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">-->
<!--<Form-item label-for="autocomplete" prop="name">-->
<!--<span slot="label"><Icon type="ionic"></Icon></span>-->
<!--<AutoComplete element-id="autocomplete" v-model="formValidate.name" :data="['Li','Liang','Zhang']" placeholder="请输入姓名" icon="ios-search"></AutoComplete>-->
<!--</Form-item>-->
<!--<Form-item label-for="input" label="介绍" prop="desc">-->
<!--<Input element-id="input" icon="ios-search" v-model="formValidate.desc" type="text" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入..."></Input>-->
<!--</Form-item>-->
<!--<Form-item label="邮箱" prop="mail">-->
<!--&lt;!&ndash;<Input v-model="formValidate.mail" placeholder="请输入邮箱"></Input>&ndash;&gt;-->
<!--<ColorPicker v-model="formValidate.mail"></ColorPicker>-->
<!--</Form-item>-->
<!--<Form-item label-for="select" label="城市" prop="city">-->
<!--<Select element-id="select" filterable v-model="formValidate.city" placeholder="请选择所在地">-->
<!--<Option value="beijing">北京市</Option>-->
<!--<Option value="shanghai">上海市</Option>-->
<!--<Option value="shenzhen">深圳市</Option>-->
<!--</Select>-->
<!--</Form-item>-->
<!--<Form-item label-for="date" label="选择日期" prop="date">-->
<!--<Date-picker element-id="date" type="date" placeholder="选择日期" v-model="formValidate.date"></Date-picker>-->
<!--</Form-item>-->
<!--<Form-item label-for="cascader" label="级联选择" prop="cascader">-->
<!--<Cascader elementId="cascader" :data="dataCascader" v-model="formValidate.cascader"></Cascader>-->
<!--</Form-item>-->
<!--<Form-item label-for="inputnumber" label="数字框" prop="inputnumber">-->
<!--<InputNumber elementId="inputnumber" :max="10" :min="1" v-model="formValidate.inputnumber"></InputNumber>-->
<!--</Form-item>-->
<!--<Form-item label="选择日期">-->
<!--<Row>-->
<!--<Col span="11">-->
<!--<Form-item prop="date">-->
<!--<Date-picker type="date" placeholder="选择日期" v-model="formValidate.date"></Date-picker>-->
<!--</Form-item>-->
<!--</Col>-->
<!--<Col span="2" style="text-align: center">-</Col>-->
<!--<Col span="11">-->
<!--<Form-item prop="time">-->
<!--<Time-picker type="time" placeholder="选择时间" v-model="formValidate.time"></Time-picker>-->
<!--</Form-item>-->
<!--</Col>-->
<!--</Row>-->
<!--</Form-item>-->
<!--<Form-item label="性别" prop="gender">-->
<!--<Radio-group v-model="formValidate.gender">-->
<!--<Radio label="male">男</Radio>-->
<!--<Radio label="female">女</Radio>-->
<!--</Radio-group>-->
<!--</Form-item>-->
<!--<Form-item label="爱好" prop="interest">-->
<!--<Checkbox-group v-model="formValidate.interest">-->
<!--<Checkbox label="吃饭"></Checkbox>-->
<!--<Checkbox label="睡觉"></Checkbox>-->
<!--<Checkbox label="跑步"></Checkbox>-->
<!--<Checkbox label="看电影"></Checkbox>-->
<!--</Checkbox-group>-->
<!--</Form-item>-->
<!--<Form-item>-->
<!--<Button type="primary" @click="handleSubmit('formValidate')" icon="ios-cloud-upload-outline">提交</Button>-->
<!--<Button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px" icon="ios-reload">重置</Button>-->
<!--</Form-item>-->
<!--</Form>-->
<!--</TabPane>-->
<!--<TabPane label="小表单">-->
<!--<Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">-->
<!--<Form-item label-for="autocomplete" prop="name">-->
<!--<span slot="label"><Icon type="ionic"></Icon></span>-->
<!--<AutoComplete element-id="autocomplete" v-model="formValidate.name" :data="['Li','Liang','Zhang']" placeholder="请输入姓名" icon="ios-search" size="small"></AutoComplete>-->
<!--</Form-item>-->
<!--<Form-item label-for="input" label="介绍" prop="desc">-->
<!--<Input element-id="input" icon="ios-search" size="small" v-model="formValidate.desc" type="text" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入..."></Input>-->
<!--</Form-item>-->
<!--<Form-item label="邮箱" prop="mail">-->
<!--&lt;!&ndash;<Input v-model="formValidate.mail" placeholder="请输入邮箱"></Input>&ndash;&gt;-->
<!--<ColorPicker v-model="formValidate.mail" size="small"></ColorPicker>-->
<!--</Form-item>-->
<!--<Form-item label-for="select" label="城市" prop="city">-->
<!--<Select element-id="select" filterable v-model="formValidate.city" placeholder="请选择所在地" size="small">-->
<!--<Option value="beijing">北京市</Option>-->
<!--<Option value="shanghai">上海市</Option>-->
<!--<Option value="shenzhen">深圳市</Option>-->
<!--</Select>-->
<!--</Form-item>-->
<!--<Form-item label-for="date" label="选择日期" prop="date">-->
<!--<Date-picker element-id="date" type="date" placeholder="选择日期" v-model="formValidate.date" size="small"></Date-picker>-->
<!--</Form-item>-->
<!--<Form-item label-for="cascader" label="级联选择" prop="cascader">-->
<!--<Cascader elementId="cascader" :data="dataCascader" v-model="formValidate.cascader" size="small"></Cascader>-->
<!--</Form-item>-->
<!--<Form-item label-for="inputnumber" label="数字框" prop="inputnumber">-->
<!--<InputNumber elementId="inputnumber" :max="10" :min="1" v-model="formValidate.inputnumber" size="small"></InputNumber>-->
<!--</Form-item>-->
<!--<Form-item label="选择日期">-->
<!--<Row>-->
<!--<Col span="11">-->
<!--<Form-item prop="date">-->
<!--<Date-picker type="date" placeholder="选择日期" v-model="formValidate.date" size="small"></Date-picker>-->
<!--</Form-item>-->
<!--</Col>-->
<!--<Col span="2" style="text-align: center">-</Col>-->
<!--<Col span="11">-->
<!--<Form-item prop="time">-->
<!--<Time-picker type="time" placeholder="选择时间" v-model="formValidate.time" size="small"></Time-picker>-->
<!--</Form-item>-->
<!--</Col>-->
<!--</Row>-->
<!--</Form-item>-->
<!--<Form-item label="性别" prop="gender">-->
<!--<Radio-group v-model="formValidate.gender" size="small">-->
<!--<Radio label="male">男</Radio>-->
<!--<Radio label="female">女</Radio>-->
<!--</Radio-group>-->
<!--</Form-item>-->
<!--<Form-item label="爱好" prop="interest" size="small">-->
<!--<Checkbox-group v-model="formValidate.interest">-->
<!--<Checkbox label="吃饭"></Checkbox>-->
<!--<Checkbox label="睡觉"></Checkbox>-->
<!--<Checkbox label="跑步"></Checkbox>-->
<!--<Checkbox label="看电影"></Checkbox>-->
<!--</Checkbox-group>-->
<!--</Form-item>-->
<!--<Form-item>-->
<!--<Button type="primary" @click="handleSubmit('formValidate')" size="small" icon="ios-cloud-upload-outline">提交</Button>-->
<!--<Button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px" size="small" icon="ios-reload">重置</Button>-->
<!--</Form-item>-->
<!--</Form>-->
<!--</TabPane>-->
<!--<TabPane label="大表单">-->
<!--<Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">-->
<!--<Form-item label-for="autocomplete" prop="name">-->
<!--<span slot="label"><Icon type="ionic"></Icon></span>-->
<!--<AutoComplete element-id="autocomplete" v-model="formValidate.name" :data="['Li','Liang','Zhang']" placeholder="请输入姓名" icon="ios-search" size="large"></AutoComplete>-->
<!--</Form-item>-->
<!--<Form-item label-for="input" label="介绍" prop="desc">-->
<!--<Input element-id="input" icon="ios-search" size="large" v-model="formValidate.desc" type="text" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入..."></Input>-->
<!--</Form-item>-->
<!--<Form-item label="邮箱" prop="mail">-->
<!--&lt;!&ndash;<Input v-model="formValidate.mail" placeholder="请输入邮箱"></Input>&ndash;&gt;-->
<!--<ColorPicker v-model="formValidate.mail" size="large"></ColorPicker>-->
<!--</Form-item>-->
<!--<Form-item label-for="select" label="城市" prop="city">-->
<!--<Select element-id="select" filterable v-model="formValidate.city" placeholder="请选择所在地" size="large">-->
<!--<Option value="beijing">北京市</Option>-->
<!--<Option value="shanghai">上海市</Option>-->
<!--<Option value="shenzhen">深圳市</Option>-->
<!--</Select>-->
<!--</Form-item>-->
<!--<Form-item label-for="date" label="选择日期" prop="date">-->
<!--<Date-picker element-id="date" type="date" placeholder="选择日期" v-model="formValidate.date" size="large"></Date-picker>-->
<!--</Form-item>-->
<!--<Form-item label-for="cascader" label="级联选择" prop="cascader">-->
<!--<Cascader elementId="cascader" :data="dataCascader" v-model="formValidate.cascader" size="large"></Cascader>-->
<!--</Form-item>-->
<!--<Form-item label-for="inputnumber" label="数字框" prop="inputnumber">-->
<!--<InputNumber elementId="inputnumber" :max="10" :min="1" v-model="formValidate.inputnumber" size="large"></InputNumber>-->
<!--</Form-item>-->
<!--<Form-item label="选择日期">-->
<!--<Row>-->
<!--<Col span="11">-->
<!--<Form-item prop="date">-->
<!--<Date-picker type="date" placeholder="选择日期" v-model="formValidate.date" size="large"></Date-picker>-->
<!--</Form-item>-->
<!--</Col>-->
<!--<Col span="2" style="text-align: center">-</Col>-->
<!--<Col span="11">-->
<!--<Form-item prop="time">-->
<!--<Time-picker type="time" placeholder="选择时间" v-model="formValidate.time" size="large"></Time-picker>-->
<!--</Form-item>-->
<!--</Col>-->
<!--</Row>-->
<!--</Form-item>-->
<!--<Form-item label="性别" prop="gender">-->
<!--<Radio-group v-model="formValidate.gender" size="large">-->
<!--<Radio label="male">男</Radio>-->
<!--<Radio label="female">女</Radio>-->
<!--</Radio-group>-->
<!--</Form-item>-->
<!--<Form-item label="爱好" prop="interest" size="large">-->
<!--<Checkbox-group v-model="formValidate.interest">-->
<!--<Checkbox label="吃饭"></Checkbox>-->
<!--<Checkbox label="睡觉"></Checkbox>-->
<!--<Checkbox label="跑步"></Checkbox>-->
<!--<Checkbox label="看电影"></Checkbox>-->
<!--</Checkbox-group>-->
<!--</Form-item>-->
<!--<Form-item>-->
<!--<Button type="primary" @click="handleSubmit('formValidate')" size="large" icon="ios-cloud-upload-outline">提交</Button>-->
<!--<Button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px" size="large" icon="ios-reload">重置</Button>-->
<!--</Form-item>-->
<!--</Form>-->
<!--</TabPane>-->
<!--</Tabs>-->
<!--<div style="margin: 100px">-->
<!--<form action="/">-->
<!--<Input name="f1"></Input>-->
<!--<i-switch name="f2" :true-value="1" :false-value="2"></i-switch>-->
<!--<Select v-model="model1" multiple style="width:200px" name="f3">-->
<!--<Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>-->
<!--</Select>-->
<!--<AutoComplete-->
<!--v-model="value1"-->
<!--:data="data1"-->
<!--@on-search="handleSearch1"-->
<!--placeholder="input here"-->
<!--name="f4"-->
<!--style="width:200px"></AutoComplete>-->
<!--<Slider v-model="value11" name="f5"></Slider>-->
<!--<DatePicker type="date" placeholder="选择日期" style="width: 200px" name="f6"></DatePicker>-->
<!--<TimePicker type="time" placeholder="选择时间" style="width: 168px" name="f7"></TimePicker>-->
<!--<Cascader :data="datac" v-model="valuec" name="f8"></Cascader>-->
<!--<Rate v-model="valuer" name="f9"></Rate>-->
<!--<ColorPicker v-model="color" name="f10" />-->
<!--<button type="submit">test</button>-->
<!--</form>-->
<!--</div>-->
<!--</div>-->
<!--</template>-->
<!--<script>-->
<!--export default {-->
<!--data () {-->
<!--return {-->
<!--dataCascader: [{-->
<!--value: 'beijing',-->
<!--label: '北京',-->
<!--children: [-->
<!--{-->
<!--value: 'gugong',-->
<!--label: '故宫'-->
<!--},-->
<!--{-->
<!--value: 'tiantan',-->
<!--label: '天坛'-->
<!--},-->
<!--{-->
<!--value: 'wangfujing',-->
<!--label: '王府井'-->
<!--}-->
<!--]-->
<!--}, {-->
<!--value: 'jiangsu',-->
<!--label: '江苏',-->
<!--children: [-->
<!--{-->
<!--value: 'nanjing',-->
<!--label: '南京',-->
<!--children: [-->
<!--{-->
<!--value: 'fuzimiao',-->
<!--label: '夫子庙',-->
<!--}-->
<!--]-->
<!--},-->
<!--{-->
<!--value: 'suzhou',-->
<!--label: '苏州',-->
<!--children: [-->
<!--{-->
<!--value: 'zhuozhengyuan',-->
<!--label: '拙政园',-->
<!--},-->
<!--{-->
<!--value: 'shizilin',-->
<!--label: '狮子林',-->
<!--}-->
<!--]-->
<!--}-->
<!--],-->
<!--}],-->
<!--color: '#19be6b',-->
<!--valuer: 3,-->
<!--valuec: [],-->
<!--datac: [{-->
<!--value: 'beijing',-->
<!--label: '北京',-->
<!--children: [-->
<!--{-->
<!--value: 'gugong',-->
<!--label: '故宫'-->
<!--},-->
<!--{-->
<!--value: 'tiantan',-->
<!--label: '天坛'-->
<!--},-->
<!--{-->
<!--value: 'wangfujing',-->
<!--label: '王府井'-->
<!--}-->
<!--]-->
<!--}, {-->
<!--value: 'jiangsu',-->
<!--label: '江苏',-->
<!--children: [-->
<!--{-->
<!--value: 'nanjing',-->
<!--label: '南京',-->
<!--children: [-->
<!--{-->
<!--value: 'fuzimiao',-->
<!--label: '夫子庙',-->
<!--}-->
<!--]-->
<!--},-->
<!--{-->
<!--value: 'suzhou',-->
<!--label: '苏州',-->
<!--children: [-->
<!--{-->
<!--value: 'zhuozhengyuan',-->
<!--label: '拙政园',-->
<!--},-->
<!--{-->
<!--value: 'shizilin',-->
<!--label: '狮子林',-->
<!--}-->
<!--]-->
<!--}-->
<!--],-->
<!--}],-->
<!--value1: '',-->
<!--value11: 25,-->
<!--data1: [],-->
<!--cityList: [-->
<!--{-->
<!--value: 'beijing',-->
<!--label: '北京市'-->
<!--},-->
<!--{-->
<!--value: 'shanghai',-->
<!--label: '上海市'-->
<!--},-->
<!--{-->
<!--value: 'shenzhen',-->
<!--label: '深圳市'-->
<!--},-->
<!--{-->
<!--value: 'hangzhou',-->
<!--label: '杭州市'-->
<!--},-->
<!--{-->
<!--value: 'nanjing',-->
<!--label: '南京市'-->
<!--},-->
<!--{-->
<!--value: 'chongqing',-->
<!--label: '重庆市'-->
<!--}-->
<!--],-->
<!--model1: [],-->
<!--name: '',-->
<!--formValidate: {-->
<!--name: '',-->
<!--mail: '',-->
<!--city: '',-->
<!--gender: '',-->
<!--interest: [],-->
<!--date: '',-->
<!--time: '',-->
<!--desc: '',-->
<!--cascader: [],-->
<!--inputnumber: 1-->
<!--},-->
<!--ruleValidate: {-->
<!--name: [-->
<!--{ required: true, message: '姓名不能为空', trigger: 'change' }-->
<!--],-->
<!--mail: [-->
<!--{ required: true, message: '邮箱不能为空', trigger: 'change' }-->
<!--],-->
<!--city: [-->
<!--{ required: true, message: '请选择城市', trigger: 'change' }-->
<!--],-->
<!--gender: [-->
<!--{ required: true, message: '请选择性别', trigger: 'change' }-->
<!--],-->
<!--interest: [-->
<!--{ required: true, type: 'array', min: 1, message: '至少选择一个爱好', trigger: 'change' },-->
<!--{ type: 'array', max: 2, message: '最多选择两个爱好', trigger: 'change' }-->
<!--],-->
<!--date: [-->
<!--{ required: true, type: 'date', message: '请选择日期', trigger: 'change' }-->
<!--],-->
<!--time: [-->
<!--{ required: true, type: 'date', message: '请选择时间', trigger: 'change' }-->
<!--],-->
<!--desc: [-->
<!--{ required: true, message: '请输入个人介绍', trigger: 'blur' },-->
<!--{ type: 'string', min: 20, message: '介绍不能少于20字', trigger: 'blur' }-->
<!--]-->
<!--}-->
<!--}-->
<!--},-->
<!--methods: {-->
<!--handleSubmit (name) {-->
<!--this.$refs[name].validate((valid) => {-->
<!--if (valid) {-->
<!--this.$Message.success('提交成功!');-->
<!--} else {-->
<!--this.$Message.error('表单验证失败!');-->
<!--}-->
<!--})-->
<!--},-->
<!--handleReset (name) {-->
<!--this.$refs[name].resetFields();-->
<!--},-->
<!--handleSearch1 (value) {-->
<!--this.data1 = !value ? [] : [-->
<!--value,-->
<!--value + value,-->
<!--value + value + value-->
<!--];-->
<!--}-->
<!--}-->
<!--}-->
<!--</script>-->
<template>
<Form :model="formItem" :label-width="80">
<FormItem label="Input">
<Input v-model="formItem.input" placeholder="Enter something..."></Input>
</FormItem>
<FormItem label="Select">
<Select v-model="formItem.select">
<div style="margin: 100px;">
<row :gutter="64">
<i-col span="12">
<Form ref="formValidate1" :model="formValidate" :rules="ruleValidate" :label-width="80">
<FormItem label="Name" prop="name">
<Input v-model="formValidate.name" placeholder="Enter your name"></Input>
</FormItem>
<FormItem label="E-mail" prop="mail">
<Input v-model="formValidate.mail" placeholder="Enter your e-mail"></Input>
</FormItem>
<FormItem label="City" prop="city">
<Select v-model="formValidate.city" placeholder="Select your city">
<Option value="beijing">New York</Option>
<Option value="shanghai">London</Option>
<Option value="shenzhen">Sydney</Option>
</Select>
</FormItem>
<FormItem label="Date">
<Row>
<Col span="11">
<FormItem prop="date">
<DatePicker type="date" placeholder="Select date" v-model="formValidate.date"></DatePicker>
</FormItem>
</Col>
<Col span="2" style="text-align: center">-</Col>
<Col span="11">
<FormItem prop="time">
<TimePicker type="time" placeholder="Select time" v-model="formValidate.time"></TimePicker>
</FormItem>
</Col>
</Row>
</FormItem>
<FormItem label="Gender" prop="gender">
<RadioGroup v-model="formValidate.gender">
<Radio label="male">Male</Radio>
<Radio label="female">Female</Radio>
</RadioGroup>
</FormItem>
<FormItem label="Hobby" prop="interest">
<CheckboxGroup v-model="formValidate.interest">
<Checkbox label="Eat"></Checkbox>
<Checkbox label="Sleep"></Checkbox>
<Checkbox label="Run"></Checkbox>
<Checkbox label="Movie"></Checkbox>
</CheckboxGroup>
</FormItem>
<FormItem label="Desc" prop="desc">
<Input v-model="formValidate.desc" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="Enter something..."></Input>
</FormItem>
<FormItem label="Switch" prop="switch">
<i-switch v-model="formValidate.switch"></i-switch>
</FormItem>
<FormItem label="Slider" prop="slider">
<Slider v-model="formValidate.slider"></Slider>
</FormItem>
<FormItem label="AutoComplete" prop="autoComplete">
<AutoComplete
v-model="formValidate.autoComplete"
:data="data1"
@on-search="handleSearch1"
placeholder="input here"
style="width:200px"></AutoComplete>
</FormItem>
<FormItem label="cascader" prop="cascader">
<Cascader v-model="formValidate.cascader" :data="data2"></Cascader>
</FormItem>
<FormItem label="inputNumber" prop="inputNumber">
<InputNumber :max="10" :min="1" v-model="formValidate.inputNumber"></InputNumber>
</FormItem>
<FormItem label="rate" prop="rate">
<Rate v-model="formValidate.rate" />
</FormItem>
<FormItem label="colorPicker" prop="colorPicker">
<ColorPicker v-model="formValidate.colorPicker" />
</FormItem>
<FormItem label="upload" prop="upload">
<Upload action="//jsonplaceholder.typicode.com/posts/">
<Button icon="ios-cloud-upload-outline">Upload files</Button>
</Upload>
</FormItem>
<FormItem>
<Button type="primary" @click="handleSubmit('formValidate1')">Submit</Button>
<Button @click="handleReset('formValidate1')" style="margin-left: 8px">Reset</Button>
</FormItem>
</Form>
</i-col>
<i-col span="12">
<Form disabled ref="formValidate2" :model="formValidate" :rules="ruleValidate" :label-width="80">
<FormItem label="Name" prop="name">
<Input v-model="formValidate.name" placeholder="Enter your name"></Input>
</FormItem>
<FormItem label="E-mail" prop="mail">
<Input v-model="formValidate.mail" placeholder="Enter your e-mail"></Input>
</FormItem>
<FormItem label="City" prop="city">
<Select v-model="formValidate.city" placeholder="Select your city">
<Option value="beijing">New York</Option>
<Option value="shanghai">London</Option>
<Option value="shenzhen">Sydney</Option>
</Select>
</FormItem>
<FormItem label="Date">
<Row>
<Col span="11">
<FormItem prop="date">
<DatePicker type="date" placeholder="Select date" v-model="formValidate.date"></DatePicker>
</FormItem>
</Col>
<Col span="2" style="text-align: center">-</Col>
<Col span="11">
<FormItem prop="time">
<TimePicker type="time" placeholder="Select time" v-model="formValidate.time"></TimePicker>
</FormItem>
</Col>
</Row>
</FormItem>
<FormItem label="Gender" prop="gender">
<RadioGroup v-model="formValidate.gender">
<Radio label="male">Male</Radio>
<Radio label="female">Female</Radio>
</RadioGroup>
</FormItem>
<FormItem label="Hobby" prop="interest">
<CheckboxGroup v-model="formValidate.interest">
<Checkbox label="Eat"></Checkbox>
<Checkbox label="Sleep"></Checkbox>
<Checkbox label="Run"></Checkbox>
<Checkbox label="Movie"></Checkbox>
</CheckboxGroup>
</FormItem>
<FormItem label="Desc" prop="desc">
<Input v-model="formValidate.desc" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="Enter something..."></Input>
</FormItem>
<FormItem label="Switch" prop="switch">
<i-switch v-model="formValidate.switch"></i-switch>
</FormItem>
<FormItem label="Slider" prop="slider">
<Slider v-model="formValidate.slider"></Slider>
</FormItem>
<FormItem label="AutoComplete" prop="autoComplete">
<AutoComplete
v-model="formValidate.autoComplete"
:data="data1"
@on-search="handleSearch1"
placeholder="input here"
style="width:200px"></AutoComplete>
</FormItem>
<FormItem label="cascader" prop="cascader">
<Cascader v-model="formValidate.cascader" :data="data2"></Cascader>
</FormItem>
<FormItem label="inputNumber" prop="inputNumber">
<InputNumber :max="10" :min="1" v-model="formValidate.inputNumber"></InputNumber>
</FormItem>
<FormItem label="rate" prop="rate">
<Rate v-model="formValidate.rate" />
</FormItem>
<FormItem label="colorPicker" prop="colorPicker">
<ColorPicker v-model="formValidate.colorPicker" />
</FormItem>
<FormItem label="upload" prop="upload">
<Upload action="//jsonplaceholder.typicode.com/posts/">
<Button icon="ios-cloud-upload-outline">Upload files</Button>
</Upload>
</FormItem>
<FormItem>
<Button type="primary" @click="handleSubmit('formValidate2')">Submit</Button>
<Button @click="handleReset('formValidate2')" style="margin-left: 8px">Reset</Button>
</FormItem>
</Form>
</i-col>
<i-col span="6">
<Form :model="formValidate5" ref="formValidate5">
<FormItem label="name" prop="name">
<Input v-model="formValidate5.name" placeholder="Enter your name"></Input>
</FormItem>
<FormItem label="name">
<i-switch v-model="formValidate5.msgCheck" />
</FormItem>
<FormItem label="msg" v-if="formValidate5.msgCheck" prop="msg" :rules="[{
required: true
}]" >
<Input v-model="formValidate5.msg" placeholder="msg"></Input>
</FormItem>
<FormItem>
<Button type="primary" @click="handleSubmit('formValidate5')">Submit</Button>
</FormItem>
</Form>
</i-col>
</row>
<div style="margin: 100px;width: 200px;">
<Divider>普通组件</Divider>
<Button>123</Button>
<Button disabled>123</Button>
<br>
<Input value="" />
<Input value="" disabled />
<br>
<Radio :value="false">Radio</Radio>
<Radio :value="false" disabled>Radio</Radio>
<RadioGroup value="爪哇犀牛">
<Radio label="金斑蝶"></Radio>
<Radio label="爪哇犀牛"></Radio>
<Radio label="印度黑羚"></Radio>
</RadioGroup>
<RadioGroup value="爪哇犀牛">
<Radio label="金斑蝶" disabled></Radio>
<Radio label="爪哇犀牛"></Radio>
<Radio label="印度黑羚"></Radio>
</RadioGroup>
<br>
<Checkbox :value="false">Checkbox</Checkbox>
<Checkbox :value="false" disabled>Checkbox</Checkbox>
<CheckboxGroup :value="['香蕉']">
<Checkbox label="香蕉"></Checkbox>
<Checkbox label="苹果" disabled></Checkbox>
<Checkbox label="西瓜"></Checkbox>
</CheckboxGroup>
<br>
<i-switch :value="false" />
<i-switch :value="false" disabled />
<br>
<Select value="London" disabled style="width:200px">
<Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
</Select>
<Select value="London" style="width:200px">
<Option value="beijing">New York</Option>
<Option value="shanghai">London</Option>
<Option value="shanghai" disabled>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>
<Select value="" filterable>
<Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
</Select>
<Select value="" filterable disabled>
<Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
</Select>
<br>
<Slider :value="20"></Slider>
<Slider :value="20" disabled></Slider>
<br>
<AutoComplete
v-model="value1"
:data="data1"
@on-search="handleSearch1"
placeholder="input here"
style="width:200px"></AutoComplete>
<AutoComplete
v-model="value1"
:data="data1"
@on-search="handleSearch1"
placeholder="input here"
disabled
style="width:200px"></AutoComplete>
<br>
<DatePicker type="date" placeholder="Select date" style="width: 200px"></DatePicker>
<DatePicker type="date" placeholder="Select date" style="width: 200px" disabled></DatePicker>
<br>
<TimePicker type="time" placeholder="Select time" style="width: 168px"></TimePicker>
<TimePicker type="time" placeholder="Select time" style="width: 168px" disabled></TimePicker>
<br>
<Cascader :data="data2"></Cascader>
<Cascader :data="data2" disabled></Cascader>
<br>
<InputNumber :max="10" :min="1" :value="2"></InputNumber>
<InputNumber :max="10" :min="1" :value="2" disabled></InputNumber>
<br>
<Rate :value="3" />
<Rate :value="3" disabled />
<br>
<ColorPicker value="#19be6b" />
<ColorPicker value="#19be6b" disabled />
<br>
<Upload action="//jsonplaceholder.typicode.com/posts/">
<Button icon="ios-cloud-upload-outline">Upload files</Button>
</Upload>
<Upload action="//jsonplaceholder.typicode.com/posts/" disabled>
<Button icon="ios-cloud-upload-outline">Upload files</Button>
</Upload>
</div>
</div>
</template>
<script>
export default {
data () {
return {
formItem: {
input: '',
select: '',
radio: 'male',
checkbox: [],
switch: true,
value1: '',
data1: [],
formValidate: {
name: '',
mail: '',
city: '',
gender: '',
interest: [],
date: '',
time: '',
slider: [20, 50],
textarea: ''
}
desc: '',
switch: false,
slider: 20,
autoComplete: '',
cascader: [],
inputNumber: 2,
rate: 3,
colorPicker: ''
},
formValidate5: {
name: '',
msgCheck: false,
msg: ''
},
ruleValidate: {
name: [
{ required: true, message: 'The name cannot be empty', trigger: 'blur' }
],
slider: [
{ required: true, type: 'number', message: 'Slider', trigger: 'change' }
],
switch: [
{ required: true, type: 'boolean', message: 'Switch...', trigger: 'change' }
],
mail: [
{ required: true, message: 'Mailbox cannot be empty', trigger: 'blur' },
{ type: 'email', message: 'Incorrect email format', trigger: 'blur' }
],
city: [
{ required: true, message: 'Please select the city', trigger: 'change' }
],
gender: [
{ required: true, message: 'Please select gender', trigger: 'change' }
],
interest: [
{ required: true, type: 'array', min: 1, message: 'Choose at least one hobby', trigger: 'change' },
{ type: 'array', max: 2, message: 'Choose two hobbies at best', trigger: 'change' }
],
date: [
{ required: true, type: 'date', message: 'Please select the date', trigger: 'change' }
],
time: [
{ required: true, type: 'string', message: 'Please select time', trigger: 'change' }
],
desc: [
{ required: true, message: 'Please enter a personal introduction', trigger: 'blur' },
{ type: 'string', min: 20, message: 'Introduce no less than 20 words', trigger: 'blur' }
]
},
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'
}
],
data2: [{
value: 'zhejiang',
label: '浙江',
children: [{
value: 'hangzhou',
label: '杭州',
children: [{
value: 'xihu',
label: '西湖'
}]
}]
}, {
value: 'jiangsu',
label: '江苏',
disabled: true,
children: [{
value: 'nanjing',
label: '南京',
children: [{
value: 'zhonghuamen',
label: '中华门'
}]
}]
}]
}
},
methods: {
handleSubmit (name) {
this.$refs[name].validate((valid) => {
if (valid) {
this.$Message.success('Success!');
} else {
this.$Message.error('Fail!');
}
})
},
handleReset (name) {
this.$refs[name].resetFields();
},
handleSearch1 (value) {
this.data1 = !value ? [] : [
value,
value + value,
value + value + value
];
}
}
}

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

@ -72,9 +72,6 @@
:formatter="value => `${value}%`"
:parser="value => value.replace('%', '')"></InputNumber>
</div>
<div style="margin-top: 10px">
<InputNumber :min="100" :max="3000" v-model="value4" style="width: 200px" :active-change="false"></InputNumber>
</div>
</div>
</template>
<script>
@ -84,7 +81,6 @@
value1: 1800000,
value2: 55,
value3: 100,
value4 : null,
valueNull:null,
formatter: (value) => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ','),
parser: (value) => value.replace(/\$\s?|(,*)/g, ''),

7
examples/routers/input.vue
View file

@ -139,9 +139,8 @@
<!--<br><br>-->
<!--<Input v-model="value" search enter-button="Search" style="width: 300px" @on-search="hs" />-->
<!--</div>-->
<!--#6338-->
<div style="width: 200px">
<Input search enter-button="搜索" clearable placeholder="Enter something..." />
<Input v-model="value7" type="textarea" :autosize="true" placeholder="Enter something..."></Input>
</div>
</template>
<script>
@ -155,8 +154,8 @@
select1: 'http',
select2: 'com',
select3: 'day',
value7: ''
};
value7: ``
}
},
methods: {
hs (val) {

18
examples/routers/message.vue
View file

@ -14,7 +14,23 @@
info () {
this.$Message.info({
content: '这是一条普通的提示',
duration: 1000
duration: 1000,
background: true
});
this.$Message.success({
content: '这是一条普通的提示',
duration: 1000,
background: true
});
this.$Message.warning({
content: '这是一条普通的提示',
duration: 1000,
background: true
});
this.$Message.error({
content: '这是一条普通的提示',
duration: 1000,
background: true
});
},
success () {

310
examples/routers/modal.vue
View file

@ -1,186 +1,150 @@
<template>
<div>
<Button @click="test">test</Button>
<p>执行次数{{num}}</p>
<Button type="primary" @click="modal1 = true">Display dialog box</Button>
<Modal
v-model="modal1"
title="Common Modal dialog box title"
@on-ok="ok"
@on-cancel="cancel">
<p>Content of dialog</p>
<p>Content of dialog</p>
<p>Content of dialog</p>
<Button @click="openMessage">Message</Button>
<Select v-model="model1" style="width:200px" :transfer="false">
<Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
</Select>
<Select v-model="model1" style="width:200px" :transfer="true">
<Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
</Select>
<Dropdown transfer>
<a href="javascript:void(0)">
下拉菜单
<Icon type="ios-arrow-down"></Icon>
</a>
<DropdownMenu slot="list">
<DropdownItem>驴打滚</DropdownItem>
<DropdownItem>炸酱面</DropdownItem>
<DropdownItem disabled>豆汁儿</DropdownItem>
<DropdownItem>冰糖葫芦</DropdownItem>
<DropdownItem divided>北京烤鸭</DropdownItem>
</DropdownMenu>
</Dropdown>
<DatePicker type="date" placeholder="Select date" style="width: 200px" transfer></DatePicker>
<Cascader :data="data" v-model="value1" transfer></Cascader>
<Tooltip content="Here is the prompt text" transfer>
A balloon appears when the mouse passes over this text
</Tooltip>
<Poptip trigger="hover" title="Title" content="content" transfer>
<Button>Hover</Button>
</Poptip>
<Button type="primary" @click="handleSpinShow">整页显示，3秒后关闭</Button>
</Modal>
<Select v-model="model1" style="width:200px" :transfer="false">
<Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
</Select>
<Select v-model="model1" style="width:200px" :transfer="true">
<Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
</Select>
</div>
</template>
<script>
export default {
data() {
data () {
return {
num: 0
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: {
test() {
this.$Modal.confirm({
loading: true,
onOk: () => {
setTimeout(() => {
this.num++
this.$Modal.remove()
}, 0)
}
})
}
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>
<!--<template>-->
<!-- <div>-->
<!-- <Button type="primary" @click="modal1 = true">Display dialog box</Button>-->
<!-- <Button type="primary" @click="modal2 = true">Display dialog box</Button>-->
<!-- <Modal v-model="modal2" draggable title="Common Modal dialog box title"-->
<!-- @on-ok="ok"-->
<!-- @on-cancel="cancel" :styles="{top: '300px', left: '100px'}">-->
<!-- <p>2123</p>-->
<!-- </Modal>-->
<!-- <Modal-->
<!-- v-model="modal1"-->
<!-- title="Common Modal dialog box title"-->
<!-- @on-ok="ok"-->
<!-- @on-cancel="cancel">-->
<!-- <p>Content of dialog</p>-->
<!-- <p>Content of dialog</p>-->
<!-- <p>Content of dialog</p>-->
<!-- <Button @click="openMessage">Message</Button>-->
<!-- <Select v-model="model1" style="width:200px" :transfer="false">-->
<!-- <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>-->
<!-- </Select>-->
<!-- <Select v-model="model1" style="width:200px" :transfer="true">-->
<!-- <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>-->
<!-- </Select>-->
<!-- <Dropdown transfer>-->
<!-- <a href="javascript:void(0)">-->
<!-- 下拉菜单-->
<!-- <Icon type="ios-arrow-down"></Icon>-->
<!-- </a>-->
<!-- <DropdownMenu slot="list">-->
<!-- <DropdownItem>驴打滚</DropdownItem>-->
<!-- <DropdownItem>炸酱面</DropdownItem>-->
<!-- <DropdownItem disabled>豆汁儿</DropdownItem>-->
<!-- <DropdownItem>冰糖葫芦</DropdownItem>-->
<!-- <DropdownItem divided>北京烤鸭</DropdownItem>-->
<!-- </DropdownMenu>-->
<!-- </Dropdown>-->
<!-- <DatePicker type="date" placeholder="Select date" style="width: 200px" transfer></DatePicker>-->
<!-- <Cascader :data="data" v-model="value1" transfer></Cascader>-->
<!-- <Tooltip content="Here is the prompt text" transfer>-->
<!-- A balloon appears when the mouse passes over this text-->
<!-- </Tooltip>-->
<!-- <Poptip trigger="hover" title="Title" content="content" transfer>-->
<!-- <Button>Hover</Button>-->
<!-- </Poptip>-->
<!-- <Button type="primary" @click="handleSpinShow">整页显示，3秒后关闭</Button>-->
<!-- </Modal>-->
<!-- <Select v-model="model1" style="width:200px" :transfer="false">-->
<!-- <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>-->
<!-- </Select>-->
<!-- <Select v-model="model1" style="width:200px" :transfer="true">-->
<!-- <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>-->
<!-- </Select>-->
<!-- </div>-->
<!--</template>-->
<!--<script>-->
<!-- export default {-->
<!-- data () {-->
<!-- return {-->
<!-- modal1: false,-->
<!-- modal2: 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>-->

4
examples/routers/notice.vue
View file

@ -17,24 +17,28 @@
methods: {
info (nodesc) {
this.$Notice.info({
duration: 10000,
title: 'Notification title',
desc: nodesc ? '' : 'Here is the notification description. Here is the notification description. '
});
},
success (nodesc) {
this.$Notice.success({
duration: 10000,
title: 'Notification title',
desc: nodesc ? '' : 'Here is the notification description. Here is the notification description. '
});
},
warning (nodesc) {
this.$Notice.warning({
duration: 10000,
title: 'Notification title',
desc: nodesc ? '' : 'Here is the notification description. Here is the notification description. '
});
},
error (nodesc) {
this.$Notice.error({
duration: 10000,
title: 'Notification title',
desc: nodesc ? '' : 'Here is the notification description. Here is the notification description. '
});

5
examples/routers/page.vue
View file

@ -7,10 +7,11 @@
<Page :current="2" :total="50" simple></Page>
<div style="margin:10px 0px">
<Page :total="1000" show-sizer show-elevator show-total :current="12"></Page>
<Page :total="1000" show-sizer show-elevator show-total :current="12"></Page>
</div>
<div style="margin:10px 0px">
<Page :total="1000" show-sizer show-elevator show-total :current="12"></Page>
<Page disabled :total="1000" show-sizer show-elevator show-total :current="12"></Page>
<Page :current="2" :total="50" simple disabled />
</div>
<div style="margin:100px 0px">
<Page :total="500" show-sizer show-elevator show-total ></Page>

92
examples/routers/poptip.vue
View file

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

6
examples/routers/progress.vue
View file

@ -11,7 +11,13 @@
<Progress :percent="65" status="wrong"></Progress>
<Progress :percent="100"></Progress>
<Progress :percent="25" hide-info></Progress>
<Divider></Divider>
<Progress :percent="10" :stroke-width="20" text-inside></Progress>
<Divider></Divider>
<Progress :percent="90" :stroke-color="color1"></Progress>
<Progress :percent="90" :stroke-color="color2" status="active"></Progress>
</div>

48
examples/routers/radio.vue
View file

@ -3,10 +3,14 @@
<Radio size="large" v-model="single">Radio</Radio>
<Radio size="default" v-model="single">Radio</Radio>
<Radio size="small" v-model="single">Radio</Radio>
<br>
<Radio size="large" v-model="single" border>Radio</Radio>
<Radio size="default" v-model="single" border disabled>Radio</Radio>
<Radio size="small" v-model="single" border>Radio</Radio>
<br><br>
<Radio-group v-model="phone">
<Radio label="apple">
<Icon type="social-apple"></Icon>
<Icon type="logo-apple"></Icon>
<span>Apple</span>
</Radio>
<Radio label="android">
@ -36,6 +40,48 @@
<Radio label="深圳"></Radio>
<Radio label="杭州"></Radio>
</Radio-group>
<Divider></Divider>
<Radio-group v-model="phone" size="small">
<Radio label="apple" border>
<Icon type="logo-apple"></Icon>
<span>选项一</span>
</Radio>
<Radio label="android" border>
<Icon type="logo-android"></Icon>
<span>选项二</span>
</Radio>
<Radio label="windows" border>
<Icon type="logo-windows"></Icon>
<span>选项三</span>
</Radio>
</Radio-group>
<br><br>
<Radio-group v-model="phone" size="default">
<Radio label="apple" border>
<span>选项一</span>
</Radio>
<Radio label="android" border disabled>
<span>选项二</span>
</Radio>
<Radio label="windows" border>
<span>选项三</span>
</Radio>
</Radio-group>
<br><br>
<Radio-group v-model="phone" size="large">
<Radio label="apple" border>
<Icon type="logo-apple"></Icon>
<span>选项一</span>
</Radio>
<Radio label="android" border>
<Icon type="logo-android"></Icon>
<span>选项二</span>
</Radio>
<Radio label="windows" border>
<Icon type="logo-windows"></Icon>
<span>选项三</span>
</Radio>
</Radio-group>
</div>
</template>
<script>

196
examples/routers/select.vue
View file

@ -1,81 +1,105 @@
<template>
<div>
{{formValidate}}
<Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
<FormItem label="Hobby" prop="ainterest">
<Select
multiple
:max-tag-count="1"
v-model="formValidate.ainterest"
>
<Option value="Eat">Eat</Option>
<Option value="Sleep">Sleep</Option>
<Option value="Run">Run</Option>
<Option value="Movie">Movie</Option>
</Select>
</FormItem>
<FormItem label="Hobby" prop="binterest">
<CheckboxGroup v-model="formValidate.binterest">
<Checkbox label="Eat"></Checkbox>
<Checkbox label="Sleep"></Checkbox>
<Checkbox label="Run"></Checkbox>
<Checkbox label="Movie"></Checkbox>
</CheckboxGroup>
</FormItem>
<FormItem>
<Button type="primary" @click="handleSubmit('formValidate')">Submit</Button>
<Button @click="handleReset('formValidate')" style="margin-left: 8px">Reset</Button>
</FormItem>
</Form>
<h2 style="margin-top:20px">#5327 feature</h2>
<Select v-model='test' filterable clearable>
<Option v-for='item in list' :value='item.value' :label="item.name" :key="item.value"></Option>
<div slot="empty">2222</div>
<div style="margin: 100px;">
<Select v-model="model1" filterable style="width:200px" prefix="ios-albums">
<Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
</Select>
<h2 style="margin-top:20px">#5216</h2>
<Select v-model="model11" filterable clearable>
<OptionGroup label="分组">
<Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
</OptionGroup>
<Select v-model="model10" filterable :max-tag-count="2" multiple style="width:400px">
<Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
</Select>
<h2 style="margin-top:20px">Demo</h2>
<Select v-model="model12">
<OptionGroup label="分组">
<Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
</OptionGroup>
<Select v-model="model10" filterable :max-tag-count="2" multiple style="width:400px" prefix="ios-albums">
<Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
</Select>
</div>
<br><br>
<Select v-model="model1" style="width:200px">
<Icon type="ios-alarm" slot="prefix" color="red" />
<Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
</Select>
<Select v-model="model1" style="width:200px">
<Avatar src="https://dev-file.iviewui.com/userinfoPDvn9gKWYihR24SpgC319vXY8qniCqj4/avatar" slot="prefix" size="small" />
<Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
</Select>
<Select v-model="model10" :max-tag-count="3" :max-tag-placeholder="more" multiple style="width:400px" prefix="ios-albums">
<Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
</Select>
<br><br>
<Select size="small" v-model="model1" style="width:200px" prefix="ios-albums">
<Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
</Select>
<Select size="small" v-model="model10" multiple style="width:400px" prefix="ios-albums">
<Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
</Select>
<br><br>
<Select size="large" v-model="model1" style="width:200px" prefix="ios-albums">
<Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
</Select>
<Select size="large" v-model="model10" multiple style="width:400px" prefix="ios-albums">
<Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
</Select>
<Divider></Divider>
<Select v-model="model13" filterable allow-create @on-create="handleCreate" style="width:260px">
<Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
</Select>
<Select v-model="model12" multiple filterable allow-create @on-create="handleCreate" style="width:260px">
<Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
</Select>
<Divider></Divider>
<Select v-model="model31" size="small" style="width:200px">
<Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
</Select>
<Select v-model="model31" style="width:200px">
<Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
</Select>
<Select v-model="model31" size="large" style="width:200px">
<Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
</Select>
<Divider></Divider>
<Select v-model="model31" filterable size="small" style="width:200px">
<Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
</Select>
<Select v-model="model31" filterable style="width:200px">
<Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
</Select>
<Select v-model="model31" filterable size="large" style="width:200px">
<Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
</Select>
<Divider></Divider>
<Select v-model="model34" multiple size="small" style="width:200px">
<Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
</Select>
<Select v-model="model34" multiple style="width:200px">
<Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
</Select>
<Select v-model="model34" multiple size="large" style="width:200px">
<Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
</Select>
<Divider></Divider>
<Select v-model="model34" filterable multiple size="small" style="width:200px">
<Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
</Select>
<Select v-model="model34" filterable multiple style="width:200px">
<Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
</Select>
<Select v-model="model34" filterable allow-create multiple size="large" style="width:200px">
<Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
</Select>
</div>
</template>
<script>
export default {
data () {
return {
formValidate: {
ainterest: [],
binterest: [],
},
ruleValidate: {
ainterest: [
{ required: true, type: 'array', min: 1, message: 'Choose at least one hobby', trigger: 'change' },
],
binterest: [
{ required: true, type: 'array', min: 1, message: 'Choose at least one hobby', trigger: 'change' },
],
},
test:'',
list:[{
name: '测试测试2',
value:1
},{
name: 'dddddd',
value:2
},{
name:'测试测试',
value:8
},{
name: '\"年龄\"123',
value:9
}],
cityList: [
{
value: 'New York',
@ -102,23 +126,29 @@
label: 'Canberra'
}
],
model11: '',
model12: ''
};
model1: '',
model10: [],
model12: [],
model13: '',
model31: '',
model32: '',
model33: '',
model34: [],
model35: [],
model36: []
}
},
methods: {
handleSubmit (name) {
this.$refs[name].validate((valid) => {
if (valid) {
this.$Message.success('Success!');
} else {
this.$Message.error('Fail!');
}
});
more (num) {
return 'more' + num;
},
handleReset (name) {
this.$refs[name].resetFields();
handleCreate (val) {
console.log(111,val);
this.cityList.push({
value: val,
label: val
});
}
}
};
}
</script>

12
examples/routers/slider.vue
View file

@ -1,6 +1,5 @@
<template>
<div style="margin: 200px;">
<Slider v-model="value5"></Slider>
<Slider v-model="value6" :step="10" show-stops></Slider>
<br><br>
<Slider v-model="value7" range :marks="marks"></Slider>
@ -10,21 +9,20 @@
export default {
data () {
return {
value5: 10,
value6: 30,
value7: [20, 100],
value7: [20, 50],
marks: {
0: '0°C',
26: '26°C',
8: '8°C',
37: '37°C',
100: {
50: {
style: {
color: '#1989FA'
},
label: this.$createElement('strong', '100%')
label: this.$createElement('strong', '50%')
}
}
}
}
}
</script>
</script>

93
examples/routers/split.vue
View file

@ -1,31 +1,90 @@
<template>
<div class="demo-split">
<Split v-model="split1" v-bind:min="min1">
<div slot="left" class="demo-split-pane">
Left Pane
</div>
<div slot="right" class="demo-split-pane">
Right Pane
</div>
</Split>
<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 {
split1: 0.6,
min1: '400px'
offset: 0.6,
offsetVertical: '250px',
split1: 0.5
}
},
methods: {
handleMoving (e) {
console.log(e.atMin, e.atMax)
}
}
}
</script>
<style>
.demo-split{
height: 200px;
border: 1px solid #dcdee2;
<style lang="less">
.center-middle {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.demo-split-pane{
padding: 10px;
.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>

225
examples/routers/steps.vue
View file

@ -1,188 +1,61 @@
<style>
.demo-status{
display: block;
color: #fff;
}
.demo-step-tip .ivu-steps-status-finish .ivu-icon{
color: #2d8cf0
}
.demo-step-tip .ivu-steps-status-error .ivu-icon{
color: #ed4014
}
</style>
<template>
<div>
<Steps :current="index">
<!--<Step title="开始"></Step>-->
<Step v-for="(item, index) in activitiList" :title="item.approveUserName" :key="index"></Step>
<!--<Step title="结束"></Step>-->
</Steps>
<Button @click="change">change</Button>
<div style="margin:30px">
<h2>
<a href="https://github.com/iview/iview/issues/6078">#6078</a>
</h2>
<br><br>
<Steps class="demo-step-tip" :current="2" status="error" size="small">
<Step>
<div slot="status">
<Tooltip content="已完成" size="14" placement="top" transfer>
<Icon size="18" type="ios-checkmark" />
</Tooltip>
<div style="border: 1px solid #ccc;">
<Steps :current="1">
<Step title="已完成">
<div slot="content">
这里是该步骤的描述信息
</div>
</Step>
<Step>
<div slot="status">
<Tooltip content="进行中" size="14" placement="top" transfer>
<Icon size="18" type="ios-checkmark" />
</Tooltip>
</div>
</Step>
<Step>
<div slot="status">
<Tooltip content="待处理" placement="top" transfer>
<Icon size="18" type="ios-checkmark" />
</Tooltip>
</div>
</Step>
<Step>
<div slot="status">
<Tooltip content="待进行" placement="top" transfer>
<Icon size="18" type="ios-checkmark" />
</Tooltip>
</div>
<Step title="进行中" content="这里是该步骤的描述信息"></Step>
<Step title="待进行" content="这里是该步骤的描述信息"></Step>
<Step title="待进行" content="这里是该步骤的描述信息"></Step>
</Steps>
<Divider></Divider>
<Steps :current="2" size="small">
<Step title="已完成"></Step>
<Step title="进行中"></Step>
<Step title="待进行"></Step>
<Step title="待进行"></Step>
</Steps>
<Divider></Divider>
<Steps :current="1">
<Step title="注册">
<Icon type="md-alarm" slot="icon" />
</Step>
<Step title="上传头像" icon="ios-camera"></Step>
<Step title="验证邮箱" icon="ios-mail"></Step>
</Steps>
<Divider></Divider>
<p>当前正在进行第 {{ current + 1 }} 步</p>
<Steps :current="current">
<Step title="步骤1"></Step>
<Step title="步骤2"></Step>
<Step title="步骤3"></Step>
<Step title="步骤4"></Step>
</Steps>
<Button type="primary" @click="next">Next step</Button>
<Divider></Divider>
<Steps :current="2" direction="vertical">
<Step title="已完成" content="这里是该步骤的描述信息"></Step>
<Step title="已完成" content="这里是该步骤的描述信息"></Step>
<Step title="进行中" content="这里是该步骤的描述信息"></Step>
<Step title="待进行" content="这里是该步骤的描述信息"></Step>
</Steps>
<Divider></Divider>
<Steps :current="1" status="error">
<Step title="已完成" content="这里是该步骤的描述信息"></Step>
<Step title="进行中" content="这里是该步骤的描述信息"></Step>
<Step title="待进行" content="这里是该步骤的描述信息"></Step>
<Step title="待进行" content="这里是该步骤的描述信息"></Step>
</Steps>
</div>
<br><br><br><br>
<hr>
<!--<Steps :current="1" size="small">-->
<!--<Step title="已完成" content="这里是该步骤的描述信息这里是该步骤的描述信息这里是该步骤的描述信息"></Step>-->
<!--<Step title="进行中" content="这里是该步骤的描述信息"></Step>-->
<!--<Step title="待进行" content="这里是该步骤的描述信息这里是该步骤的描述信息这里是该步骤的描述信息"></Step>-->
<!--<Step title="待进行" content="这里是该步骤的描述信息"></Step>-->
<!--</Steps>-->
<!--<br>-->
<!--<Steps :current="2">-->
<!--<Step title="已完成"></Step>-->
<!--<Step title="进行中"></Step>-->
<!--<Step title="待进行"></Step>-->
<!--<Step title="待进行"></Step>-->
<!--</Steps>-->
<!--<br>-->
<!--<Steps :current="1" size="small">-->
<!--<Step title="已完成"></Step>-->
<!--<Step title="进行中"></Step>-->
<!--<Step title="待进行"></Step>-->
<!--<Step title="待进行"></Step>-->
<!--</Steps>-->
<!--<br>-->
<!--<Steps :current="1" direction="vertical" size="small">-->
<!--<Step title="注册" icon="person-add"></Step>-->
<!--<Step title="上传头像" icon="camera" content="这里是该步骤的描述信息这里是该步骤的描述信息这里是该步骤的描述信息"></Step>-->
<!--<Step title="验证邮箱" icon="email"></Step>-->
<!--</Steps>-->
<!--<Steps :current="1" direction="vertical">-->
<!--<Step title="注册" icon="person-add"></Step>-->
<!--<Step title="上传头像" icon="camera" content="这里是该步骤的描述信息这里是该步骤的描述信息这里是该步骤的描述信息"></Step>-->
<!--<Step title="验证邮箱" icon="email"></Step>-->
<!--</Steps>-->
<!--<Steps :current="-1" direction="vertical">-->
<!--<Step title="注册" icon="person-add"></Step>-->
<!--<Step title="上传头像" icon="camera" content="这里是该步骤的描述信息这里是该步骤的描述信息这里是该步骤的描述信息"></Step>-->
<!--<Step title="验证邮箱" status="finish" icon="email"></Step>-->
<!--</Steps>-->
<!--<br>-->
<!--<p>当前正在进行第 {{ current + 1 }} 步</p>-->
<!--<Steps :current="current">-->
<!--<Step title="步骤1"></Step>-->
<!--<Step title="步骤2"></Step>-->
<!--<Step title="步骤3"></Step>-->
<!--<Step title="步骤4"></Step>-->
<!--</Steps>-->
<!--<br>-->
<!--<i-button type="primary" @click.native="next">下一步</i-button>-->
<!--<br><br><br>-->
<!--<Steps :current="1" direction="vertical" size="small">-->
<!--<Step title="已完成" content="这里是该步骤的描述信息这里是该步骤的描述信息这里是该步骤的描述信息"></Step>-->
<!--<Step title="进行中" content="这里是该步骤的描述信息"></Step>-->
<!--<Step title="待进行" content="这里是该步骤的描述信息这里是该步骤的描述信息这里是该步骤的描述信息"></Step>-->
<!--<Step title="待进行" content="这里是该步骤的描述信息"></Step>-->
<!--</Steps>-->
<!--<br><br>-->
<!--<Steps :current="1" status="error">-->
<!--<Step title="已完成" content="这里是该步骤的描述信息"></Step>-->
<!--<Step title="进行中" content="这里是该步骤的描述信息"></Step>-->
<!--<Step title="待进行" content="这里是该步骤的描述信息"></Step>-->
<!--<Step title="待进行" content="这里是该步骤的描述信息"></Step>-->
<!--</Steps>-->
<!--<Steps direction="vertical" :current="3">-->
<!--<Step title="已完成" content="这里是该步骤的描述信息">-->
<!--<div style="font-size: 16px; color: green">这里是该步骤的描述信息1</div>-->
<!--</Step>-->
<!--<Step title="进行中" content="这里是该步骤的描述信息">-->
<!--<div style="font-size: 24px; color: red">这里是该步骤的描述信息2</div>-->
<!--</Step>-->
<!--<Step title="待进行" content="这里是该步骤的描述信息">-->
<!--<div style="font-size: 46px; color: blue">这里是该步骤的描述信息3</div>-->
<!--</Step>-->
<!--<Step title="待进行" content="这里是该步骤的描述信息">-->
<!--<div style="font-size: 24px; color: green">这里是该步骤的描述信息4</div>-->
<!--</Step>-->
<!--</Steps>-->
</div>
</template>
<script>
export default {
props: {
},
data () {
return {
total: 512,
current: 0,
index:0,
activitiList:[
{
approveUserName:'123',
tooltip:'测试标题',
startTime:'1'
},{
approveUserName:'123',
tooltip:'测试标题2',
startTime:'2'
}
],
statusList:[
{
tooltip:'测试标题',
},{
tooltip:'测试标题2',
}
],
changeList:[
{
approveUserName:'456',
startTime:'1'
},{
approveUserName:'456',
startTime:'2'
},{
approveUserName:'456',
startTime:'3'
},{
approveUserName:'456',
startTime:'4'
},{
approveUserName:'456',
startTime:'5'
}
]
current: 0
}
},
computed: {
},
methods: {
next () {
@ -191,13 +64,7 @@
} else {
this.current += 1;
}
},
change () {
this.activitiList = this.activitiList.concat(this.changeList);
}
},
mounted () {
// this.change();
}
}
</script>

923
examples/routers/table.vue
View file

@ -1,47 +1,273 @@
<template>
<div>
<Table tooltip-theme="light" ref="currentRowTable" :columns="columns3" :data="data1" :draggable="true" @on-drag-drop="onDragDrop"></Table>
<Button @click="handleClearCurrentRow">Clear</Button>
<div style="margin: 200px">
<Divider>TreeTable</Divider>
<Table
border
highlight-row
content-menu
@on-current-change="occ"
@on-row-click="orc"
@on-row-dblclick="ordc"
@on-select="os"
@on-select-cancel="osc"
@on-select-all="osa"
@on-select-all-cancel="osac"
@on-contextmenu="ocm"
ref="selection"
:columns="columns0"
:data="data0"
row-key="id"
:load-data="loadData"
>
<template slot-scope="{ row }" slot="age">
<strong>{{row.age}}</strong>
</template>
</Table>
<br><br>
<Button @click="addData">添加数据</Button>
<Button @click="addData2">添加数据2</Button>
<Button @click="handleSelectAll(true)">Set all selected</Button>
<Button @click="handleSelectAll(false)">Cancel all selected</Button>
<Divider>合计</Divider>
<Table size="small" border :columns="columns4" :data="data11" show-summary :height="200"></Table>
<br>
<Table border :columns="columns4" :data="data11" show-summary :height="200"></Table>
<br>
<Table size="large" border :columns="columns4" :data="data11" show-summary :height="200"></Table>
<br>
<Table border :columns="columns4" :data="data11" show-summary></Table>
<br>
<Table border :columns="columns5" :data="data11" show-summary></Table>
<br>
<Table border :columns="columns8" :data="data11" show-summary></Table>
<br>
<Table border :columns="columns5" :data="data11" show-summary :height="200"></Table>
<Divider>合并单元格</Divider>
<Table border :columns="columns1" :data="data1" :span-method="handleSpan"></Table>
<br>
<Table border :columns="columns1" :data="data1" :span-method="handleSpan2"></Table>
<Divider>拖拽调整列宽</Divider>
<Table border :columns="columns1" :data="data1"></Table>
<Divider>排序筛选</Divider>
<div style="margin: 0 0px;">
<Table @on-column-width-resize="handleResize" border :columns="columns6" :data="data5"></Table>
</div>
<Divider>普通表格</Divider>
<Table size="small" :columns="columns1" :data="data1"></Table>
<br>
<Table :columns="columns1" :data="data1"></Table>
<br>
<Table size="large" :columns="columns1" :data="data1"></Table>
<Divider>斑马纹</Divider>
<Table stripe :columns="columns1" :data="data1"></Table>
<Divider>带边框</Divider>
<Table border :columns="columns1" :data="data1"></Table>
<Divider>头固定（普通）</Divider>
<Table height="200" :columns="columns1" :data="data2"></Table>
<Divider>头固定（边框）</Divider>
<Table height="200" border :columns="columns1" :data="data2"></Table>
<Divider>列固定（普通）</Divider>
<Table width="550" :columns="columns2" :data="data3"></Table>
<Divider>列固定（边框）</Divider>
<Table width="550" border :columns="columns2" :data="data3"></Table>
<Divider>都固定（普通）</Divider>
<Table width="550" height="200" :columns="columns2" :data="data4"></Table>
<Divider>都固定（边框）</Divider>
<Table width="550" height="200" border :columns="columns2" :data="data4"></Table>
<Divider>表头分组（普通）</Divider>
<Table :columns="columns11" :data="data10" height="500"></Table>
<Divider>表头分组（边框）</Divider>
<Table border :columns="columns11" :data="data10" height="500"></Table>
<Divider>筛选</Divider>
<Table border :columns="columns6" :data="data5"></Table>
</div>
</template>
<script>
export default {
data () {
return {
columns3: [
columns4: [
{
type: 'index',
width: 60,
align: 'center',
indexMethod (row) {
return row._index;
}
title: 'ID',
key: 'id'
},
{
title: 'Name',
title: '姓名',
key: 'name'
},
{
title: '数值 1',
key: 'amount1'
},
{
title: '数值 2',
key: 'amount2'
},
{
title: '数值 3',
key: 'amount3'
}
],
columns5: [
{
title: 'ID',
key: 'id',
fixed: 'left',
width: 180
},
{
title: '姓名',
key: 'name',
width: 250
},
{
title: '数值 1',
key: 'amount1',
width: 250,
fixed: 'right'
},
{
title: '数值 2',
key: 'amount2',
width: 250
},
{
title: '数值 3',
key: 'amount3',
width: 180
}
],
columns8: [
{
title: 'ID',
key: 'id',
fixed: 'left',
width: 180
},
{
title: '姓名',
key: 'name',
},
{
title: '数值 1',
key: 'amount1',
width: 250,
fixed: 'right'
},
{
title: '数值 2',
key: 'amount2',
},
{
title: '数值 3',
key: 'amount3',
}
],
data11: [
{
id: '12987122',
name: '王小虎',
amount1: '234',
amount2: '3.2',
amount3: 10
}, {
id: '12987123',
name: '王小虎',
amount1: '165',
amount2: '4.43',
amount3: 12
}, {
id: '12987124',
name: '王小虎',
amount1: '324',
amount2: '1.9',
amount3: 9
}, {
id: '12987125',
name: '王小虎',
amount1: '621',
amount2: '2.2',
amount3: 17
}, {
id: '12987126',
name: '王小虎',
amount1: '539',
amount2: '4.1',
amount3: 15
}
],
columns6: [
{
title: 'Date',
key: 'date',
sortable: true,
resizable: true,
width: 180,
},
{
title: 'Name',
key: 'name',
resizable: true,
width: 180,
},
{
title: 'Age',
key: 'age'
key: 'age',
sortable: true,
resizable: true,
width: 180,
filters: [
{
label: 'Greater than 25',
value: 1
},
{
label: 'Less than 25',
value: 2
}
],
filterMultiple: false,
filterMethod (value, row) {
if (value === 1) {
return row.age > 25;
} else if (value === 2) {
return row.age < 25;
}
}
},
{
title: 'Address',
key: 'address',
tooltip: true
filters: [
{
label: 'New York',
value: 'New York'
},
{
label: 'London',
value: 'London'
},
{
label: 'Sydney',
value: 'Sydney'
}
],
filterMethod (value, row) {
return row.address.indexOf(value) > -1;
}
}
],
data1: [
data5: [
{
name: 'John Brown',
age: 18,
address: '自定义渲染列，使用 Vue 的 Render 函数。传入两个参数，第一个是 h，第二个为对象，包含 row、column 和 index，分别指当前行数据，当前列数据，当前行索引，详见示例。自定义渲染列，使用 Vue 的 Render 函数。传入两个参数，第一个是 h，第二个为对象，包含 row、column 和 index，分别指当前行数据，当前列数据，当前行索引，详见示例。自定义渲染列，使用 Vue 的 Render 函数。传入两个参数，第一个是 h，第二个为对象，包含 row、column 和 index，分别指当前行数据，当前列数据，当前行索引，详见示例。',
address: 'New York No. 1 Lake Park',
date: '2016-10-03'
},
{
name: 'Jim Green',
age: 24,
address: 'London No. 1 Lake Park自定义渲染列，使用 Vue 的 Render 函',
address: 'London No. 1 Lake Park',
date: '2016-10-01'
},
{
@ -56,16 +282,671 @@
address: 'Ottawa No. 2 Lake Park',
date: '2016-10-04'
}
],
columns1: [
{
title: 'Name',
key: 'name'
},
{
title: 'Age',
key: 'age'
},
{
title: 'Address',
key: 'address'
}
],
data1: [
{
name: 'John Brown',
age: 18,
address: 'New York No. 1 Lake Park',
date: '2016-10-03'
},
{
name: 'Jim Green',
age: 24,
address: 'London No. 1 Lake Park',
date: '2016-10-01'
},
{
name: 'Joe Black',
age: 30,
address: 'Sydney No. 1 Lake Park',
date: '2016-10-02'
},
{
name: 'Jon Snow',
age: 26,
address: 'Ottawa No. 2 Lake Park',
date: '2016-10-04'
},
{
name: 'Jon Snow2',
age: 26,
address: 'Ottawa No. 2 Lake Park',
date: '2016-10-04'
},
{
name: 'Jon Snow3',
age: 26,
address: 'Ottawa No. 2 Lake Park',
date: '2016-10-04'
},
{
name: 'Jon Snow4',
age: 26,
address: 'Ottawa No. 2 Lake Park',
date: '2016-10-04'
}
],
data2: [
{
name: 'John Brown',
age: 18,
address: 'New York No. 1 Lake Park',
date: '2016-10-03'
},
{
name: 'Jim Green',
age: 24,
address: 'London No. 1 Lake Park',
date: '2016-10-01'
},
{
name: 'Joe Black',
age: 30,
address: 'Sydney No. 1 Lake Park',
date: '2016-10-02'
},
{
name: 'Jon Snow',
age: 26,
address: 'Ottawa No. 2 Lake Park',
date: '2016-10-04'
},
{
name: 'John Brown',
age: 18,
address: 'New York No. 1 Lake Park',
date: '2016-10-03'
},
{
name: 'Jim Green',
age: 24,
address: 'London No. 1 Lake Park',
date: '2016-10-01'
},
{
name: 'Joe Black',
age: 30,
address: 'Sydney No. 1 Lake Park',
date: '2016-10-02'
},
{
name: 'Jon Snow',
age: 26,
address: 'Ottawa No. 2 Lake Park',
date: '2016-10-04'
}
],
columns2: [
{
title: 'Name',
key: 'name',
width: 100,
fixed: 'left'
},
{
title: 'Age',
key: 'age',
width: 100
},
{
title: 'Province',
key: 'province',
width: 100
},
{
title: 'City',
key: 'city',
width: 100
},
{
title: 'Address',
key: 'address',
width: 200
},
{
title: 'Postcode',
key: 'zip',
width: 100
},
{
title: 'Action',
key: 'action',
fixed: 'right',
width: 120,
render: (h, params) => {
return h('div', [
h('Button', {
props: {
type: 'text',
size: 'small'
}
}, 'View'),
h('Button', {
props: {
type: 'text',
size: 'small'
}
}, 'Edit')
]);
}
}
],
data4: [
{
name: 'John Brown',
age: 18,
address: 'New York No. 1 Lake Park',
province: 'America',
city: 'New York',
zip: 100000
},
{
name: 'Jim Green',
age: 24,
address: 'Washington, D.C. No. 1 Lake Park',
province: 'America',
city: 'Washington, D.C.',
zip: 100000
},
{
name: 'Joe Black',
age: 30,
address: 'Sydney No. 1 Lake Park',
province: 'Australian',
city: 'Sydney',
zip: 100000
},
{
name: 'Jon Snow',
age: 26,
address: 'Ottawa No. 2 Lake Park',
province: 'Canada',
city: 'Ottawa',
zip: 100000
},
{
name: 'John Brown',
age: 18,
address: 'New York No. 1 Lake Park',
province: 'America',
city: 'New York',
zip: 100000
},
{
name: 'Jim Green',
age: 24,
address: 'Washington, D.C. No. 1 Lake Park',
province: 'America',
city: 'Washington, D.C.',
zip: 100000
},
{
name: 'Joe Black',
age: 30,
address: 'Sydney No. 1 Lake Park',
province: 'Australian',
city: 'Sydney',
zip: 100000
},
{
name: 'Jon Snow',
age: 26,
address: 'Ottawa No. 2 Lake Park',
province: 'Canada',
city: 'Ottawa',
zip: 100000
}
],
data3: [
{
name: 'John Brown',
age: 18,
address: 'New York No. 1 Lake Park',
province: 'America',
city: 'New York',
zip: 100000
},
{
name: 'Jim Green',
age: 24,
address: 'Washington, D.C. No. 1 Lake Park',
province: 'America',
city: 'Washington, D.C.',
zip: 100000
},
{
name: 'Joe Black',
age: 30,
address: 'Sydney No. 1 Lake Park',
province: 'Australian',
city: 'Sydney',
zip: 100000
},
{
name: 'Jon Snow',
age: 26,
address: 'Ottawa No. 2 Lake Park',
province: 'Canada',
city: 'Ottawa',
zip: 100000
}
],
columns11: [
{
title: 'Name',
key: 'name',
align: 'center',
width: 200,
fixed: 'left',
filters: [
{
label: 'Joe',
value: 1
},
{
label: 'John',
value: 2
}
],
filterMultiple: false,
filterMethod (value, row) {
if (value === 1) {
return row.name === 'Joe';
} else if (value === 2) {
return row.name === 'John Brown';
}
}
},
{
title: 'Other',
align: 'center',
children: [
{
title: 'Age',
key: 'age',
align: 'center',
width: 200,
sortable: true
},
{
title: 'Address',
align: 'center',
children: [
{
title: 'Street',
key: 'street',
align: 'center',
width: 200
},
{
title: 'Block',
align: 'center',
children: [
{
title: 'Building',
key: 'building',
align: 'center',
width: 200,
sortable: true
},
{
title: 'Door No.',
key: 'door',
align: 'center',
width: 200
}
]
}
]
}
]
},
{
title: 'Company',
align: 'center',
children: [
{
title: 'Company Address',
key: 'caddress',
align: 'center',
width: 200
},
{
title: 'Company Name',
key: 'cname',
align: 'center',
width: 200
}
]
},
{
title: 'Gender',
key: 'gender',
align: 'center',
width: 200,
fixed: 'right'
}
],
data10: [{"key":0,"name":"John Brown","age":1,"street":"Lake Park","building":"C","door":2035,"caddress":"Lake Street 42","cname":"SoftLake Co","gender":"M"},{"key":1,"name":"John Brown","age":2,"street":"Lake Park","building":"C","door":2035,"caddress":"Lake Street 42","cname":"SoftLake Co","gender":"M"},{"key":2,"name":"John Brown","age":3,"street":"Lake Park","building":"C","door":2035,"caddress":"Lake Street 42","cname":"SoftLake Co","gender":"M"},{"key":3,"name":"John Brown","age":4,"street":"Lake Park","building":"C","door":2035,"caddress":"Lake Street 42","cname":"SoftLake Co","gender":"M"},{"key":4,"name":"John Brown","age":5,"street":"Lake Park","building":"C","door":2035,"caddress":"Lake Street 42","cname":"SoftLake Co","gender":"M"},{"key":5,"name":"John Brown","age":6,"street":"Lake Park","building":"C","door":2035,"caddress":"Lake Street 42","cname":"SoftLake Co","gender":"M"},{"key":6,"name":"John Brown","age":7,"street":"Lake Park","building":"C","door":2035,"caddress":"Lake Street 42","cname":"SoftLake Co","gender":"M"},{"key":7,"name":"John Brown","age":8,"street":"Lake Park","building":"C","door":2035,"caddress":"Lake Street 42","cname":"SoftLake Co","gender":"M"},{"key":8,"name":"John Brown","age":9,"street":"Lake Park","building":"C","door":2035,"caddress":"Lake Street 42","cname":"SoftLake Co","gender":"M"},{"key":9,"name":"John Brown","age":10,"street":"Lake Park","building":"C","door":2035,"caddress":"Lake Street 42","cname":"SoftLake Co","gender":"M"},{"key":10,"name":"John Brown","age":11,"street":"Lake Park","building":"C","door":2035,"caddress":"Lake Street 42","cname":"SoftLake Co","gender":"M"},{"key":11,"name":"John Brown","age":12,"street":"Lake Park","building":"C","door":2035,"caddress":"Lake Street 42","cname":"SoftLake Co","gender":"M"},{"key":12,"name":"John Brown","age":13,"street":"Lake Park","building":"C","door":2035,"caddress":"Lake Street 42","cname":"SoftLake Co","gender":"M"},{"key":13,"name":"John Brown","age":14,"street":"Lake Park","building":"C","door":2035,"caddress":"Lake Street 42","cname":"SoftLake Co","gender":"M"},{"key":14,"name":"John Brown","age":15,"street":"Lake Park","building":"C","door":2035,"caddress":"Lake Street 42","cname":"SoftLake Co","gender":"M"},{"key":15,"name":"John Brown","age":16,"street":"Lake Park","building":"C","door":2035,"caddress":"Lake Street 42","cname":"SoftLake Co","gender":"M"},{"key":16,"name":"John Brown","age":17,"street":"Lake Park","building":"C","door":2035,"caddress":"Lake Street 42","cname":"SoftLake Co","gender":"M"},{"key":17,"name":"John Brown","age":18,"street":"Lake Park","building":"C","door":2035,"caddress":"Lake Street 42","cname":"SoftLake Co","gender":"M"},{"key":18,"name":"John Brown","age":19,"street":"Lake Park","building":"C","door":2035,"caddress":"Lake Street 42","cname":"SoftLake Co","gender":"M"},{"key":19,"name":"John Brown","age":20,"street":"Lake Park","building":"C","door":2035,"caddress":"Lake Street 42","cname":"SoftLake Co","gender":"M"}],
columns0: [
// {
// type: 'index',
// width: 60,
// align: 'center'
// },
{
type: 'selection',
width: 60,
align: 'center'
},
{
title: 'Name',
key: 'name',
tree: true
},
{
title: 'Age',
key: 'age',
sortable: true,
filters: [
{
label: 'Greater than 180',
value: 1
},
{
label: 'Less than 180',
value: 2
}
],
filterMultiple: false,
filterMethod (value, row) {
if (value === 1) {
return row.age > 180;
} else if (value === 2) {
return row.age < 180;
}
}
},
{
title: 'Date',
key: 'date'
},
{
title: 'Address',
key: 'address',
filters: [
{
label: 'New York',
value: 'New York'
},
{
label: 'London',
value: 'London'
},
{
label: 'Sydney',
value: 'Sydney'
}
],
filterMethod (value, row) {
return row.address.indexOf(value) > -1;
}
}
],
data0: [
{
id: '100',
name: 'John Brown',
age: 118,
address: 'New York No. 1 Lake Park',
date: '2016-10-03',
_disabled: true,
level: 0,
_loading: false,
children: []
},
{
id: '101',
name: 'Jim Green',
age: 224,
address: 'London No. 1 Lake Park',
date: '2016-10-01',
_showChildren: true,
_disabled: false,
level: 0,
children: [
{
id: '10100',
name: '张三',
age: 235,
address: '发动机莲富大厦放假了开始的',
date: '2016-10-01',
level: 1
},
{
id: '10101',
name: '李四',
age: 129,
address: '风刀霜剑分离的思路开发',
date: '2016-10-02',
level: 1
},
{
id: '10102',
name: '王五',
age: 290,
address: '分离的付款就说个就是范德萨发生',
date: '2016-10-03',
_showChildren: true,
level: 1,
children: [
{
id: '10102100',
name: '赵六',
age: 111,
address: '梵蒂冈人太热疼我',
date: '2016-10-05',
level: 2
},
{
id: '10102101',
name: '丁八',
age: 272,
address: '法第三方的范德萨范德萨发送到',
date: '2016-10-06',
_showChildren: true,
level: 2,
children: [
{
id: '10102101100',
name: '第九',
age: 123,
address: '9梵蒂冈人太热疼我',
date: '2016-10-07',
_disabled: true,
level: 3
},
{
id: '10102101101',
name: '第十',
age: 254,
address: '10法第三方的范德萨范德萨发送到',
date: '2016-10-08',
level: 3
},
]
},
]
}
]
},
{
id: '102',
name: 'Joe Black',
age: 130,
address: 'Sydney No. 1 Lake Park',
date: '2016-10-02',
_disabled: false,
level: 0,
_showChildren: false,
children: [
{
id: '10200',
name: '张三3',
age: 235,
address: '发动机莲富大厦放假了开始的',
date: '2016-10-01',
level: 1
},
{
id: '10201',
name: '张三4',
age: 235,
address: '发动机莲富大厦放假了开始的',
date: '2016-10-01',
level: 1
},
]
},
{
id: '103',
name: 'Jon Snow',
age: 126,
address: 'Ottawa No. 2 Lake Park',
date: '2016-10-04',
_disabled: true,
level: 0
}
]
}
},
methods: {
handleClearCurrentRow () {
this.$refs.currentRowTable.clearCurrentRow();
handleResize (width) {
console.log(width);
},
onDragDrop(a,b){
console.log(a,b);
this.data1.splice(b,1,...this.data1.splice(a, 1 , this.data1[b]));
handleSpan ({ row, column, rowIndex, columnIndex }) {
if (rowIndex % 2 === 0) {
if (columnIndex === 0) {
return [1, 2];
} else if (columnIndex === 1) {
return [0, 0];
}
}
},
handleSpan2 ({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 0) {
if (rowIndex % 2 === 0) {
return {
rowspan: 2,
colspan: 1
};
} else {
return {
rowspan: 0,
colspan: 0
};
}
}
},
handleSelectAll (status) {
this.$refs.selection.selectAll(status);
},
occ (n, o) {
// console.log(n);
// console.log(o);
},
orc (data, index) {
// console.log(data);
// console.log(index);
},
ordc (data, index) {
// console.log(data);
// console.log(index);
},
os (s, r) {
// console.log(s);
// console.log(r);
},
osc (s, r) {
console.log(s);
console.log(r);
},
osa (s) {
console.log(s);
},
osac (s) {
console.log(s);
},
ocm (s, e) {
console.log(s);
console.log(e);
},
loadData (item, callback) {
setTimeout(() => {
const data = [
{
id: '10000',
name: '张三1',
age: 123,
address: '1发动机莲富大厦放假了开始的',
date: '2016-10-01'
},
{
id: '10001',
name: '张三2',
age: 124,
address: '2发动机莲富大厦放假了开始的',
date: '2016-10-02'
},
];
callback(data);
}, 1000);
},
addData () {
const d = this.data0[3];
d.children = [
{
id: '10000',
name: '张三1',
age: 123,
address: '1发动机莲富大厦放假了开始的',
date: '2016-10-01'
},
{
id: '10001',
name: '张三2',
age: 124,
address: '2发动机莲富大厦放假了开始的',
date: '2016-10-02'
}
];
this.$set(this.data0, 3, d);
},
addData2 () {
this.data0.push({
id: '104',
name: 'Jon Snow4',
age: 124,
address: 'Ottawa No. 2 Lake Park',
date: '2016-10-04',
_disabled: true,
level: 0
})
}
}
}

144
examples/routers/tabs.vue
View file

@ -1,94 +1,62 @@
<!--<template>-->
<!-- <Tabs :animated="false" value="name1">-->
<!-- <Tab-pane label="标签一" name="name1">-->
<!-- <Table :columns="columns1"></Table>-->
<!-- </Tab-pane>-->
<!-- <Tab-pane label="标签二" name="name2">-->
<!-- <Table :columns="columns1"></Table>-->
<!-- </Tab-pane>-->
<!-- <Tab-pane label="标签三" name="name3">-->
<!-- <Table :columns="columns1" ></Table>-->
<!-- </Tab-pane>-->
<!-- </Tabs>-->
<!--</template>-->
<!--<script>-->
<!-- export default {-->
<!-- data() {-->
<!-- return {-->
<!-- columns1: [-->
<!-- {-->
<!-- title: '姓名',-->
<!-- key: 'name'-->
<!-- },-->
<!-- {-->
<!-- title: '年龄',-->
<!-- key: 'age'-->
<!-- },-->
<!-- {-->
<!-- title: '地址',-->
<!-- key: 'address'-->
<!-- }-->
<!-- ],-->
<!-- data1: [-->
<!-- {-->
<!-- name: '王小明',-->
<!-- age: 18,-->
<!-- address: '北京市朝阳区芍药居'-->
<!-- },-->
<!-- {-->
<!-- name: '张小刚',-->
<!-- age: 25,-->
<!-- address: '北京市海淀区西二旗'-->
<!-- },-->
<!-- {-->
<!-- name: '李小红',-->
<!-- age: 30,-->
<!-- address: '上海市浦东新区世纪大道'-->
<!-- },-->
<!-- {-->
<!-- name: '周小伟',-->
<!-- age: 26,-->
<!-- address: '深圳市南山区深南大道'-->
<!-- }-->
<!-- ]-->
<!-- }-->
<!-- }-->
<!-- }-->
<!--</script>-->
<!--<template>-->
<!-- <div>-->
<!-- <Button @click="showSecond = !showSecond">change</Button>-->
<!-- <Tabs value="name1">-->
<!-- <TabPane label="标签一" name="name1" :index="1">标签一的内容</TabPane>-->
<!-- <TabPane label="标签二" name="name2" :index="2" v-if="showSecond">标签二的内容</TabPane>-->
<!-- <TabPane label="标签三" name="name3" :index="3">标签三的内容</TabPane>-->
<!-- </Tabs>-->
<!-- </div>-->
<!--</template>-->
<!--<script>-->
<!-- export default {-->
<!-- data () {-->
<!-- return {-->
<!-- showSecond: false-->
<!-- }-->
<!-- }-->
<!-- }-->
<!--</script>-->
<template>
<Tabs>
<TabPane label="macOS" icon="logo-apple">
<Tabs>
<TabPane label="macOS" icon="logo-apple">标签一的内容</TabPane>
<TabPane label="Windows" icon="logo-windows">标签二的内容</TabPane>
<TabPane label="Linux" icon="logo-tux">标签三的内容</TabPane>
</Tabs>
</TabPane>
<TabPane label="Windows" icon="logo-windows">标签二的内容</TabPane>
<TabPane label="Linux" icon="logo-tux">标签三的内容</TabPane>
</Tabs>
<div>
<Tabs type="card" @on-contextmenu="handleContextMenu">
<TabPane label="标签一" name="tab1" context-menu>标签一的内容</TabPane>
<TabPane label="标签二" name="tab2">标签二的内容</TabPane>
<TabPane label="标签三" name="tab3" context-menu>标签三的内容</TabPane>
<template slot="contextMenu">
<DropdownItem @click.native="handleContextMenuEdit">编辑</DropdownItem>
<DropdownItem @click.native="handleContextMenuDelete" style="color: #ed4014">删除</DropdownItem>
</template>
</Tabs>
<Divider></Divider>
<Tabs type="card" :draggable="true" @on-drag-drop="handleDragDrop">
<TabPane v-for="(tab, index) in tabs" :key="index" :label="tab.label" :name="tab.name">{{ tab.label }}</TabPane>
</Tabs>
</div>
</template>
<script>
export default {
data () {
return {
contextData: null,
tabs: [
{
label: '标签一',
name: 'name1'
},
{
label: '标签二',
name: 'name2'
},
{
label: '标签三',
name: 'name3'
},
{
label: '标签四',
name: 'name4'
},
{
label: '标签五',
name: 'name5'
}
]
}
},
methods: {
handleContextMenu (data) {
this.contextData = data;
},
handleContextMenuEdit () {
this.$Message.info('Click edit of ' + this.contextData.name);
},
handleContextMenuDelete () {
this.$Message.info('Click delete of ' + this.contextData.name);
},
handleDragDrop (name, newName, a, b, names) {
this.tabs.splice(b,1,...this.tabs.splice(a, 1 , this.tabs[b]));
}
}
}
</script>

9
examples/routers/tag.vue
View file

@ -1,5 +1,5 @@
<template>
<div>
<div style="margin: 200px 0;">
<div>
<Tag color="default">default</Tag>
<Tag color="primary">primary</Tag>
@ -71,6 +71,13 @@
<span>{{ checked }}</span>
<br><br>
<Tag type="dot" color="gold">标签四</Tag>
<Divider>Size</Divider>
<Tag color="primary" size="large">大号标签</Tag>
<Tag color="primary" size="medium">中号标签</Tag>
<Tag color="primary">默认尺寸</Tag>
<Tag color="blue" size="large">大号标签</Tag>
<Tag color="blue" size="medium">中号标签</Tag>
<Tag color="blue">默认尺寸</Tag>
</div>
</template>
<script>

10
examples/routers/time.vue
View file

@ -1,5 +1,7 @@
<template>
<div>
<Button @click="testUpdate()">Update Test</Button>
<br>
<Time :time="time1" />
<br>
<Time :time="time2" />
@ -10,6 +12,8 @@
</div>
</template>
<script>
const baseTime = parseInt(Date.now() / 10000000) * 10000000
export default {
data () {
return {
@ -18,6 +22,12 @@
time3: (new Date()).getTime() - 1 * 1000,
time4: (new Date()).getTime() - 86400 * 60 * 1000,
};
},
methods: {
testUpdate() {
this.time1 = parseInt(baseTime + Math.random() * 10000000)
}
}
};
</script>

1
examples/routers/tooltip.vue
View file

@ -66,5 +66,6 @@
</template>
<script>
export default {
}
</script>

35
examples/routers/tree.vue
View file

@ -1,10 +1,10 @@
<template>
<div>
<Tree ref="treeRef" :data="data4" show-checkbox multiple></Tree>
<Button @click="get">
get
</Button>
</div>
<Tree :data="data4" show-checkbox multiple @on-contextmenu="handleContextMenu">
<template slot="contextMenu">
<DropdownItem @click.native="handleContextMenuEdit">编辑</DropdownItem>
<DropdownItem @click.native="handleContextMenuDelete" style="color: #ed4014">删除</DropdownItem>
</template>
</Tree>
</template>
<script>
export default {
@ -14,14 +14,17 @@
{
title: 'parent 1',
expand: true,
selected: true,
contextmenu: true,
children: [
{
title: 'parent 1-1',
expand: true,
disabled: true,
contextmenu: true,
children: [
{
title: 'leaf 1-1-1',
checked : false,
disabled: true
},
{
@ -32,23 +35,33 @@
{
title: 'parent 1-2',
expand: true,
contextmenu: true,
children: [
{
title: 'leaf 1-2-1',
checked: true
},
{
title: 'leaf 1-2-1'
title: 'leaf 1-2-1',
contextmenu: true,
}
]
}
]
}
]
],
contextTitle: 0
}
},
methods: {
get(){
console.log(this.$refs.treeRef.getCheckedNodes())
handleContextMenu (data) {
this.contextTitle = data.title;
},
handleContextMenuEdit () {
this.$Message.info('Click edit of line' + this.contextTitle);
},
handleContextMenuDelete () {
this.$Message.info('Click delete of line' + this.contextTitle);
}
}
}