diff options
| author | Terry Truong <terry06890@gmail.com> | 2022-03-28 12:57:20 +1100 |
|---|---|---|
| committer | Terry Truong <terry06890@gmail.com> | 2022-03-28 12:57:20 +1100 |
| commit | bcf60b4e1aa2283821010715b33009d8f4a48207 (patch) | |
| tree | 46630455ae407f30758c5b255f5fe41ccfe00a5a /src/components/HelpModal.vue | |
| parent | 10ccee584417d51afc583484b692a8d7086a0d5f (diff) | |
Convert SVG icons into icon components
Diffstat (limited to 'src/components/HelpModal.vue')
| -rw-r--r-- | src/components/HelpModal.vue | 9 |
1 files changed, 5 insertions, 4 deletions
diff --git a/src/components/HelpModal.vue b/src/components/HelpModal.vue index f56807c..8be08f4 100644 --- a/src/components/HelpModal.vue +++ b/src/components/HelpModal.vue @@ -1,5 +1,6 @@ <script lang="ts"> import {defineComponent, PropType} from 'vue'; +import CloseIcon from './icon/CloseIcon.vue'; export default defineComponent({ props: { @@ -7,11 +8,12 @@ export default defineComponent({ }, methods: { closeClicked(evt: Event){ - if (evt.target == this.$el || (this.$refs.closeIcon as HTMLElement).contains(evt.target as HTMLElement)){ + if (evt.target == this.$el || (this.$refs.closeIcon.$el as HTMLElement).contains(evt.target as HTMLElement)){ this.$emit('help-modal-close'); } }, }, + components: {CloseIcon, }, emits: ['help-modal-close'], }); </script> @@ -20,9 +22,8 @@ export default defineComponent({ <div class="fixed left-0 top-0 w-full h-full bg-black/40" @click="closeClicked"> <div class="absolute left-1/2 -translate-x-1/2 w-4/5 top-1/2 -translate-y-1/2 p-4 bg-stone-50 rounded-md shadow shadow-black"> - <svg class="block absolute top-2 right-2 w-6 h-6 hover:cursor-pointer" @click.stop="closeClicked" ref="closeIcon"> - <use href="#svg-close"/> - </svg> + <close-icon @click.stop="closeClicked" ref="closeIcon" + class="block absolute top-2 right-2 w-6 h-6 hover:cursor-pointer"/> <h1 class="text-center text-xl font-bold mb-2">Help Info</h1> <hr class="mb-4 border-stone-400"/> <div class="mb-4"> |