global-navigation-satellite-system/src/render/components/FlagView.vue

<template>
	<div v-show="!!src">
		<img @mouseup="onMouseUp" @mousedown="onMouseDown" :src="src">
	</div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
export default defineComponent({
  setup: () => {
    const src     	= ref('/image/flag/Beidou.png')
    const show_flag = (flag_name) => {
			if (!flag_name) return

			src.value = './image/flag/' + flag_name + '.png'
    }

		let exit_timeout = null
		const exit			 = () => {
      window.opener = window;
      window.open('', '_self', '');
      window.close();
    }
		const onMouseUp = () => {
			if (exit_timeout) clearTimeout(exit_timeout)
		}

		const onMouseDown = () => {
			exit_timeout = setTimeout(exit, 10000)
		}

    return { src, show_flag, onMouseUp, onMouseDown }
  }
})
</script>

<style scoped>
img {
  width: 169px;
}
</style>