DrillDown Pt.3

Continuation from pt.2

Implementation

2. components/Dialog.vue

Create components/Dialog.vue

touch components/Dialog.vue

▼

vim components/Dialog.vue

▼

// components/Dialog.vue
<template>
  <div>
    <v-dialog>
      <v-card>
        <v-card-text>
          Dialog
        </v-card-text>
      </v-card>
    </v-dialog>
  </div>
</template>

Set slot

vim components/Dialog.vue

▼

// components/Dialog.vue
<template>
  <div>
    <v-dialog>
      <v-card>
        <v-card-text>
          <slot></slot>
        </v-card-text>
      </v-card>
    </v-dialog>
  </div>
</template>

Set Promise for opne/close

vim components/Dialog.vue

▼

// components/Dialog.vue
<template>
  <div>
    <v-dialog v-model="dialog" @keydown.esc="cancel">
      <v-card>
        <v-card-text>
          <slot></slot>
          <div>
            <v-row justify="center">
              <v-btn
                color="primary"
                outlined
                rounded
                @click.native="cancel"
                >キャンセル</v-btn
              >
              <v-btn color="primary" rounded @click.native="agree">
                適用する
              </v-btn>
            </v-row>
          </div>
        </v-card-text>
      </v-card>
    </v-dialog>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        dialog: false,
        resolve: () => {},
        reject: () => {},
        open: () => {
          return new Promise((resolve, reject) => {
            this.dialog = true
            this.resolve = resolve
            this.reject = reject
          })
        }
      }
    },
    methods: {
      agree() {
        this.resolve(true)
        this.dialog = false
      },
      cancel() {
        this.resolve(false)
        this.dialog = false
      }
    }
  }
</script>

Use Dialog in DrillDownSearch.vue

vim pages/DrillDownSearch.vue

▼

// pages/DrillDownSearch.vue
<template>
  <v-app>
    <div>
      <v-btn @click="open" block>
        Components Button
      </v-btn>
      <ConfirmDialog ref="confirm">
        Dialog
      </ConfirmDialog>
    </div>
  </v-app>
</template>

<script>
  // ...
  import ConfirmDialog from '../components/Dialog.vue'
  export default {
    components: { Button, ConfirmDialog },
    data() {
      return {
        isDialogOpened: false
      }
    },
    methods: {
      async open() {
        this.isDialogOpened = true
        if (await this.$refs.confirm.open()) {
          this.isDialogOpened = false
        } else {
          this.isDialogOpened = false
        }
      }
    }
  }
</script>

Next DrillDown Pt.4