Как программно запустить диалоговое окно Vuetify и дождаться ответа

Как программно запустить диалоговое окно Vuetify и дождаться ответа

07.05.2019 06:44:32 Просмотров 47 Источник

Я довольно новичок в Vue.js и Vuetify (используется AngularJS в течение нескольких лет, но наша компания переходит на Vue.в JS). То, что я пытаюсь сделать, - это когда пользователь нажимает кнопку "Войти", он выполняет некоторые проверки (т. е. имя пользователя не может быть пустым) и запускает диалоговое окно Vuetify, чтобы предупредить пользователя. Я знаю, что Vuetify имеет встроенную проверку, но ищет что-то более надежное, где я могу ждать ответа (т. е. когда мне нужно ждать чего-то вроде Могу ли я использовать вашу историю / местоположение).

В основном, глядя, чтобы сделать:

if (!userName){
    userName = await mbox('You must Enter your Username');
    return
}

ОПЕРАЦИОННАЯ

var mProceed = await mbox('Can we use your location for awesome stuff?');

где mbox (простое всплывающее окно messagebox) - это функция, которая возвращает обещание, программно загружает компонент vue, добавляет его в dom и ждет ответа.

Exmple Dialog Screen Shot

т.е.

async function mbox (mText) {
    // load dialog component here and set message passed in
    // How Do I load the template / wait for it?
    return dialogResult

}

Компонент Vue будет выглядеть примерно так (с заголовками кнопок и текстом, являющимися переменными, которые я передаю в свою функцию mbox):

<template>
<v-layout row justify-center>
<v-dialog
  v-model="dialog"
  max-width="290"
>
  <v-card>
    <v-card-title class="headline">Use Google's location service?</v-card-title>

    <v-card-text>
      Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running.
    </v-card-text>

    <v-card-actions>
      <v-spacer></v-spacer>

      <v-btn
        color="green darken-1"
        flat="flat"
        @click="dialog = false"
      >
        Disagree
      </v-btn>

      <v-btn
        color="green darken-1"
        flat="flat"
        @click="dialog = false"
      >
        Agree
      </v-btn>
    </v-card-actions>
  </v-card>
</v-dialog>
</v-layout>
</template>

Я отлично редактирую шаблон / добавляю скрипт для компонента vue я просто не уверен, как его вызвать с помощью метода, который возвращает обещание и ждет ответа?

У вопроса есть решение - Посмотреть?

Ответы - Как программно запустить диалоговое окно Vuetify и дождаться ответа / How to programmatically launch a Vuetify Dialog and wait for the response

Является ответом!
ScottR

09.05.2019 09:48:27

В конечном итоге решить его таким образом:

У меня есть метод mbox (возвращает обещание), который создает экземпляр моего компонента, добавляет его в DOM, а затем наблюдает за свойством этого компонента, чтобы узнать, какой вариант выбрал пользователь. Разрешает обещание, как только пользователь выбрал опцию

Мой метод mbox:

import MBOX from './components/mbox.vue';
import _Vue from 'vue';
export default {

mbox(mText, mTitle, mBtnCap1, mBtnCap2, mBtnCap3){
    return new Promise(async (resolve, reject) => {
        if (!mTitle){
            mTitle = 'My Title';
        }
        if (!mBtnCap1){
            mBtnCap1 = 'OK';
        }

        // I'm combining a bunch of stuff to make this work.
        // First, create the vue component
        var mboxInstance = _Vue.extend(MBOX); // mbox component, imported at top of Sublib
        var oComponent = new mboxInstance({ 
            propsData: { 
                msg: mText, 
                title: mTitle, 
                btnCap1: mBtnCap1, 
                btnCap2: mBtnCap2, 
                btnCap3: mBtnCap3,
                retval: 0
                }
        }).$mount();

        // now add it to the DOM
        var oEl = document.getElementById('app').appendChild(oComponent.$el);

        // NOTE: couldn't get it to work without adding a 'button' to activate it
        // progrmatically click it and make the button invisible
        // document.getElementById('mbox_btn_launch').click();
        var oLuanchBtn = document.getElementById('mbox_btn_launch');
        oLuanchBtn.style.visibility = 'hidden';
        oLuanchBtn.click();

        // Add a listener so we can get the value and return it
        oComponent.$watch('retval', function(newVal, oldVal){
            // this is triggered when they chose an option
            // Delete the component / element now that I'm done
            oEl.remove();
            resolve(Number(newVal));
        })
    }); // promise
}, // mbox
}

И мой компонент MBOX:

<template>
<v-dialog max-width="290" persistent v-if="showMbox">
    <template v-slot:activator="{on}">
        <v-btn id="mbox_btn_launch" v-on="on">
            Test
        </v-btn>
    </template>
    <v-card>
        <v-card-title>{{title}}</v-card-title>
        <v-card-text>{{msg}}</v-card-text>
        <v-card-actions>
            <v-spacer></v-spacer>
            <v-btn v-if="btnCap1" @click="btnClicked('1')">{{btnCap1}}</v-btn>
            <v-btn v-if="btnCap2" @click="btnClicked('2')">{{btnCap2}}</v-btn>
            <v-btn v-if="btnCap3" @click="btnClicked('3')">{{btnCap3}}</v-btn>
        </v-card-actions>
    </v-card>
</v-dialog>
</template>
<script>
export default {
    name: 'mbox',
    data: () => ({
        showMbox: true    
    }),
    props: [
        // these can be passed in, the 'data' stuff can't
        'msg',
        'title',
        'btnCap1',
        'btnCap2',
        'btnCap3',
        'retval' // watches this so we know when they clicked something
    ],
    created(){    
        this.showMbox = true;
    }, 
    methods: {
    btnClicked: function(mBtnClicked){
        // mBtnClicked = Char. Has to be a character in order for it to pass it in. Not sure why, numerics didn't work
        mBtnClicked = Number(mBtnClicked);
        this.retval = mBtnClicked; // watcher in Sublib will detect this value has changed
        this.showMbox = false;
    } // btnClicked
} // methods
} // export default
</script>
<style scoped>
</style>

Я могу тогда назвать это так:

var mChoice = await mbox('What do you want to do?', 'Title', 'Option 1', 'Option 2');

или для простого запроса проверки:

if (!userName){
    mbox('You must enter a username');
    return;
}
Sasapr

14.09.2019 07:46:56

Мое решение.

Страница.вю

<template>
  <v-container>
    <v-layout text-center wrap>
      <v-flex xs12>

        <v-btn v-on:click="open_dlg">Dlg Wrapper</v-btn>

        <dlg-wrapper ref="dlg">
          <dlg-frame title="Dialog" message="Message"></dlg-frame>
        </dlg-wrapper>

      </v-flex>
    </v-layout>
  </v-container>
</template>

<script>
import DlgWrapper from "@/components/DlgWrapper";
import DlgFrame from "@/components/DlgFrame";

export default {
  data: () => {
    return {};
  },

  methods: {
    open_dlg: function(event) {
      this.$refs.dlg.open().then(result => {
        console.log("Result:", result);
      });
    }
  },

  components: {
    DlgWrapper,
    DlgFrame
  }
};

</script>

DlgWrapper.вю

<template>
  <div>
    <v-dialog
      v-model="dialog"
      persistent
      :width="options.width"
      v-bind:style="{ zIndex: options.zIndex }"
    >
      <slot></slot>
    </v-dialog>
  </div>
</template>

<script>
export default {
  name: "dlg-wrapper",

  data: () => ({
    dialog: false,
    options: {
      width: 400,
      zIndex: 200
    },
    resolve: null,
    reject: null
  }),

  methods: {
    open(options) {
      this.dialog = true;
      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;
    }
  },

  provide: function() {
    return { agree: this.agree, cancel: this.cancel };
  }
};
</script>

DlgFrame.вю

<template>
  <v-card dark>
    <v-card-title v-show="!!title">{{ title }}</v-card-title>
    <v-card-text v-show="!!message">{{ message }}</v-card-text>
    <v-card-actions>
      <v-btn @click="agree">OK</v-btn>
      <v-btn @click="cancel">NO</v-btn>
    </v-card-actions>
  </v-card>
</template>

<script>
export default {
  name: "dlg-frame",
  props: ["title", "message"],
  data: () => ({}),
  inject: ["agree", "cancel"],
  methods: {}
};
</script>

Удачи вам!

Закрыть X