全局组件挂载
parent
70318bcd3f
commit
dcb7194b97
|
|
@ -20,6 +20,7 @@
|
|||
<script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.6.0/tcplayer.v4.6.0.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="appProvider" style="display: none;"></div>
|
||||
<div id="app">
|
||||
<style>
|
||||
html {
|
||||
|
|
|
|||
|
|
@ -36,6 +36,7 @@ import wiIcons from '@iconify/json/json/wi.json';
|
|||
import { addCollection } from 'iconify-icon';
|
||||
import { setupNaive, setupDirectives, setupCustomComponents, initFunction } from '@/plugins';
|
||||
import { i18n } from '@/i18n';
|
||||
import { GoAppProvider } from '@/components/GoAppProvider/index';
|
||||
|
||||
// 注册图标
|
||||
addCollection(uimIcons);
|
||||
|
|
@ -93,6 +94,11 @@ async function bootstrap() {
|
|||
app.use(ElementPlus);
|
||||
app.use(VForm3);
|
||||
app.use(signal);
|
||||
// 解决路由守卫，Axios中可使用，Dialog，Message 等全局组件
|
||||
const goAppProvider = createApp(GoAppProvider);
|
||||
goAppProvider.mount('#appProvider', true);
|
||||
// 路由准备就绪后挂载APP实例
|
||||
await router.isReady();
|
||||
app.mount('#app');
|
||||
// 挂载到 window
|
||||
window['$vue'] = app;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
export { setupNaive } from '@/plugins/naive'
|
||||
export { setupDirectives } from '@/plugins/directives'
|
||||
export { setupCustomComponents } from '@/plugins/customComponents'
|
||||
export { icon } from '@/plugins/icon'
|
||||
export { initFunction } from '@/plugins/initFunction'
|
||||
export { setupNaive } from '@/plugins/naive';
|
||||
export { setupDirectives } from '@/plugins/directives';
|
||||
export { setupCustomComponents } from '@/plugins/customComponents';
|
||||
export { icon } from '@/plugins/icon';
|
||||
export { initFunction } from '@/plugins/initFunction';
|
||||
|
|
|
|||
|
|
@ -35,81 +35,81 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, watch, shallowRef } from 'vue'
|
||||
import { icon } from '@/plugins'
|
||||
import { PageEnum, ChartEnum } from '@/enums/pageEnum'
|
||||
import { fetchPathByName, routerTurnByPath, renderLang, getUUID } from '@/utils'
|
||||
import { ref, watch, shallowRef } from 'vue';
|
||||
import { icon } from '@/plugins';
|
||||
import { PageEnum, ChartEnum } from '@/enums/pageEnum';
|
||||
import { fetchPathByName, routerTurnByPath, renderLang, getUUID } from '@/utils';
|
||||
|
||||
const { FishIcon, CloseIcon } = icon.ionicons5
|
||||
const { StoreIcon, ObjectStorageIcon } = icon.carbon
|
||||
const showRef = ref(false)
|
||||
const { FishIcon, CloseIcon } = icon.ionicons5;
|
||||
const { StoreIcon, ObjectStorageIcon } = icon.carbon;
|
||||
const showRef = ref(false);
|
||||
|
||||
const emit = defineEmits(['close'])
|
||||
const props = defineProps({
|
||||
show: Boolean
|
||||
})
|
||||
const emit = defineEmits(['close']);
|
||||
const props = defineProps({
|
||||
show: Boolean,
|
||||
});
|
||||
|
||||
const typeList = shallowRef([
|
||||
{
|
||||
title: renderLang('project.new_project'),
|
||||
key: ChartEnum.CHART_HOME_NAME,
|
||||
icon: FishIcon,
|
||||
disabled: false
|
||||
},
|
||||
{
|
||||
title: renderLang('project.my_templete'),
|
||||
key: PageEnum.BASE_HOME_TEMPLATE_NAME,
|
||||
icon: ObjectStorageIcon,
|
||||
disabled: true
|
||||
},
|
||||
{
|
||||
title: renderLang('project.template_market'),
|
||||
key: PageEnum.BASE_HOME_TEMPLATE_MARKET_NAME,
|
||||
icon: StoreIcon,
|
||||
disabled: true
|
||||
}
|
||||
])
|
||||
const typeList = shallowRef([
|
||||
{
|
||||
title: renderLang('project.new_project'),
|
||||
key: ChartEnum.CHART_HOME_NAME,
|
||||
icon: FishIcon,
|
||||
disabled: false,
|
||||
},
|
||||
{
|
||||
title: renderLang('project.my_templete'),
|
||||
key: PageEnum.BASE_HOME_TEMPLATE_NAME,
|
||||
icon: ObjectStorageIcon,
|
||||
disabled: true,
|
||||
},
|
||||
{
|
||||
title: renderLang('project.template_market'),
|
||||
key: PageEnum.BASE_HOME_TEMPLATE_MARKET_NAME,
|
||||
icon: StoreIcon,
|
||||
disabled: true,
|
||||
},
|
||||
]);
|
||||
|
||||
watch(props, newValue => {
|
||||
showRef.value = newValue.show
|
||||
})
|
||||
watch(props, (newValue) => {
|
||||
showRef.value = newValue.show;
|
||||
});
|
||||
|
||||
// 关闭对话框
|
||||
const closeHandle = () => {
|
||||
emit('close', false)
|
||||
}
|
||||
// 关闭对话框
|
||||
const closeHandle = () => {
|
||||
emit('close', false);
|
||||
};
|
||||
|
||||
// 处理按钮点击
|
||||
const btnHandle = (key: string) => {
|
||||
closeHandle()
|
||||
const id = getUUID()
|
||||
const path = fetchPathByName(ChartEnum.CHART_HOME_NAME, 'href')
|
||||
routerTurnByPath(path, [id], undefined, true)
|
||||
}
|
||||
// 处理按钮点击
|
||||
const btnHandle = (key: string) => {
|
||||
closeHandle();
|
||||
const id = getUUID();
|
||||
const path = fetchPathByName(ChartEnum.CHART_HOME_NAME, 'href');
|
||||
routerTurnByPath(path, [id], undefined, true);
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
$cardWidth: 570px;
|
||||
$cardWidth: 570px;
|
||||
|
||||
@include go('create-modal') {
|
||||
position: fixed;
|
||||
top: 200px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
.card-box {
|
||||
width: $cardWidth;
|
||||
cursor: pointer;
|
||||
border: 1px solid rgba(0, 0, 0, 0);
|
||||
@extend .go-transition;
|
||||
&:hover {
|
||||
@include hover-border-color('hover-border-color');
|
||||
}
|
||||
&-tite {
|
||||
font-size: 14px;
|
||||
}
|
||||
&-content {
|
||||
padding: 0px 10px;
|
||||
width: 100%;
|
||||
@include go('create-modal') {
|
||||
position: fixed;
|
||||
top: 200px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
.card-box {
|
||||
width: $cardWidth;
|
||||
cursor: pointer;
|
||||
border: 1px solid rgba(0, 0, 0, 0);
|
||||
@extend .go-transition;
|
||||
&:hover {
|
||||
@include hover-border-color('hover-border-color');
|
||||
}
|
||||
&-tite {
|
||||
font-size: 14px;
|
||||
}
|
||||
&-content {
|
||||
padding: 0px 10px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -34,6 +34,8 @@
|
|||
import { useDesignStore } from '@/store/modules/designStore/designStore';
|
||||
import { CreateModal } from './components/CreateModal/index';
|
||||
import { icon } from '@/plugins';
|
||||
import { fetchPathByName, routerTurnByPath, getUUID } from '@/utils';
|
||||
import { ChartEnum } from '@/enums/pageEnum';
|
||||
|
||||
const { DuplicateIcon, DuplicateOutlineIcon } = icon.ionicons5;
|
||||
const designStore = useDesignStore();
|
||||
|
|
@ -45,7 +47,11 @@
|
|||
const modalShow = ref<boolean>(false);
|
||||
|
||||
const clickHandle = () => {
|
||||
modalShow.value = true;
|
||||
console.log('clickHandle');
|
||||
const id = getUUID();
|
||||
const path = fetchPathByName(ChartEnum.CHART_HOME_NAME, 'href');
|
||||
routerTurnByPath(path, [id], undefined, true);
|
||||
// modalShow.value = true;
|
||||
};
|
||||
|
||||
const closeHandle = () => {
|
||||
|
|
|
|||
Loading…
Reference in New Issue