Vue.js3.0의 새로운 기능을 시도합니다.~텔레포트 편~
10019 단어 TypeScriptVue.js
portal 이름이 변경된 것 같습니다.글의 내용도 수정되었다.
--
2020년 Q1 출시 예정인 Vue.나는 js3.0의 새로운 기능
teleport을 시도했기 때문에 총괄해 보았다.(참조)
다음은 Vue3.0(vue-next)의 환경 구조와 기타 새로운 기능도 정리했다.
Teleport란 무엇입니까?
정의된 구성 요소가 속한 DOM 트리와 달리 구성 요소를 원격 전송처럼 다른 위치로 이동할 수 있습니다.
지정된 위치에 바로 표시할 수 있기 때문에
Vue.js2계라도 제3자 플러그인LinusBorg/portal-vue을 사용하여 실현할 수 있다.
Vue.js3.0은 가상 DOM 수준을 지원하는 것 같습니다.(설치 세부 사항은 잘 모름)
(PortalVue의 로고입니다. 개념이 매우 좋다는 뜻입니다.)
Teleport 쓰기 Teleport 구성 요소에 target을 지정한 후 다른 곳에서 묘사하고 싶은 요소만 내부에 기재하면 됩니다.단, <Teleport> 내부의 요소는 target에서 지정한 선택기 요소 내부에서 이동하고 그려집니다.
선택기에서 지정한 요소는 Vue의 DOM 트리 외부의 요소일 수도 있습니다.
sample.vue<teleport target="セレクタ">
<!-- 以下がtargetで指定した要素に移動して描画される -->
<MyModal />
</teleport>
Teleport 예제 응용 프로그램 구현
다음 그림을 만드는 샘플 프로그램입니다.
이미지 오른쪽에 있는 장치 컨트롤러에서 볼 수 있듯이 모드 요소는 설치<teleport>가 아니라 App.vue 내부에 표시됩니다.
동작 코드는 여기 자료 라이브러리에 있습니다.
https://github.com/kawamataryo/vue-next-ts-webpack-preview/tree/portal-demo
App.vue
먼저 Teleport의 App을 정의합니다.vue의 실현.<div id="app"> 어셈블리의 요소로 지정<div id="myModal">됩니다.
그리고 내부 설정<teleport>에 제어의 패턴 요소를 표시합니다.
App.vue<template>
<div class="container">
<img src="./logo.png" />
<h1>Modal demo</h1>
<button @click="toggleModal">toggle modal</button>
<teleport to="#teleport-target">
<!-- 以下要素がid="teleport-target"内に描画される -->
<div v-if="isVisible" id="myModal" class="modal">
<div class="modal-content">
<span class="close" @click="toggleModal">×</span>
<p>modall content</p>
</div>
</div>
</teleport>
</div>
</template>
<script lang="ts">
import { defineComponent, ref } from "vue";
export default defineComponent({
setup() {
const isVisible = ref(false);
const toggleModal = () => {
isVisible.value = !isVisible.value;
};
return {
isVisible,
toggleModal
};
}
});
</script>
main.ts
다음은 App입니다.vue의main을 마운트합니다.네, ts.
샘플 응용 프로그램에서 to="#teleport-target" 을 App으로 설정합니다.vue를 마운트하는 중입니다.
main.tsimport { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
index.html
마지막으로 Teleport의 이동 목적지인 index입니다.html입니다.
App.vuev-if, Teleport의 targetid="app"을 불러옵니다.<div id="app"> 그 자체는 일반적인 DOM 요소이고 여기는 App입니다.vue<div id="teleport-target"> 내부에서 지정한 요소를 이동하여 묘사합니다.
index.html<doctype html>
<html lang="ja">
<head>
<link rel="stylesheet" href="/dist/main.css">
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue3.0 demo</title>
</head>
<body>
<div id="app"></div>
<div id="teleport-target"></div>
<script src="/dist/main.js"></script>
</body>
</html>
끝날 때
이상, Vue.js3.0의 새로운 기능을 시도합니다.~텔레포트 편
z-index와 부모 스타일의 방해를 방지하기 위해서 하크 CSS를 사용하지 않는 것이 매우 편리하다.나는 코드를 매우 예쁘게 유지할 수 있을 것 같다.
portal-vue를 사용하면 Vue2계의 현행 프로젝트에서도 사용할 수 있기 때문에 적극적으로 사용하고 싶습니다.
참고 자료
<teleport target="セレクタ">
<!-- 以下がtargetで指定した要素に移動して描画される -->
<MyModal />
</teleport>
다음 그림을 만드는 샘플 프로그램입니다.
이미지 오른쪽에 있는 장치 컨트롤러에서 볼 수 있듯이 모드 요소는 설치
<teleport>가 아니라 App.vue 내부에 표시됩니다.동작 코드는 여기 자료 라이브러리에 있습니다.
https://github.com/kawamataryo/vue-next-ts-webpack-preview/tree/portal-demo
App.vue
먼저 Teleport의 App을 정의합니다.vue의 실현.
<div id="app"> 어셈블리의 요소로 지정<div id="myModal">됩니다.그리고 내부 설정
<teleport>에 제어의 패턴 요소를 표시합니다.App.vue
<template>
<div class="container">
<img src="./logo.png" />
<h1>Modal demo</h1>
<button @click="toggleModal">toggle modal</button>
<teleport to="#teleport-target">
<!-- 以下要素がid="teleport-target"内に描画される -->
<div v-if="isVisible" id="myModal" class="modal">
<div class="modal-content">
<span class="close" @click="toggleModal">×</span>
<p>modall content</p>
</div>
</div>
</teleport>
</div>
</template>
<script lang="ts">
import { defineComponent, ref } from "vue";
export default defineComponent({
setup() {
const isVisible = ref(false);
const toggleModal = () => {
isVisible.value = !isVisible.value;
};
return {
isVisible,
toggleModal
};
}
});
</script>
main.ts
다음은 App입니다.vue의main을 마운트합니다.네, ts.
샘플 응용 프로그램에서
to="#teleport-target" 을 App으로 설정합니다.vue를 마운트하는 중입니다.main.ts
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
index.html
마지막으로 Teleport의 이동 목적지인 index입니다.html입니다.
App.vue
v-if, Teleport의 targetid="app"을 불러옵니다.<div id="app"> 그 자체는 일반적인 DOM 요소이고 여기는 App입니다.vue<div id="teleport-target"> 내부에서 지정한 요소를 이동하여 묘사합니다.index.html
<doctype html>
<html lang="ja">
<head>
<link rel="stylesheet" href="/dist/main.css">
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue3.0 demo</title>
</head>
<body>
<div id="app"></div>
<div id="teleport-target"></div>
<script src="/dist/main.js"></script>
</body>
</html>
끝날 때
이상, Vue.js3.0의 새로운 기능을 시도합니다.~텔레포트 편
z-index와 부모 스타일의 방해를 방지하기 위해서 하크 CSS를 사용하지 않는 것이 매우 편리하다.나는 코드를 매우 예쁘게 유지할 수 있을 것 같다.
portal-vue를 사용하면 Vue2계의 현행 프로젝트에서도 사용할 수 있기 때문에 적극적으로 사용하고 싶습니다.
참고 자료
Reference
이 문제에 관하여(Vue.js3.0의 새로운 기능을 시도합니다.~텔레포트 편~), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/ryo2132/items/a620755b04294ffabde6텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
