[change] optimize the webapack config
[change] rename test to examples
This commit is contained in:
huixisheng
parent
c06e99d09f
commit
c9c5e751ae
47 changed files with 81 additions and 128 deletions
65
examples/app.vue
Normal file
65
examples/app.vue
Normal file
|
|
@ -0,0 +1,65 @@
|
|||
<style lang="less">
|
||||
@import "../src/styles/index.less";
|
||||
</style>
|
||||
<style scoped>
|
||||
nav { margin-bottom: 40px; }
|
||||
ul { display: flex; flex-wrap: wrap; }
|
||||
li { display: inline-block; }
|
||||
li + li { border-left: solid 1px #bbb; padding-left: 10px; margin-left: 10px; }
|
||||
.container{ padding: 10px 40px; }
|
||||
.v-link-active { color: #bbb; }
|
||||
</style>
|
||||
<template>
|
||||
<div class="container">
|
||||
<nav>
|
||||
<ul>
|
||||
<li><router-link to="/affix">Affix</router-link></li>
|
||||
<li><router-link to="/grid">Grid</router-link></li>
|
||||
<li><router-link to="/button">Button</router-link></li>
|
||||
<li><router-link to="/input">Input</router-link></li>
|
||||
<li><router-link to="/radio">Radio</router-link></li>
|
||||
<li><router-link to="/checkbox">Checkbox</router-link></li>
|
||||
<li><router-link to="/steps">Steps</router-link></li>
|
||||
<li><router-link to="/timeline">Timeline</router-link></li>
|
||||
<li><router-link to="/switch">Switch</router-link></li>
|
||||
<li><router-link to="/alert">Alert</router-link></li>
|
||||
<li><router-link to="/badge">Badge</router-link></li>
|
||||
<li><router-link to="/tag">Tag</router-link></li>
|
||||
<li><router-link to="/input-number">InputNumber</router-link></li>
|
||||
<li><router-link to="/progress">Progress</router-link></li>
|
||||
<li><router-link to="/upload">Upload</router-link></li>
|
||||
<li><router-link to="/collapse">Collapse</router-link></li>
|
||||
<li><router-link to="/carousel">Carousel</router-link></li>
|
||||
<li><router-link to="/card">Card</router-link></li>
|
||||
<li><router-link to="/tree">Tree</router-link></li>
|
||||
<li><router-link to="/rate">Rate</router-link></li>
|
||||
<li><router-link to="/circle">Circle</router-link></li>
|
||||
<li><router-link to="/tabs">Tabs</router-link></li>
|
||||
<li><router-link to="/tooltip">Tooltip</router-link></li>
|
||||
<li><router-link to="/poptip">Poptip</router-link></li>
|
||||
<li><router-link to="/slider">Slider</router-link></li>
|
||||
<li><router-link to="/dropdown">Dropdown</router-link></li>
|
||||
<li><router-link to="/breadcrumb">Breadcrumb</router-link></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
module.exports = {
|
||||
data: function() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
mounted: function() {
|
||||
|
||||
},
|
||||
beforeDestroy: function() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
13
examples/index.html
Normal file
13
examples/index.html
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>iView test page</title>
|
||||
<!-- <link href="/test/dist/main.css" rel="stylesheet"> -->
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<!-- <script type="text/javascript" src="/test/dist/vendor.js"></script>
|
||||
<script type="text/javascript" src="/test/dist/main.js"></script> -->
|
||||
</body>
|
||||
</html>
|
||||
135
examples/main.js
Normal file
135
examples/main.js
Normal file
|
|
@ -0,0 +1,135 @@
|
|||
/**
|
||||
* Created by aresn on 16/6/20.
|
||||
*/
|
||||
import Vue from 'vue';
|
||||
import VueRouter from 'vue-router';
|
||||
import App from './app.vue';
|
||||
import iView from '../src/index';
|
||||
// import locale from '../src/locale/lang/en-US';
|
||||
import locale from '../src/locale/lang/zh-CN';
|
||||
|
||||
Vue.use(VueRouter);
|
||||
Vue.use(iView, { locale });
|
||||
|
||||
// 开启debug模式
|
||||
Vue.config.debug = true;
|
||||
|
||||
// 路由配置
|
||||
const router = new VueRouter({
|
||||
routes: [
|
||||
{
|
||||
path: '/affix',
|
||||
component: require('./routers/affix.vue')
|
||||
},
|
||||
{
|
||||
path: '/grid',
|
||||
component: require('./routers/grid.vue')
|
||||
},
|
||||
{
|
||||
path: '/button',
|
||||
component: require('./routers/button.vue')
|
||||
},
|
||||
{
|
||||
path: '/input',
|
||||
component: require('./routers/input.vue')
|
||||
},
|
||||
{
|
||||
path: '/radio',
|
||||
component: require('./routers/radio.vue')
|
||||
},
|
||||
{
|
||||
path: '/checkbox',
|
||||
component: require('./routers/checkbox.vue')
|
||||
},
|
||||
{
|
||||
path: '/steps',
|
||||
component: require('./routers/steps.vue')
|
||||
},
|
||||
{
|
||||
path: '/timeline',
|
||||
component: require('./routers/timeline.vue')
|
||||
},
|
||||
{
|
||||
path: '/switch',
|
||||
component: require('./routers/switch.vue')
|
||||
},
|
||||
{
|
||||
path: '/alert',
|
||||
component: require('./routers/alert.vue')
|
||||
},
|
||||
{
|
||||
path: '/badge',
|
||||
component: require('./routers/badge.vue')
|
||||
},
|
||||
{
|
||||
path: '/tag',
|
||||
component: require('./routers/tag.vue')
|
||||
},
|
||||
{
|
||||
path: '/input-number',
|
||||
component: require('./routers/input-number.vue')
|
||||
},
|
||||
{
|
||||
path: '/upload',
|
||||
component: require('./routers/upload.vue')
|
||||
},
|
||||
{
|
||||
path: '/progress',
|
||||
component: require('./routers/progress.vue')
|
||||
},
|
||||
{
|
||||
path: '/collapse',
|
||||
component: require('./routers/collapse.vue')
|
||||
},
|
||||
{
|
||||
path: '/carousel',
|
||||
component: require('./routers/carousel.vue')
|
||||
},
|
||||
{
|
||||
path: '/card',
|
||||
component: require('./routers/card.vue')
|
||||
},
|
||||
{
|
||||
path: '/tree',
|
||||
component: require('./routers/tree.vue')
|
||||
},
|
||||
{
|
||||
path: '/rate',
|
||||
component: require('./routers/rate.vue')
|
||||
},
|
||||
{
|
||||
path: '/circle',
|
||||
component: require('./routers/circle.vue')
|
||||
},
|
||||
{
|
||||
path: '/tabs',
|
||||
component: require('./routers/tabs.vue')
|
||||
},
|
||||
{
|
||||
path: '/tooltip',
|
||||
component: require('./routers/tooltip.vue')
|
||||
},
|
||||
{
|
||||
path: '/poptip',
|
||||
component: require('./routers/poptip.vue')
|
||||
},
|
||||
{
|
||||
path: '/slider',
|
||||
component: require('./routers/slider.vue')
|
||||
},
|
||||
{
|
||||
path: '/dropdown',
|
||||
component: require('./routers/dropdown.vue')
|
||||
},
|
||||
{
|
||||
path: '/breadcrumb',
|
||||
component: require('./routers/breadcrumb.vue')
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
new Vue({
|
||||
el: '#app',
|
||||
router: router,
|
||||
render: h => h(App)
|
||||
});
|
||||
21
examples/routers/affix.vue
Normal file
21
examples/routers/affix.vue
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
<style>
|
||||
body{
|
||||
/*height: 2000px;*/
|
||||
}
|
||||
.demo-affix{
|
||||
width: 100px;
|
||||
height: 30px;
|
||||
background: #f60;
|
||||
color: #fff
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<Affix>
|
||||
<span class="demo-affix">固定在最顶部</span>
|
||||
</Affix>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
</script>
|
||||
39
examples/routers/alert.vue
Normal file
39
examples/routers/alert.vue
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
<template>
|
||||
<div>
|
||||
<Alert show-icon banner closable>消息提示文案</Alert>
|
||||
<Alert type="success" show-icon>成功提示文案</Alert>
|
||||
<Alert type="warning" show-icon banner>警告提示文案</Alert>
|
||||
<Alert type="error" show-icon>错误提示文案</Alert>
|
||||
<Alert show-icon>
|
||||
消息提示文案
|
||||
<template slot="desc">消息提示的描述文案消息提示的描述文案消息提示的描述文案消息提示的描述文案消息提示的描述文案</template>
|
||||
</Alert>
|
||||
<Alert type="success" show-icon>
|
||||
成功提示文案
|
||||
<span slot="desc">成功的提示描述文案成功的提示描述文案成功的提示描述文案成功的提示描述文案成功的提示描述文案</span>
|
||||
</Alert>
|
||||
<Alert type="warning" show-icon>
|
||||
警告提示文案
|
||||
<template slot="desc">
|
||||
警告的提示描述文案警告的提示描述文案警告的提示描述文案
|
||||
</template>
|
||||
</Alert>
|
||||
<Alert type="error" show-icon>
|
||||
错误提示文案
|
||||
<span slot="desc">
|
||||
自定义错误描述文案。
|
||||
</span>
|
||||
</Alert>
|
||||
<Alert show-icon closable>
|
||||
自定义图标
|
||||
<Icon type="ios-lightbulb-outline" slot="icon"></Icon>
|
||||
<template slot="desc">自定义图标文案自定义图标文案自定义图标文案自定义图标文案自定义图标文案</template>
|
||||
</Alert>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { Alert, Icon } from 'iview';
|
||||
export default {
|
||||
components: { Alert, Icon }
|
||||
}
|
||||
</script>
|
||||
50
examples/routers/badge.vue
Normal file
50
examples/routers/badge.vue
Normal file
|
|
@ -0,0 +1,50 @@
|
|||
<style scoped>
|
||||
.demo-badge{
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
background: #eee;
|
||||
border-radius: 6px;
|
||||
display: inline-block;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
.demo-badge-alone{
|
||||
background: #5cb85c !important;
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<div>
|
||||
<Badge count="3">
|
||||
<a href="#" class="demo-badge"></a>
|
||||
</Badge>
|
||||
<Badge dot>
|
||||
<a href="#" class="demo-badge"></a>
|
||||
</Badge>
|
||||
<Badge dot>
|
||||
<Icon type="ios-bell-outline" size="26"></Icon>
|
||||
</Badge>
|
||||
<Badge dot>
|
||||
<a href="#">可以是一个链接</a>
|
||||
</Badge>
|
||||
<Badge count="100">
|
||||
<a href="#" class="demo-badge"></a>
|
||||
</Badge>
|
||||
<Badge count="1000" overflow-count="999">
|
||||
<a href="#" class="demo-badge"></a>
|
||||
</Badge>
|
||||
<br>
|
||||
<Badge count="10"></Badge>
|
||||
<br><br>
|
||||
<Badge count="20" class-name="demo-badge-alone"></Badge>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: {},
|
||||
data () {
|
||||
return {};
|
||||
},
|
||||
computed: {},
|
||||
methods: {}
|
||||
};
|
||||
</script>
|
||||
35
examples/routers/breadcrumb.vue
Normal file
35
examples/routers/breadcrumb.vue
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
<style>
|
||||
.demo-breadcrumb-separator{
|
||||
color: #ff5500;
|
||||
padding: 0 5px;
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<div>
|
||||
<Breadcrumb separator="<b class='demo-breadcrumb-separator'>=></b>">
|
||||
<Breadcrumb-item href="/">Home4</Breadcrumb-item>
|
||||
<Breadcrumb-item href="/components/breadcrumb">Components</Breadcrumb-item>
|
||||
<Breadcrumb-item>Breadcrumb</Breadcrumb-item>
|
||||
</Breadcrumb>
|
||||
<Breadcrumb separator="">
|
||||
<Breadcrumb-item href="/">
|
||||
<template>Home</template>
|
||||
<template slot="separator">
|
||||
<b style="color: #ff5500;">-></b>
|
||||
</template>
|
||||
</Breadcrumb-item>
|
||||
<Breadcrumb-item href="/components/breadcrumb">
|
||||
<template>Breadcrumb</template>
|
||||
<template slot="separator">
|
||||
<b style="color: #ff5500;">-></b>
|
||||
</template>
|
||||
</Breadcrumb-item>
|
||||
<Breadcrumb-item>Breadcrumb</Breadcrumb-item>
|
||||
</Breadcrumb>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
</script>
|
||||
100
examples/routers/button.vue
Normal file
100
examples/routers/button.vue
Normal file
|
|
@ -0,0 +1,100 @@
|
|||
<template>
|
||||
<div>
|
||||
<h4>基本</h4>
|
||||
<br><br>
|
||||
<Button-group>
|
||||
<Button>取消</Button>
|
||||
<Button type="primary">确定</Button>
|
||||
</Button-group>
|
||||
<Button-group>
|
||||
<Button disabled>昨日</Button>
|
||||
<Button disabled>今日</Button>
|
||||
<Button disabled>明日</Button>
|
||||
</Button-group>
|
||||
<Button-group>
|
||||
<Button type="primary">L</Button>
|
||||
<Button>M</Button>
|
||||
<Button type="ghost">M</Button>
|
||||
<Button type="dashed">R</Button>
|
||||
</Button-group>
|
||||
<br><br>
|
||||
<h4>配合图标</h4>
|
||||
<br><br>
|
||||
<Button-group>
|
||||
<Button type="primary">
|
||||
<Icon type="chevron-left"></Icon>
|
||||
前进
|
||||
</Button>
|
||||
<Button type="primary">
|
||||
后退
|
||||
<Icon type="chevron-right"></Icon>
|
||||
</Button>
|
||||
</Button-group>
|
||||
<Button-group>
|
||||
<Button type="primary" icon="ios-skipbackward"></Button>
|
||||
<Button type="primary" icon="ios-skipforward"></Button>
|
||||
</Button-group>
|
||||
<Button-group>
|
||||
<Button type="ghost" icon="ios-color-wand-outline"></Button>
|
||||
<Button type="ghost" icon="ios-sunny-outline"></Button>
|
||||
<Button type="ghost" icon="ios-crop"></Button>
|
||||
<Button type="ghost" icon="ios-color-filter-outline"></Button>
|
||||
</Button-group>
|
||||
<br><br>
|
||||
<h4>圆角</h4>
|
||||
<br><br>
|
||||
<Button-group shape="circle">
|
||||
<Button type="primary">
|
||||
<Icon type="chevron-left"></Icon>
|
||||
前进
|
||||
</Button>
|
||||
<Button type="primary">
|
||||
后退
|
||||
<Icon type="chevron-right"></Icon>
|
||||
</Button>
|
||||
</Button-group>
|
||||
<Button-group shape="circle">
|
||||
<Button type="primary" icon="ios-skipbackward"></Button>
|
||||
<Button type="primary" icon="ios-skipforward"></Button>
|
||||
</Button-group>
|
||||
<Button-group shape="circle">
|
||||
<Button type="ghost" icon="ios-color-wand-outline"></Button>
|
||||
<Button type="ghost" icon="ios-sunny-outline"></Button>
|
||||
<Button type="ghost" icon="ios-crop"></Button>
|
||||
<Button type="ghost" icon="ios-color-filter-outline"></Button>
|
||||
</Button-group>
|
||||
<br><br>
|
||||
<h4>尺寸</h4>
|
||||
<br><br>
|
||||
<Button-group size="large">
|
||||
<Button type="ghost">Large</Button>
|
||||
<Button type="ghost">Large</Button>
|
||||
</Button-group>
|
||||
<Button-group>
|
||||
<Button type="ghost">Default</Button>
|
||||
<Button type="ghost">Default</Button>
|
||||
</Button-group>
|
||||
<Button-group size="small">
|
||||
<Button type="ghost">Small</Button>
|
||||
<Button type="ghost">Small</Button>
|
||||
</Button-group>
|
||||
<br><br>
|
||||
<Button-group size="large" shape="circle">
|
||||
<Button type="ghost">Large</Button>
|
||||
<Button type="ghost">Large</Button>
|
||||
</Button-group>
|
||||
<Button-group shape="circle">
|
||||
<Button type="ghost">Default</Button>
|
||||
<Button type="ghost">Default</Button>
|
||||
</Button-group>
|
||||
<Button-group size="small" shape="circle">
|
||||
<Button type="ghost">Small</Button>
|
||||
<Button type="ghost">Small</Button>
|
||||
</Button-group>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
</script>
|
||||
88
examples/routers/card.vue
Normal file
88
examples/routers/card.vue
Normal file
|
|
@ -0,0 +1,88 @@
|
|||
<template>
|
||||
<Card style="width:350px">
|
||||
<p slot="title">
|
||||
<Icon type="ios-film-outline"></Icon>
|
||||
经典电影
|
||||
</p>
|
||||
<a href="#" slot="extra" @click.prevent="changeLimit">
|
||||
<Icon type="ios-loop-strong"></Icon>
|
||||
换一换
|
||||
</a>
|
||||
<ul>
|
||||
<li v-for="item in movieList">
|
||||
<a :href="item.url" target="_blank">{{ item.name }}</a>
|
||||
<span>
|
||||
<!--<Icon type="ios-star" v-for="n in 4"></Icon><Icon type="ios-star" v-if="item.rate >= 9.5"></Icon><Icon type="ios-star-half" v-else></Icon>-->
|
||||
{{ item.rate }}
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</Card>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
limitNum: 5,
|
||||
limitFrom: 0,
|
||||
movieList: [
|
||||
{
|
||||
name: '肖申克的救赎',
|
||||
url: 'https://movie.douban.com/subject/1292052/',
|
||||
rate: 9.6
|
||||
},
|
||||
{
|
||||
name: '这个杀手不太冷',
|
||||
url: 'https://movie.douban.com/subject/1295644/',
|
||||
rate: 9.4
|
||||
},
|
||||
{
|
||||
name: '霸王别姬',
|
||||
url: 'https://movie.douban.com/subject/1291546/',
|
||||
rate: 9.5
|
||||
},
|
||||
{
|
||||
name: '阿甘正传',
|
||||
url: 'https://movie.douban.com/subject/1292720/',
|
||||
rate: 9.4
|
||||
},
|
||||
{
|
||||
name: '美丽人生',
|
||||
url: 'https://movie.douban.com/subject/1292063/',
|
||||
rate: 9.5
|
||||
},
|
||||
{
|
||||
name: '千与千寻',
|
||||
url: 'https://movie.douban.com/subject/1291561/',
|
||||
rate: 9.2
|
||||
},
|
||||
{
|
||||
name: '辛德勒的名单',
|
||||
url: 'https://movie.douban.com/subject/1295124/',
|
||||
rate: 9.4
|
||||
},
|
||||
{
|
||||
name: '海上钢琴师',
|
||||
url: 'https://movie.douban.com/subject/1292001/',
|
||||
rate: 9.2
|
||||
},
|
||||
{
|
||||
name: '机器人总动员',
|
||||
url: 'https://movie.douban.com/subject/2131459/',
|
||||
rate: 9.3
|
||||
},
|
||||
{
|
||||
name: '盗梦空间',
|
||||
url: 'https://movie.douban.com/subject/3541415/',
|
||||
rate: 9.2
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
changeLimit () {
|
||||
this.limitFrom = this.limitFrom === 0 ? 5 : 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
47
examples/routers/carousel.vue
Normal file
47
examples/routers/carousel.vue
Normal file
|
|
@ -0,0 +1,47 @@
|
|||
<template>
|
||||
<div>
|
||||
<Carousel v-model="v1" dots="inside" trigger="hover">
|
||||
<Carousel-item>
|
||||
<div class="demo-carousel">1</div>
|
||||
</Carousel-item>
|
||||
<Carousel-item>
|
||||
<div class="demo-carousel">2</div>
|
||||
</Carousel-item>
|
||||
<Carousel-item>
|
||||
<div class="demo-carousel">3</div>
|
||||
</Carousel-item>
|
||||
<Carousel-item>
|
||||
<div class="demo-carousel">4</div>
|
||||
</Carousel-item>
|
||||
</Carousel>
|
||||
{{ v1 }}
|
||||
<div @click="v1 = 0">change v1</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
v1: 1
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
push () {
|
||||
this.pushItem.push('test');
|
||||
},
|
||||
slideChange (from, to) {
|
||||
this.log.push(`From ${from} To ${to}`);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.demo-carousel{
|
||||
height: 200px;
|
||||
line-height: 200px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
background: #506b9e;
|
||||
}
|
||||
</style>
|
||||
77
examples/routers/cascader.vue
Normal file
77
examples/routers/cascader.vue
Normal file
|
|
@ -0,0 +1,77 @@
|
|||
<template>
|
||||
{{ text }}
|
||||
<Cascader :data="data" @on-change="handleChange">
|
||||
<a href="javascript:void(0)">选择</a>
|
||||
</Cascader>
|
||||
|
||||
<Row>
|
||||
<i-col span="4">
|
||||
Disabled <Switch :checked.sync="disabled"></Switch>
|
||||
</i-col>
|
||||
<i-col span="4">
|
||||
<Cascader :data="data" :value.sync="value1" :disabled="disabled"></Cascader>
|
||||
</i-col>
|
||||
</Row>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
disabled: false,
|
||||
text: '未选择',
|
||||
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: {
|
||||
handleChange (value, selectedData) {
|
||||
this.text = selectedData.map(o => o.label).join(', ');
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
95
examples/routers/checkbox.vue
Normal file
95
examples/routers/checkbox.vue
Normal file
|
|
@ -0,0 +1,95 @@
|
|||
<template>
|
||||
<div>
|
||||
<Checkbox v-model="single" @on-change="s">Checkbox</Checkbox>
|
||||
{{ single }}
|
||||
<div @click="single = !single">single-change</div>
|
||||
<br>
|
||||
{{ social }}
|
||||
<Checkbox-group v-model="social" @on-change="s">
|
||||
<Checkbox label="twitter">
|
||||
<Icon type="social-twitter"></Icon>
|
||||
<span>Twitter</span>
|
||||
</Checkbox>
|
||||
<Checkbox label="facebook">
|
||||
<Icon type="social-facebook"></Icon>
|
||||
<span>Facebook</span>
|
||||
</Checkbox>
|
||||
<Checkbox label="github">
|
||||
<Icon type="social-github"></Icon>
|
||||
<span>Github</span>
|
||||
</Checkbox>
|
||||
<Checkbox label="snapchat">
|
||||
<Icon type="social-snapchat"></Icon>
|
||||
<span>Snapchat</span>
|
||||
</Checkbox>
|
||||
</Checkbox-group>
|
||||
<br>
|
||||
<div @click="c">修改1</div>
|
||||
{{ fruit }}
|
||||
<Checkbox-group v-model="fruit">
|
||||
<Checkbox label="香蕉"></Checkbox>
|
||||
<Checkbox label="苹果"></Checkbox>
|
||||
<Checkbox label="西瓜"></Checkbox>
|
||||
</Checkbox-group>
|
||||
<br><br>
|
||||
<div style="border-bottom: 1px solid #e9e9e9;padding-bottom:6px;margin-bottom:6px;">
|
||||
<Checkbox
|
||||
:indeterminate="indeterminate"
|
||||
v-model="checkAll"
|
||||
@click.prevent.native="handleCheckAll">全选</Checkbox>
|
||||
</div>
|
||||
<Checkbox-group v-model="checkAllGroup" @on-change="checkAllGroupChange">
|
||||
<Checkbox label="香蕉"></Checkbox>
|
||||
<Checkbox label="苹果"></Checkbox>
|
||||
<Checkbox label="西瓜"></Checkbox>
|
||||
</Checkbox-group>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
social: ['facebook', 'github'],
|
||||
fruit: ['苹果'],
|
||||
single: false,
|
||||
indeterminate: true,
|
||||
checkAll: false,
|
||||
checkAllGroup: ['香蕉', '西瓜']
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
c () {
|
||||
this.social.splice(0, 1)
|
||||
},
|
||||
s (d) {
|
||||
console.log(d)
|
||||
},
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
57
examples/routers/circle.vue
Normal file
57
examples/routers/circle.vue
Normal file
|
|
@ -0,0 +1,57 @@
|
|||
<style lang="less">
|
||||
.demo-circle-custom{
|
||||
& h1{
|
||||
color: #3f414d;
|
||||
font-size: 28px;
|
||||
font-weight: normal;
|
||||
}
|
||||
& p{
|
||||
color: #657180;
|
||||
font-size: 14px;
|
||||
margin: 10px 0 15px;
|
||||
}
|
||||
& span{
|
||||
display: block;
|
||||
padding-top: 15px;
|
||||
color: #657180;
|
||||
font-size: 14px;
|
||||
&:before{
|
||||
content: '';
|
||||
display: block;
|
||||
width: 50px;
|
||||
height: 1px;
|
||||
margin: 0 auto;
|
||||
background: #e0e3e6;
|
||||
position: relative;
|
||||
top: -15px;
|
||||
};
|
||||
}
|
||||
& span i{
|
||||
font-style: normal;
|
||||
color: #3f414d;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<i-circle
|
||||
:size="250"
|
||||
:trail-width="4"
|
||||
:stroke-width="5"
|
||||
:percent="75"
|
||||
stroke-linecap="square"
|
||||
stroke-color="#43a3fb">
|
||||
<div class="demo-circle-custom">
|
||||
<h1>{{ 42001776 }}</h1>
|
||||
<p>消费人群规模</p>
|
||||
<span>
|
||||
总占人数
|
||||
<i>75%</i>
|
||||
</span>
|
||||
</div>
|
||||
</i-circle>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
</script>
|
||||
30
examples/routers/collapse.vue
Normal file
30
examples/routers/collapse.vue
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
<template>
|
||||
<div>
|
||||
<Collapse v-model="v1" accordion>
|
||||
<Panel name="1">
|
||||
史蒂夫·乔布斯
|
||||
<p slot="content">史蒂夫·乔布斯（Steve Jobs），1955年2月24日生于美国加利福尼亚州旧金山，美国发明家、企业家、美国苹果公司联合创办人。</p>
|
||||
</Panel>
|
||||
<Panel name="2">
|
||||
斯蒂夫·盖瑞·沃兹尼亚克
|
||||
<p slot="content">斯蒂夫·盖瑞·沃兹尼亚克（Stephen Gary Wozniak），美国电脑工程师，曾与史蒂夫·乔布斯合伙创立苹果电脑（今之苹果公司）。斯蒂夫·盖瑞·沃兹尼亚克曾就读于美国科罗拉多大学，后转学入美国著名高等学府加州大学伯克利分校（UC Berkeley）并获得电机工程及计算机（EECS）本科学位（1987年）。</p>
|
||||
</Panel>
|
||||
<Panel name="3">
|
||||
乔纳森·伊夫
|
||||
<p slot="content">乔纳森·伊夫是一位工业设计师，现任Apple公司设计师兼资深副总裁，英国爵士。他曾参与设计了iPod，iMac，iPhone，iPad等众多苹果产品。除了乔布斯，他是对苹果那些著名的产品最有影响力的人。</p>
|
||||
</Panel>
|
||||
</Collapse>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: {},
|
||||
data () {
|
||||
return {
|
||||
v1: '2'
|
||||
};
|
||||
},
|
||||
computed: {},
|
||||
methods: {}
|
||||
};
|
||||
</script>
|
||||
14
examples/routers/date.vue
Normal file
14
examples/routers/date.vue
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
<template>
|
||||
<Date-picker type="datetime" placeholder="选择日期和时间" style="width: 200px"></Date-picker>
|
||||
<br>
|
||||
<Date-picker type="datetime" format="yyyy-MM-dd HH:mm" placeholder="选择日期和时间（不含秒）" style="width: 200px"></Date-picker>
|
||||
<br>
|
||||
<Date-picker type="datetimerange" placeholder="选择日期和时间" style="width: 300px"></Date-picker>
|
||||
<br>
|
||||
<Date-picker type="datetimerange" format="yyyy-MM-dd HH:mm" placeholder="选择日期和时间（不含秒）" style="width: 300px"></Date-picker>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
</script>
|
||||
35
examples/routers/dropdown.vue
Normal file
35
examples/routers/dropdown.vue
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
<template>
|
||||
<div>
|
||||
<Dropdown>
|
||||
<a href="javascript:void(0)">
|
||||
下拉菜单
|
||||
<Icon type="arrow-down-b"></Icon>
|
||||
</a>
|
||||
<Dropdown-menu slot="list">
|
||||
<Dropdown-item>驴打滚</Dropdown-item>
|
||||
<Dropdown-item>炸酱面</Dropdown-item>
|
||||
<Dropdown-item disabled>豆汁儿</Dropdown-item>
|
||||
<Dropdown-item>冰糖葫芦</Dropdown-item>
|
||||
<Dropdown-item divided>北京烤鸭</Dropdown-item>
|
||||
</Dropdown-menu>
|
||||
</Dropdown>
|
||||
<Dropdown style="margin-left: 20px">
|
||||
<Button type="primary">
|
||||
下拉菜单
|
||||
<Icon type="arrow-down-b"></Icon>
|
||||
</Button>
|
||||
<Dropdown-menu slot="list">
|
||||
<Dropdown-item>驴打滚</Dropdown-item>
|
||||
<Dropdown-item>炸酱面</Dropdown-item>
|
||||
<Dropdown-item disabled>豆汁儿</Dropdown-item>
|
||||
<Dropdown-item>冰糖葫芦</Dropdown-item>
|
||||
<Dropdown-item divided>北京烤鸭</Dropdown-item>
|
||||
</Dropdown-menu>
|
||||
</Dropdown>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
</script>
|
||||
50
examples/routers/form.vue
Normal file
50
examples/routers/form.vue
Normal file
|
|
@ -0,0 +1,50 @@
|
|||
<template>
|
||||
<i-form v-ref:form-validate :model="formValidate" :rules="ruleValidate" :label-width="100">
|
||||
<Form-item label="输入框" prop="input">
|
||||
<i-input :value.sync="formValidate.input" placeholder="请输入"></i-input>
|
||||
</Form-item>
|
||||
<Form-item label="Ajax：" prop="ajax">
|
||||
<div slot="label">
|
||||
<span>Ajax</span>
|
||||
<Tooltip content="基于 axios">
|
||||
<Icon type="ios-help" size="14" color="#3399ff"></Icon>
|
||||
</Tooltip>
|
||||
<span>：</span>
|
||||
</div>
|
||||
<Switch :checked.sync="formValidate.ajax"></Switch>
|
||||
</Form-item>
|
||||
<Form-item>
|
||||
<i-button type="primary" @click="handleSubmit('formValidate')">提交</i-button>
|
||||
<i-button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px">重置</i-button>
|
||||
</Form-item>
|
||||
</i-form>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
formValidate: {
|
||||
input: '123',
|
||||
ajax: true
|
||||
},
|
||||
ruleValidate: {
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleSubmit (name) {
|
||||
this.$refs[name].validate((valid) => {
|
||||
if (valid) {
|
||||
this.$Message.success('提交成功!');
|
||||
} else {
|
||||
this.$Message.error('表单验证失败!');
|
||||
}
|
||||
})
|
||||
},
|
||||
handleReset (name) {
|
||||
this.$refs[name].resetFields();
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
26
examples/routers/grid.vue
Normal file
26
examples/routers/grid.vue
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
<template>
|
||||
<div>
|
||||
<Row>
|
||||
<i-col span="12">col-12</i-col>
|
||||
<i-col span="12">col-12</i-col>
|
||||
</Row>
|
||||
<br>
|
||||
<Row>
|
||||
<i-col span="8">col-8</i-col>
|
||||
<i-col span="8">col-8</i-col>
|
||||
<i-col span="8">col-8</i-col>
|
||||
</Row>
|
||||
<br>
|
||||
<Row>
|
||||
<i-col span="6">col-6</i-col>
|
||||
<i-col span="6">col-6</i-col>
|
||||
<i-col span="6">col-6</i-col>
|
||||
<i-col span="6">col-6</i-col>
|
||||
</Row>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
</script>
|
||||
25
examples/routers/input-number.vue
Normal file
25
examples/routers/input-number.vue
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
<template>
|
||||
<div>
|
||||
<Input-number :max="10" :min="-1" v-model="v1"></Input-number>
|
||||
{{ v1 }}
|
||||
<div @click="c">change v1</div>
|
||||
<Input-number disabled :max="10" :min="1" :step="1.2" v-model="v2"></Input-number>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: {},
|
||||
data () {
|
||||
return {
|
||||
v1: 1,
|
||||
v2: 1
|
||||
};
|
||||
},
|
||||
computed: {},
|
||||
methods: {
|
||||
c () {
|
||||
this.v1 = 5;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
27
examples/routers/input.vue
Normal file
27
examples/routers/input.vue
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
<template>
|
||||
<div>
|
||||
<Input v-model="value" placeholder="请输入..." style="width: 300px" icon="ios-clock-outline"></Input>
|
||||
<input type="text" v-model="value">
|
||||
{{ value }}
|
||||
<!--<Input v-model="value">-->
|
||||
<!--<span slot="prepend">http://</span>-->
|
||||
<!--<span slot="append">.com</span>-->
|
||||
<!--</Input>-->
|
||||
<br>
|
||||
<Input type="textarea" v-model="value" placeholder="请输入..."></Input>
|
||||
<Input type="textarea" v-model="value" :rows="4" placeholder="请输入..."></Input>
|
||||
<br>
|
||||
<br>
|
||||
<Input type="textarea" v-model="value" :autosize="true" placeholder="请输入..."></Input>
|
||||
<Input type="textarea" v-model="value" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入..."></Input>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
value: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
49
examples/routers/menu.vue
Normal file
49
examples/routers/menu.vue
Normal file
|
|
@ -0,0 +1,49 @@
|
|||
<template>
|
||||
<Menu mode="horizontal" :theme="theme1" :active-key.sync="ak">
|
||||
<Menu-item key="1">
|
||||
<Icon type="ios-paper"></Icon>
|
||||
内容管理
|
||||
</Menu-item>
|
||||
<Menu-item key="2">
|
||||
<Icon type="ios-people"></Icon>
|
||||
用户管理
|
||||
</Menu-item>
|
||||
<Submenu key="3">
|
||||
<template slot="title">
|
||||
<Icon type="stats-bars"></Icon>
|
||||
统计分析
|
||||
</template>
|
||||
<Menu-group title="使用">
|
||||
<Menu-item key="3-1">新增和启动</Menu-item>
|
||||
<Menu-item key="3-2">活跃分析</Menu-item>
|
||||
<Menu-item key="3-3">时段分析</Menu-item>
|
||||
</Menu-group>
|
||||
<Menu-group title="留存">
|
||||
<Menu-item key="3-4">用户留存</Menu-item>
|
||||
<Menu-item key="3-5">流失用户</Menu-item>
|
||||
</Menu-group>
|
||||
</Submenu>
|
||||
<Menu-item key="4">
|
||||
<Icon type="settings"></Icon>
|
||||
综合设置
|
||||
</Menu-item>
|
||||
</Menu>
|
||||
<br>
|
||||
<p>切换主题</p>
|
||||
<Radio-group :model.sync="theme1">
|
||||
<Radio value="light"></Radio>
|
||||
<Radio value="dark"></Radio>
|
||||
<Radio value="primary"></Radio>
|
||||
</Radio-group>
|
||||
<i-button @click="ak = '2'">change</i-button>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
theme1: 'light',
|
||||
ak: '1'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
44
examples/routers/message.vue
Normal file
44
examples/routers/message.vue
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
<template>
|
||||
<i-button @click="confirm">标准</i-button>
|
||||
<i-button @click="custom">自定义按钮文字</i-button>
|
||||
<i-button @click="async">异步关闭</i-button>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
confirm () {
|
||||
this.$Modal.confirm({
|
||||
title: '确认对话框标题',
|
||||
content: '<p>一些对话框内容</p><p>一些对话框内容</p>',
|
||||
onOk: () => {
|
||||
this.$Message.info('点击了确定');
|
||||
},
|
||||
onCancel: () => {
|
||||
this.$Message.info('点击了取消');
|
||||
}
|
||||
});
|
||||
},
|
||||
custom () {
|
||||
this.$Modal.confirm({
|
||||
title: '确认对话框标题',
|
||||
content: '<p>一些对话框内容</p><p>一些对话框内容</p>',
|
||||
okText: 'OK',
|
||||
cancelText: 'Cancel'
|
||||
});
|
||||
},
|
||||
async () {
|
||||
this.$Modal.confirm({
|
||||
title: '确认对话框标题',
|
||||
content: '<p>对话框将在 2秒 后关闭</p>',
|
||||
loading: true,
|
||||
onOk: () => {
|
||||
setTimeout(() => {
|
||||
this.$Modal.remove();
|
||||
this.$Message.info('异步关闭了对话框');
|
||||
}, 2000);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
67
examples/routers/more.vue
Normal file
67
examples/routers/more.vue
Normal file
|
|
@ -0,0 +1,67 @@
|
|||
<style lang="less">
|
||||
.vertical-center-modal{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.ivu-modal{
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.placeholder {
|
||||
min-height: 2000px;
|
||||
width: 1px;
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<i-button @click="modal9 = true">距离顶部 20px</i-button>
|
||||
<Modal
|
||||
title="对话框标题"
|
||||
:visible.sync="modal9"
|
||||
:style="{top: '20px'}">
|
||||
<p>对话框内容</p>
|
||||
<p>对话框内容</p>
|
||||
<p>对话框内容</p>
|
||||
</Modal>
|
||||
<i-button @click="modal10 = true">垂直居中</i-button>
|
||||
<Modal
|
||||
title="对话框标题"
|
||||
:visible.sync="modal10"
|
||||
class-name="vertical-center-modal">
|
||||
<p>对话框内容</p>
|
||||
<p>对话框内容</p>
|
||||
<p>对话框内容</p>
|
||||
</Modal>
|
||||
<i-button @click="instance(true)">Create Instance Scrollable</i-button>
|
||||
<i-button @click="instance(false)">Create Instance Non-scrollable</i-button>
|
||||
<div class="placeholder"></div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
modal9: false,
|
||||
modal10: false,
|
||||
modal1: false,
|
||||
scrollable: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
ok () {
|
||||
this.$nextTick(() => this.modal1 = true);
|
||||
this.$Message.info('点击了确定');
|
||||
},
|
||||
cancel () {
|
||||
this.$Message.info('点击了取消');
|
||||
},
|
||||
instance (scrollable) {
|
||||
this.$Modal.info({
|
||||
title: 'test',
|
||||
content: 'test',
|
||||
scrollable: scrollable
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
19
examples/routers/notice.vue
Normal file
19
examples/routers/notice.vue
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
<template>
|
||||
<i-button @click="pop">Pop</i-button>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
pop () {
|
||||
for (let i = 0; i < 6; i++) {
|
||||
setTimeout(() => {
|
||||
this.$Notice.open({
|
||||
title: 'test',
|
||||
duration: 1.5 + i
|
||||
});
|
||||
}, i * 500);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
18
examples/routers/page.vue
Normal file
18
examples/routers/page.vue
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
<template>
|
||||
<Page :total="1000" show-sizer show-elevator show-total class="classr" :style="{float: 'right'}" @on-page-size-change="pc"></Page>
|
||||
<br><br>
|
||||
<Page :total="1000" show-sizer show-elevator show-total size="small" class="classr2"></Page>
|
||||
<br><br>
|
||||
<Page :current="2" :total="50" simple></Page>
|
||||
</template>
|
||||
<script>
|
||||
import { Page } from 'iview';
|
||||
export default {
|
||||
components: { Page },
|
||||
methods: {
|
||||
pc (page) {
|
||||
console.log(page)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
32
examples/routers/poptip.vue
Normal file
32
examples/routers/poptip.vue
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
<template>
|
||||
<div style="margin: 100px;">
|
||||
<Poptip
|
||||
confirm
|
||||
title="您确认删除这条内容吗？"
|
||||
@on-ok="ok"
|
||||
@on-cancel="cancel">
|
||||
<Button>删除</Button>
|
||||
</Poptip>
|
||||
<Poptip
|
||||
confirm
|
||||
title="Are you sure delete this task?"
|
||||
@on-ok="ok"
|
||||
@on-cancel="cancel"
|
||||
ok-text="yes"
|
||||
cancel-text="no">
|
||||
<Button>国际化</Button>
|
||||
</Poptip>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
ok () {
|
||||
this.$Message.info('点击了确定');
|
||||
},
|
||||
cancel () {
|
||||
this.$Message.info('点击了取消');
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
37
examples/routers/progress.vue
Normal file
37
examples/routers/progress.vue
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
<template>
|
||||
<div>
|
||||
<Progress :percent="percent"></Progress>
|
||||
<Button-group size="large">
|
||||
<Button icon="ios-plus-empty" @click.native="add"></Button>
|
||||
<Button icon="ios-minus-empty" @click.native="minus"></Button>
|
||||
</Button-group>
|
||||
<Progress :percent="25" :stroke-width="5"></Progress>
|
||||
<Progress :percent="100">
|
||||
<Icon type="checkmark-circled"></Icon>
|
||||
<span>成功</span>
|
||||
</Progress>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
percent: 0
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
add () {
|
||||
if (this.percent >= 100) {
|
||||
return false;
|
||||
}
|
||||
this.percent += 10;
|
||||
},
|
||||
minus () {
|
||||
if (this.percent <= 0) {
|
||||
return false;
|
||||
}
|
||||
this.percent -= 10;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
43
examples/routers/radio.vue
Normal file
43
examples/routers/radio.vue
Normal file
|
|
@ -0,0 +1,43 @@
|
|||
<template>
|
||||
<div>
|
||||
<Radio v-model="single" @on-change="c">Radio</Radio>
|
||||
<Radio-group v-model="phone" type="button" @on-change="c">
|
||||
<Radio label="apple">
|
||||
<Icon type="social-apple"></Icon>
|
||||
<span>Apple</span>
|
||||
</Radio>
|
||||
<Radio label="android">
|
||||
<Icon type="social-android"></Icon>
|
||||
<span>Android</span>
|
||||
</Radio>
|
||||
<Radio label="windows">
|
||||
<Icon type="social-windows"></Icon>
|
||||
<span>Windows</span>
|
||||
</Radio>
|
||||
</Radio-group>
|
||||
<Radio-group v-model="animal">
|
||||
<Radio label="金斑蝶"></Radio>
|
||||
<Radio label="爪哇犀牛"></Radio>
|
||||
<Radio label="印度黑羚"></Radio>
|
||||
</Radio-group>
|
||||
{{ phone }}
|
||||
<div @click="phone = 'apple'">apple</div>
|
||||
<div @click="single = true"> single</div>{{ single }}
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
phone: 'apple',
|
||||
animal: '爪哇犀牛',
|
||||
single: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
c (data) {
|
||||
console.log(data)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
25
examples/routers/rate.vue
Normal file
25
examples/routers/rate.vue
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
<template>
|
||||
<div>
|
||||
<Rate v-model="v1" allow-half show-text disabled>
|
||||
<span style="color: #f5a623">{{ v1 }}</span>
|
||||
</Rate>
|
||||
{{ v1 }}
|
||||
<div @click="v1 = 3">change v1</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: {},
|
||||
data () {
|
||||
return {
|
||||
v1: 2
|
||||
};
|
||||
},
|
||||
computed: {},
|
||||
methods: {
|
||||
changeValue (val) {
|
||||
console.log(val);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
70
examples/routers/select.vue
Normal file
70
examples/routers/select.vue
Normal file
|
|
@ -0,0 +1,70 @@
|
|||
<template>
|
||||
<Row>
|
||||
<i-col span="12" style="padding-right:10px">
|
||||
<i-select :model.sync="model111" filterable>
|
||||
<i-option v-for="item in cityList1" :value="item.value">{{ item.label }}</i-option>
|
||||
</i-select>
|
||||
</i-col>
|
||||
</Row>
|
||||
<Row>
|
||||
<i-col span="12" style="padding-right:10px">
|
||||
<i-select :model.sync="model112" filterable>
|
||||
<i-option v-for="item in cityList2" :value="item.value">{{ item.label }}</i-option>
|
||||
</i-select>
|
||||
</i-col>
|
||||
</Row>
|
||||
<Row>
|
||||
<i-col span="12">
|
||||
<i-select :model.sync="model12" filterable multiple>
|
||||
<i-option v-for="item in cityList1" :value="item.value">{{ item.label }}</i-option>
|
||||
</i-select>
|
||||
</i-col>
|
||||
</Row>
|
||||
</template>
|
||||
<script>
|
||||
const cityList = [
|
||||
{
|
||||
value: 'beijing',
|
||||
label: '北京市'
|
||||
},
|
||||
{
|
||||
value: 'shanghai',
|
||||
label: '上海市'
|
||||
},
|
||||
{
|
||||
value: 'shenzhen',
|
||||
label: '深圳市'
|
||||
},
|
||||
{
|
||||
value: 'hangzhou',
|
||||
label: '杭州市'
|
||||
},
|
||||
{
|
||||
value: 'nanjing',
|
||||
label: '南京市'
|
||||
},
|
||||
{
|
||||
value: 'chongqing',
|
||||
label: '重庆市'
|
||||
}
|
||||
]
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
cityList1: cityList,
|
||||
model111: '',
|
||||
|
||||
cityList2: [],
|
||||
model112: 'beijing',
|
||||
|
||||
model12: []
|
||||
}
|
||||
},
|
||||
ready() {
|
||||
this.model111 = 'hangzhou'
|
||||
setTimeout(()=>{
|
||||
this.cityList2 = cityList
|
||||
}, 500)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
33
examples/routers/slider.vue
Normal file
33
examples/routers/slider.vue
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
<template>
|
||||
<div style="margin: 100px;">
|
||||
<Slider v-model="value1" :step="5" show-input></Slider>
|
||||
<Slider v-model="value2" range></Slider>
|
||||
<Slider v-model="value3" range disabled></Slider>
|
||||
{{ value1 }}{{value2}}
|
||||
<div @click="value1 = 13">change value1</div>
|
||||
<br>
|
||||
<Slider :value="value9" :tip-format="format"></Slider>
|
||||
<Slider :value="value10" :tip-format="hideFormat"></Slider>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
value1: 25,
|
||||
value2: [20, 50],
|
||||
value3: [20, 50],
|
||||
value9: 25,
|
||||
value10: 25
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
format (val) {
|
||||
return '进度' + val + '%';
|
||||
},
|
||||
hideFormat () {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
98
examples/routers/steps.vue
Normal file
98
examples/routers/steps.vue
Normal file
|
|
@ -0,0 +1,98 @@
|
|||
<template>
|
||||
<div>
|
||||
<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>
|
||||
<Button type="primary" @click.native="next">下一步</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>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { Steps, Button } from 'iview';
|
||||
|
||||
const Step = Steps.Step;
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Steps,
|
||||
Step,
|
||||
Button
|
||||
},
|
||||
props: {
|
||||
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
total: 512,
|
||||
current: 0
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
methods: {
|
||||
next () {
|
||||
if (this.current == 3) {
|
||||
this.current = 0;
|
||||
} else {
|
||||
this.current += 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
24
examples/routers/switch.vue
Normal file
24
examples/routers/switch.vue
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
<template>
|
||||
<div>
|
||||
<i-switch v-model="m1">
|
||||
<span slot="open">开</span>
|
||||
<span slot="close">关</span>
|
||||
</i-switch>
|
||||
{{ m1 }}
|
||||
<div @click="m1 = !m1">toggle</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
m1: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
change (status) {
|
||||
console.log(status)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
96
examples/routers/table.vue
Normal file
96
examples/routers/table.vue
Normal file
|
|
@ -0,0 +1,96 @@
|
|||
<template>
|
||||
<i-table highlight-row border :content="self" :columns="columns7" :data="data6"></i-table>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
self: this,
|
||||
columns7: [
|
||||
{
|
||||
type: 'selection',
|
||||
width: 60,
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '姓名',
|
||||
key: 'name',
|
||||
render (row, column, index) {
|
||||
return `<Icon type="person"></Icon> <strong>${row.name}</strong>`;
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '年龄',
|
||||
key: 'age',
|
||||
sortable: true,
|
||||
sortMethod: function (a, b, type) {
|
||||
if (type === 'asc') {
|
||||
return a < b ? 1 : -1;
|
||||
} else if (type === 'desc') {
|
||||
return a > b ? 1 : -1;
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '地址',
|
||||
key: 'address'
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 150,
|
||||
align: 'center',
|
||||
render (row, column, index) {
|
||||
// return `<i-button type="primary" size="small" @click="show(${index})">查看</i-button> <i-button type="error" size="small" @click="remove(${index})">删除</i-button>`;
|
||||
return `<Poptip width="250" confirm placement="left" title="您确认删除吗？" @on-ok="deleteProject(${index})">
|
||||
<i-button size="small" type="error">删除</i-button>
|
||||
</Poptip>`
|
||||
}
|
||||
}
|
||||
],
|
||||
data6: [
|
||||
{
|
||||
name: '王小明',
|
||||
age: 18,
|
||||
address: '北京市朝阳区芍药居',
|
||||
_highlight: true,
|
||||
_checked: true,
|
||||
_disabled: false
|
||||
},
|
||||
{
|
||||
name: '张小刚',
|
||||
age: 25,
|
||||
address: '北京市海淀区西二旗',
|
||||
_checked: false,
|
||||
_disabled: true
|
||||
},
|
||||
{
|
||||
name: '李小红',
|
||||
age: 30,
|
||||
address: '上海市浦东新区世纪大道',
|
||||
_checked: true,
|
||||
_disabled: true
|
||||
},
|
||||
{
|
||||
name: '周小伟',
|
||||
age: 26,
|
||||
address: '深圳市南山区深南大道',
|
||||
_checked: false,
|
||||
_disabled: false
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
show (index) {
|
||||
this.$Modal.info({
|
||||
title: '用户信息',
|
||||
content: `姓名：${this.data6[index].name}<br>年龄：${this.data6[index].age}<br>地址：${this.data6[index].address}`
|
||||
})
|
||||
},
|
||||
remove (index) {
|
||||
this.data6.splice(index, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
59
examples/routers/tabs.vue
Normal file
59
examples/routers/tabs.vue
Normal file
|
|
@ -0,0 +1,59 @@
|
|||
<style>
|
||||
.demo-tabs-style1 > .ivu-tabs-card > .ivu-tabs-content {
|
||||
height: 120px;
|
||||
margin-top: -16px;
|
||||
}
|
||||
|
||||
.demo-tabs-style1 > .ivu-tabs-card > .ivu-tabs-content > .ivu-tabs-tabpane {
|
||||
background: #fff;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.demo-tabs-style1 > .ivu-tabs.ivu-tabs-card > .ivu-tabs-bar .ivu-tabs-tab {
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.demo-tabs-style1 > .ivu-tabs-card > .ivu-tabs-bar .ivu-tabs-tab-active {
|
||||
border-color: #fff;
|
||||
}
|
||||
.demo-tabs-style2 > .ivu-tabs.ivu-tabs-card > .ivu-tabs-bar .ivu-tabs-tab{
|
||||
border-radius: 0;
|
||||
background: #fff;
|
||||
}
|
||||
.demo-tabs-style2 > .ivu-tabs.ivu-tabs-card > .ivu-tabs-bar .ivu-tabs-tab-active{
|
||||
border-top: 1px solid #3399ff;
|
||||
}
|
||||
.demo-tabs-style2 > .ivu-tabs.ivu-tabs-card > .ivu-tabs-bar .ivu-tabs-tab-active:before{
|
||||
content: '';
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background: #3399ff;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<Row :gutter="32">
|
||||
<i-col span="12" class="demo-tabs-style1" style="background: #e3e8ee;padding:16px;">
|
||||
<Tabs type="card">
|
||||
<Tab-pane label="标签一">标签一的内容</Tab-pane>
|
||||
<Tab-pane label="标签二">标签二的内容</Tab-pane>
|
||||
<Tab-pane label="标签三">标签三的内容</Tab-pane>
|
||||
</Tabs>
|
||||
</i-col>
|
||||
<i-col span="12" class="demo-tabs-style2">
|
||||
<Tabs type="card">
|
||||
<Tab-pane label="标签一">标签一的内容</Tab-pane>
|
||||
<Tab-pane label="标签二">标签二的内容</Tab-pane>
|
||||
<Tab-pane label="标签三">标签三的内容</Tab-pane>
|
||||
</Tabs>
|
||||
</i-col>
|
||||
</Row>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
</script>
|
||||
61
examples/routers/tag.vue
Normal file
61
examples/routers/tag.vue
Normal file
|
|
@ -0,0 +1,61 @@
|
|||
<template>
|
||||
<div>
|
||||
<Tag>标签一</Tag>
|
||||
<Tag>标签二</Tag>
|
||||
<Tag closable>标签三</Tag>
|
||||
<Tag closable color="blue">标签一</Tag>
|
||||
<Tag closable color="green">标签二</Tag>
|
||||
<Tag closable color="red">标签三</Tag>
|
||||
<Tag closable color="yellow">标签四</Tag>
|
||||
<br><br>
|
||||
<Tag type="dot">标签一</Tag>
|
||||
<Tag type="dot" closable>标签一</Tag>
|
||||
<Tag type="dot" color="blue">标签一</Tag>
|
||||
<Tag type="dot" color="blue" closable>标签一</Tag>
|
||||
<Tag type="dot" color="green">标签一</Tag>
|
||||
<Tag type="dot" color="green" closable>标签一</Tag>
|
||||
<Tag type="dot" color="red">标签一</Tag>
|
||||
<Tag type="dot" color="red" closable>标签一</Tag>
|
||||
<Tag type="dot" color="yellow">标签一</Tag>
|
||||
<Tag type="dot" color="yellow" closable>标签一</Tag>
|
||||
<br><br>
|
||||
<Tag type="border">标签一</Tag>
|
||||
<Tag type="border" closable>标签一</Tag>
|
||||
<Tag type="border" color="blue">标签一</Tag>
|
||||
<Tag type="border" color="blue" closable>标签一</Tag>
|
||||
<Tag type="border" color="green">标签一</Tag>
|
||||
<Tag type="border" color="green" closable>标签一</Tag>
|
||||
<Tag type="border" color="red">标签一</Tag>
|
||||
<Tag type="border" color="red" closable>标签一</Tag>
|
||||
<Tag type="border" color="yellow">标签一</Tag>
|
||||
<Tag type="border" color="yellow" closable>标签一</Tag>
|
||||
<Button type="primary" @click="modal1 = true">显示对话框</Button>
|
||||
<br><br>
|
||||
<Tag v-if="ccc" closable @on-close="clickTagClose">标签一</Tag>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
modal1: false,
|
||||
loading: true,
|
||||
ccc: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
ok () {
|
||||
setTimeout(() => {
|
||||
this.modal1 = false;
|
||||
}, 2000);
|
||||
},
|
||||
clickTag() {
|
||||
console.log('click tag');
|
||||
},
|
||||
clickTagClose() {
|
||||
this.ccc = false;
|
||||
console.log('click tag close-icon');
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
61
examples/routers/timeline.vue
Normal file
61
examples/routers/timeline.vue
Normal file
|
|
@ -0,0 +1,61 @@
|
|||
<style scoped>
|
||||
.time{
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.content{
|
||||
padding-left: 5px;
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<div>
|
||||
<Timeline>
|
||||
<Timeline-item>
|
||||
<p class="time">1976年</p>
|
||||
<p class="content">Apple I 问世</p>
|
||||
</Timeline-item>
|
||||
<Timeline-item>
|
||||
<p class="time">1984年</p>
|
||||
<p class="content">发布 Macintosh</p>
|
||||
</Timeline-item>
|
||||
<Timeline-item>
|
||||
<p class="time">2007年</p>
|
||||
<p class="content">发布 iPhone</p>
|
||||
</Timeline-item>
|
||||
<Timeline-item>
|
||||
<p class="time">2010年</p>
|
||||
<p class="content">发布 iPad</p>
|
||||
</Timeline-item>
|
||||
<Timeline-item>
|
||||
<p class="time">2011年10月5日</p>
|
||||
<p class="content">史蒂夫·乔布斯去世</p>
|
||||
</Timeline-item>
|
||||
</Timeline>
|
||||
<Timeline>
|
||||
<Timeline-item color="green">发布1.0版本</Timeline-item>
|
||||
<Timeline-item color="green">发布2.0版本</Timeline-item>
|
||||
<Timeline-item color="red">严重故障</Timeline-item>
|
||||
<Timeline-item color="blue">发布3.0版本</Timeline-item>
|
||||
</Timeline>
|
||||
<Timeline pending>
|
||||
<Timeline-item>发布1.0版本</Timeline-item>
|
||||
<Timeline-item>发布2.0版本</Timeline-item>
|
||||
<Timeline-item>发布3.0版本</Timeline-item>
|
||||
<Timeline-item><a href="#">查看更多</a></Timeline-item>
|
||||
</Timeline>
|
||||
<Timeline>
|
||||
<Timeline-item color="green">
|
||||
<Icon type="trophy" slot="dot"></Icon>
|
||||
<span>发布里程碑版本</span>
|
||||
</Timeline-item>
|
||||
<Timeline-item>发布1.0版本</Timeline-item>
|
||||
<Timeline-item>发布2.0版本</Timeline-item>
|
||||
<Timeline-item>发布3.0版本</Timeline-item>
|
||||
</Timeline>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
</script>
|
||||
10
examples/routers/tooltip.vue
Normal file
10
examples/routers/tooltip.vue
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
<template>
|
||||
<Tooltip placement="top" content="Tooltip 文字提示" :delay="1000">
|
||||
<Button @click="disabled = true">延时1秒显示</Button>
|
||||
</Tooltip>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
</script>
|
||||
47
examples/routers/transfer.vue
Normal file
47
examples/routers/transfer.vue
Normal file
|
|
@ -0,0 +1,47 @@
|
|||
<template>
|
||||
<Transfer
|
||||
:data="data2"
|
||||
:target-keys="targetKeys2"
|
||||
filterable
|
||||
:render-format="rf"
|
||||
:filter-method="filterMethod"
|
||||
@on-change="handleChange2"></Transfer>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
data2: this.getMockData(),
|
||||
targetKeys2: this.getTargetKeys()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getMockData () {
|
||||
let mockData = [];
|
||||
for (let i = 1; i <= 20; i++) {
|
||||
mockData.push({
|
||||
key: i.toString(),
|
||||
label: '内容' + i,
|
||||
description: '内容' + i + '的描述信息',
|
||||
disabled: Math.random() * 3 < 1
|
||||
});
|
||||
}
|
||||
return mockData;
|
||||
},
|
||||
getTargetKeys () {
|
||||
return this.getMockData()
|
||||
.filter(() => Math.random() * 2 > 1)
|
||||
.map(item => item.key);
|
||||
},
|
||||
handleChange2 (newTargetKeys) {
|
||||
this.targetKeys2 = newTargetKeys;
|
||||
},
|
||||
filterMethod (data, query) {
|
||||
return data.label.indexOf(query) > -1;
|
||||
},
|
||||
rf (data) {
|
||||
return '<i class="ivu-icon ivu-icon-alert"></i>' + data.label;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
41
examples/routers/tree.vue
Normal file
41
examples/routers/tree.vue
Normal file
|
|
@ -0,0 +1,41 @@
|
|||
<template>
|
||||
<div>
|
||||
<Tree :data="baseData" show-checkbox></Tree>
|
||||
<div @click="c">change</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
baseData: [{
|
||||
expand: true,
|
||||
title: 'parent 1',
|
||||
children: [{
|
||||
title: 'parent 1-0',
|
||||
expand: true,
|
||||
disabled: true,
|
||||
children: [{
|
||||
title: 'leaf',
|
||||
disableCheckbox: true
|
||||
}, {
|
||||
title: 'leaf',
|
||||
}]
|
||||
}, {
|
||||
title: 'parent 1-1',
|
||||
expand: true,
|
||||
checked: true,
|
||||
children: [{
|
||||
title: '<span style="color: red">leaf</span>'
|
||||
}]
|
||||
}]
|
||||
}]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
c () {
|
||||
this.baseData[0].expand = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
147
examples/routers/upload.vue
Normal file
147
examples/routers/upload.vue
Normal file
|
|
@ -0,0 +1,147 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="demo-upload-list" v-for="item in uploadList">
|
||||
<template v-if="item.status === 'finished'">
|
||||
<img :src="item.url">
|
||||
<div class="demo-upload-list-cover">
|
||||
<Icon type="ios-eye-outline" @click.native="handleView(item.name)"></Icon>
|
||||
<Icon type="ios-trash-outline" @click.native="handleRemove(item)"></Icon>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress>
|
||||
</template>
|
||||
</div>
|
||||
<Upload
|
||||
ref="upload"
|
||||
:show-upload-list="false"
|
||||
:default-file-list="defaultList"
|
||||
:on-success="handleSuccess"
|
||||
:format="['jpg','jpeg','png']"
|
||||
:max-size="2048"
|
||||
:on-format-error="handleFormatError"
|
||||
:on-exceeded-size="handleMaxSize"
|
||||
@on-progress="handleProgress"
|
||||
:before-upload="handleBeforeUpload"
|
||||
multiple
|
||||
type="drag"
|
||||
action="//jsonplaceholder.typicode.com/posts/"
|
||||
style="display: inline-block;width:58px;">
|
||||
<div style="width: 58px;height:58px;line-height: 58px;">
|
||||
<Icon type="camera" size="20"></Icon>
|
||||
</div>
|
||||
</Upload>
|
||||
{{ visible }}
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
defaultList: [
|
||||
{
|
||||
'name': 'a42bdcc1178e62b4694c830f028db5c0',
|
||||
'url': 'https://o5wwk8baw.qnssl.com/a42bdcc1178e62b4694c830f028db5c0/avatar'
|
||||
},
|
||||
{
|
||||
'name': 'bc7521e033abdd1e92222d733590f104',
|
||||
'url': 'https://o5wwk8baw.qnssl.com/bc7521e033abdd1e92222d733590f104/avatar'
|
||||
}
|
||||
],
|
||||
imgName: '',
|
||||
visible: false,
|
||||
uploadList: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// uploadList () {
|
||||
// return this.$refs.upload ? this.$refs.upload.fileList : [];
|
||||
// }
|
||||
},
|
||||
watch: {
|
||||
|
||||
},
|
||||
mounted () {
|
||||
this.uploadList = this.$refs.upload.fileList;
|
||||
// console.log(this.$refs.upload.fileList)
|
||||
},
|
||||
methods: {
|
||||
handleView (name) {
|
||||
this.imgName = name;
|
||||
this.visible = true;
|
||||
},
|
||||
handleRemove (file) {
|
||||
// 从 upload 实例删除数据
|
||||
const fileList = this.$refs.upload.fileList;
|
||||
this.$refs.upload.fileList.splice(fileList.indexOf(file), 1);
|
||||
},
|
||||
handleSuccess (res, file) {
|
||||
// 因为上传过程为实例，这里模拟添加 url
|
||||
file.url = 'https://o5wwk8baw.qnssl.com/7eb99afb9d5f317c912f08b5212fd69a/avatar';
|
||||
file.name = '7eb99afb9d5f317c912f08b5212fd69a';
|
||||
},
|
||||
handleFormatError (file) {
|
||||
this.$Notice.warning({
|
||||
title: '文件格式不正确',
|
||||
desc: '文件 ' + file.name + ' 格式不正确，请上传 jpg 或 png 格式的图片。'
|
||||
});
|
||||
},
|
||||
handleMaxSize (file) {
|
||||
this.$Notice.warning({
|
||||
title: '超出文件大小限制',
|
||||
desc: '文件 ' + file.name + ' 太大，不能超过 2M。'
|
||||
});
|
||||
},
|
||||
handleBeforeUpload () {
|
||||
const check = this.uploadList.length < 5;
|
||||
if (!check) {
|
||||
this.$Notice.warning({
|
||||
title: '最多只能上传 5 张图片。'
|
||||
});
|
||||
}
|
||||
return check;
|
||||
},
|
||||
handleProgress (s) {
|
||||
console.log(s)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.demo-upload-list{
|
||||
display: inline-block;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
text-align: center;
|
||||
line-height: 60px;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
position: relative;
|
||||
box-shadow: 0 1px 1px rgba(0,0,0,.2);
|
||||
margin-right: 4px;
|
||||
}
|
||||
.demo-upload-list img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.demo-upload-list-cover{
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: rgba(0,0,0,.6);
|
||||
}
|
||||
.demo-upload-list:hover .demo-upload-list-cover{
|
||||
display: block;
|
||||
}
|
||||
.demo-upload-list-cover i{
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
cursor: pointer;
|
||||
margin: 0 2px;
|
||||
}
|
||||
</style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue