32
31

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

nuxt.js, vuetify ダイアログコンポーネント化サンプル

Last updated at Posted at 2018-09-06

概要

components

components/Confirm.vueを作成
引用:https://gist.github.com/eolant/ba0f8a5c9135d1a146e1db575276177d

Confirm.vue
<template>
  <v-dialog v-model="dialog" :max-width="options.width" @keydown.esc="cancel">
    <v-card>
      <v-toolbar dark :color="options.color" dense flat>
        <v-toolbar-title class="white--text">{{ title }}</v-toolbar-title>
      </v-toolbar>
      <v-card-text v-show="!!message">{{ message }}</v-card-text>
      <v-card-actions class="pt-0">
        <v-spacer></v-spacer>
        <v-btn color="primary darken-1" flat="flat" @click.native="agree">Yes</v-btn>
        <v-btn color="grey" flat="flat" @click.native="cancel">Cancel</v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>
<script>
  export default {
    data: () => ({
      dialog: false,
      resolve: null,
      reject: null,
      message: null,
      title: null,
      options: {
        color: 'primary',
        width: 290
      }
    }),
    methods: {
      open(title, message, options) {
        this.dialog = true
        this.title = title
        this.message = message
        this.options = Object.assign(this.options, options)
        return new Promise((resolve, reject) => {
          this.resolve = resolve
          this.reject = reject
        })
      },
      agree() {
        this.resolve(true)
        this.dialog = false
      },
      cancel() {
        this.resolve(false)
        this.dialog = false
      }
    }
  }
</script>

呼び出し側 page

page/以下に呼び出し側Vue作成

dialog2

<template>
<div>
  <v-btn color="success" @click="onClickOpen">OpenConfirm</v-btn> 
  <confirm ref="confirm"></confirm>
</div>
  
</template>

<script>
import confirm from '@/components/Confirm.vue'
export default {
  components:{
    confirm
  },
  methods:{
    async onClickOpen(){
      console.log('--onClickOpen')
      if (await this.$refs.confirm.open('Delete', 'Are you sure?', { color: 'red' })) {
        console.log('--yes')
      }else{
        console.log('--no')
      }
    }
  }
}
</script>

<style>

</style>

動作テスト
image.png
image.png

32
31
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
32
31

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?