vue3+element-plus导航栏定位

一、父组件代码：

<navList

:tabActive="activeIndex"

:tabList="tabList"

:tabStyle="navStyle"

@tabClick="handleClick"

></navList>

<div>

<titleCard

title="概要"

:securityId="securityId"

:symbol="symbol"

:market="market"

id="stockQuotation"

></titleCard>

<titleCard

title="数据图"

:securityId="securityId"

:symbol="symbol"

:market="market"

id="KLineChart"

></titleCard>

<titleCard

title="AI综述"

:securityId="securityId"

id="AIInfo"

></titleCard>

<titleCard

title="新闻舆情"

:securityId="securityId"

id="newsPublicOpinion"

></titleCard>

<titleCard

title="新闻动态监测"

:securityId="securityId"

id="newsDynamicMonitoring"

></titleCard>

<titleCard

title="公告信息"

:securityId="securityId"

id="noticeInformation"

></titleCard>

<titleCard

title="公告动态监测"

:securityId="securityId"

id="noticeDynamicMonitoring"

></titleCard>

<titleCard

title="评论动态监测"

:securityId="securityId"

id="commentDynamicMonitoring"

></titleCard>

<titleCard

title="评论摘要"

:securityId="securityId"

id="commentSummary"

></titleCard>

</div>

</div>

</template>

import titleCard from './components/titleCard.vue'

import navList from './components/navList.vue'

import backTop from './components/backTop.vue'

const route = useRoute()

const loading = ref(false) // 是否加载页面

const navStyle = ref({}) // 导航栏样式

const securityId = ref<any>('') // 证券id

const symbol = ref<any>('') // 证券代码

const market = ref<any>('') // 证券市场

const elementClass = ref('.stock-detail') // 置顶元素类名

const tabList = [

// 导航栏数据

'概要',

'数据图',

'AI综述',

'新闻舆情',

'新闻动态监测',

'公告信息',

'公告动态监测',

'评论动态监测',

'评论摘要'

]

const activeIndex = ref(0)

// 监听参数重新赋值

watch(

() => [route.query.securityId, route.query.market, route.query.symbol],

(newValue: any, oldValue: any) => {

if (newValue[0] != oldValue[0]) {

securityId.value = newValue[0]

}

if (newValue[1] != oldValue[1]) {

market.value = newValue[1]

}

if (newValue[2] != oldValue[2]) {

symbol.value = newValue[2]

}

activeIndex.value = 0

document.addEventListener('scroll', handleScroll)

scrollToCard('stockQuotation')

{ deep: true }

)

// tab栏切换点击

const handleClick = (index: number) => {

activeIndex.value = index

// 根据点击的选项卡值来滚动到相应的卡片位置

switch (activeIndex.value) {

case 0:

scrollToCard('stockQuotation')

break

case 1:

scrollToCard('KLineChart')

break

case 2:

scrollToCard('AIInfo')

break

case 3:

scrollToCard('newsPublicOpinion')

break

case 4:

scrollToCard('newsDynamicMonitoring')

break

case 5:

scrollToCard('noticeInformation')

break

case 6:

scrollToCard('noticeDynamicMonitoring')

break

case 7:

scrollToCard('commentDynamicMonitoring')

break

case 8:

scrollToCard('commentSummary')

break

}

const scrollToCard = (refName: string) => {

// 使用 Vue 的 $refs 来获取卡片元素，并滚动到其位置

const cardElement = document.getElementById(refName)

if (cardElement) {

// 使用原生的 scrollIntoView 方法来滚动到元素位置

cardElement.scrollIntoView({ behavior: 'smooth', block: 'start' })

}

const handleScroll = (event: any) => {

// 处理滚动事件加导航栏阴影效果

if (event.target.scrollTop > 0) {

navStyle.value = {

boxShadow: '0px 1px 14px 0px rgba(14, 30, 61, 0.12)'

}

} else {

navStyle.value = {

boxShadow: ''

}

onBeforeMount(() => {

securityId.value = route.query.securityId

symbol.value = route.query.symbol

market.value = route.query.market

// 添加事件监听

document.addEventListener('scroll', handleScroll)

})

onMounted(() => {

nextTick(() => {

if (route.query.tabIndex) {

activeIndex.value = Number(route.query.tabIndex)

// 延迟1秒滚动到评论动态监测tab

setTimeout(() => {

handleClick(activeIndex.value)

}, 1000)

}

})

onUnmounted(() => {

// 移除事件监听

document.removeEventListener('scroll', handleScroll)

})

</script>

.stock-detail {

background-color: #f4f7fc;

overflow-y: auto;

height: calc(100vh - 34px - 60px - 44px);

position: relative;

top: 44px;

}

</style>

二、titleCard组件代码：

<div class="title">{{ title }}</div>

</div>

<div

class="tab-list"

v-if="

id === 'AIInfo' ||

id === 'noticeInformation' ||

id === 'commentDynamicMonitoring' ||

id === 'commentSummary' ||

id === 'newsPublicOpinion'

<div

v-for="(item, index) in tagList"

:key="index"

class="tab"

:class="

(tabIndex === index && id !== 'noticeInformation') ||

(tabIndex === index + 1 && id === 'noticeInformation')

? 'color'

: ''

@click="onClickItem(index)"

</div>

<stockQuotation

:securityId="securityId"

:symbol="symbol"

:market="market"

:negativeNum="negativeNum"

:sameProportion="sameProportion"

v-if="id === 'stockQuotation'"

></stockQuotation>

<KLineChart

:securityId="securityId"

:symbol="symbol"

:market="market"

@getKLineType="getKLineType"

v-if="id === 'KLineChart'"

></KLineChart>

<review

:tagIndex="tabIndex"

:securityId="securityId"

v-if="id === 'AIInfo'"

></review>

<newsPublicOpinion

:tagIndex="tabIndex"

:securityId="securityId"

v-if="id === 'newsPublicOpinion'"

></newsPublicOpinion>

<newsDynamicMonitoring

v-if="id === 'newsDynamicMonitoring' || id === 'newsCollect'"

:id="id"

:securityId="securityId"

@getSwitchIsOpen="getSwitchIsOpen"

></newsDynamicMonitoring>

<noticeInformation

:tagIndex="tabIndex"

:securityId="securityId"

v-if="id === 'noticeInformation'"

></noticeInformation>

<noticeDynamicMonitoring

v-if="id === 'noticeDynamicMonitoring' || id === 'noticeCollect'"

:id="id"

:securityId="securityId"

@getSwitchIsOpen="getSwitchIsOpen1"

></noticeDynamicMonitoring>

<commentDynamicMonitoring

:tagIndex="tabIndex"

:securityId="securityId"

v-if="id === 'commentDynamicMonitoring'"

></commentDynamicMonitoring>

<commentSummary

:id="id"

:tagIndex="tabIndex"

:securityId="securityId"

v-if="id === 'commentSummary' || id === 'commentCollect'"

></commentSummary>

</div>

</template>

import stockQuotation from './stockQuotation.vue'

import KLineChart from './KLineChart.vue'

import review from './review.vue'

import newsPublicOpinion from './newsPublicOpinion.vue'

import newsDynamicMonitoring from './newsDynamicMonitoring.vue'

import noticeInformation from './noticeInformation.vue'

import noticeDynamicMonitoring from './noticeDynamicMonitoring.vue'

import commentDynamicMonitoring from './commentDynamicMonitoring.vue'

import commentSummary from './commentSummary.vue'

import { ElMessage } from 'element-plus'

import { queryNewsCount } from '@/service/stockIndex/index'

import StockCollect from '@/views/personal-center/components/stockCollect.vue'

const props = defineProps({

title: {

// 板块名称

type: String,

default: ''

id: {

// 板块id

type: String,

default: ''

securityId: {

// 证券id

type: [String, Number],

required: true

symbol: {

type: String,

default: ''

market: {

type: String,

default: ''

}

})

const emit = defineEmits(['getSwitchStatus', 'getSwitchStatus1'])

const tagList = ref<any>([]) // tab栏列表

const tabIndex = ref(1)

const dateLineType = ref(60) // websocket发送频率

const negativeNum = ref(0) // 负面条数

const sameProportion = ref('0.00') // 同比上期率

const securityId1 = ref(props.securityId) // 页面新的证券id

const symbol1 = ref(props.symbol) // 页面新的证券代码

const market1 = ref(props.market) // 页面新的证券市场

const switchOpen = ref(false) // 开关状态

const switchOpen1 = ref(false) // 开关状态

// 监听参数重新赋值

watch(

() => [dateLineType.value, props.securityId, props.market, props.symbol],

(newValue: any, oldValue: any) => {

if (newValue[0] != oldValue[0]) {

dateLineType.value = newValue[0]

getNewsCount()

}

if (newValue[1] != oldValue[1]) {

securityId1.value = newValue[1]

initData()

}

if (newValue[2] != oldValue[2]) {

market1.value = newValue[2]

initData()

}

if (newValue[3] != oldValue[3]) {

symbol1.value = newValue[3]

initData()

}

{ deep: true }

)

// 初始化数据

const initData = () => {

tabIndex.value = 1

}

// 导航栏切换

const onClickItem = (index: number) => {

if (props.id === 'noticeInformation') {

tabIndex.value = index + 1

} else {

tabIndex.value = index

}

// 获取开关状态

const getSwitchIsOpen = (val: boolean) => {

switchOpen.value = val

emit('getSwitchStatus', switchOpen.value)

}

// 获取开关状态

const getSwitchIsOpen1 = (val: boolean) => {

switchOpen1.value = val

emit('getSwitchStatus1', switchOpen1.value)

}

// 获取websocket发送频率

const getKLineType = (type: any) => {

dateLineType.value = type

}

// 初始化数据

const init = () => {

if (

props.id === 'AIInfo' ||

props.id === 'commentDynamicMonitoring' ||

props.id === 'commentSummary'

) {

tagList.value = [

{ value: 0, name: '今日' },

{ value: 1, name: '近1周' },

{ value: 2, name: '近1个月' }

]

} else if (props.id === 'newsPublicOpinion') {

tagList.value = [

{ value: 0, name: '今日' },

{ value: 1, name: '近1周' },

{ value: 2, name: '近1个月' },

{ value: 3, name: '近3个月' }

]

} else if (props.id === 'noticeInformation') {

tagList.value = [

{ value: 1, name: '近1周' },

{ value: 2, name: '近1个月' },

{ value: 3, name: '近3个月' }

]

}

// 获取条数与同比上期率

const getNewsCount = () => {

queryNewsCount(securityId1.value).then((res: any) => {

if (res.code === 200) {

negativeNum.value = res.data.todayNum

sameProportion.value = res.data.changePercentage

} else {

ElMessage({

message: res.message,

type: 'error'

})

}

})

}

onMounted(() => {

nextTick(() => {

init()

if (props.id === 'stockQuotation') {

getNewsCount()

}

})

</script>

.title-card {

width: 1450px;

background-color: #fff;

border-radius: 6px;

display: flex;

flex-direction: column;

scroll-margin: 10px; // 使用css中scroll-margin设置滚动到该元素的距离

margin: 10px auto;

.top-box {

display: flex;

align-items: center;

justify-content: space-between;

margin: 0 20px;

height: 39px;

border-bottom: 1px solid #ebeef8;

position: relative;

.left-box {

display: flex;

align-items: center;

.line {

width: 4px;

height: 14px;

background: #3a5bb7;

border-radius: 0px 2px 2px 0px;

margin-right: 7px;

}

.title {

font-weight: 600;

font-size: 16px;

color: #333333;

}

.tab-list {

display: flex;

background: #f4f7fc;

border-radius: 11px;

.tab {

display: flex;

align-items: center;

justify-content: center;

padding: 0 18px;

height: 22px;

border-radius: 12px;

font-weight: 500;

font-size: 12px;

color: #999999;

background: #f4f7fc;

border: 1px solid #f4f7fc;

cursor: pointer;

&:hover {

color: #3a5bb7;

}

.color {

border: 1px solid #3a5bb7;

background: #ffffff;

color: #3a5bb7;

}

.bottom-box {

margin: 0 20px;

}

</style>

这里每个组件代码为每个板块，就不一一列举出来了

三、navList组件代码：

<div

v-for="(item, index) in tabList"

:key="index"

class="item-tab"

@click="handleClick(index)"

</div>

</div>

</template>

const props = defineProps({

tabStyle: {

// tab栏样式

type: Object,

default: () => {}

tabList: {

// tab栏列表

type: Array,

default: () => []

tabActive: {

// tab栏索引

type: Number,

default: 0

}

})

const emit = defineEmits(['tabClick'])

// tab栏切换点击

const handleClick = (index: number) => {

emit('tabClick', index)

}

</script>

.tab-box {

width: 100%;

display: flex;

flex-direction: column;

position: fixed;

top: 94px;

background-color: #ffffff;

height: 44px;

margin-bottom: 4px;

z-index: 1;

.tab-list {

height: 100%;

display: flex;

width: 1450px;

margin: 0 auto;

.item-tab {

height: 100%;

padding: 0 35px;

display: flex;

justify-content: center;

align-items: center;

flex-direction: column;

cursor: pointer;

position: relative;

.tab {

font-weight: normal;

font-size: 14px;

color: #666666;

position: relative;

}

.color {

color: #3a5bb7;

font-weight: 600;

}

.line-box {

width: 40px;

height: 3px;

background: #3a5bb7;

position: absolute;

bottom: 0;

border-radius: 2px 2px 0px 0px;

}

</style>

四、backTop置顶组件

<el-backtop

:target="elementClass"

:right="36"

:bottom="100"

:visibility-height="50"

<el-popover

placement="left"

trigger="hover"

content="回到顶部"

popper-class="popper-style"

</div>

</template>

</el-popover>

</el-backtop>

</template>

const props = defineProps({

elementClass: {

// 置顶元素类名

type: String,

default: ''

}

})

</script>

.totop {

width: 46px;

height: 46px;

background: linear-gradient(0deg, #ffffff, #f4f6f9);

box-shadow: 0px 1px 14px 0px rgba(14, 30, 61, 0.06);

border-radius: 50%;

border: 2px solid #ffffff;

cursor: pointer;

text-align: center;

line-height: 46px;

position: fixed;

right: 25px;

bottom: 45px;

&:hover {

.icon-huidaodingbu {

color: #3a5bb7;

}

.icon-huidaodingbu {

font-size: 20px;

color: #8b90a0;

}

</style>