-
Notifications
You must be signed in to change notification settings - Fork 78
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
22 changed files
with
382 additions
and
177 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,104 @@ | ||
| <template> | ||
| <div | ||
| class="router-tab__contextmenu" | ||
| :class="{ 'has-icon': hasIcon }" | ||
| :style="{ | ||
| left: `${data.left}px`, | ||
| top: `${data.top}px` | ||
| }" | ||
| > | ||
| <tab-contextmenu-item | ||
| v-for="item in menuList" | ||
| :key="item.id" | ||
| :data="item" | ||
| /> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script> | ||
| import TabContextmenuItem from './ContextmenuItem.vue' | ||
| import menuMap, { defaultMenu } from '../config/contextmenu' | ||
| export default { | ||
| name: 'TabContextmenu', | ||
| inject: ['$tabs'], | ||
| components: { TabContextmenuItem }, | ||
| props: { | ||
| // 右键数据 | ||
| data: { | ||
| type: [Boolean, Object] | ||
| }, | ||
| // 菜单配置 | ||
| menu: { | ||
| type: Array, | ||
| default: () => defaultMenu | ||
| } | ||
| }, | ||
| computed: { | ||
| // 激活菜单的页签 | ||
| target() { | ||
| return this.$tabs.$refs.tab[this.data.index] | ||
| }, | ||
| // 菜单选项 | ||
| menuList() { | ||
| return this.menu | ||
| .map(item => { | ||
| if (typeof item === 'string') { | ||
| // 内置菜单 | ||
| return menuMap[item] | ||
| } else if (item && item.id) { | ||
| // 扩展内置菜单 | ||
| let origin = menuMap[item.id] | ||
| return origin ? { ...origin, ...item } : item | ||
| } | ||
| }) | ||
| .filter(item => item) | ||
| }, | ||
| // 是否显示图标 | ||
| hasIcon() { | ||
| return this.menuList.some(item => item.icon) | ||
| }, | ||
| // 页签 | ||
| tabs() { | ||
| return this.$tabs.$refs.tab | ||
| }, | ||
| // 左侧可关闭的页签 | ||
| lefts() { | ||
| return this.tabs.slice(0, this.data.index).filter(item => item.closable) | ||
| }, | ||
| // 左侧可关闭的页签 | ||
| rights() { | ||
| return this.tabs.slice(this.data.index + 1).filter(item => item.closable) | ||
| }, | ||
| // 其他可关闭的页签 | ||
| others() { | ||
| return this.tabs.filter(item => item.closable && this.data.id !== item.id) | ||
| } | ||
| }, | ||
| methods: { | ||
| // 关闭多个页签 | ||
| async closeMulti(tabs) { | ||
| for (let { id } of tabs) { | ||
| try { | ||
| await this.$tabs.removeTab(id) | ||
| } catch (e) {} | ||
| } | ||
| // 当前页签如已关闭，则打开右键选中页签 | ||
| if (!this.$tabs.activeTab) { | ||
| this.$router.replace(this.target.to) | ||
| } | ||
| } | ||
| } | ||
| } | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,61 @@ | ||
| <template> | ||
| <a | ||
| v-if="visible" | ||
| class="router-tab__contextmenu-item" | ||
| :class="menuClass" | ||
| :data-action="id" | ||
| :disabled="!enable" | ||
| :title="tips" | ||
| @click="enable && data.handler(context)" | ||
| > | ||
| <i v-if="icon" class="router-tab__contextmenu-icon" :class="icon"></i> | ||
| {{ title }} | ||
| </a> | ||
| </template> | ||
|
|
||
| <script> | ||
| import { mapGetters } from '../util' | ||
| export default { | ||
| name: 'ContextmenuItem', | ||
| inject: ['$tabs'], | ||
| props: { | ||
| // 菜单数据 | ||
| data: { | ||
| type: Object, | ||
| required: true | ||
| } | ||
| }, | ||
| computed: { | ||
| // 参数 | ||
| context() { | ||
| const { $tabs, $parent: $menu } = this | ||
| const { target, data } = $menu | ||
| return { $tabs, $menu, target, data } | ||
| }, | ||
| // 从 this.data 提取计算属性 | ||
| ...mapGetters( | ||
| 'data', | ||
| { | ||
| id: '', | ||
| // 菜单标题 | ||
| title() { | ||
| return this.$tabs.lang.contextmenu[this.id] | ||
| }, | ||
| icon: '', | ||
| tips: '', | ||
| class: { | ||
| default: '', | ||
| alias: 'menuClass' | ||
| }, | ||
| visible: true, // 是否显示 | ||
| enable: true // 是否启用 | ||
| }, | ||
| 'context' | ||
| ) | ||
| } | ||
| } | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.