add a nav for test page
This commit is contained in:
jingsam
parent
3735e3768d
commit
b8273bfc26
9 changed files with 193 additions and 160 deletions
33
test/app.vue
33
test/app.vue
|
|
@ -2,8 +2,41 @@
|
|||
@import "../src/styles/index.less";
|
||||
@import "../src/styles/package.less";
|
||||
</style>
|
||||
<style scoped>
|
||||
nav {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
li + li {
|
||||
border-left: solid 1px #bbb;
|
||||
padding-left: 5px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.v-link-active {
|
||||
color: #bbb;
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<div>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a v-link="'/button'">Button</a></li>
|
||||
<li><a v-link="'/card'">Card</a></li>
|
||||
<li><a v-link="'/message'">Message</a></li>
|
||||
<li><a v-link="'/more'">More</a></li>
|
||||
<li><a v-link="'/page'">Page</a></li>
|
||||
<li><a v-link="'/poptip'">Poptip</a></li>
|
||||
<li><a v-link="'/radio'">Radio</a></li>
|
||||
<li><a v-link="'/select'">Select</a></li>
|
||||
<li><a v-link="'/slider'">Slider</a></li>
|
||||
<li><a v-link="'/step'">Step</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
50
test/main.js
50
test/main.js
|
|
@ -16,19 +16,19 @@ var router = new VueRouter({
|
|||
});
|
||||
|
||||
router.map({
|
||||
'/index': {
|
||||
component: function (resolve) {
|
||||
require(['./routers/index.vue'], resolve);
|
||||
}
|
||||
},
|
||||
'/button': {
|
||||
component: function (resolve) {
|
||||
require(['./routers/button.vue'], resolve);
|
||||
}
|
||||
},
|
||||
'/page': {
|
||||
'/card': {
|
||||
component: function (resolve) {
|
||||
require(['./routers/page.vue'], resolve);
|
||||
require(['./routers/card.vue'], resolve);
|
||||
}
|
||||
},
|
||||
'/message': {
|
||||
component: function (resolve) {
|
||||
require(['./routers/message.vue'], resolve);
|
||||
}
|
||||
},
|
||||
'/more': {
|
||||
|
|
@ -36,9 +36,14 @@ router.map({
|
|||
require(['./routers/more.vue'], resolve);
|
||||
}
|
||||
},
|
||||
'/layout': {
|
||||
'/page': {
|
||||
component: function (resolve) {
|
||||
require(['./routers/layout.vue'], resolve);
|
||||
require(['./routers/page.vue'], resolve);
|
||||
}
|
||||
},
|
||||
'/poptip': {
|
||||
component: function (resolve) {
|
||||
require(['./routers/poptip.vue'], resolve);
|
||||
}
|
||||
},
|
||||
'/radio': {
|
||||
|
|
@ -46,25 +51,20 @@ router.map({
|
|||
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);
|
||||
}
|
||||
},
|
||||
'/slider': {
|
||||
component: function (resolve) {
|
||||
require(['./routers/slider.vue'], resolve);
|
||||
}
|
||||
},
|
||||
'/step': {
|
||||
component: function (resolve) {
|
||||
require(['./routers/step.vue'], resolve);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
|
@ -77,6 +77,6 @@ router.afterEach(function (transition) {
|
|||
});
|
||||
|
||||
router.redirect({
|
||||
'*': "/index"
|
||||
'*': "/button"
|
||||
});
|
||||
router.start(App, '#app');
|
||||
|
|
|
|||
|
|
@ -1,58 +0,0 @@
|
|||
<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>
|
||||
|
|
@ -2,95 +2,56 @@
|
|||
|
||||
</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>
|
||||
<i-button type="primary" @click="next">下一步</i-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>
|
||||
<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 { Page, Steps, Button } from 'iview';
|
||||
|
||||
const Step = Steps.Step;
|
||||
import { Modal, Button, Message, Page } from 'iview';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Page,
|
||||
Steps,
|
||||
Step,
|
||||
iButton: Button
|
||||
},
|
||||
components: { Modal, Button, Page },
|
||||
props: {
|
||||
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
total: 512,
|
||||
current: 0
|
||||
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
methods: {
|
||||
setPage (page) {
|
||||
console.log(page)
|
||||
info () {
|
||||
Modal.info({
|
||||
title: '这是对话框标题',
|
||||
content: `<p>这是对话框内容</p><p>这是对话框内容这是对话框内容这是对话框内容这是对话框内容这是对话框内容这是对话框内容这是对话框内容这是对话框内容这是对话框内容这是对话框内容</p>`
|
||||
});
|
||||
},
|
||||
next () {
|
||||
if (this.current == 3) {
|
||||
this.current = 0;
|
||||
} else {
|
||||
this.current += 1;
|
||||
}
|
||||
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
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
97
test/routers/step.vue
Normal file
97
test/routers/step.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>
|
||||
<i-button type="primary" @click="next">下一步</i-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,
|
||||
iButton: 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>
|
||||
Loading…
Add table
Reference in a new issue