fix
This commit is contained in:
X1627315083
244
src/component/HomePage/index/editContent/index.vue
Normal file
244
src/component/HomePage/index/editContent/index.vue
Normal file
@@ -0,0 +1,244 @@
|
||||
<template>
|
||||
<div class="home">
|
||||
<navList @setSelectKey="setSelectKey" :navListData="navListData" :selectKey="selectKey"></navList>
|
||||
<div class="contentBox">
|
||||
<div class="homeContent" ref="parent">
|
||||
<navListBox @setSelectKey=setSelectKey :navListData="navListData" :selectKey="selectKey"></navListBox>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="back" @click="setBack()">< Back</div>
|
||||
<design class="design" v-if="selectKey_ == 'design'"></design>
|
||||
<MoodboardUpload class="moodBoard" v-if="selectKey_ == 'moodBoard'"></MoodboardUpload>
|
||||
<PrintboardUpload class="printBoard" v-if="selectKey_ == 'printBoard'"></PrintboardUpload>
|
||||
<ColorboardUpload class="colorBoard" v-if="selectKey_ == 'colorBoard'"></ColorboardUpload>
|
||||
<SketchboardUpload class="sketchBoard" v-if="selectKey_ == 'sketchBoard'"></SketchboardUpload>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent,computed,ref,watch,nextTick,provide,toRefs, reactive} from 'vue'
|
||||
// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
|
||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||
import { Https } from "@/tool/https";
|
||||
import { useStore } from "vuex";
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import design from './design/index.vue'
|
||||
import MoodboardUpload from './collection/MoodboardUpload.vue'
|
||||
import PrintboardUpload from './collection/PrintboardUpload.vue'
|
||||
import ColorboardUpload from './collection/ColorboardUpload.vue'
|
||||
import SketchboardUpload from './collection/SketchboardUpload.vue'
|
||||
|
||||
import navList from './nav.vue'
|
||||
import navListBox from './navBox.vue'
|
||||
|
||||
|
||||
import { gsap, TweenMax } from "gsap";
|
||||
import { ScrollTrigger } from "gsap/ScrollTrigger";
|
||||
export default defineComponent({
|
||||
components:{
|
||||
design,MoodboardUpload,PrintboardUpload,ColorboardUpload,SketchboardUpload,navList,navListBox
|
||||
},
|
||||
setup(props,{emit}) {
|
||||
const store = useStore();
|
||||
let driver__:any = computed(()=>{
|
||||
return store.state.Guide.guide
|
||||
})
|
||||
provide('driver__',driver__)
|
||||
|
||||
const data = reactive({
|
||||
|
||||
selectKey:'',
|
||||
selectKey_:'',
|
||||
adminData:{
|
||||
position:'',
|
||||
dom:null as any,
|
||||
parentDom:null as any,
|
||||
},
|
||||
navListData:[
|
||||
{
|
||||
icon:'',
|
||||
value:'design',
|
||||
name:'1',
|
||||
task:'1-1',
|
||||
},{
|
||||
icon:'',
|
||||
value:'moodBoard',
|
||||
name:'2',
|
||||
task:'1-2',
|
||||
},{
|
||||
icon:'',
|
||||
value:'printBoard',
|
||||
name:'3',
|
||||
task:'1-3',
|
||||
},{
|
||||
icon:'',
|
||||
value:'colorBoard',
|
||||
name:'3',
|
||||
task:'1-4',
|
||||
},{
|
||||
icon:'',
|
||||
value:'sketchBoard',
|
||||
name:'3',
|
||||
task:'1-5',
|
||||
},{
|
||||
icon:'',
|
||||
value:'color3',
|
||||
name:'3',
|
||||
task:'2-1',
|
||||
},{
|
||||
icon:'',
|
||||
value:'color4',
|
||||
name:'3',
|
||||
task:'3-1',
|
||||
},{
|
||||
icon:'',
|
||||
value:'color5',
|
||||
name:'3',
|
||||
task:'4-1',
|
||||
},{
|
||||
icon:'',
|
||||
value:'color6',
|
||||
name:'3',
|
||||
task:'4-2',
|
||||
},{
|
||||
icon:'',
|
||||
value:'color7',
|
||||
name:'3',
|
||||
task:'5-1',
|
||||
},
|
||||
],
|
||||
})
|
||||
const dataTime = reactive({
|
||||
selectTime:null as any,
|
||||
})
|
||||
const dataDom = reactive({
|
||||
parent:null as any
|
||||
})
|
||||
const setBack = ()=>{
|
||||
data.selectKey = ''
|
||||
updataPage()
|
||||
}
|
||||
const setSelectKey = (value:any)=>{
|
||||
let {str,dom,position} = value
|
||||
data.adminData.dom = dom
|
||||
data.adminData.parentDom = value?.parentDom
|
||||
data.adminData.position = position
|
||||
data.selectKey = str
|
||||
updataPage()
|
||||
}
|
||||
const updataPage = ()=>{
|
||||
let {dom,position} = data.adminData
|
||||
let contentDom:any = document.querySelectorAll('.home .content')[0]
|
||||
clearTimeout(dataTime.selectTime)
|
||||
let {top,left,width,height} = dom.getBoundingClientRect()
|
||||
let parentPosition = dataDom.parent.getBoundingClientRect()
|
||||
let parentTop = parentPosition?.top
|
||||
let parentLeft = parentPosition?.left
|
||||
if(data.selectKey_ && data.selectKey == ''){
|
||||
// let index = data.navListData.findIndex((item:any) => item.value === data.selectKey_);
|
||||
let y = top - parentTop + height / 2
|
||||
let x = left - parentLeft + width / 2
|
||||
if(position == 'nav'){
|
||||
x = 0
|
||||
y = dom.offsetTop + dom.offsetHeight / 2
|
||||
}
|
||||
contentDom.style.transformOrigin = `${x}px ${y}px`
|
||||
gsap.to(contentDom,.5, {scale:0,opacity:1,ease: "power2.inOut"},);
|
||||
dataTime.selectTime = setTimeout(() => {
|
||||
data.selectKey_ = data.selectKey
|
||||
}, 500);
|
||||
}else{
|
||||
data.selectKey_ = data.selectKey
|
||||
nextTick(()=>{
|
||||
// let index = data.navListData.findIndex((item:any) => item.value === str);
|
||||
let y = top - parentTop + height / 2
|
||||
let x = left - parentLeft + width / 2
|
||||
if(position == 'nav'){
|
||||
x = 0
|
||||
y = dom.offsetTop + dom.offsetHeight / 2
|
||||
}
|
||||
contentDom.style.transformOrigin = `${x}px ${y}px`
|
||||
gsap.to(contentDom,.5, {scale:1,opacity:1,ease: "power2.inOut"},);
|
||||
})
|
||||
}
|
||||
}
|
||||
// watch(()=>data.selectKey,(newVal:any,oldVal:any)=>{
|
||||
// let navDom:any = document.querySelectorAll('.home .navList')
|
||||
// let contentDom:any = document.querySelectorAll('.home .content')[0]
|
||||
// clearTimeout(dataTime.selectTime)
|
||||
// if(oldVal && newVal == ''){
|
||||
// dataTime.selectTime
|
||||
// let index = data.navListData.findIndex(item => item.value === oldVal);
|
||||
// let top = navDom[index].offsetTop + navDom[index].offsetHeight / 2
|
||||
// contentDom.style.transformOrigin = `0px ${top}px`
|
||||
// gsap.to(contentDom,.5, {scale:0,opacity:1,ease: "power2.inOut"},);
|
||||
// dataTime.selectTime = setTimeout(() => {
|
||||
// data.selectKey_ = newVal
|
||||
// }, 500);
|
||||
// }else{
|
||||
// data.selectKey_ = newVal
|
||||
// nextTick(()=>{
|
||||
// let index = data.navListData.findIndex(item => item.value === newVal);
|
||||
// let top = navDom[index].offsetTop + navDom[index].offsetHeight / 2
|
||||
// contentDom.style.transformOrigin = `0px ${top}px`
|
||||
// gsap.to(contentDom,.5, {scale:1,opacity:1,ease: "power2.inOut"},);
|
||||
// })
|
||||
// }
|
||||
// })
|
||||
return{
|
||||
...toRefs(dataDom),
|
||||
...toRefs(data),
|
||||
setBack,
|
||||
setSelectKey,
|
||||
}
|
||||
},
|
||||
|
||||
provide() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
|
||||
})
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.home{
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
> .contentBox{
|
||||
position: relative;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
> .content,
|
||||
>.homeContent{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 3rem;
|
||||
}
|
||||
> .content{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transform: scale(0);
|
||||
background: #ff6666;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
> *{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
> .back{
|
||||
width: auto;
|
||||
height: auto;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
> .homeContent{
|
||||
// background: #91ff66;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user