实现双端悬浮按钮的不同表现,弹窗和页面跳转
This commit is contained in:
parent
fda6cf05ad
commit
56d494ff85
|
|
@ -1,14 +1,22 @@
|
|||
<!-- components/ContactFloatingButton.vue -->
|
||||
<template>
|
||||
<div class="fixed right-2 lg:right-6 top-1/2 transform -translate-y-1/2 z-50 flex items-center">
|
||||
<UPopover arrow mode="click" :popper="{ placement: 'left-start' }" :content="{
|
||||
<!-- PC端:弹窗 -->
|
||||
<UPopover
|
||||
v-if="isDesktop"
|
||||
arrow
|
||||
mode="click"
|
||||
:popper="{ placement: 'left-start' }"
|
||||
:content="{
|
||||
align: 'center',
|
||||
side: 'left',
|
||||
sideOffset: 6
|
||||
}" >
|
||||
}"
|
||||
>
|
||||
<UButton
|
||||
class="bg-primary hover:bg-primary-600 text-white px-4 py-3 rounded-l-lg shadow-lg transition-all duration-300"
|
||||
color="neutral" label="商家加盟"
|
||||
color="neutral"
|
||||
label="商家加盟"
|
||||
variant="subtle"/>
|
||||
<template #content>
|
||||
<div class="w-75 lg:w-100 h-120 lg:h-160 p-4 bg-white rounded-lg shadow-xl overflow-y-auto">
|
||||
|
|
@ -110,16 +118,51 @@
|
|||
</div>
|
||||
</template>
|
||||
</UPopover>
|
||||
|
||||
<!-- 移动端:跳转链接 -->
|
||||
<NuxtLink
|
||||
v-else-if="isMounted"
|
||||
to="/merchantFranchise"
|
||||
class="block"
|
||||
>
|
||||
<UButton
|
||||
class="bg-primary hover:bg-primary-600 text-white px-4 py-3 rounded-l-lg shadow-lg transition-all duration-300"
|
||||
color="neutral"
|
||||
label="商家加盟"
|
||||
variant="subtle"/>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive } from 'vue'
|
||||
import { ref, reactive, computed, onMounted, onUnmounted } from 'vue'
|
||||
import { submitMchApply, type MchApplyParams } from '~/config/api'
|
||||
|
||||
const toast = useToast()
|
||||
const formRef = ref()
|
||||
const isSubmitting = ref(false)
|
||||
const windowWidth = ref(0)
|
||||
const isMounted = ref(false)
|
||||
|
||||
// 检测是否为桌面端(lg断点:1024px)
|
||||
const isDesktop = computed(() => isMounted.value && windowWidth.value >= 1024)
|
||||
|
||||
// 监听窗口大小变化
|
||||
const updateWindowWidth = () => {
|
||||
windowWidth.value = window.innerWidth
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
isMounted.value = true
|
||||
updateWindowWidth()
|
||||
window.addEventListener('resize', updateWindowWidth)
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
if (process.client) {
|
||||
window.removeEventListener('resize', updateWindowWidth)
|
||||
}
|
||||
})
|
||||
|
||||
const formState = reactive<MchApplyParams>({
|
||||
name: '',
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user