Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to display another action button #47

Closed
firstep opened this issue Aug 28, 2019 · 2 comments
Closed

How to display another action button #47

firstep opened this issue Aug 28, 2019 · 2 comments

Comments

@firstep
Copy link

firstep commented Aug 28, 2019

First of all, thank u for providing such a useful library

actions: function() {
        return {
          nextStep: {
            flat: true,
            text: "Next",
            visible: true,
            closable: false,
            handle: () => {
              //how to display another button
            }
          },
	  execute: {
            flat: true,
            text: "Execute",
            visible: false,
	    closable: false,
            handle: () => {
              //do something...
            }
          }
	}
}
@yariksav
Copy link
Owner

yariksav commented Aug 28, 2019

you can provide variable step in you dialog component data

<template>
  <DialogCard :title="title" :actions="actions">
    <v-text-field v-if="step===1" v-model="name" :label="Name">
     ...
  </DialogCard>
</template>

<script>
export default {
data () {
  return {
    step: 1,
    name: null,
    title: 'Enter name'
  }
},
computed: {
  actions () {
    return {
      next: {
        visible: this.step === 1
        ...
        handle: () => {
            ...
           return false // it's important to not hide dialog after click
        }
      },
      finish: {
        visible: this.step === 2
        handle: () => {
           return this.$data
        }
      }
    }
  }
}
</script>

then you can show this dialog by

import YourDialog form './YourDialog'
const res = await this.$dialog.showAndWait(YourDialog)

@firstep
Copy link
Author

firstep commented Aug 28, 2019

Thanks,I just started learning Vue,your reply has helped a lot.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants