Как переключать VUE компоненты - PullRequest
Новая
       4

Как переключать VUE компоненты

0 голосов
/ 15 ноября 2018

У меня есть основной файл App.vue, в который я поместил такие элементы, как панель навигации.Остальная часть контента визуализируется с помощью vue-router.Я пытаюсь также разместить серию модалов в этом файле так, чтобы к модалам можно было обращаться по любому маршруту, как только будет нажата соответствующая ссылка на навигационной панели.У меня возникают проблемы с выяснением, как переключать компоненты для отображения и постепенного появления (fade in -> Я использую модальные загрузчики. Идентификатор $ для jQuery вызывает проблемы и не распознается)

Любойидеи?

APP.VUE 

<template>    
    <nav class="navbar navbar-expand-lg px-0" id="navbar" v-else>
        <a href="#" class='col-md-2 text-center py-0'>
            <img src="./assets/4.png" id='site-logo'>
        </a>

        <div class="d-md-flex w-100">

            <div class="d-md-flex flex-1">
              ...
            </div>

            <div class="d-md-flex flex-1" style='justify-content: flex-end'>
                <p class="text-white mb-0 stat-decor pill-blue nav-item mr-2">
                    <a class='text-white'>Login</a>
                </p>

                <p class="text-white mb-0 stat-decor pill-blue nav-item mr-2">
                    <a href='/register' class='text-white'>Register</a>
                </p>
            </div>
        </div>
    </nav>


    <!-- MODALS -->
            <!-- LOGIN MODAL -->
            <LoginModal />
    <!--  -->
    <router-view/>
  </div>
</template>

<script>
import LoginModal from '@/components/modals/loginModal';

export default {
  name: 'App',
  components: {
      'LoginModal': LoginModal
  },

  data () {
      return {
          
      }
  },
  ...
}
</script>

РЕЖИМ ВХОДА 

<template>
    <div class="modal fade" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="loginModal" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-body">
                    <p class="font-weight-bold text-white h5 text-center text-uppercase">Login</p>
                    <div class="container">
                        <form>
                            <div class="form-group">
                                <input type="text" class="form-control" placeholder='Username...'>
                            </div>
                            <div class="form-group">
                                <input type="password" class="form-control" placeholder='Password...'>
                            </div>
                            <div class="form-group text-center my-4">
                                <input type="button" value="Submit" class='rounded'>
                            </div>
                        </form>

                        <p class="text-white text-center small">
                            Forgot Password?
                            <br>
                            <span style='color: #c4b2fe'>or</span>
                            <br>
                            Register a new account
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'loginModal',
    data () {
        return {

        }
    },

    mounted () {
        
    }

    
}
</script>

<style scoped>
    .block {display: block}
    .modal-body {height: 50%}
    .modal-body p:nth-child(1) {margin: 40px 0;}
    .modal-content {background-color: #4855d8;}
    .modal-content input {
        background-color: #252b6e;
        border: none;
        font-weight: bold;
        color: #b6b4b7;
        font-size: 14px;
    }
    .modal-content input[type='button'] {
        color: white; 
        margin: auto;
        padding: 8px;
        text-align: center;
        cursor: pointer;
        background-color: #080715;
        width: 120px;
    }
</style>

1 Ответ

0 голосов
/ 15 ноября 2018

Вы можете использовать переходы , которые VUE включает в себя https://vuejs.org/v2/guide/transitions.html. Наряду с v-if , чтобы показать или скрыть модальное значение.

APP.VUE - HTML 

<transition name='modal-zoom'>
   <LoginModal v-if="activeModal" />
</transition>

APP.VUE - JS 

methods: {
  activeModal: function () {
    // return boolean
  }
}
...