R2m1liA
67629ed518
All checks were successful
deploy to server / build-and-deploy (push) Successful in 3m21s
- 外部链接跳转：点击公司地址时，跳转带外部地图服务商链接 - 智能跳转： 根据用户的连接情况，自动选择google地图或者高德地图
94 lines
1.8 KiB
Vue
94 lines
1.8 KiB
Vue
<template>
|
||
<component
|
||
:is="wrapperTag"
|
||
v-bind="wrapperProps"
|
||
class="learn-more-wrapper"
|
||
@click="handleAsyncClick"
|
||
>
|
||
<el-card class="learn-more-card">
|
||
<el-icon class="icon" size="80">
|
||
<component :is="icon" />
|
||
</el-icon>
|
||
<br />
|
||
{{ title }}
|
||
</el-card>
|
||
</component>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
const props = defineProps({
|
||
title: {
|
||
type: String,
|
||
default: '',
|
||
},
|
||
icon: {
|
||
type: Object,
|
||
default: null,
|
||
},
|
||
to: {
|
||
type: String,
|
||
default: null,
|
||
},
|
||
href: {
|
||
type: [String, Function],
|
||
default: null,
|
||
},
|
||
});
|
||
|
||
// 包裹器标签
|
||
const wrapperTag = computed(() => {
|
||
if (props.to) return resolveComponent('NuxtLink');
|
||
if (props.href) return 'a';
|
||
return 'div';
|
||
});
|
||
|
||
// 包裹器属性
|
||
const wrapperProps = computed(() => {
|
||
// Nuxt 内部跳转
|
||
if (props.to) {
|
||
return { to: props.to };
|
||
}
|
||
|
||
// 外部跳转（字符串）
|
||
if (typeof props.href === 'string') {
|
||
return {
|
||
href: props.href,
|
||
target: '_blank',
|
||
rel: 'noopener noreferrer',
|
||
};
|
||
}
|
||
|
||
// 其他情况：href 是异步函数 → 不在这里处理
|
||
return { href: '#' };
|
||
});
|
||
|
||
async function handleAsyncClick(event: Event) {
|
||
if (typeof props.href === 'function') {
|
||
event.preventDefault();
|
||
const url = await props.href();
|
||
window.open(url, '_blank', 'noopener,noreferrer');
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.learn-more-card {
|
||
width: 20%;
|
||
min-width: 200px;
|
||
padding: 20px;
|
||
margin: 0 auto;
|
||
cursor: pointer;
|
||
text-align: center;
|
||
font-size: 1.5em;
|
||
}
|
||
|
||
.learn-more-card:hover {
|
||
transform: translateY(-4px);
|
||
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
|
||
}
|
||
|
||
.icon {
|
||
padding: 10px;
|
||
}
|
||
</style>
|