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

update Tabs

Browse source
This commit is contained in:
梁灏 2020-07-02 09:44:45 +08:00
parent 8bf4836337
commit ffb3729603
2 changed files with 26 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
examples/routers/tabs.vue
View file

@ -1,21 +1,30 @@
<template> <template>
<div style="height: 5000px"> <Tabs type="card" @on-contextmenu="handleContextMenu">
<Tabs type="card"> <TabPane label="标签一" name="tab1" context-menu>标签一的内容</TabPane>
<TabPane v-for="tab in tabs" :key="tab" :label="'标签' + tab">标签{{ tab }}</TabPane> <TabPane label="标签二" name="tab2">标签二的内容</TabPane>
<Button @click="handleTabsAdd" size="small" slot="extra">增加</Button> <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> </Tabs>
</div>
</template> </template>
<script> <script>
export default { export default {
data () { data () {
return { return {
tabs: 20 contextData: null
} }
}, },
methods: { methods: {
handleTabsAdd () { handleContextMenu (data) {
this.tabs ++; this.contextData = data;
},
handleContextMenuEdit () {
this.$Message.info('Click edit of ' + this.contextData.name);
},
handleContextMenuDelete () {
this.$Message.info('Click delete of ' + this.contextData.name);
} }
} }
} }

9
src/components/tabs/tabs.vue
View file

@ -15,7 +15,7 @@
<div ref="navScroll" :class="[prefixCls + '-nav-scroll']" @DOMMouseScroll="handleScroll" @mousewheel="handleScroll"> <div ref="navScroll" :class="[prefixCls + '-nav-scroll']" @DOMMouseScroll="handleScroll" @mousewheel="handleScroll">
<div ref="nav" :class="[prefixCls + '-nav']" :style="navStyle"> <div ref="nav" :class="[prefixCls + '-nav']" :style="navStyle">
<div :class="barClasses" :style="barStyle"></div> <div :class="barClasses" :style="barStyle"></div>
<div :class="tabCls(item)" v-for="(item, index) in navList" @click="handleChange(index)" @dblclick="handleDblclick(index)" @contextmenu.stop="handleContextmenu(index, $event)"> <div :class="tabCls(item)" v-for="(item, index) in navList" @click="handleChange(index)" @dblclick="handleDblclick(index)" @contextmenu.stop="handleContextmenu(index, $event)" @selectstart.stop="handlePreventSelect(index, $event)">
<Icon v-if="item.icon !== ''" :type="item.icon"></Icon> <Icon v-if="item.icon !== ''" :type="item.icon"></Icon>
<Render v-if="item.labelType === 'function'" :render="item.label"></Render> <Render v-if="item.labelType === 'function'" :render="item.label"></Render>
<template v-else>{{ item.label }}</template> <template v-else>{{ item.label }}</template>
@ -333,6 +333,13 @@
handleClickContextMenuOutside () { handleClickContextMenuOutside () {
this.contextMenuVisible = false; this.contextMenuVisible = false;
}, },
// 禁用右键选择文本
handlePreventSelect (index, event) {
const nav = this.navList[index];
if (!nav || nav.disabled || !nav.contextMenu) return;
event.preventDefault();
},
handleTabKeyNavigation(e){ handleTabKeyNavigation(e){
if (e.keyCode !== 37 && e.keyCode !== 39) return; if (e.keyCode !== 37 && e.keyCode !== 39) return;
const direction = e.keyCode === 39 ? 1 : -1; const direction = e.keyCode === 39 ? 1 : -1;