Modify the directory structure
Modify the directory structure
This commit is contained in:
梁灏
parent
31fbef10e4
commit
4b05d84ea2
175 changed files with 48 additions and 46 deletions
27
test/components/app.vue
Normal file
27
test/components/app.vue
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
<style lang="less">
|
||||
@import "../../src/styles/index.less";
|
||||
@import "../../src/styles/package.less";
|
||||
</style>
|
||||
<template>
|
||||
<div>
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
module.exports = {
|
||||
data: function() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
ready: function() {
|
||||
|
||||
},
|
||||
beforeDestroy: function() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
10
test/index.html
Normal file
10
test/index.html
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Webpack App</title>
|
||||
<link href="/test/dist/main.css" rel="stylesheet"></head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="text/javascript" src="/test/dist/vendors.js"></script><script type="text/javascript" src="/test/dist/main.js"></script></body>
|
||||
</html>
|
||||
82
test/main.js
Normal file
82
test/main.js
Normal file
|
|
@ -0,0 +1,82 @@
|
|||
/**
|
||||
* Created by aresn on 16/6/20.
|
||||
*/
|
||||
import Vue from 'vue';
|
||||
import VueRouter from 'vue-router';
|
||||
import App from './components/app.vue';
|
||||
|
||||
Vue.use(VueRouter);
|
||||
|
||||
// 开启debug模式
|
||||
Vue.config.debug = true;
|
||||
|
||||
// 路由配置
|
||||
var router = new VueRouter({
|
||||
history: true
|
||||
});
|
||||
|
||||
router.map({
|
||||
'/index': {
|
||||
component: function (resolve) {
|
||||
require(['./routers/index.vue'], resolve);
|
||||
}
|
||||
},
|
||||
'/button': {
|
||||
component: function (resolve) {
|
||||
require(['./routers/button.vue'], resolve);
|
||||
}
|
||||
},
|
||||
'/page': {
|
||||
component: function (resolve) {
|
||||
require(['./routers/page.vue'], resolve);
|
||||
}
|
||||
},
|
||||
'/more': {
|
||||
component: function (resolve) {
|
||||
require(['./routers/more.vue'], resolve);
|
||||
}
|
||||
},
|
||||
'/layout': {
|
||||
component: function (resolve) {
|
||||
require(['./routers/layout.vue'], resolve);
|
||||
}
|
||||
},
|
||||
'/radio': {
|
||||
component: function (resolve) {
|
||||
require(['./routers/radio.vue'], resolve);
|
||||
}
|
||||
},
|
||||
'/msg': {
|
||||
component: function (resolve) {
|
||||
require(['./routers/msg.vue'], resolve);
|
||||
}
|
||||
},
|
||||
'/notice': {
|
||||
component: function (resolve) {
|
||||
require(['./routers/notice.vue'], resolve);
|
||||
}
|
||||
},
|
||||
'/tag': {
|
||||
component: function (resolve) {
|
||||
require(['./routers/tag.vue'], resolve);
|
||||
}
|
||||
},
|
||||
'/select': {
|
||||
component: function (resolve) {
|
||||
require(['./routers/select.vue'], resolve);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
router.beforeEach(function () {
|
||||
window.scrollTo(0, 0);
|
||||
});
|
||||
|
||||
router.afterEach(function (transition) {
|
||||
|
||||
});
|
||||
|
||||
router.redirect({
|
||||
'*': "/index"
|
||||
});
|
||||
router.start(App, '#app');
|
||||
113
test/routers/button.vue
Normal file
113
test/routers/button.vue
Normal file
|
|
@ -0,0 +1,113 @@
|
|||
<template>
|
||||
<Button>Default</Button>
|
||||
<Button type="primary">Primary</Button>
|
||||
<Button type="ghost">Ghost</Button>
|
||||
<br><br>
|
||||
<Button type="primary" size="large">Large</Button>
|
||||
<Button type="primary">Default</Button>
|
||||
<Button type="primary" size="small">Small</Button>
|
||||
<br><br>
|
||||
<Button>Default</Button>
|
||||
<Button disabled>Default(Disabled)</Button>
|
||||
<br><br>
|
||||
<Button type="primary">Primary</Button>
|
||||
<Button type="primary" disabled>Primary(Disabled)</Button>
|
||||
<br><br>
|
||||
<Button type="ghost">Ghost</Button>
|
||||
<Button type="ghost" disabled>Ghost(Disabled)</Button>
|
||||
<br><br>
|
||||
<Button type="primary" shape="circle" icon="ios-search"></Button>
|
||||
<Button type="primary" icon="ios-search">搜索</Button>
|
||||
<br><br>
|
||||
<Button type="ghost" shape="circle">
|
||||
<Icon type="search"></Icon>
|
||||
</Button>
|
||||
<Button type="ghost">
|
||||
<Icon type="search"></Icon>
|
||||
搜索
|
||||
</Button>
|
||||
<Button type="ghost" shape="circle" size="large">
|
||||
<Icon type="search"></Icon>
|
||||
</Button>
|
||||
<Button type="ghost" shape="circle" size="small">
|
||||
<Icon type="search"></Icon>
|
||||
</Button>
|
||||
<br><br><br>
|
||||
<Button type="primary" loading>Loading...</Button>
|
||||
<Button type="primary" loading size="large">Loading...</Button>
|
||||
<Button type="primary" loading size="small">Loading...</Button>
|
||||
<Button type="primary" :loading="loading" @click="toLoading">
|
||||
<span v-if="!loading">Click me!</span>
|
||||
<span v-else>Loading...</span>
|
||||
</Button>
|
||||
<Button type="primary" :loading="loading2" icon="checkmark-round" @click="toLoading2">
|
||||
<span v-if="!loading2">Click me!</span>
|
||||
<span v-else>Loading...</span>
|
||||
</Button>
|
||||
<h4>基本</h4>
|
||||
<Button-group size="large">
|
||||
<Button>取消</Button>
|
||||
<Button type="primary">确定</Button>
|
||||
</Button-group>
|
||||
<Button-group>
|
||||
<Button type="primary">L</Button>
|
||||
<Button>M</Button>
|
||||
<Button type="ghost">R</Button>
|
||||
</Button-group>
|
||||
<h4>配合图标</h4>
|
||||
<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="cloud"></Button>
|
||||
<Button type="primary" icon="upload"></Button>
|
||||
</Button-group>
|
||||
</template>
|
||||
<script>
|
||||
import { Button, Icon, Input, Switch, Radio, Checkbox, InputNumber, Row, Col, Page } from 'iview';
|
||||
const ButtonGroup = Button.Group;
|
||||
const RadioGroup = Radio.Group;
|
||||
const CheckboxGroup = Checkbox.Group;
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Button,
|
||||
ButtonGroup,
|
||||
Icon,
|
||||
iInput: Input,
|
||||
Switch,
|
||||
Radio,
|
||||
RadioGroup,
|
||||
Checkbox,
|
||||
CheckboxGroup,
|
||||
InputNumber,
|
||||
Row,
|
||||
iCol: Col,
|
||||
Page
|
||||
},
|
||||
props: {
|
||||
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
loading: false,
|
||||
loading2: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
toLoading () {
|
||||
this.loading = true;
|
||||
},
|
||||
toLoading2 () {
|
||||
this.loading2 = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
58
test/routers/index.vue
Normal file
58
test/routers/index.vue
Normal file
|
|
@ -0,0 +1,58 @@
|
|||
<style>
|
||||
|
||||
</style>
|
||||
<template>
|
||||
<Page :total="40" size="small"></Page>
|
||||
<Page :total="40" size="small" show-elevator show-sizer></Page>
|
||||
<Page :total="40" size="small" show-total></Page>
|
||||
</template>
|
||||
<script>
|
||||
import { Modal, Button, Message, Page } from 'iview';
|
||||
|
||||
export default {
|
||||
components: { Modal, Button, Page },
|
||||
props: {
|
||||
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
info () {
|
||||
Modal.info({
|
||||
title: '这是对话框标题',
|
||||
content: `<p>这是对话框内容</p><p>这是对话框内容这是对话框内容这是对话框内容这是对话框内容这是对话框内容这是对话框内容这是对话框内容这是对话框内容这是对话框内容这是对话框内容</p>`
|
||||
});
|
||||
},
|
||||
success () {
|
||||
Modal.success();
|
||||
},
|
||||
warning () {
|
||||
Modal.warning();
|
||||
},
|
||||
error () {
|
||||
Modal.error();
|
||||
},
|
||||
confirm () {
|
||||
Modal.confirm({
|
||||
// okText: 'OK',
|
||||
// cancelText: 'Cancel',
|
||||
title: '删除提示',
|
||||
content: '删除后将不可找回，您确定要删除吗？',
|
||||
onCancel () {
|
||||
Message.info('cancel it');
|
||||
},
|
||||
onOk () {
|
||||
setTimeout(() => {
|
||||
Modal.remove();
|
||||
Message.success('OK!');
|
||||
}, 2000);
|
||||
},
|
||||
loading: true
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
38
test/routers/layout.vue
Normal file
38
test/routers/layout.vue
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
<template>
|
||||
<Card :bordered="true" style="width:300px">
|
||||
<template slot="title">
|
||||
<p>放寒假的发货会计师</p>
|
||||
</template>
|
||||
<a href="#" slot="extra">More</a>
|
||||
</Card>
|
||||
<Card style="width:300px">
|
||||
<p>hello</p>
|
||||
<p>hndshf</p>
|
||||
<h3>jfds</h3>
|
||||
</Card>
|
||||
</template>
|
||||
<script>
|
||||
import { Row, Col, Card } from 'iview';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Row,
|
||||
iCol: Col,
|
||||
Card
|
||||
},
|
||||
props: {
|
||||
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
133
test/routers/more.vue
Normal file
133
test/routers/more.vue
Normal file
|
|
@ -0,0 +1,133 @@
|
|||
<style scoped>
|
||||
/*body{*/
|
||||
/*padding: 50px;*/
|
||||
/*height: 2000px;*/
|
||||
/*}*/
|
||||
.example-badge{
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
border-radius: 6px;
|
||||
background: #eee;
|
||||
display: inline-block;
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
|
||||
<Badge count="10">
|
||||
<a class="example-badge"></a>
|
||||
</Badge>
|
||||
|
||||
<Tag color="green" closable @on-close="closed">管理员</Tag>
|
||||
<Progress :percent="50" status="active" :stroke-width="20">
|
||||
|
||||
</Progress>
|
||||
|
||||
<Circle :percent="p">
|
||||
{{p}}%
|
||||
</Circle>
|
||||
<br><br>
|
||||
<Timeline pending>
|
||||
<Timeline-item color="red">发布3.0版本</Timeline-item>
|
||||
<Timeline-item color="green">
|
||||
<Icon type="time" slot="dot"></Icon>
|
||||
发布2.0版本
|
||||
</Timeline-item>
|
||||
<Timeline-item color="#ff6600">发布1.0版本</Timeline-item>
|
||||
<Timeline-item>发布里程碑版本</Timeline-item>
|
||||
</Timeline>
|
||||
<br><br>
|
||||
<Affix :offset-top="50" @on-change="affixChange">
|
||||
<Button>固定的图钉</Button>
|
||||
</Affix>
|
||||
<Back-top @on-click="backtop">
|
||||
|
||||
</Back-top>
|
||||
|
||||
<div style="width: 200px;height: 100px;border:1px solid #b2b2b2;position:relative">
|
||||
<!--<Spin size="large" fix>加载中...</Spin>-->
|
||||
<Spin size="large" fix v-if="spinShow">加载中...</Spin>
|
||||
</div>
|
||||
<div @click="spinShow = !spinShow">消失</div>
|
||||
<br><br>
|
||||
|
||||
<Button @click="nextStep">下一步</Button>
|
||||
<Button @click="step_status = 'error'">步骤3切换为错误</Button>
|
||||
<Button @click="step_process = 'error'">切换steps状态为error</Button>
|
||||
<Breadcrumb separator="<b>=></b>">
|
||||
<Breadcrumb-item href="/index">首页</Breadcrumb-item>
|
||||
<Breadcrumb-item href="/my">我的</Breadcrumb-item>
|
||||
<Breadcrumb-item>
|
||||
<Icon type="photo"></Icon>照片
|
||||
</Breadcrumb-item>
|
||||
</Breadcrumb>
|
||||
<br>
|
||||
<Steps :current="1" status="error">
|
||||
<Step title="已完成" content="这里是该步骤的描述信息"></Step>
|
||||
<Step title="进行中" content="这里是该步骤的描述信息"></Step>
|
||||
<Step title="待进行" content="这里是该步骤的描述信息"></Step>
|
||||
<Step title="待进行" content="这里是该步骤的描述信息"></Step>
|
||||
</Steps>
|
||||
<Button @click="testStatus = 'process'">change Status</Button>
|
||||
</template>
|
||||
<script>
|
||||
import { Badge, Tag, Progress, Circle, Timeline, Icon, Affix, Button, BackTop, Spin, Steps, Breadcrumb} from 'iview';
|
||||
const TimelineItem = Timeline.Item;
|
||||
const Step = Steps.Step;
|
||||
const BreadcrumbItem = Breadcrumb.Item;
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Badge,
|
||||
Tag,
|
||||
Progress,
|
||||
Circle,
|
||||
Timeline,
|
||||
TimelineItem,
|
||||
Icon,
|
||||
Affix,
|
||||
Button,
|
||||
BackTop,
|
||||
Spin,
|
||||
Steps,
|
||||
Step,
|
||||
Breadcrumb,
|
||||
BreadcrumbItem
|
||||
},
|
||||
props: {
|
||||
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
total: 512,
|
||||
p: 50,
|
||||
step_current: 0,
|
||||
step_status: 'wait',
|
||||
step_process: 'process',
|
||||
spinShow: true,
|
||||
testStatus: 'wait'
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
methods: {
|
||||
closed (e) {
|
||||
console.log(e)
|
||||
},
|
||||
affixChange (status) {
|
||||
console.log(status)
|
||||
},
|
||||
backtop () {
|
||||
console.log('toppp')
|
||||
},
|
||||
nextStep () {
|
||||
this.step_current += 1;
|
||||
}
|
||||
},
|
||||
ready () {
|
||||
setTimeout(() => {
|
||||
this.p = 60;
|
||||
}, 1000)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
72
test/routers/msg.vue
Normal file
72
test/routers/msg.vue
Normal file
|
|
@ -0,0 +1,72 @@
|
|||
<template>
|
||||
<Button @click="info">info</Button>
|
||||
<Button @click="success">success</Button>
|
||||
<Button @click="error">error</Button>
|
||||
<Button @click="warning">warning</Button>
|
||||
<Button @click="loading">手动消失</Button>
|
||||
<Button @click="destroy">destroy</Button>
|
||||
<Alert closable>消息提示文案</Alert>
|
||||
<Alert type="success" show-icon closable>
|
||||
成功提示文案
|
||||
<span slot="desc">成功的提示描述文案成功的提示描述文案成功的提示描述文案成功的提示描述文案成功的提示描述文案</span>
|
||||
</Alert>
|
||||
<Card :bordered="false">
|
||||
<p slot="title">无边框标题</p>
|
||||
<p>无边框内容填充无边框内容填充无边框内容填充无边框内容填充无边框内容填充无边框内容填充无边框内容填充无边框内容填充无边框内容填充无边框内容填充无边框内容填充。</p>
|
||||
</Card>
|
||||
</template>
|
||||
<script>
|
||||
import { Message, Button, Alert, Card } from 'iview';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Message,
|
||||
Button,
|
||||
Alert,
|
||||
Card
|
||||
},
|
||||
props: {
|
||||
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
methods: {
|
||||
info () {
|
||||
Message.info('欢迎来到iView', 3, () => {
|
||||
console.log('close info');
|
||||
});
|
||||
},
|
||||
success () {
|
||||
Message.success('成功啦', 5, () => {
|
||||
console.log('close successs');
|
||||
});
|
||||
},
|
||||
error () {
|
||||
Message.error('错误啦');
|
||||
},
|
||||
warning () {
|
||||
Message.warning('来个警告');
|
||||
},
|
||||
loading () {
|
||||
const hide = Message.loading('我是loading', 0);
|
||||
|
||||
setTimeout(hide, 5000);
|
||||
},
|
||||
destroy () {
|
||||
Message.destroy();
|
||||
}
|
||||
},
|
||||
ready () {
|
||||
// Message.config({
|
||||
// top: 50,
|
||||
// duration: 8
|
||||
// });
|
||||
}
|
||||
}
|
||||
</script>
|
||||
132
test/routers/notice.vue
Normal file
132
test/routers/notice.vue
Normal file
|
|
@ -0,0 +1,132 @@
|
|||
<style>
|
||||
.tooltip_out{
|
||||
padding: 150px;
|
||||
}
|
||||
body{
|
||||
height: 1000px;
|
||||
padding: 10px;
|
||||
}
|
||||
.api table{
|
||||
font-family: Consolas,Menlo,Courier,monospace;
|
||||
font-size: 13px;
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
empty-cells: show;
|
||||
border: 1px solid #e9e9e9;
|
||||
width: 100%;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.api table th{
|
||||
background: #f7f7f7;
|
||||
white-space: nowrap;
|
||||
color: #5c6b77;
|
||||
font-weight: 600;
|
||||
}
|
||||
.api table td, .api table th{
|
||||
border: 1px solid #e9e9e9;
|
||||
padding: 8px 16px;
|
||||
text-align: left;
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<div class="tooltip_out">
|
||||
<Poptip>
|
||||
<a>click 激活</a>
|
||||
<div slot="title"><i>自定义标题</i></div>
|
||||
<div slot="content">
|
||||
<a>关闭提示框</a>
|
||||
</div>
|
||||
</Poptip>
|
||||
<Poptip placement="right" width="300">
|
||||
<Button type="ghost">click 激活</Button>
|
||||
<div class="api" slot="content">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>属性</th>
|
||||
<th>说明</th>
|
||||
<th>类型</th>
|
||||
<th>默认值</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>content</td>
|
||||
<td>显示的内容</td>
|
||||
<td>String | Number</td>
|
||||
<td>空</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>placement</td>
|
||||
<td>提示框出现的位置，可选值为<code>top</code><code>top-start</code><code>top-end</code><code>bottom</code><code>bottom-start</code><code>bottom-end</code><code>left</code><code>left-start</code><code>left-end</code><code>right</code><code>right-start</code><code>right-end</code></td>
|
||||
<td>String</td>
|
||||
<td>bottom</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>disabled</td>
|
||||
<td>是否禁用提示框</td>
|
||||
<td>Boolean</td>
|
||||
<td>false</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>delay</td>
|
||||
<td>延迟显示，单位毫秒</td>
|
||||
<td>Number</td>
|
||||
<td>0</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</Poptip>
|
||||
<!--<Poptip title="标题" content="内容">-->
|
||||
<!--<Button>click 触发</Button>-->
|
||||
<!--</Poptip>-->
|
||||
<!--<Poptip title="标题" content="内容" trigger="hover">-->
|
||||
<!--<Button>hover 触发</Button>-->
|
||||
<!--</Poptip>-->
|
||||
<Poptip title="确定删除这条信息吗？" confirm content="内容" trigger="focus" @on-ok="ok" @on-cancel="cancel">
|
||||
<a><strong>Delete</strong></a>
|
||||
</Poptip>
|
||||
<!--<Poptip title="标题" content="内容" trigger="focus">-->
|
||||
<!--<input type="text">-->
|
||||
<!--</Poptip>-->
|
||||
<!--<Poptip title="标题" content="内容" trigger="focus">-->
|
||||
<!--<Button>focus 触发</Button>-->
|
||||
<!--</Poptip>-->
|
||||
<!--<Tooltip content="这里是提示文字">-->
|
||||
<!--当鼠标经过这段文字时，会显示一个气泡框-->
|
||||
<!--</Tooltip>-->
|
||||
<Poptip>
|
||||
<a>click 激活</a>
|
||||
<div slot="content">
|
||||
<a>关闭提示框</a>
|
||||
</div>
|
||||
</Poptip>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { Tooltip, Button, Row, iCol, Poptip, iSelect, iOption, Message } from 'iview';
|
||||
|
||||
export default {
|
||||
components: { Tooltip, Button, Row, iCol, Poptip, iSelect, iOption, Message },
|
||||
props: {
|
||||
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
methods: {
|
||||
ok () {
|
||||
Message.info('ok');
|
||||
},
|
||||
cancel () {
|
||||
Message.info('cancel');
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
97
test/routers/page.vue
Normal file
97
test/routers/page.vue
Normal file
|
|
@ -0,0 +1,97 @@
|
|||
<style>
|
||||
|
||||
</style>
|
||||
<template>
|
||||
<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>
|
||||
<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>
|
||||
<Button type="primary" @click="next">下一步</Button>
|
||||
<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>
|
||||
</template>
|
||||
<script>
|
||||
import { Page, Steps, Button } from 'iview';
|
||||
|
||||
const Step = Steps.Step;
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Page,
|
||||
Steps,
|
||||
Step,
|
||||
Button
|
||||
},
|
||||
props: {
|
||||
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
total: 512,
|
||||
current: 0
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
methods: {
|
||||
setPage (page) {
|
||||
console.log(page)
|
||||
},
|
||||
next () {
|
||||
if (this.current == 3) {
|
||||
this.current = 0;
|
||||
} else {
|
||||
this.current += 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
210
test/routers/radio.vue
Normal file
210
test/routers/radio.vue
Normal file
|
|
@ -0,0 +1,210 @@
|
|||
<template>
|
||||
<div>
|
||||
<Collapse active-key="2">
|
||||
<Panel key="1">
|
||||
Header1
|
||||
<Collapse active-key="2" slot="content">
|
||||
<Panel key="1">
|
||||
inHeader1
|
||||
<p slot="content">inContent1</p>
|
||||
</Panel>
|
||||
<Panel key="2">
|
||||
inHeader2
|
||||
<p slot="content">inContent2</p>
|
||||
</Panel>
|
||||
<Panel key="3">
|
||||
inHeader3
|
||||
<p slot="content">inContent3</p>
|
||||
</Panel>
|
||||
</Collapse>
|
||||
</Panel>
|
||||
<Panel key="2">
|
||||
Header2
|
||||
<p slot="content">A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.</p>
|
||||
</Panel>
|
||||
<Panel key="3">
|
||||
Header3
|
||||
<p slot="content">A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.</p>
|
||||
</Panel>
|
||||
</Collapse>
|
||||
<Button @click="activeKey = '2'">换</Button>
|
||||
</div>
|
||||
<Radio :checked.sync="radio">Radio</Radio>
|
||||
<Button @click="radio = !radio">change radio</Button>
|
||||
<br>
|
||||
<br>
|
||||
<Radio-group :model.sync="phone" type="button">
|
||||
<Radio value="apple">
|
||||
<Icon type="social-apple"></Icon>
|
||||
<span>Apple</span>
|
||||
</Radio>
|
||||
<Radio value="android">
|
||||
<Icon type="social-android"></Icon>
|
||||
<span>Android</span>
|
||||
</Radio>
|
||||
<Radio value="windows">
|
||||
<Icon type="social-windows"></Icon>
|
||||
<span>Windows</span>
|
||||
</Radio>
|
||||
</Radio-group>
|
||||
<Radio-group :model.sync="animal" type="button">
|
||||
<Radio value="金斑蝶"></Radio>
|
||||
<Radio value="爪哇犀牛"></Radio>
|
||||
<Radio value="印度黑羚"></Radio>
|
||||
</Radio-group>
|
||||
|
||||
<Radio-group :model.sync="animal" type="button">
|
||||
<Radio value="金斑蝶" disabled></Radio>
|
||||
<Radio value="爪哇犀牛" disabled></Radio>
|
||||
<Radio value="印度黑羚"></Radio>
|
||||
</Radio-group>
|
||||
<br><br>
|
||||
<Radio-group :model.sync="animal" type="button" size="large">
|
||||
<Radio value="金斑蝶"></Radio>
|
||||
<Radio value="爪哇犀牛"></Radio>
|
||||
<Radio value="印度黑羚"></Radio>
|
||||
</Radio-group>
|
||||
<Radio-group :model.sync="animal" type="button">
|
||||
<Radio value="金斑蝶"></Radio>
|
||||
<Radio value="爪哇犀牛"></Radio>
|
||||
<Radio value="印度黑羚"></Radio>
|
||||
</Radio-group>
|
||||
<Radio-group :model.sync="animal" type="button" size="small">
|
||||
<Radio value="金斑蝶"></Radio>
|
||||
<Radio value="爪哇犀牛"></Radio>
|
||||
<Radio value="印度黑羚"></Radio>
|
||||
</Radio-group>
|
||||
<br><br><br><br>
|
||||
<Checkbox :checked.sync="radio">Checkbox</Checkbox>
|
||||
<br><br>
|
||||
<Checkbox-group :model="social">
|
||||
<Checkbox value="twitter">
|
||||
<Icon type="social-twitter"></Icon>
|
||||
<span>Twitter</span>
|
||||
</Checkbox>
|
||||
<Checkbox value="facebook">
|
||||
<Icon type="social-facebook"></Icon>
|
||||
<span>Facebook</span>
|
||||
</Checkbox>
|
||||
<Checkbox value="github">
|
||||
<Icon type="social-github"></Icon>
|
||||
<span>Github</span>
|
||||
</Checkbox>
|
||||
<Checkbox value="snapchat">
|
||||
<Icon type="social-snapchat"></Icon>
|
||||
<span>Snapchat</span>
|
||||
</Checkbox>
|
||||
</Checkbox-group>
|
||||
<br><br>
|
||||
<Checkbox :checked.sync="disabledSingle" disabled>Checkbox</Checkbox>
|
||||
<Checkbox-group :model="disabledGroup">
|
||||
<Checkbox value="香蕉" disabled></Checkbox>
|
||||
<Checkbox value="苹果" disabled></Checkbox>
|
||||
<Checkbox value="西瓜"></Checkbox>
|
||||
</Checkbox-group>
|
||||
<br><br>
|
||||
<Switch @on-change="change"></Switch>
|
||||
<br><br>
|
||||
<Switch>
|
||||
<span slot="open">开</span>
|
||||
<span slot="close">关</span>
|
||||
</Switch>
|
||||
<br><br>
|
||||
<Switch>
|
||||
<Icon type="android-done" slot="open"></Icon>
|
||||
<Icon type="android-close" slot="close"></Icon>
|
||||
</Switch>
|
||||
<Switch disabled></Switch>
|
||||
<Switch size="small"></Switch>
|
||||
<br><br>
|
||||
<Input-number :max="10" :min="1" :step="1.2" :value="1"></Input-number>
|
||||
<Input-number :value="2" size="small"></Input-number>
|
||||
<Input-number :value="2"></Input-number>
|
||||
<Input-number :value="2" size="large"></Input-number>
|
||||
<br><br>
|
||||
<Breadcrumb>
|
||||
<Breadcrumb-item href="/">Home</Breadcrumb-item>
|
||||
<Breadcrumb-item href="/components/breadcrumb">Components</Breadcrumb-item>
|
||||
<Breadcrumb-item>Breadcrumb</Breadcrumb-item>
|
||||
</Breadcrumb>
|
||||
<Breadcrumb>
|
||||
<Breadcrumb-item href="/">
|
||||
<Icon type="ios-home-outline"></Icon> Home
|
||||
</Breadcrumb-item>
|
||||
<Breadcrumb-item href="/components/breadcrumb">
|
||||
<Icon type="social-buffer-outline"></Icon> Components
|
||||
</Breadcrumb-item>
|
||||
<Breadcrumb-item>
|
||||
<Icon type="pound"></Icon> Breadcrumb
|
||||
</Breadcrumb-item>
|
||||
</Breadcrumb>
|
||||
<Breadcrumb separator=">">
|
||||
<Breadcrumb-item href="/">Home</Breadcrumb-item>
|
||||
<Breadcrumb-item href="/components/breadcrumb">Components</Breadcrumb-item>
|
||||
<Breadcrumb-item>Breadcrumb</Breadcrumb-item>
|
||||
</Breadcrumb>
|
||||
<Breadcrumb separator="<b class='demo-breadcrumb-separator'>=></b>">
|
||||
<Breadcrumb-item href="/">Home</Breadcrumb-item>
|
||||
<Breadcrumb-item href="/components/breadcrumb">Components</Breadcrumb-item>
|
||||
<Breadcrumb-item>Breadcrumb</Breadcrumb-item>
|
||||
</Breadcrumb>
|
||||
</template>
|
||||
<script>
|
||||
import { Radio, Alert, Icon, Collapse, Button, Checkbox, Switch, InputNumber, Breadcrumb, LoadingBar } from 'iview';
|
||||
|
||||
const RadioGroup = Radio.Group;
|
||||
const Panel = Collapse.Panel;
|
||||
const CheckboxGroup = Checkbox.Group;
|
||||
const BreadcrumbItem = Breadcrumb.Item;
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Radio,
|
||||
RadioGroup,
|
||||
Alert,
|
||||
Icon,
|
||||
Collapse,
|
||||
Panel,
|
||||
Button,
|
||||
Checkbox,
|
||||
CheckboxGroup,
|
||||
Switch,
|
||||
InputNumber,
|
||||
Breadcrumb,
|
||||
BreadcrumbItem,
|
||||
LoadingBar
|
||||
},
|
||||
props: {
|
||||
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
radio: false,
|
||||
radioGroup: '段模',
|
||||
activeKey: [1,2],
|
||||
phone: 'apple',
|
||||
animal: '爪哇犀牛',
|
||||
social: ['facebook', 'github'],
|
||||
disabledSingle: true,
|
||||
disabledGroup: ['苹果']
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
methods: {
|
||||
changeGroup (data) {
|
||||
console.log(data);
|
||||
},
|
||||
closed (data) {
|
||||
console.log(data)
|
||||
},
|
||||
change (status) {
|
||||
console.log(status);
|
||||
}
|
||||
},
|
||||
ready () {
|
||||
LoadingBar.start();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
98
test/routers/select.vue
Normal file
98
test/routers/select.vue
Normal file
|
|
@ -0,0 +1,98 @@
|
|||
<template>
|
||||
<div>
|
||||
<br><br><br><br><br><br><br><br><br><br><br>
|
||||
{{ city | json }}<br>
|
||||
<Button @click="city = 'hangzhou'">切换城市</Button>
|
||||
<br>
|
||||
<i-select v-if="true" :model.sync="city" style="width:200px" filterable @on-change="change">
|
||||
<i-option-group label="热门城市">
|
||||
<i-option value="beijing">北京市</i-option>
|
||||
<i-option value="shanghai" disabled label="上海市">上海市2</i-option>
|
||||
<i-option value="shenzhen">深圳市</i-option>
|
||||
</i-option-group>
|
||||
<i-option-group label="二线城市">
|
||||
<i-option value="nanjing">南京市</i-option>
|
||||
<i-option value="hangzhou">杭州市</i-option>
|
||||
<i-option value="heilongjiang" disabled>黑龙江市</i-option>
|
||||
</i-option-group>
|
||||
<i-option-group label="其它城市">
|
||||
<i-option value="jyg">嘉峪关市</i-option>
|
||||
<i-option value="lanzhou">兰州市</i-option>
|
||||
<i-option value="beijingxi">北京西</i-option>
|
||||
</i-option-group>
|
||||
</i-select>
|
||||
|
||||
<i-select v-show="true" :model.sync="focus" style="width:200px" @on-change="change" clearable filterable label-in-value>
|
||||
<i-option value="beijing">北京</i-option>
|
||||
<i-option value="shanghai" label="上海市">上海市</i-option>
|
||||
<i-option value="shenzhen" disabled>深圳市</i-option>
|
||||
<i-option value="guangzhou" label="广州市">广州市2</i-option>
|
||||
<i-option value="shijiazhuang" disabled>石家庄市</i-option>
|
||||
<!--<i-option value="shijiazhuang2">石家庄市2</i-option>-->
|
||||
<i-option value="a">a市</i-option>
|
||||
<i-option value="b">b市</i-option>
|
||||
<i-option value="c">c市</i-option>
|
||||
<i-option value="d">d市</i-option>
|
||||
<i-option value="e">e市</i-option>
|
||||
</i-select>
|
||||
|
||||
<i-select v-if="true" :model.sync="focus2" style="width:300px" @on-change="change" clearable filterable multiple>
|
||||
<i-option value="beijing" label="北京市">北京2</i-option>
|
||||
<i-option value="shanghai">上海市</i-option>
|
||||
<i-option value="shenzhen" disabled>深圳市</i-option>
|
||||
<i-option value="guangzhou">广州市</i-option>
|
||||
<i-option value="shijiazhuang">石家庄市</i-option>
|
||||
<i-option value="a">a1市</i-option>
|
||||
<i-option value="b">b2市</i-option>
|
||||
<i-option value="c">c1市</i-option>
|
||||
<i-option value="d">d2市</i-option>
|
||||
<i-option value="e">e1市</i-option>
|
||||
</i-select>
|
||||
|
||||
<i-select v-if="true" :model.sync="focus2" style="width:300px" @on-change="change" clearable multiple>
|
||||
<i-option value="beijing" label="北京市">北京2</i-option>
|
||||
<i-option value="shanghai">上海市</i-option>
|
||||
<i-option value="shenzhen" disabled>深圳市</i-option>
|
||||
<i-option value="guangzhou">广州市</i-option>
|
||||
<i-option value="shijiazhuang">石家庄市</i-option>
|
||||
<i-option value="a">a市</i-option>
|
||||
<i-option value="b">b市</i-option>
|
||||
<i-option value="c">c市</i-option>
|
||||
<i-option value="d">d市</i-option>
|
||||
<i-option value="e">e市</i-option>
|
||||
</i-select>
|
||||
|
||||
<br><br><br><br><br><br><br><br><br><br><br><br>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { iSelect, iOption, iOptionGroup, Button } from 'iview';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
iSelect,
|
||||
iOption,
|
||||
iOptionGroup,
|
||||
Button
|
||||
},
|
||||
props: {
|
||||
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
city: '',
|
||||
focus: '',
|
||||
focus2: ['beijing']
|
||||
// focus2: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
methods: {
|
||||
change (data) {
|
||||
console.log(data)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
30
test/routers/tag.vue
Normal file
30
test/routers/tag.vue
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
<template>
|
||||
<Collapse active-key="1">
|
||||
<Panel key="1">
|
||||
史蒂夫·乔布斯
|
||||
<p slot="content">史蒂夫·乔布斯（Steve Jobs），1955年2月24日生于美国加利福尼亚州旧金山，美国发明家、企业家、美国苹果公司联合创办人。</p>
|
||||
</Panel>
|
||||
<Panel key="2">
|
||||
斯蒂夫·盖瑞·沃兹尼亚克
|
||||
<p slot="content">斯蒂夫·盖瑞·沃兹尼亚克（Stephen Gary Wozniak），美国电脑工程师，曾与史蒂夫·乔布斯合伙创立苹果电脑（今之苹果公司）。斯蒂夫·盖瑞·沃兹尼亚克曾就读于美国科罗拉多大学，后转学入美国著名高等学府加州大学伯克利分校（UC Berkeley）并获得电机工程及计算机（EECS）本科学位（1987年）。</p>
|
||||
</Panel>
|
||||
<Panel key="3">
|
||||
乔纳森·伊夫
|
||||
<p slot="content">乔纳森·伊夫是一位工业设计师，现任Apple公司设计师兼资深副总裁，英国爵士。他曾参与设计了iPod，iMac，iPhone，iPad等众多苹果产品。除了乔布斯，他是对苹果那些著名的产品最有影响力的人。</p>
|
||||
</Panel>
|
||||
</Collapse>
|
||||
<Input-number :max="10" :min="1" :value="1" @on-change="change"></Input-number>
|
||||
<Input-number :max="10" :min="1" :step="1.2" :value="1"></Input-number>
|
||||
</template>
|
||||
<script>
|
||||
import { Collapse, InputNumber } from 'iview';
|
||||
const Panel = Collapse.Panel;
|
||||
export default {
|
||||
components: { Collapse, Panel, InputNumber },
|
||||
methods: {
|
||||
change (data) {
|
||||
console.log(data);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
10
test/src/index.html
Normal file
10
test/src/index.html
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Webpack App</title>
|
||||
<link href="/test/dist/main.css" rel="stylesheet"></head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="text/javascript" src="/test/dist/vendors.js"></script><script type="text/javascript" src="/test/dist/main.js"></script></body>
|
||||
</html>
|
||||
10
test/template/index.html
Normal file
10
test/template/index.html
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Webpack App</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
</body>
|
||||
</html>
|
||||
10
test/test/index.html
Normal file
10
test/test/index.html
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Webpack App</title>
|
||||
<link href="/test/dist/main.css" rel="stylesheet"></head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="text/javascript" src="/test/dist/vendors.js"></script><script type="text/javascript" src="/test/dist/main.js"></script></body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue