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

update tabs demo

Browse source
This commit is contained in:
梁灏 2017-10-30 16:01:18 +08:00
parent 1231c1ab64
commit 75fa706e9c
1 changed files with 47 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

57
examples/routers/tabs.vue
View file

@ -130,28 +130,65 @@
<!--}-->
<!--</script>-->
<!--<template>-->
<!--<div>-->
<!--<Tabs type="card">-->
<!--<TabPane v-for="tab in tabs" :key="tab" :label="'标签' + tab">标签{{ tab }}</TabPane>-->
<!--</Tabs>-->
<!--<Button type="ghost" @click="handleTabsAdd" size="small">增加</Button>-->
<!--<Button type="ghost" @click="handleTabsMin" size="small">减少</Button>-->
<!--</div>-->
<!--</template>-->
<!--<script>-->
<!--export default {-->
<!--data () {-->
<!--return {-->
<!--tabs: 2-->
<!--}-->
<!--},-->
<!--methods: {-->
<!--handleTabsAdd () {-->
<!--this.tabs ++;-->
<!--},-->
<!--handleTabsMin () {-->
<!--this.tabs &#45;&#45;;-->
<!--}-->
<!--}-->
<!--}-->
<!--</script>-->
<template>
<div>
<Tabs type="card">
<TabPane v-for="tab in tabs" :key="tab" :label="'标签' + tab">标签{{ tab }}</TabPane>
</Tabs>
<Button type="ghost" @click="handleTabsAdd" size="small">增加</Button>
<Button type="ghost" @click="handleTabsMin" size="small">减少</Button>
<Button type="primary" @click="modal1 = true">显示对话框</Button>
<Modal
v-model="modal1"
title="普通的Modal对话框标题"
@on-ok="ok"
@on-cancel="cancel">
<p>对话框内容</p>
<p>对话框内容</p>
<p>对话框内容</p>
<Tabs value="name1">
<TabPane label="标签一" name="name1">标签一的内容</TabPane>
<TabPane label="标签二" name="name2">标签二的内容</TabPane>
<TabPane label="标签三" name="name3">标签三的内容</TabPane>
</Tabs>
</Modal>
</div>
</template>
<script>
export default {
data () {
return {
tabs: 2
modal1: false
}
},
methods: {
handleTabsAdd () {
this.tabs ++;
ok () {
this.$Message.info('点击了确定');
},
handleTabsMin () {
this.tabs --;
cancel () {
this.$Message.info('点击了取消');
}
}
}