53 lines
1.9 KiB
Vue
53 lines
1.9 KiB
Vue
|
<template>
|
||
|
|
<div class="p-4">
|
||
|
|
<a-card :bordered="false" style="height: 100%;">
|
||
|
|
<a-tabs v-model:activeKey="activeKey" @change="tabChange">
|
||
|
|
<a-tab-pane key="JeecgComponents" tab="下拉选择组件"></a-tab-pane>
|
||
|
|
<a-tab-pane key="JCodeEditDemo" tab="代码编辑器" force-render></a-tab-pane>
|
||
|
|
<a-tab-pane key="JEditorDemo" tab="富文本&MakeDown"></a-tab-pane>
|
||
|
|
<a-tab-pane key="ImgDragSort" tab="图片拖拽"></a-tab-pane>
|
||
|
|
<a-tab-pane key="ImgTurnPage" tab="图片翻页"></a-tab-pane>
|
||
|
|
<a-tab-pane key="JeecgPdfView" tab="PDF预览"></a-tab-pane>
|
||
|
|
<a-tab-pane key="JUploadDemo" tab="文件上传"></a-tab-pane>
|
||
|
|
</a-tabs>
|
||
|
|
<component :is="currentComponent"></component>
|
||
|
|
</a-card>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<script lang="ts">
|
||
|
|
import { defineComponent, ref, computed } from 'vue';
|
||
|
|
import JeecgComponents from './JeecgComponents.vue';
|
||
|
|
import JEditorDemo from './JEditorDemo.vue';
|
||
|
|
import JCodeEditDemo from './JCodeEditDemo.vue';
|
||
|
|
import ImgDragSort from './ImgDragSort.vue';
|
||
|
|
import ImgTurnPage from './ImgTurnPage.vue';
|
||
|
|
import JeecgPdfView from './JeecgPdfView.vue';
|
||
|
|
import JUploadDemo from './JUploadDemo.vue';
|
||
|
|
export default defineComponent({
|
||
|
|
name:"comp-jeecg-basic",
|
||
|
|
setup() {
|
||
|
|
const activeKey = ref('JeecgComponents');
|
||
|
|
const currentComponent = computed(() => {
|
||
|
|
const componentType = {
|
||
|
|
'JeecgComponents': JeecgComponents,
|
||
|
|
'JEditorDemo': JEditorDemo,
|
||
|
|
'JCodeEditDemo': JCodeEditDemo,
|
||
|
|
'ImgDragSort': ImgDragSort,
|
||
|
|
'ImgTurnPage': ImgTurnPage,
|
||
|
|
'JeecgPdfView': JeecgPdfView,
|
||
|
|
'JUploadDemo': JUploadDemo,
|
||
|
|
};
|
||
|
|
return componentType[activeKey.value];
|
||
|
|
});
|
||
|
|
|
||
|
|
//使用component动态切换tab
|
||
|
|
function tabChange(key) {
|
||
|
|
activeKey.value=key
|
||
|
|
}
|
||
|
|
return {
|
||
|
|
activeKey, currentComponent, tabChange,activeKey
|
||
|
|
};
|
||
|
|
},
|
||
|
|
});
|
||
|
|
</script>
|