Skip to content
Snippets Groups Projects
Commit 94f4d158 authored by Anthony Gore's avatar Anthony Gore
Browse files

Complete

parent 0c4711f2
No related branches found
No related tags found
No related merge requests found
......@@ -12,6 +12,8 @@
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<div id="endofbody"></div>
<script src="/dist/main.js"></script>
<!-- built files will be auto injected -->
</body>
</html>
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
</div>
<button @click="toggleModalState">Open modal</button>
<teleport to="#endofbody">
<Modal v-if="modalOpen" @close="toggleModalState">
<p>Hello, I'm a Vue 3 modal window.</p>
</Modal>
<div class="modal-overlay" v-if="modalOpen"></div>
</teleport>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
components: {
HelloWorld
}
}
import useModalState from "@/components/useModalState";
export { default as Modal } from "@/components/Modal.vue";
export const { modalOpen, toggleModalState } = useModalState();
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
.modal-overlay {
z-index: 10;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0, 0.3);
}
</style>
<template>
<div class="modal">
<slot></slot>
<button @click="$emit('close')">Dismiss</button>
</div>
</template>
<script>
export default {
emits: [ "close" ]
}
</script>
<style scoped>
::v-slotted(p){
font-style: italic;
}
.modal {
width: 200px;
max-width: 100%;
height: 100px;
max-height: 100%;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 20px 50px 20px 20px;
z-index: 11;
background: white;
}
</style>
import { ref } from "vue";
export default function () {
const modalOpen = ref(false);
const toggleModalState = () => {
modalOpen.value = !modalOpen.value;
};
return { modalOpen, toggleModalState }
};
import { createApp } from 'vue'
import App from './App.vue'
import { createApp } from "vue";
import App from "./App.vue";
createApp(App).mount('#app')
createApp(App).mount("#app");
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment