vue js 與 teleport 範例
<!DOCTYPE html>
<html>
<head>
<title>Vue.js Teleport Hello World</title>
<script src="https://cdn.jsdelivr.net/npm/vue@3"></script>
</head>
<body>
<div id="app">
<button @click="showModal = true">顯示</button>
<teleport to="body">
<div v-if="showModal" class="modal">
<h2>show modal!</h2>
<button @click="showModal = false">關閉</button>
</div>
</teleport>
<div id="message">
</div>
</div>
<script>
const { createApp } = Vue;
createApp({
data() {
return {
showModal: false
}
}
}).mount('#app');
</script>
<style>
.modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: white;
padding: 20px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
</style>
</body>
</html>
END
