プロパティは
このオブジェクトを作るためにクラスを作成する
久しぶりに感想を見たら、要望も多かった。SwiftUIにするべきか、、、
export interface CarouselPerson {
name: string
imagePath: string
comments: string
//union型
star: 1 | 2 | 3 | 4 | 5
}
const client_1: CarouselPerson = {
name: '大変素晴らしいアプリだと思います',
comments:
'大変素晴らしいアプリだと思います。i os の更新でたまに長期間使用不能(事業で使う方には致命傷)になるので☆一個減点です。',
imagePath: require('@/assets/images/client/01.jpg'),
star: 4,
}
export default class HomeFrontCarouselsComponent extends Vue {
data() {
return {
carouselPersons: [client_1, client_2, client_3],
//カルーセルの番号
model: 0,
}
}
}
//model はカルーセルの番号
<v-carousel v-model="model">
<v-carousel-item
//先程の配列
v-for="(person, i) in carouselPersons"
//一意に決まるもの
:key="i"
>
<v-sheet
:person="person"
height="100%"
tile
>
<v-row
class="fill-height"
align="center"
justify="center"
style="flex-direction: column;"
>
//親要素のv-avatarで画像のサイズを決める
<v-avatar
class="mb-10"
height="100"
width="100"
>
<v-img
width="100%"
:aspect-ratio="1/1"
:src="person.imagePath"
style="object-fit: fill;"
/>
</v-avatar>
<div class="mb-7">{{person.comments}}</div>
<v-rating
class="mb-7"
color="warning"
length="5"
small
readonly
:value="person.star"
></v-rating>
<div>{{person.name}}</div>
</v-row>
</v-sheet>
</v-carousel-item>
</v-carousel>
親要素のv-avatarで画像サイズを決めるのが手間取った
v-imgの中でやってもvuetifyのcssが強くどうにもならなかった
style=”object-fit: fill;
で画像をfitさせるのがポイント
ご連絡、質問は、Facebook よりお願いいたします。