【 Nuxt 】 v-card를 가로 줄 때 텍스트와 버튼 위치에 통일성을 가져온다

소개

Nuxt(Vue)에서 본 기사와 같은 내용은 볼 수 없었기 때문에, 여러분의 도움이 되면 다행입니다.
또한이 기사는 Vuetify를 사용합니다.

그럼 즉시 내용에 다가갑시다.

최종 이미지

시작

<v-row>
        <v-col
          v-for="(item, i) in items"
          :key="i"
          class="d-flex"
          cols="12"
          sm="6"
          md="6"
          lg="4"
        >
          <v-card
            outlined
            max-width="100%"
            height="100%"
            class="d-flex flex-column"
          >
            <v-img :src="item.img" style="max-height:214px" height="214px" />
            <v-card-title
              class="justify-center"
              v-text="item.title"
            />
            <v-card-text
              :style="'font-size:0.9rem'"
              height="100%"
              v-html="item.text"
            />
            <v-spacer />
            <v-card-actions class="mb-7">
              <a :href="item.link" target="_blank" style="text-decoration: none">
                <v-btn
                  text
                  color="primary"
                  class="mb-5"
                  :style="'font-size:1.0rem'"
                >
                  <span>{{ item.description }}</span>
                </v-btn>
              </a>
            </v-card-actions>
          </v-card>
        </v-col>
      </v-row>

* 포인트는 v-card에 class="d-flex flex-column"을 부여시킴으로써 v-spacer가 잘 동작합니다.

export default {
  data () {
    return {
      items: [
        {
          title: 'ネーム1',
          text: 'テキス1トテキスト1テキスト1テキスト1テキスト1。',
          img: '/images/image1',
          link: 'https://?????????',
          description: 'ボタンの中身',
        },        {
          title: 'ネーム2',
          text: 'テキス2トテキスト2テキスト2テキスト2テキスト2。',
          img: '/images/image2',
          link: 'https://?????????',
          description: 'ボタンの中身',
        },        {
          title: 'ネーム3',
          text: 'テキス3トテキスト3テキスト3テキスト3テキスト3。',
          img: '/images/image3',
          link: 'https://?????????',
          description: 'ボタンの中身',
        }
      ]
    }
  }
}

결론

v-card에 class="d-flex flex-column"을 부여시켜 v-spacer를 잘 구현할 수 있었습니다.
조금이라도 도움이 되면 LGTM을 부탁드립니다 🙇‍♂️

Reference

이 문제에 관하여(【 Nuxt 】 v-card를 가로 줄 때 텍스트와 버튼 위치에 통일성을 가져온다), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/Motonosuke/items/34512917704a1c883832

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다