update .gitignore
This commit is contained in:
@@ -1,138 +1,138 @@
|
||||
<template>
|
||||
<a-layout-content>
|
||||
<a-tabs @change="onChange" @edit="onClose" hide-add type="editable-card" v-model="actived">
|
||||
<a-tab-pane
|
||||
:closable="pane.closable"
|
||||
:forceRender="true"
|
||||
:key="pane.key"
|
||||
v-for="pane in panes"
|
||||
>
|
||||
<a-dropdown :trigger="['contextmenu']" slot="tab">
|
||||
<div>
|
||||
<a-icon :type="pane.icon" v-if="pane.icon" />
|
||||
{{ pane.title }}
|
||||
</div>
|
||||
<a-menu slot="overlay">
|
||||
<template v-if="mode === 'development'">
|
||||
<a-menu-item @click="onCopyComponent(pane)" key="-1">
|
||||
复制组件地址
|
||||
<a-tag color="red">dev</a-tag>
|
||||
</a-menu-item>
|
||||
<a-menu-divider />
|
||||
</template>
|
||||
<a-menu-item @click="onLoadContentWindow(pane.key)" key="0">重新加载</a-menu-item>
|
||||
<a-menu-divider />
|
||||
<a-menu-item :disabled="!pane.closable" @click="$emit('close', pane.key);" key="1">关闭</a-menu-item>
|
||||
<a-menu-item
|
||||
:disabled="!hasOther(pane)"
|
||||
@click="$emit('close-other', pane.key)"
|
||||
key="2"
|
||||
>关闭其他标签页</a-menu-item>
|
||||
<a-menu-item
|
||||
:disabled="!hasRight(pane)"
|
||||
@click="$emit('close-right', pane.key)"
|
||||
key="3"
|
||||
>关闭右侧标签页</a-menu-item>
|
||||
</a-menu>
|
||||
</a-dropdown>
|
||||
<component
|
||||
:is="pane.component"
|
||||
:key="pane.key"
|
||||
:param="pane.param"
|
||||
ref="panes"
|
||||
v-if="pane.loaded"
|
||||
/>
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
</a-layout-content>
|
||||
</template>
|
||||
<script>
|
||||
import NProgress from 'nprogress';
|
||||
import 'nprogress/nprogress.css';
|
||||
|
||||
NProgress.configure({ parent: '.ant-layout-content > .ant-tabs > .ant-tabs-content' });
|
||||
|
||||
export default {
|
||||
props: {
|
||||
panes: {
|
||||
type: Array,
|
||||
},
|
||||
tabActived: {
|
||||
type: [String, Number],
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
mode: process.env.VUE_APP_NODE_ENV,
|
||||
actived: '',
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
tabActived() {
|
||||
if (this.tabActived !== this.actived) {
|
||||
this.actived = this.tabActived;
|
||||
}
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.actived = this.tabActived;
|
||||
},
|
||||
methods: {
|
||||
onLoadContentWindow(key) {
|
||||
NProgress.start();
|
||||
const pane = this.panes.find((p) => p.key === key);
|
||||
|
||||
// 打开之前先销毁
|
||||
const index = this.panes.indexOf(pane);
|
||||
const component = this.$refs.panes && this.$refs.panes[index];
|
||||
if (component) {
|
||||
component.$destroy();
|
||||
}
|
||||
|
||||
const i = import(`@/pages${pane.path}`);
|
||||
pane.component = () => i;
|
||||
pane.loaded = false;
|
||||
i.then(() => {
|
||||
pane.loaded = true;
|
||||
NProgress.done();
|
||||
}).catch(() => {
|
||||
pane.component = () => import('@/views/error/404');
|
||||
pane.loaded = true;
|
||||
NProgress.done();
|
||||
});
|
||||
},
|
||||
onClose(targetKey, action) {
|
||||
if (action === 'remove') {
|
||||
this.$emit('close', targetKey);
|
||||
}
|
||||
},
|
||||
onChange(activeKey) {
|
||||
this.$emit('change', activeKey);
|
||||
},
|
||||
|
||||
onCopyComponent(pane) {
|
||||
try {
|
||||
const copy = document.createElement('textarea');
|
||||
document.body.append(copy);
|
||||
copy.value = `/pages${pane.path}`;
|
||||
copy.select();
|
||||
setTimeout(() => {
|
||||
document.execCommand('copy');
|
||||
copy.remove();
|
||||
this.$message.success('已复制到剪切板');
|
||||
});
|
||||
} catch {
|
||||
this.$message.error('复制错误');
|
||||
}
|
||||
},
|
||||
|
||||
hasOther(pane) {
|
||||
return this.panes.filter((p) => p.key !== pane.key && p.closable).length > 0;
|
||||
},
|
||||
|
||||
hasRight(pane) {
|
||||
return this.panes.length > this.panes.indexOf(pane) + 1;
|
||||
},
|
||||
},
|
||||
};
|
||||
<template>
|
||||
<a-layout-content>
|
||||
<a-tabs @change="onChange" @edit="onClose" hide-add type="editable-card" v-model="actived">
|
||||
<a-tab-pane
|
||||
:closable="pane.closable"
|
||||
:forceRender="true"
|
||||
:key="pane.key"
|
||||
v-for="pane in panes"
|
||||
>
|
||||
<a-dropdown :trigger="['contextmenu']" slot="tab">
|
||||
<div>
|
||||
<a-icon :type="pane.icon" v-if="pane.icon" />
|
||||
{{ pane.title }}
|
||||
</div>
|
||||
<a-menu slot="overlay">
|
||||
<template v-if="mode === 'development'">
|
||||
<a-menu-item @click="onCopyComponent(pane)" key="-1">
|
||||
复制组件地址
|
||||
<a-tag color="red">dev</a-tag>
|
||||
</a-menu-item>
|
||||
<a-menu-divider />
|
||||
</template>
|
||||
<a-menu-item @click="onLoadContentWindow(pane.key)" key="0">重新加载</a-menu-item>
|
||||
<a-menu-divider />
|
||||
<a-menu-item :disabled="!pane.closable" @click="$emit('close', pane.key);" key="1">关闭</a-menu-item>
|
||||
<a-menu-item
|
||||
:disabled="!hasOther(pane)"
|
||||
@click="$emit('close-other', pane.key)"
|
||||
key="2"
|
||||
>关闭其他标签页</a-menu-item>
|
||||
<a-menu-item
|
||||
:disabled="!hasRight(pane)"
|
||||
@click="$emit('close-right', pane.key)"
|
||||
key="3"
|
||||
>关闭右侧标签页</a-menu-item>
|
||||
</a-menu>
|
||||
</a-dropdown>
|
||||
<component
|
||||
:is="pane.component"
|
||||
:key="pane.key"
|
||||
:param="pane.param"
|
||||
ref="panes"
|
||||
v-if="pane.loaded"
|
||||
/>
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
</a-layout-content>
|
||||
</template>
|
||||
<script>
|
||||
import NProgress from 'nprogress';
|
||||
import 'nprogress/nprogress.css';
|
||||
|
||||
NProgress.configure({ parent: '.ant-layout-content > .ant-tabs > .ant-tabs-content' });
|
||||
|
||||
export default {
|
||||
props: {
|
||||
panes: {
|
||||
type: Array,
|
||||
},
|
||||
tabActived: {
|
||||
type: [String, Number],
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
mode: process.env.VUE_APP_NODE_ENV,
|
||||
actived: '',
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
tabActived() {
|
||||
if (this.tabActived !== this.actived) {
|
||||
this.actived = this.tabActived;
|
||||
}
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.actived = this.tabActived;
|
||||
},
|
||||
methods: {
|
||||
onLoadContentWindow(key) {
|
||||
NProgress.start();
|
||||
const pane = this.panes.find((p) => p.key === key);
|
||||
|
||||
// 打开之前先销毁
|
||||
const index = this.panes.indexOf(pane);
|
||||
const component = this.$refs.panes && this.$refs.panes[index];
|
||||
if (component) {
|
||||
component.$destroy();
|
||||
}
|
||||
|
||||
const i = import(`@/pages${pane.path}`);
|
||||
pane.component = () => i;
|
||||
pane.loaded = false;
|
||||
i.then(() => {
|
||||
pane.loaded = true;
|
||||
NProgress.done();
|
||||
}).catch(() => {
|
||||
pane.component = () => import('@/views/error/404');
|
||||
pane.loaded = true;
|
||||
NProgress.done();
|
||||
});
|
||||
},
|
||||
onClose(targetKey, action) {
|
||||
if (action === 'remove') {
|
||||
this.$emit('close', targetKey);
|
||||
}
|
||||
},
|
||||
onChange(activeKey) {
|
||||
this.$emit('change', activeKey);
|
||||
},
|
||||
|
||||
onCopyComponent(pane) {
|
||||
try {
|
||||
const copy = document.createElement('textarea');
|
||||
document.body.append(copy);
|
||||
copy.value = `/pages${pane.path}`;
|
||||
copy.select();
|
||||
setTimeout(() => {
|
||||
document.execCommand('copy');
|
||||
copy.remove();
|
||||
this.$message.success('已复制到剪切板');
|
||||
});
|
||||
} catch {
|
||||
this.$message.error('复制错误');
|
||||
}
|
||||
},
|
||||
|
||||
hasOther(pane) {
|
||||
return this.panes.filter((p) => p.key !== pane.key && p.closable).length > 0;
|
||||
},
|
||||
|
||||
hasRight(pane) {
|
||||
return this.panes.length > this.panes.indexOf(pane) + 1;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
Reference in New Issue
Block a user