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

Tabs add draggable prop, and @on-drag-drop event

Browse source
This commit is contained in:
梁灏 2020-07-02 15:00:25 +08:00
parent 604cf463ac
commit a0cc40dd91
2 changed files with 78 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

51
examples/routers/tabs.vue
View file

@ -1,19 +1,47 @@
<template>
<Tabs type="card" @on-contextmenu="handleContextMenu">
<TabPane label="标签一" name="tab1" context-menu>标签一的内容</TabPane>
<TabPane label="标签二" name="tab2">标签二的内容</TabPane>
<TabPane label="标签三" name="tab3" context-menu>标签三的内容</TabPane>
<template slot="contextMenu">
<DropdownItem @click.native="handleContextMenuEdit">编辑</DropdownItem>
<DropdownItem @click.native="handleContextMenuDelete" style="color: #ed4014">删除</DropdownItem>
</template>
</Tabs>
<div>
<Tabs type="card" @on-contextmenu="handleContextMenu">
<TabPane label="标签一" name="tab1" context-menu>标签一的内容</TabPane>
<TabPane label="标签二" name="tab2">标签二的内容</TabPane>
<TabPane label="标签三" name="tab3" context-menu>标签三的内容</TabPane>
<template slot="contextMenu">
<DropdownItem @click.native="handleContextMenuEdit">编辑</DropdownItem>
<DropdownItem @click.native="handleContextMenuDelete" style="color: #ed4014">删除</DropdownItem>
</template>
</Tabs>
<Divider></Divider>
<Tabs type="card" :draggable="true" @on-drag-drop="handleDragDrop">
<TabPane v-for="(tab, index) in tabs" :key="index" :label="tab.label" :name="tab.name">{{ tab.label }}</TabPane>
</Tabs>
</div>
</template>
<script>
export default {
data () {
return {
contextData: null
contextData: null,
tabs: [
{
label: '标签一',
name: 'name1'
},
{
label: '标签二',
name: 'name2'
},
{
label: '标签三',
name: 'name3'
},
{
label: '标签四',
name: 'name4'
},
{
label: '标签五',
name: 'name5'
}
]
}
},
methods: {
@ -25,6 +53,9 @@
},
handleContextMenuDelete () {
this.$Message.info('Click delete of ' + this.contextData.name);
},
handleDragDrop (name, newName, a, b, names) {
this.tabs.splice(b,1,...this.tabs.splice(a, 1 , this.tabs[b]));
}
}
}