【问题标题】:How to programatically bounce v-dialog如何以编程方式弹跳 v-dialog
【发布时间】:2020-05-05 18:57:33
【问题描述】:

我正在使用来自 vuetify 的 v-dialog。当我将其设置为持久时,当用户在对话框外单击时会出现反弹效果。我想在单击某个随机按钮时手动创建该效果。这怎么可能?

【问题讨论】:

    标签: vue.js vuetify.js


    【解决方案1】:

    Dialog 有一个名为animateClick 的方法,你可以调用它。

    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>
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2012-01-10
      • 2014-11-27
      • 1970-01-01
      • 1970-01-01
      • 2020-06-22
      • 1970-01-01
      相关资源
      最近更新 更多