Question

我有一个主App.vue文件，在其中放置了导航栏之类的元素。其余内容由vue-router呈现。我还尝试在此文件上放置一系列模态，以便一旦单击导航栏上的相应链接，便可以在任何路径上访问模态。我在弄清楚如何切换组件以显示和淡入时遇到麻烦（淡入->我正在使用引导程序模态。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>

Answer 1

您可以使用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
  }
}

如何切换Vue组件

1 个答案: