我的Web应用程序中的几个页面上都有一个v-navigation-drawer。我也正在使用“ animate.css”在视图之间进行转换。当我在视图之间切换时，即使未选择它，也会显示导航抽屉。
Here is a 15 second video showing what happens.
关于在过渡期间如何隐藏抽屉的任何想法？
这是我的代码。.这是我的抽屉视图之一。.我将navigation drawer作为一个组件，并将其命名为side_drawer
<template>
<v-container fill-height>
<v-layout row wrap>
<v-flex xs10 class="mx-auto">
<v-layout row wrap align-right>
<v-flex xs12>
<side_drawer></side_drawer>
</v-flex>
</v-layout>
<v-spacer></v-spacer>
<v-card class="pa-4" id="devIds">
<v-card-title>
<v-icon class="my_dark_purple_text">help_outline</v-icon>
<h1 class="title oswald my_dark_purple_text pl-2">SETUP INSTRUCTIONS</h1>
</v-card-title>
<v-expansion-panel>
<v-expansion-panel-content>
<div slot="header" class="subheading">How do I know my orders are getting to Amazon?</div>
<v-divider></v-divider>
<v-card>
<v-list>
<v-list-tile>
<v-list-tile-action>
<v-icon color="purple darken-4">adjust</v-icon>
</v-list-tile-action>
<v-list-tile-content>
<div class="subheading">Once the order has been paid, the order status will
transition to "Open". This should take less than 1 minute. At this point you will be able to see your order on Amazon.
</div>
</v-list-tile-content>
</v-list-tile>
</v-list>
<v-list three-line>
<v-list-tile>
<v-list-tile-action>
<v-icon color="purple darken-4">adjust</v-icon>
</v-list-tile-action>
<v-list-tile-content>
<div class="subheading">The next order status is "Fulfilled". This is when Amazon has shipped your item, provided a tracking number, and we've notified your customer that their order has shipped. Your
order will transition to "Fulfilled" typically in 1 - 5 business days depending on the shipping rate that was selected.
</div>
</v-list-tile-content>
</v-list-tile>
</v-list>
</v-card>
</v-expansion-panel-content>
</v-expansion-panel>
<v-expansion-panel>
<v-expansion-panel-content class="purple_header">
<div slot="header" class="subheading">
Amazon will only accept orders that use the shipping rates you set up here in FBA Shipping.
</div>
<v-card>
<v-list>
<v-list-tile>
<v-list-tile-action>
<v-icon color="purple darken-4">adjust</v-icon>
</v-list-tile-action>
<v-list-tile-content>
<div class="subheading">If you only sell FBA products, delete any other shipping rates you have set up in Shopify.</div>
</v-list-tile-content>
</v-list-tile>
<v-list-tile>
<v-list-tile-action>
<v-icon color="purple darken-4">adjust</v-icon>
</v-list-tile-action>
<v-list-tile-content>
<div class="subheading">If you sell FBA products AND non-FBA products, you'll need to set up weight based shipping rates. Please see the setup video here:
<a href="https://youtu.be/L4HOTJm5hQQ" target="_blank" class="my_dark_purple_text" >Weight Based Workaround Video</a>
</div>
</v-list-tile-content>
</v-list-tile>
</v-list>
</v-card>
</v-expansion-panel-content>
</v-expansion-panel>
<v-divider></v-divider>
<v-expansion-panel>
<v-expansion-panel-content>
<div slot="header" class="subheading">Make sure your Shopify SKU matches your Amazon SKU</div>
<v-divider></v-divider>
<v-card>
<v-list>
<v-list-tile>
<v-list-tile-action>
<v-icon color="purple darken-4">adjust</v-icon>
</v-list-tile-action>
<v-list-tile-content>
<div class="subheading">Ensure your Shopify product SKUs match the SKUs on Amazon (not ASIN or UPC).</div>
</v-list-tile-content>
</v-list-tile>
</v-list>
</v-card>
</v-expansion-panel-content>
</v-expansion-panel>
<v-expansion-panel>
<v-expansion-panel-content class="purple_header">
<div slot="header" class="subheading">"Inventory Managed by" should be set to FBA Shipping</div>
<v-card>
<v-list>
<v-list-tile>
<v-list-tile-action>
<v-icon color="purple darken-4">adjust</v-icon>
</v-list-tile-action>
<v-list-tile-content>
<div class="subheading">On your product page make sure to set "Inventory Managed by" to FBA Shipping. You can do this one product at a time
or for all your products at once using Shopify's built-in bulk editor.</div>
</v-list-tile-content>
</v-list-tile>
</v-list>
</v-card>
</v-expansion-panel-content>
</v-expansion-panel>
<v-divider></v-divider>
<v-expansion-panel>
<v-expansion-panel-content>
<div slot="header" class="subheading">Automatic or manual fulfillment your choice</div>
<v-divider></v-divider>
<v-card>
<v-list>
<v-list-tile>
<v-list-tile-action>
<v-icon color="purple darken-4">adjust</v-icon>
</v-list-tile-action>
<v-list-tile-content>
<div class="subheading">You can set orders to be automatically fulfilled in your Shopify checkout settings. If you don't set that up, you'll need to request fulfillment on each order.</div>
</v-list-tile-content>
</v-list-tile>
</v-list>
</v-card>
</v-expansion-panel-content>
</v-expansion-panel>
<v-expansion-panel>
<v-expansion-panel-content class="purple_header">
<div slot="header" class="subheading">If this setup takes more than 5 minutes please call!</div>
<v-card>
<v-list>
<v-list-tile>
<v-list-tile-action>
<v-icon color="purple darken-4">adjust</v-icon>
</v-list-tile-action>
<v-list-tile-content>
<div class="subheading">Total time to setup should be 5 minutes or less, if you're struggling with these instructions please give us a call at 704.489.3578.</div>
</v-list-tile-content>
</v-list-tile>
</v-list>
</v-card>
</v-expansion-panel-content>
</v-expansion-panel>
</v-card>
</v-flex>
</v-layout>
</v-container>
</template>
<script>
import side_drawer from '../components/side_drawer.vue';
import {dataShare} from '../packs/application.js';
export default {
components: {
side_drawer
},
data: function() {
return {
drawer: false
};
}
};
</script>
<style>
.purple_header {
background-color: #E1BEE7 !important;
}
</style>
然后是navigation-drawer本身。
<template>
<div>
<v-btn
dark
fab
medium
color="green lighten-1"
class="push_right"
@click="drawer = !drawer">
<v-icon>settings</v-icon>
</v-btn>
<v-navigation-drawer
v-model="drawer"
absolute
temporary
hide-overlay
right>
<v-list>
<v-list-tile>
<v-list-tile-content>
<v-list-tile-title class="title mont">Settings & Help</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
</v-list>
<v-divider></v-divider>
<v-list dense>
<v-list-tile @click="sendToCreds">
<v-list-tile-content>
<v-list-tile-title class="subheading mont">Amazon Credentials</v-list-tile-title>
</v-list-tile-content>
<v-list-tile-action>
<v-icon color="purple darken-3">settings</v-icon>
</v-list-tile-action>
</v-list-tile>
<v-list-tile @click="sendToSpeeds">
<v-list-tile-content>
<v-list-tile-title class="subheading mont">Shipping Speeds</v-list-tile-title>
</v-list-tile-content>
<v-list-tile-action>
<v-icon color="purple darken-3">local_shipping</v-icon>
</v-list-tile-action>
</v-list-tile>
<v-list-tile @click="sendToInstructions">
<v-list-tile-content>
<v-list-tile-title class="subheading mont">Instructions</v-list-tile-title>
</v-list-tile-content>
<v-list-tile-action>
<v-icon color="purple darken-3">info</v-icon>
</v-list-tile-action>
</v-list-tile>
<v-list-tile @click="goToFAQ">
<v-list-tile-content>
<v-list-tile-title class="subheading mont">F.A.Q.</v-list-tile-title>
</v-list-tile-content>
<v-list-tile-action>
<v-icon color="purple darken-3">help</v-icon>
</v-list-tile-action>
</v-list-tile>
<v-list-tile @click="goToSetupVideos">
<v-list-tile-content>
<v-list-tile-title class="subheading mont">Setup Videos</v-list-tile-title>
</v-list-tile-content>
<v-list-tile-action>
<v-icon color="purple darken-3">ondemand_video</v-icon>
</v-list-tile-action>
</v-list-tile>
</v-list>
</v-navigation-drawer>
</div>
</template>
<script>
import {dataShare} from '../packs/application.js';
import axios from 'axios';
export default {
data: function() {
return {
drawer: false,
};
},
methods: {
goToSetupVideos() {
window.open('https://youtu.be/ehjrrJLG_xs',
'_blank');
},
goToFAQ() {
window.open('http://bytestand.com/fba-shipping-faq/',
'_blank');
},
sendToCreds() {
dataShare.$emit('whereToGo', 'amazon_credentials');
},
sendToSpeeds() {
dataShare.$emit('whereToGo', 'speeds');
},
sendToInstructions() {
dataShare.$emit('whereToGo', 'instructions');
}
}
};
</script>