yumechi-no-kuni/src/client/app/common/views/components/alert.vue

<template>
<div class="felqjxyj" :class="{ pointer }">
	<div class="bg" ref="bg" @click="onBgClick"></div>
	<div class="main" ref="main">
		<div class="icon" :class="type"><fa :icon="icon"/></div>
		<header v-if="title" v-html="title"></header>
		<div class="body" v-if="text" v-html="text"></div>
		<ui-horizon-group no-grow class="buttons">
			<ui-button @click="ok" primary>OK</ui-button>
			<ui-button @click="cancel" v-if="showCancelButton">Cancel</ui-button>
		</ui-horizon-group>
	</div>
</div>
</template>

<script lang="ts">
import Vue from 'vue';
import * as anime from 'animejs';
import { faTimesCircle, faQuestionCircle } from '@fortawesome/free-regular-svg-icons';

export default Vue.extend({
	props: {
		type: {
			type: String,
			required: false,
			default: 'info'
		},
		title: {
			type: String,
			required: false
		},
		text: {
			type: String,
			required: true
		},
		showCancelButton: {
			type: Boolean,
			default: false
		},
		pointer: {
			type: Boolean,
			default: true
		}
	},

	computed: {
		icon(): any {
			switch (this.type) {
				case 'success': return 'check';
				case 'error': return faTimesCircle;
				case 'warning': return 'exclamation-triangle';
				case 'info': return 'info-circle';
				case 'question': return faQuestionCircle;
			}
		}
	},

	mounted() {
		this.$nextTick(() => {
			(this.$refs.bg as any).style.pointerEvents = 'auto';
			anime({
				targets: this.$refs.bg,
				opacity: 1,
				duration: 100,
				easing: 'linear'
			});

			anime({
				targets: this.$refs.main,
				opacity: 1,
				scale: [1.2, 1],
				duration: 300,
				easing: [0, 0.5, 0.5, 1]
			});
		});
	},

	methods: {
		ok() {
			this.$emit('ok');
			this.close();
		},

		cancel() {
			this.$emit('cancel');
			this.close();
		},

		close() {
			(this.$refs.bg as any).style.pointerEvents = 'none';
			anime({
				targets: this.$refs.bg,
				opacity: 0,
				duration: 300,
				easing: 'linear'
			});

			(this.$refs.main as any).style.pointerEvents = 'none';
			anime({
				targets: this.$refs.main,
				opacity: 0,
				scale: 0.8,
				duration: 300,
				easing: [ 0.5, -0.5, 1, 0.5 ],
				complete: () => this.destroyDom()
			});
		},

		onBgClick() {
			this.cancel();
		}
	}
});
</script>

<style lang="stylus" scoped>
.felqjxyj
	display flex
	align-items center
	justify-content center
	position fixed
	z-index 30000
	top 0
	left 0
	width 100%
	height 100%

	&:not(.pointer)
		pointer-events none

	> .bg
		display block
		position fixed
		top 0
		left 0
		width 100%
		height 100%
		background rgba(#000, 0.7)
		opacity 0
		pointer-events none

	> .main
		display block
		position fixed
		margin auto
		padding 32px 42px
		min-width 320px
		max-width 480px
		width calc(100% - 32px)
		text-align center
		background var(--face)
		border-radius 8px
		color var(--faceText)
		opacity 0

		> .icon
			font-size 32px

			&.success
				color #37ec92

			&.error
				color #ec4137

			&.warning
				color #ecb637

			> *
				display block
				margin 0 auto

		> .header
			margin 16px 0
			font-weight bold

			& + .body
				margin-top 8px

		> .body
			margin 16px 0

</style>