Vue.js에서 자체 확인 대화 상자 (confirm) 만들기

WEB 어플리케이션으로 유저에게 의사를 확인하고 싶을 때는 window.confirm 가 사용될까 생각합니다.
그러나, window.confirm 계에서 낼 수 있는 다이얼로그는 브라우저 의존이므로, 독자적인 스타일을 맞출 수가 없습니다.
무기질인 확인 다이얼로그라면 통일성이 없어 슬픈 기분이 되는군요.

그래서 Vue.js에서 자체 확인 대화 상자를 만들고 싶습니다.

구현 정책

쉽게 구현 정책을 요약합니다.

메소드는 Vue의 글로벌 믹스 인으로 설정됩니다.

인수가 표시하는 메시지

반환값은 비동기로 받는다

메서드 결과는 Promise<boolean>

Vuetify v-dialog 사용

스타일과 애니메이션을 생각하는 것이 지루하기 때문에

컴퍼넌트는 호출마다 작성·파기한다.

항상 준비하지는 않습니다

body의 끝에 추가

구현

위의 관점에서 확인 대화 상자를 구현합니다.

확인 대화 상자의 구성 요소

created 의 타이밍에 body 에 추가를 하고 있습니다.

※ vue-class-component 를 사용하고 있습니다.

Confirm.vue

<template lang="pug">
v-dialog(v-model="isActive" persistent max-width="30%")
  v-card
    v-card-text {{ message }}
    v-card-actions.pt-0
      v-spacer
      v-btn(
        color="primary"
        depressed
        @click.native="ok"
      ) OK
      v-btn(
        outline
        @click.native="cancel"
      ) キャンセル
</template>

<script lang="ts">
import Vue from 'vue';
import Component from 'vue-class-component';
import { Prop } from 'vue-property-decorator';

@Component
export default class extends Vue {

    isActive = false;

    @Prop() message: string;
    @Prop() success: () => void;
    @Prop() failure: () => void;

    created() {
        const el = document.createElement('div');
        document.getElementsByTagName('body')[0].appendChild(el);
        this.$mount(el);

        this.isActive = true;
    }

    ok() {
        this.success();
        this.destroy();
    }

    cancel() {
        this.failure();
        this.destroy();
    }

    destroy() {
        this.isActive = false;

        // 即座にdomを削除するとtransitionする前に消えてしまうので、200ms待つ
        setTimeout(() => {
            this.$el.parentNode.removeChild(this.$el);
            this.$destroy();
        }, 200);
    }

}
</script>

설치 프로그램

다음에 믹스 인을 하는 인스톨러입니다.
TypeScript를 상정하고 있으므로, 정의도 써 둡니다.

ConfirmMixin.ts

import { VueConstructor } from 'vue';
import Confirm from '/path/to/Confirm.vue';

declare module 'vue/types/vue' {
    interface Vue {
        $confirm(message: string): Promise<boolean>;
    }
}

export default class {
  static install(Vue: VueConstructor) {
    Vue.mixin({
      methods: {
        $confirm: (message: string) => {
          return new Promise((resolve) => {
            new Confirm({
              propsData: {
                message,
                success: () => resolve(true),
                failure: () => resolve(false),
              },
            });
          });
        },
      },
    });
  }
}

이용 부분

마지막으로 실제로 설치할 부분.
일반 라이브러리와 마찬가지로 Vue.use를 호출하면됩니다.

index.ts

import Vue from 'vue';
import Vuetify from 'vuetify';
import ConfirmMixin from '/path/to/ConfirmMixin';

Vue.use(Vuetify);
Vue.use(ConfirmMixin);

전화할 때

실제로 어플리케이션 안에서 호출할 때는 이런 느낌입니다.

<template lang="pug">
v-layout(column fill-height)
  v-btn(@click="hoge") hogehogeする
</template>

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";

@Component
export default class extends Vue {
  async hoge() {
    const result = await this.$confirm("本当にhogehogeする？");
    console.log(result)
  }
}
</script>

움직였다.

실제로 동작해 보면 이런 느낌이 듭니다.

요약

Vue.js + Vuetify를 사용하여 자체 확인 대화 상자를 만들려고했습니다.
여기까지 작성해 버리면, 조금 손을 더하는 것만으로 경고나 에러 다이얼로그도 작성할 수 있고, 그 외의 정보도 표시할 수 있으므로, 여러가지 사용법을 시험해 보세요.