Commit 75fa706e9cbab4fbcaf1bf42f8d593ecddd7aed5
1 parent
1231c1ab
update tabs demo
Showing
1 changed file
with
47 additions
and
10 deletions
Show diff stats
examples/routers/tabs.vue
| @@ -130,28 +130,65 @@ | @@ -130,28 +130,65 @@ | ||
| 130 | <!--}--> | 130 | <!--}--> |
| 131 | <!--</script>--> | 131 | <!--</script>--> |
| 132 | 132 | ||
| 133 | +<!--<template>--> | ||
| 134 | + <!--<div>--> | ||
| 135 | + <!--<Tabs type="card">--> | ||
| 136 | + <!--<TabPane v-for="tab in tabs" :key="tab" :label="'标签' + tab">标签{{ tab }}</TabPane>--> | ||
| 137 | + <!--</Tabs>--> | ||
| 138 | + <!--<Button type="ghost" @click="handleTabsAdd" size="small">增加</Button>--> | ||
| 139 | + <!--<Button type="ghost" @click="handleTabsMin" size="small">减少</Button>--> | ||
| 140 | + <!--</div>--> | ||
| 141 | +<!--</template>--> | ||
| 142 | +<!--<script>--> | ||
| 143 | + <!--export default {--> | ||
| 144 | + <!--data () {--> | ||
| 145 | + <!--return {--> | ||
| 146 | + <!--tabs: 2--> | ||
| 147 | + <!--}--> | ||
| 148 | + <!--},--> | ||
| 149 | + <!--methods: {--> | ||
| 150 | + <!--handleTabsAdd () {--> | ||
| 151 | + <!--this.tabs ++;--> | ||
| 152 | + <!--},--> | ||
| 153 | + <!--handleTabsMin () {--> | ||
| 154 | + <!--this.tabs --;--> | ||
| 155 | + <!--}--> | ||
| 156 | + <!--}--> | ||
| 157 | + <!--}--> | ||
| 158 | +<!--</script>--> | ||
| 159 | + | ||
| 133 | <template> | 160 | <template> |
| 134 | <div> | 161 | <div> |
| 135 | - <Tabs type="card"> | ||
| 136 | - <TabPane v-for="tab in tabs" :key="tab" :label="'标签' + tab">标签{{ tab }}</TabPane> | ||
| 137 | - </Tabs> | ||
| 138 | - <Button type="ghost" @click="handleTabsAdd" size="small">增加</Button> | ||
| 139 | - <Button type="ghost" @click="handleTabsMin" size="small">减少</Button> | 162 | + <Button type="primary" @click="modal1 = true">显示对话框</Button> |
| 163 | + <Modal | ||
| 164 | + v-model="modal1" | ||
| 165 | + title="普通的Modal对话框标题" | ||
| 166 | + @on-ok="ok" | ||
| 167 | + @on-cancel="cancel"> | ||
| 168 | + <p>对话框内容</p> | ||
| 169 | + <p>对话框内容</p> | ||
| 170 | + <p>对话框内容</p> | ||
| 171 | + <Tabs value="name1"> | ||
| 172 | + <TabPane label="标签一" name="name1">标签一的内容</TabPane> | ||
| 173 | + <TabPane label="标签二" name="name2">标签二的内容</TabPane> | ||
| 174 | + <TabPane label="标签三" name="name3">标签三的内容</TabPane> | ||
| 175 | + </Tabs> | ||
| 176 | + </Modal> | ||
| 140 | </div> | 177 | </div> |
| 141 | </template> | 178 | </template> |
| 142 | <script> | 179 | <script> |
| 143 | export default { | 180 | export default { |
| 144 | data () { | 181 | data () { |
| 145 | return { | 182 | return { |
| 146 | - tabs: 2 | 183 | + modal1: false |
| 147 | } | 184 | } |
| 148 | }, | 185 | }, |
| 149 | methods: { | 186 | methods: { |
| 150 | - handleTabsAdd () { | ||
| 151 | - this.tabs ++; | 187 | + ok () { |
| 188 | + this.$Message.info('点击了确定'); | ||
| 152 | }, | 189 | }, |
| 153 | - handleTabsMin () { | ||
| 154 | - this.tabs --; | 190 | + cancel () { |
| 191 | + this.$Message.info('点击了取消'); | ||
| 155 | } | 192 | } |
| 156 | } | 193 | } |
| 157 | } | 194 | } |