vue 동적 구성 요소 로 TAB 전환 효과 구현
tab 전환 장면 은 개발 에 자주 사 용 됩 니 다.이런 효 과 를 실현 해 야 할 때 우 리 는 항상 아래 의 방식 으로 이 효 과 를 실현 할 것 이 라 고 생각한다.
vue 의 동적 구성 요소 가 무엇 입 니까?
vue 의 동적 구성 요 소 는 본질 적 으로 하나의 구성 요소 이 고 구성 요 소 는 일반적으로 js 논 리 를 가 진 UI 시각 도 층 입 니 다.동적 구성 요소 란 우리 가 일부 조건 에 따라 페이지 의 어 딘 가 에 그 구성 요 소 를 구체 적 으로 표시 할 수 있 는 것 이다.이렇게 말 하면 tab 전환 냄새 가 난다.
응용 장면 설명
수요 효과 도
사실은 간단 합 니 다.바로 tab 전환 효과 입 니 다.물론 실제 개발 에서 tab 의 스타일 효 과 는 약간 복잡 할 수 있 습 니 다.
실현 절차
첫 번 째 단계(새 구성 요소 와 등록 도입)
먼저 components 폴 더 에서 네 개의.vue 파일 을 정의 하고 tab 전환 에 나타 난 내용 부분 으로 사용 할 수 있 습 니 다.
새로 짓다
도입 및 등록
import one from "./components/one";
import two from "./components/two";
import three from "./components/three";
import four from "./components/four";
components: {
one,
two,
three,
four,
},
<template>
<div id="app">
<div class="top">
<!-- tab -->
</div>
<div class="bottom">
<!-- -->
</div>
</div>
</template>
// data cardArr tab
data() {
return {
whichIndex: 0,
cardArr: [
{
componentName: " ",
},
{
componentName: " ",
},
{
componentName: " ",
},
{
componentName: " ",
},
],
};
},
// v-for
<template>
<div id="app">
<div class="top">
<div
class="crad"
:class="{ highLight: whichIndex == index }"
v-for="(item, index) in cardArr"
:key="index"
@click="whichIndex = index"
>
{{ item.componentName }}
</div>
</div>
<div class="bottom">
<!-- ... -->
</div>
</div>
</template>
// ， 0 ， data whichIndex :class
//
.highLight {
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
transform: translate3d(0, -1px, 0);
}
// <component/> is ，is ， ，
// componentId ,componentId ，
<div class="bottom">
<component :is="componentId"></component>
</div>
// ， cardList id ，
// data
data() {
return {
whichIndex: 0,
componentId: "one", // components
cardArr: [
{
componentName: " ",
componentId: "one", //
},
{
componentName: " ",
componentId: "two", //
},
{
componentName: " ",
componentId: "three", //
},
{
componentName: " ",
componentId: "four", //
},
],
};
},
<template>
<div id="app">
<div class="top">
<div
class="crad"
:class="{ highLight: whichIndex == index }"
v-for="(item, index) in cardArr"
:key="index"
@click="
whichIndex = index;
componentId = item.componentId;
"
>
<!-- @click ， -->
{{ item.componentName }}
</div>
</div>
<div class="bottom">
<!-- keep-alive ， ， ，DOM ，
， 。 -->
<keep-alive>
<component :is="componentId"></component>
</keep-alive>
</div>
</div>
</template>
<template>
<div id="app">
<div class="top">
<div
class="crad"
:class="{ highLight: whichIndex == index }"
v-for="(item, index) in cardArr"
:key="index"
@click="
whichIndex = index;
componentId = item.componentId;
"
>
{{ item.componentName }}
</div>
</div>
<div class="bottom">
<keep-alive>
<component :is="componentId"></component>
</keep-alive>
</div>
</div>
</template>
<script>
import one from "./components/one";
import two from "./components/two";
import three from "./components/three";
import four from "./components/four";
export default {
components: {
one,
two,
three,
four,
},
data() {
return {
whichIndex: 0,
componentId: "one",
cardArr: [
{
componentName: " ",
componentId: "one",
},
{
componentName: " ",
componentId: "two",
},
{
componentName: " ",
componentId: "three",
},
{
componentName: " ",
componentId: "four",
},
],
};
},
};
</script>
<style lang="less" scoped>
#app {
width: 100%;
height: 100vh;
box-sizing: border-box;
padding: 50px;
.top {
width: 100%;
height: 80px;
display: flex;
justify-content: space-around;
.crad {
width: 20%;
height: 80px;
line-height: 80px;
text-align: center;
background-color: #fff;
border: 1px solid #e9e9e9;
}
.highLight {
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
transform: translate3d(0, -1px, 0);
}
}
.bottom {
margin-top: 20px;
width: 100%;
height: calc(100% - 100px);
border: 3px solid pink;
display: flex;
justify-content: center;
align-items: center;
}
}
</style>
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Fastapi websocket 및 vue 3(Composition API)1부: FastAPI virtualenv 만들기(선택 사항) FastAPI 및 필요한 모든 것을 다음과 같이 설치하십시오. 생성main.py 파일 및 실행 - 브라우저에서 이 링크 열기http://127.0.0.1:...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
