Я хочу перенести элемент b-card на переднюю часть компонента - PullRequest
Новая
       23

Я хочу перенести элемент b-card на переднюю часть компонента

0 голосов
/ 27 октября 2019

У меня есть компонент b-card, который поставляется с платформой bootstrapvue. Но это не покажет по какой-то причине. Что именно я делаю не так?

BlankBody - это компонент, содержащий фон, который я буду использовать для нескольких представлений. 

<template>
<div>
<Header/>
<AppNavigation/>
  <BlankBody>
    <b-card
          title="Card Title"
          img-src="https://picsum.photos/600/300/?image=25"
          img-alt="Image"
          tag="article"
          style="width: 50%; margin-left: 25%;  overflow: visible ;"
          class="mb-1"
  >
      <b-card-text>
          Some quick example text to build on the card title and make up the bulk of the card's content.
      </b-card-text>

      <b-button href="#" variant="primary">Go somewhere</b-button>
    </b-card>
  </BlankBody>
 </div>
</template>

<script>
import AppNavigation from "../components/AppNavigation";
import Header from "../components/Header";
import BlankBody from "../components/BlankBody";

export default {
components: {
Header,
AppNavigation,
  BlankBody
},
};
</script>

Вот как я импортировал VueBootstrap в main.js: 

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import vuetify from './plugins/vuetify';
import BootstrapVue from 'bootstrap-vue';
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap-vue/dist/bootstrap-vue.css';
import '@babel/polyfill';

Vue.config.productionTip = false;
Vue.use(BootstrapVue)
new Vue({
  router,
  store,
  vuetify,
  render: h => h(App)
}).$mount("#app");

И это мой компонент BlankBody (я знаю, что мне нужно отредактировать это имя): 

<template>
    <div>
    <v-img :src="require('../assets/background4.png')" width="1920px" height="1080px"></v-img>
    </div>
</template>

<script>
    export default {
        name: "BlankBody"
    }
</script>

<style scoped>
</style>

1 Ответ

0 голосов
/ 31 октября 2019

Ваш <BlankBody> компонент не отображает контент, переданный ему через слот по умолчанию.

Измените его на: 

<template>
  <div>
    <v-img :src="require('../assets/background4.png')" width="1920px" height="1080px"></v-img>
    <slot></slot>
  </div>
</template>
...