Как добавить переход к модальному интерфейсу в iview (iviewui.com vue framework)? - PullRequest
Новая
       48

Как добавить переход к модальному интерфейсу в iview (iviewui.com vue framework)?

0 голосов
/ 03 июля 2019

У меня есть модал в рамках iviewui: https://www.iviewui.com/components/modal-en

Я пытаюсь добавить плавный переход с постепенным исчезновением и скольжением вниз при нажатии кнопки, когда отображается модальный режим, и плавный переход с постепенным исчезновением и сдвигом вверх при повторном нажатии кнопки и скрытом модале.

У модального API есть свойство "transition-names", но я не могу заставить его работать https://www.iviewui.com/components/modal-en

Мой код выглядит следующим образом (модал работает нормально, но я хочу добавить к нему переход, о котором я говорил выше) 

<template>
<div>
    <Button type="primary" @click="modal1 = true">Display dialog box</Button>
    <Modal
        v-model="modal1"
        title="Common Modal dialog box title"
        @on-ok="ok"
        @on-cancel="cancel">
        <p>Content of dialog</p>
        <p>Content of dialog</p>
        <p>Content of dialog</p>
    </Modal>
</div>
</template>



<script>
    export default {
        data () {
            return {
                modal1: false,
            }
        },
        methods: {
            ok () {
                this.$Message.info('Clicked ok');
            },
            cancel () {
                this.$Message.info('Clicked cancel');
            }
        }
    }
</script>

Как добавить свойство transition-names к этому модалу и заставить его работать?

Обратите внимание, что приведенное ниже приводит к ошибке консоли: 

    <Modal
        v-model="modal1"
        title="Common Modal dialog box title"
        @on-ok="ok"
        transition-names="['ease', 'fade']"
        @on-cancel="cancel">
        <p>Content of dialog</p>
        <p>Content of dialog</p>
        <p>Content of dialog</p>
    </Modal>

Ошибка: 

test_iview_ui_framework.js:82545 [Vue warn]: Invalid prop: type check failed for prop "transitionNames". Expected Array, got String with value "['ease', 'fade']".

found in

---> <Modal>
       <ModalExample> at resources/js/test/iview/iview_component_examples/ModalExample.vue
         <App> at resources/js/test/iview/TestIViewUI.vue
           <Root>
...