164 lines
4.0 KiB
Vue
164 lines
4.0 KiB
Vue
<!--
|
|
* @Author: hisense.liangjunhua
|
|
* @Date: 2022-06-08 14:54:01
|
|
* @LastEditors: hisense.liangjunhua
|
|
* @LastEditTime: 2022-06-15 18:24:39
|
|
* @Description: 应用详情页导航
|
|
-->
|
|
<template>
|
|
<div class="application-navigation" v-if="navList.length > 0">
|
|
<template v-for="nav in navList" :key="nav.key">
|
|
<div
|
|
class="nav"
|
|
:class="{ select: nav.key == select }"
|
|
v-if="nav.show"
|
|
@click="selectNav(nav.key)"
|
|
>
|
|
{{ nav.name }}
|
|
<span class="line"></span>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
import { ref, defineProps, watch } from 'vue'
|
|
import mybus from '@/myplugins/mybus'
|
|
const navList = ref([
|
|
{
|
|
name: '组件展示',
|
|
key: 'eveloper-presentation',
|
|
},
|
|
{
|
|
name: '功能介绍',
|
|
key: 'function-introduction',
|
|
},
|
|
{
|
|
name: '应用场景',
|
|
key: 'application-scenarios',
|
|
},
|
|
{
|
|
name: '应用案例',
|
|
key: 'application-case',
|
|
},
|
|
{
|
|
name: '组件试用',
|
|
key: 'developer-trial',
|
|
},
|
|
{
|
|
name: '使用方式',
|
|
key: 'department-and-service-provider',
|
|
},
|
|
{
|
|
name: '常见问题',
|
|
key: 'common-problem',
|
|
},
|
|
])
|
|
const props = defineProps({
|
|
selectNow: { type: String, default: '' },
|
|
dataList: { type: Object, default: null },
|
|
})
|
|
const select = ref('algorithm-display')
|
|
const list = ref([])
|
|
const selectNav = (key) => {
|
|
select.value = key
|
|
mybus.emit('flyToView', select.value)
|
|
}
|
|
if (props.dataList.infoList) {
|
|
list.value = []
|
|
props.dataList.infoList.map((item) => {
|
|
debugger
|
|
if (
|
|
item.attrType === '常见问题' ||
|
|
item.attrType === '应用案例' ||
|
|
item.attrType === '应用场景'
|
|
) {
|
|
list.value.push(item.attrType)
|
|
} else if (item.attrType === '组件视频介绍') {
|
|
list.value.push('组件展示')
|
|
}
|
|
})
|
|
navList.value.forEach((item) => {
|
|
console.log(item)
|
|
if (list.value.indexOf(item.name) > -1) {
|
|
item.show = true
|
|
}
|
|
})
|
|
select.value = navList.value.filter(
|
|
(item) => item.name === list.value[0]
|
|
)[0].key
|
|
console.log('11111111111111111111111111', list.value, navList.value)
|
|
}
|
|
watch(
|
|
() => props.selectNow,
|
|
(newValue) => {
|
|
select.value = newValue
|
|
}
|
|
)
|
|
watch(
|
|
() => props.dataList,
|
|
(val) => {
|
|
if (val) {
|
|
list.value = []
|
|
val.infoList.map((item) => {
|
|
if (
|
|
item.attrType === '功能介绍' ||
|
|
item.attrType === '常见问题' ||
|
|
item.attrType === '应用案例' ||
|
|
item.attrType === '应用场景'
|
|
) {
|
|
list.value.push(item.attrType)
|
|
} else if (item.attrType === '组件视频介绍') {
|
|
list.value.push('组件展示')
|
|
}
|
|
})
|
|
list.value.push('组件试用')
|
|
list.value.push('使用方式')
|
|
navList.value.forEach((item) => {
|
|
console.log(item)
|
|
if (list.value.indexOf(item.name) > -1) {
|
|
item.show = true
|
|
}
|
|
})
|
|
if (list.value.length > 0) {
|
|
select.value = navList.value.filter(
|
|
(item) => item.name === list.value[0]
|
|
)[0].key
|
|
}
|
|
console.log('11111111111111111111111111', list.value, navList.value)
|
|
}
|
|
}
|
|
)
|
|
</script>
|
|
<style lang="less" scoped>
|
|
.application-navigation {
|
|
width: 19.12rem;
|
|
height: 0.84rem;
|
|
line-height: 0.8rem;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
font-size: 0.24rem;
|
|
color: #666;
|
|
background: #fff;
|
|
padding: 0 3rem;
|
|
box-shadow: 0rem 0.05rem 0.1rem #f2f3fb;
|
|
position: relative;
|
|
.nav {
|
|
cursor: pointer;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
.line {
|
|
width: 0.4rem;
|
|
height: 0.04rem;
|
|
}
|
|
}
|
|
.select {
|
|
color: #526aff;
|
|
.line {
|
|
background: #526aff;
|
|
}
|
|
}
|
|
}
|
|
</style>
|