Skip to content

Instantly share code, notes, and snippets.

@lmiller1990
Last active May 16, 2023 13:38
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save lmiller1990/622bfd45c26285ce4411937db10b5116 to your computer and use it in GitHub Desktop.
Save lmiller1990/622bfd45c26285ce4411937db10b5116 to your computer and use it in GitHub Desktop.
useModal hook
import { createApp } from 'vue'
import { ModalPlugin } from '../modal-plugin'
import App from './App.vue'
const app = createApp(App)
app.use(ModalPlugin)
app.mount('#app')
import { createApp } from 'vue'
import NewModal from './src/NewModal.vue'
export class ModalPlugin {
static install() {
const el = document.createElement('div')
el.id = 'modal'
document.body.insertAdjacentElement('afterbegin', el)
const app = createApp(NewModal).mount('#modal')
}
}
<template>
<div class="modal" :style="style">
<div class="modal-background"></div>
<div class="modal-content">
<div id="modal-dest"></div>
</div>
<button class="modal-close is-large" aria-label="close" @click="hide"></button>
</div>
</template>
<script lang="ts">
import { defineComponent, ref, computed } from "vue";
const show = ref(false)
interface ModalApi {
hideModal: () => void
showModal: () => void
visible: boolean
}
export const useModal = (): ModalApi => {
return new Proxy<ModalApi>(Object.create(null), {
get(obj, prop) {
if (prop === 'visible') {
return computed(() => show.value)
}
if (prop === 'hideModal') {
return () => show.value = false
}
if (prop === 'showModal') {
return () => show.value = true
}
}
})
}
// export const useModal = () => {
// return {
// showModal() {
// show.value = true
// },
// hideModal() {
// show.value = false
// },
// visible: show
// }
// }
export default defineComponent({
setup() {
const modal = useModal()
const style = computed(() => {
return {
display: show.value ? 'block' : 'none'
}
})
return {
style,
hide: modal.hideModal,
}
}
})
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment