Bootstrap-Vue组件自定义卡

问题描述

我开始学习VueJS 2编程。 我需要在网站上添加卡片。我创建了自己的组件'Cards.vue'， 我包括了Bootstrap-Vue生产的卡组件 Cards.vue应该在Home.vue中使用。我必须在Home.vue中修改几个“ img-src”。

Cards.vue的代码：

    <template>
    <div>
      <b-card
        title="Card Title"
        img-src="../../assets/images/fondLBM.png"
        img-alt="One's image alt"
        img-top
        tag="article"
        style="max-width: 20rem;"
        class="mb-2"
      >
        <b-card-text>
          <slot name="text"> 
"Some quick example text to build on the card title and make up the bulk of the card's content."</slot>
        </b-card-text>

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

    <script>
    export default{
        name : 'CardS'
    }
    </script>

我在Home.vue中的代码：

    <section class="bg-light py-5">
      <h2>Section</h2>
      <b-container>
        <b-row>
          <b-col>
            <bscard>
              
              <template v-slot:text>
                <p>One's product</p>
              </template>
              <template v-slot:button-txt>
                <span>Got it !</span>
              </template>
            </bscard>
          </b-col>
          <b-col>
            <bscard imgsrc="imgsrc[1]">
              <template v-slot:text>
                <p>One's product</p>
              </template>
              <template v-slot:button-txt>
                <span>Got it !</span>
              </template>
            </bscard>
          </b-col>
          <b-col>
            <bscard v-bind:imgsrc="imgsrc[2]">
              <template v-slot:text>
                <p>One's product</p>
              </template>
              <template v-slot:button-txt>
                <span>Got it !</span>
              </template>
            </bscard>
          </b-col>
        </b-row>
      </b-container>
    </section>
<script>
// @ is an alias to /src
import CardS from "@/components/Contents/Cards.vue";

export default {
  name: "Home",components: {
    bscard: CardS
  },data(){
    return {
      imgsrc : [
      'https://picsum.photos/600/300/?image=25','https://picsum.photos/600/300/?image=25','https://picsum.photos/600/300/?image=25']
    }
  }
}
</script>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）