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/TileInfoModal.vue | |
| parent | 10ccee584417d51afc583484b692a8d7086a0d5f (diff) | |
Convert SVG icons into icon components
Diffstat (limited to 'src/components/TileInfoModal.vue')
| -rw-r--r-- | src/components/TileInfoModal.vue | 10 |
1 files changed, 5 insertions, 5 deletions
diff --git a/src/components/TileInfoModal.vue b/src/components/TileInfoModal.vue index 9d9dd15..f45ef04 100644 --- a/src/components/TileInfoModal.vue +++ b/src/components/TileInfoModal.vue @@ -1,5 +1,6 @@ <script lang="ts"> import {defineComponent, PropType} from 'vue'; +import CloseIcon from './icon/CloseIcon.vue'; import {TolNode} from '../tol'; export default defineComponent({ @@ -20,11 +21,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('info-modal-close'); } }, }, + components: {CloseIcon, }, emits: ['info-modal-close'], }); </script> @@ -33,10 +35,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">{{tolNode.name}}</h1> <hr class="mb-4 border-stone-400"/> <div :style="imgStyles" class="float-left mr-4" alt="an image"></div> |