代码之家 › 专栏 › 技术社区 › softshipper

如何从其他组件打开对话框?

quasar quasar-framework vue.js

0

softshipper · 技术社区 · 5 年前

我有一个对话框组件,如下所示:

<template>
  <q-dialog v-model="confirm" persistent>
    <q-card>
      <q-card-section class="row items-center">
        <span class="q-ml-sm">You must register</span>
      </q-card-section>
      <q-card-actions align="right">
        <q-btn flat label="Save" color="primary" v-close-popup/>
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>

<script>
  export default {
    name: 'UserInfo',
    data() {
      return {
        confirm: false,
      }
    },

    created: function () {

    },
    methods: {
      show_dialog() {
        this.confirm = true;
      }

    }
  }
</script>

以及另一个导入上述组件的组件:

<template>
  <div class='q-pa-md' style='max-width: 300px'>
    <UserInfo></UserInfo>
  </div>
</template>


<script>
  import UserInfo from "pages/UserInfo";

  export default {
    name: 'PageIndex',
    components: {UserInfo},
    data() {
      return {

      }
    },
    mounted() {

    },
    created: function () {
      const config = {
        headers: {
          'Authorization': `Bearer ${this.$kc.token}`,
          'Content-Type': 'application/json',
        }
      };

    console.log(this.$kc);


      this.$axios.get(`http://localhost:9090/user/${this.$kc.subject}`)
        .then((res) => {
          console.log(res)
        })
        .catch(_ => {
          //Here the dialog should open
        })

    },
    methods: {

    }
  }
</script>

这个 Dialog 应该被叫到 catch 块。

如何触发打开事件 抓住 块?

0 回复 | 直到 5 年前

1

Naomi Messing 5 年前

更改 confirm 财产 props 而不是 data ,并从父组件管理切换。

父亲成分:

<template>
  <div class='q-pa-md' style='max-width: 300px'>
    <UserInfo :confirm="isConfirm" @changeConfirm="changeConfirm"></UserInfo>
  </div>
</template>


export default {
   data() {
       return {
          isConfirm: ''
       }
   },
   methods: {
       changeConfirm(status) {
           this.isConfirm= status
       }
   },
   created: function () {
      //...
      this.$axios.get(`http://localhost:9090/user/${this.$kc.subject}`)
        .then((res) => {
           console.log(res)
         })
        .catch(_ => {
            this.isConfirm= false
     })
   }
}

子组件:

export default {
    props: {
       confirm: ''
    },
    methods: {
       show_dialog() {
         this.$emit('changeConfirm', true);
       }
    }
}

2

0

Luke Hol 5 年前

只需添加 ref=âuserInfoâ 到 <UserInfo> PageIndex组件的HTML模板中的标签。然后你可以打电话 this.$refs.userInfo.show_dialog() 在接球区

3

0

MaBbKhawaja 5 年前

类星体中调用对话框的正确方法

<template>
  <q-dialog v-model="confirm" ref="dialog" persistent>
    <q-card>
      <q-card-section class="row items-center">
        <span class="q-ml-sm">You must register</span>
      </q-card-section>
      <q-card-actions align="right">
          <q-btn flat label="Save" color="primary" @click="onOKClick"/>
          <q-btn flat label="Cancel" color="primary" @click="onCancelClick"/>
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>

<script>
  export default {
    name: 'UserInfo',
    data() {
      return {
        confirm: false,
      }
    },

    created: function () {

    },
    methods: {
      show() {
            this.$refs.dialog.show();
        },
        hide() {
            this.$refs.dialog.hide();
        },
        onDialogHide() {
            this.$emit("hide");
        },
        onOKClick() {
            //code that you want to emit or functionality you want 
        },
        onCancelClick() {
            this.hide();
        }
    }
  }
</script>

从您要调用的组件

<template>
  <div class='q-pa-md' style='max-width: 300px'>
    
  </div>
</template>


<script>
  import UserInfo from "pages/UserInfo";

  export default {
    name: 'PageIndex',
    components: {UserInfo},
    data() {
      return {

      }
    },
    mounted() {

    },
    created: function () {
      const config = {
        headers: {
          'Authorization': `Bearer ${this.$kc.token}`,
          'Content-Type': 'application/json',
        }
      };

    console.log(this.$kc);


      this.$axios.get(`http://localhost:9090/user/${this.$kc.subject}`)
        .then((res) => {
          console.log(res)
        })
        .catch(_ => {
          //Here the dialog should open
                this.$q
                .dialog({
                    component: UserInfo,
                    parent: this,
                })
                .onOk(value => {
                    //Functionality you want on OK click of dialog
                })
                .onCancel(() => {})
                .onDismiss(() => {});
        })

    },
    methods: {

    }
  }
</script>

之后,您可能会遇到$q.dialog未知的错误,因此请在quaster.js的插件中添加dialog 这样地

import { Quasar, Dialog } from 'quasar'
plugins: [
        Dialog
    ],