forked from opentiny/tiny-vue
fix: add carousel component of demo (#1609)
* feat: add carousel of demo show * fix: update carousel of demo show * fix: update review code * fix: add e2e-test
This commit is contained in:
James
GitHub
parent
6cd6630bdf
commit
65eb13eabd
|
|
@ -255,7 +255,7 @@ export default {
|
|||
'en-US': 'Default slot'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'manual-play'
|
||||
pcDemo: 'card-show'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,98 @@
|
|||
<template>
|
||||
<tiny-carousel height="300px" arrow="always" indicator-position="outside">
|
||||
<tiny-carousel-item class="carousel-item-demo" v-for="(item, pos) in state.cardData" :key="item">
|
||||
<template #default>
|
||||
<div v-for="num in state.cardData.length" :key="num">
|
||||
<div v-if="num === pos + 1" :class="['card-dsp']">
|
||||
<tiny-card
|
||||
v-for="(child, childIndex) in item.children"
|
||||
:key="childIndex"
|
||||
:title="child.cardTitle"
|
||||
:type="child.cardType"
|
||||
:src="child.cardSrc"
|
||||
custom-class="card-demo"
|
||||
@click="curIndex = childIndex"
|
||||
:status="curIndex === childIndex ? 'success' : ''"
|
||||
>
|
||||
<div>{{ child.content }}</div>
|
||||
</tiny-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</tiny-carousel-item>
|
||||
</tiny-carousel>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive } from 'vue'
|
||||
import { Carousel as TinyCarousel, CarouselItem as TinyCarouselItem, Card as TinyCard } from '@opentiny/vue'
|
||||
|
||||
let curIndex = ref(0)
|
||||
const dsj = ref(`${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/dsj.png`)
|
||||
const userHead = ref(`${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/user-head.png`)
|
||||
const state = reactive({
|
||||
cardData: [
|
||||
{
|
||||
children: [
|
||||
{
|
||||
cardTitle: '1-1',
|
||||
cardType: 'text',
|
||||
cardSrc: '',
|
||||
content: '1-1-content'
|
||||
},
|
||||
{
|
||||
cardTitle: '1-2',
|
||||
cardType: 'image',
|
||||
cardSrc: `${dsj.value}`,
|
||||
content: '1-2-content'
|
||||
},
|
||||
{
|
||||
cardTitle: '1-3',
|
||||
cardType: 'logo',
|
||||
cardSrc: `${userHead.value}`,
|
||||
content: '1-3-content'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
children: [
|
||||
{
|
||||
cardTitle: '2-1',
|
||||
cardType: 'text',
|
||||
cardSrc: '',
|
||||
content: '1-1-content'
|
||||
},
|
||||
{
|
||||
cardTitle: '2-2',
|
||||
cardType: 'image',
|
||||
cardSrc: `${dsj.value}`,
|
||||
content: '1-2-content'
|
||||
},
|
||||
{
|
||||
cardTitle: '2-3',
|
||||
cardType: 'logo',
|
||||
cardSrc: `${userHead.value}`,
|
||||
content: '1-3-content'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.card-dsp {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.mb {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.card-demo {
|
||||
width: 30%;
|
||||
height: 300px;
|
||||
}
|
||||
.card-demo:hover {
|
||||
border-color: #1476ff;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('轮播卡片', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('carousel#card-show')
|
||||
const preview = page.locator('#card-show')
|
||||
await preview
|
||||
.locator('div')
|
||||
.filter({ hasText: /^1-11-1-content$/ })
|
||||
.first()
|
||||
.click()
|
||||
await preview.getByRole('button').nth(1).click()
|
||||
await preview
|
||||
.locator('div')
|
||||
.filter({ hasText: /^2-11-1-content$/ })
|
||||
.first()
|
||||
.click()
|
||||
})
|
||||
|
|
@ -0,0 +1,104 @@
|
|||
<template>
|
||||
<tiny-carousel height="300px" arrow="always" indicator-position="outside">
|
||||
<tiny-carousel-item class="carousel-item-demo" v-for="(item, pos) in cardData" :key="item">
|
||||
<template #default>
|
||||
<div v-for="num in cardData.length" :key="num">
|
||||
<div v-if="num === pos + 1" :class="['card-dsp']">
|
||||
<tiny-card
|
||||
v-for="(child, childIndex) in item.children"
|
||||
:key="childIndex"
|
||||
:title="child.cardTitle"
|
||||
:type="child.cardType"
|
||||
:src="child.cardSrc"
|
||||
custom-class="card-demo"
|
||||
@click="curIndex = childIndex"
|
||||
:status="curIndex === childIndex ? 'success' : ''"
|
||||
>
|
||||
<div>{{ child.content }}</div>
|
||||
</tiny-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</tiny-carousel-item>
|
||||
</tiny-carousel>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Carousel, CarouselItem, Card } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyCarousel: Carousel,
|
||||
TinyCarouselItem: CarouselItem,
|
||||
TinyCard: Card
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
curIndex: 0,
|
||||
cardData: [
|
||||
{
|
||||
children: [
|
||||
{
|
||||
cardTitle: '1-1',
|
||||
cardType: 'text',
|
||||
cardSrc: '',
|
||||
content: '1-1-content'
|
||||
},
|
||||
{
|
||||
cardTitle: '1-2',
|
||||
cardType: 'image',
|
||||
cardSrc: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/dsj.png`,
|
||||
content: '1-2-content'
|
||||
},
|
||||
{
|
||||
cardTitle: '1-3',
|
||||
cardType: 'logo',
|
||||
cardSrc: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/user-head.png`,
|
||||
content: '1-3-content'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
children: [
|
||||
{
|
||||
cardTitle: '2-1',
|
||||
cardType: 'text',
|
||||
cardSrc: '',
|
||||
content: '1-1-content'
|
||||
},
|
||||
{
|
||||
cardTitle: '2-2',
|
||||
cardType: 'image',
|
||||
cardSrc: `/static/images/dsj.png`,
|
||||
content: '1-2-content'
|
||||
},
|
||||
{
|
||||
cardTitle: '2-3',
|
||||
cardType: 'logo',
|
||||
cardSrc: `/static/images/user-head.png`,
|
||||
content: '1-3-content'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.card-dsp {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.mb {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.card-demo {
|
||||
width: 30%;
|
||||
height: 300px;
|
||||
}
|
||||
.card-demo:hover {
|
||||
border-color: #1476ff;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-button @click="boxVisibility = true">弹出轮播</tiny-button>
|
||||
<tiny-dialog-box
|
||||
:visible="boxVisibility"
|
||||
@update:visible="boxVisibility = $event"
|
||||
max-height="500"
|
||||
title="弹窗事例"
|
||||
width="30%"
|
||||
:is-form-reset="false"
|
||||
>
|
||||
<tiny-carousel height="150px" arrow="always" autoplay>
|
||||
<tiny-carousel-item class="carousel-item-demo" v-for="item in 4" :key="item">
|
||||
<h3>{{ item }}</h3>
|
||||
</tiny-carousel-item>
|
||||
</tiny-carousel>
|
||||
<template #footer>
|
||||
<tiny-button type="primary" @click="handleSubmit">确定</tiny-button>
|
||||
</template>
|
||||
</tiny-dialog-box>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import {
|
||||
Carousel as TinyCarousel,
|
||||
CarouselItem as TinyCarouselItem,
|
||||
Button as TinyButton,
|
||||
DialogBox as TinyDialogBox
|
||||
} from '@opentiny/vue'
|
||||
|
||||
const boxVisibility = ref(false)
|
||||
function handleSubmit() {
|
||||
boxVisibility.value = false
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.tiny-carousel__item h3 {
|
||||
color: #475669;
|
||||
opacity: 0.75;
|
||||
line-height: 150px;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
font-size: 25px;
|
||||
}
|
||||
|
||||
.carousel-item-demo:nth-child(2n) {
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
.carousel-item-demo:nth-child(2n + 1) {
|
||||
background-color: #edf0f3;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('弹窗展示', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('carousel#dialog-show')
|
||||
const preview = page.locator('#dialog-show')
|
||||
await preview.getByRole('button', { name: '弹出轮播' }).click()
|
||||
await preview.locator('.tiny-carousel__container > button:nth-child(2)').click()
|
||||
await preview.getByLabel('Close').click()
|
||||
})
|
||||
|
|
@ -0,0 +1,64 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-button @click="boxVisibility = true">弹出轮播</tiny-button>
|
||||
<tiny-dialog-box
|
||||
:visible="boxVisibility"
|
||||
@update:visible="boxVisibility = $event"
|
||||
max-height="500"
|
||||
title="弹窗事例"
|
||||
width="30%"
|
||||
:is-form-reset="false"
|
||||
>
|
||||
<tiny-carousel height="150px" arrow="always" autoplay>
|
||||
<tiny-carousel-item class="carousel-item-demo" v-for="item in 4" :key="item">
|
||||
<h3>{{ item }}</h3>
|
||||
</tiny-carousel-item>
|
||||
</tiny-carousel>
|
||||
<template #footer>
|
||||
<tiny-button type="primary" @click="handleSubmit">确定</tiny-button>
|
||||
</template>
|
||||
</tiny-dialog-box>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Carousel, CarouselItem, Button, DialogBox } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyCarousel: Carousel,
|
||||
TinyCarouselItem: CarouselItem,
|
||||
TinyDialogBox: DialogBox,
|
||||
TinyButton: Button
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
boxVisibility: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleSubmit() {
|
||||
this.boxVisibility = false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.tiny-carousel__item h3 {
|
||||
color: #475669;
|
||||
opacity: 0.75;
|
||||
line-height: 150px;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
font-size: 25px;
|
||||
}
|
||||
|
||||
.carousel-item-demo:nth-child(2n) {
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
.carousel-item-demo:nth-child(2n + 1) {
|
||||
background-color: #edf0f3;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -171,6 +171,30 @@ export default {
|
|||
'en-US': ''
|
||||
},
|
||||
codeFiles: ['carousel-events.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'card-show',
|
||||
name: {
|
||||
'zh-CN': '轮播卡片',
|
||||
'en-US': 'Carousel Card'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>通过设置 <code>default</code> 插槽，自定义卡片轮播场景。</p>',
|
||||
'en-US': '<p>Customize the card carousel scene by setting <code>default</code> slots.</p>'
|
||||
},
|
||||
codeFiles: ['card-show.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'dialog-show',
|
||||
name: {
|
||||
'zh-CN': '弹窗展示',
|
||||
'en-US': 'Dialog Show'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>在弹窗中嵌入轮播场景。</p>',
|
||||
'en-US': '<p>Embed a carousel scene in the pop-up window.</p>'
|
||||
},
|
||||
codeFiles: ['dialog-show.vue']
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue