CODEWITHSUNDEEP
vue.jsvuetify.js
yukashima huksay
yukashima huksay

Reputation: 6248

How to programatically bounce v-dialog

I'm using v-dialog from vuetify. When I set it to persistent, there is a bounce effect when the user clicks outside the dialog. I would like to manually create that effect when some random button is clicked. How is that possible?

Upvotes: 1

Views: 514

Answers (1)

Anees Hameed
Anees Hameed

Reputation: 6564

Dialog has a method called animateClick, you can call the same.

CODEPEN

<v-dialog ref="dialog" v-model="dialog" width="400px">
  <v-card >
    <v-card-title
       class="headline grey lighten-2"
       primary-title
      >
      Privacy Policy
    </v-card-title>
    <v-card-text>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in 
    </v-card-text>
    <v-divider></v-divider>
    <v-card-action>
      <v-btn @click="doAnimation">Animate Me</v-btn>
    </v-card-action>
  </v-card>
</v-dialog>
....
....
<script>
  export default{
    ...
    methods: {
      methods:{
       doAnimation(){
          this.$refs.dialog.animateClick()
        }
      }
    }
  }
</script>

Upvotes: 1

Related Questions