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

55
examples/routers/tabs.vue
View file

@ -130,28 +130,65 @@
<!--}--> <!--}-->
<!--</script>--> <!--</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> <template>
<div> <div>
<Tabs type="card"> <Button type="primary" @click="modal1 = true">显示对话框</Button>
<TabPane v-for="tab in tabs" :key="tab" :label="'标签' + tab">标签{{ tab }}</TabPane> <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> </Tabs>
<Button type="ghost" @click="handleTabsAdd" size="small">增加</Button> </Modal>
<Button type="ghost" @click="handleTabsMin" size="small">减少</Button>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
data () { data () {
return { return {
tabs: 2 modal1: false
} }
}, },
methods: { methods: {
handleTabsAdd () { ok () {
this.tabs ++; this.$Message.info('点击了确定');
}, },
handleTabsMin () { cancel () {
this.tabs --; this.$Message.info('点击了取消');
} }
} }
} }