Skip to content

Commit 9100eb9

Browse files
James-9696James-9696
authored
fix(carousel): [carousel]modify smb theme (#2125)
1 parent 5bce345 commit 9100eb9

File tree

12 files changed

+258
-35
lines changed

12 files changed

+258
-35
lines changed

‎examples/sites/demos/apis/carousel.js‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -111,6 +111,21 @@ export default {
111111
pcDemo: 'close-loop',
112112
mfDemo: ''
113113
},
114+
{
115+
name: 'disabled',
116+
type: 'boolean',
117+
defaultValue: 'false',
118+
desc: {
119+
'zh-CN': '控制轮播箭头禁用状态，设置为 true 则禁用',
120+
'en-US': 'Control the disabled state of the carousel arrow, set to true to disable'
121+
},
122+
meta: {
123+
stable: '3.19.0'
124+
},
125+
mode: ['pc'],
126+
pcDemo: 'close-loop',
127+
mfDemo: ''
128+
},
114129
{
115130
name: 'show-title',
116131
type: 'boolean',

‎examples/sites/demos/pc/app/carousel/card-show-composition-api.vue‎

Lines changed: 102 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,16 @@
11
<template>
2-
<tiny-carousel height="300px" arrow="always" indicator-position="outside">
2+
<tiny-carousel arrow="never" height="300px" indicator-position="none" ref="carouselRef" :initial-index="index - 1">
3+
<div class="btn-layout">
4+
<div>
5+
<tiny-button type="text" @click="prev" :disabled="disabledLeft" :icon="TinyIconChevronLeft"> </tiny-button>
6+
</div>
7+
<div>
8+
<tiny-button type="text" @click="next" :disabled="disabledRight" :icon="TinyIconChevronRight"></tiny-button>
9+
</div>
10+
</div>
311
<tiny-carousel-item class="carousel-item-demo" v-for="(item, pos) in state.cardData" :key="item">
412
<template #default>
5-
<div v-for="num in state.cardData.length" :key="num">
13+
<div class="card-layout" v-for="num in state.cardData.length" :key="num">
614
<div v-if="num === pos + 1" :class="['card-dsp']">
715
<tiny-card
816
v-for="(child, childIndex) in item.children"
@@ -23,10 +31,23 @@
2331
</template>
2432

2533
<script setup>
26-
import { ref, reactive } from 'vue'
27-
import { Carousel as TinyCarousel, CarouselItem as TinyCarouselItem, Card as TinyCard } from '@opentiny/vue'
34+
import { ref, reactive, onMounted } from 'vue'
35+
import {
36+
Carousel as TinyCarousel,
37+
CarouselItem as TinyCarouselItem,
38+
Card as TinyCard,
39+
Button as TinyButton
40+
} from '@opentiny/vue'
41+
import { IconChevronRight, IconChevronLeft } from '@opentiny/vue-icon'
42+
43+
const TinyIconChevronRight = IconChevronRight()
44+
const TinyIconChevronLeft = IconChevronLeft()
2845
2946
let curIndex = ref(0)
47+
const index = ref(1)
48+
let disabledLeft = ref(false)
49+
let disabledRight = ref(false)
50+
const carouselRef = ref()
3051
const dsj = ref(`${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/dsj.png`)
3152
const userHead = ref(`${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/user-head.png`)
3253
const state = reactive({
@@ -78,25 +99,99 @@ const state = reactive({
7899
cardType: 'logo',
79100
cardSrc: `${userHead.value}`,
80101
content: '1-3-content'
102+
},
103+
{
104+
cardTitle: '2-4',
105+
cardType: 'logo',
106+
cardSrc: `${userHead.value}`,
107+
content: '2-4-content'
81108
}
82109
]
83110
}
84111
]
85112
})
113+
114+
onMounted(() => {
115+
disableStatus()
116+
})
117+
118+
const next = () => {
119+
index.value = Math.min(index.value + 1, 8)
120+
carouselRef.value.next()
121+
disableStatus()
122+
}
123+
124+
const prev = () => {
125+
index.value = Math.max(index.value - 1, 0)
126+
carouselRef.value.prev()
127+
disableStatus()
128+
}
129+
130+
const disableStatus = () => {
131+
disabledRight.value = false
132+
disabledLeft.value = false
133+
if (index.value === 1) {
134+
disabledLeft.value = true
135+
disabledRight.value = false
136+
}
137+
if (index.value === state.cardData.length) {
138+
disabledRight.value = true
139+
disabledLeft.value = false
140+
}
141+
}
86142
</script>
87143
88-
<style scoped>
144+
<style lang="less" scoped>
145+
.carousel-item-demo {
146+
display: flex;
147+
justify-content: center;
148+
}
89149
.card-dsp {
90150
display: flex;
91151
justify-content: flex-start;
92-
padding: 0 4px 0 12px;
152+
align-items: center;
153+
height: 100%;
93154
}
94155
.mb {
95156
margin-bottom: 20px;
96157
}
97158
.card-demo {
98159
width: 25%;
99-
height: 300px;
100160
margin-right: 8px;
161+
height: 200px;
162+
&:last-child {
163+
margin-right: 0;
164+
}
165+
&:hover {
166+
border-color: #1476ff;
167+
}
168+
}
169+
.btn-layout {
170+
position: relative;
171+
display: flex;
172+
justify-content: space-between;
173+
top: 45%;
174+
z-index: 10;
175+
padding: 0 76px;
176+
}
177+
/deep/ .tiny-button.tiny-button--text.tiny-button.is-only-icon {
178+
font-size: 16px;
179+
border: none;
180+
.tiny-svg {
181+
fill: #808080;
182+
}
183+
&.is-disabled {
184+
.tiny-svg {
185+
fill: #c2c2c2;
186+
}
187+
}
188+
&:hover {
189+
background-color: transparent;
190+
}
191+
&:not(.is-disabled) {
192+
.tiny-svg:hover {
193+
fill: #191919;
194+
}
195+
}
101196
}
102197
</style>

‎examples/sites/demos/pc/app/carousel/card-show.spec.ts‎

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,11 @@ test('轮播卡片', async ({ page }) => {
44
page.on('pageerror', (exception) => expect(exception).toBeNull())
55
await page.goto('carousel#card-show')
66
const preview = page.locator('#card-show')
7-
await preview
8-
.locator('div')
9-
.filter({ hasText: /^1-11-1-content$/ })
10-
.first()
11-
.click()
12-
await preview.getByRole('button').nth(1).click()
7+
const btnRight = preview.getByRole('button').nth(1)
8+
await btnRight.click()
139
await preview
1410
.locator('div')
1511
.filter({ hasText: /^2-11-1-content$/ })
1612
.first()
17-
.click()
13+
expect(btnRight).toHaveCSS('fill', 'rgb(194, 194, 194)')
1814
})

‎examples/sites/demos/pc/app/carousel/card-show.vue‎

Lines changed: 94 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,16 @@
11
<template>
2-
<tiny-carousel height="300px" arrow="always" indicator-position="outside">
2+
<tiny-carousel arrow="never" height="300px" indicator-position="none" ref="carouselRef" :initial-index="index - 1">
3+
<div class="btn-layout">
4+
<div>
5+
<tiny-button type="text" @click="prev" :disabled="disabledLeft" :icon="TinyIconChevronLeft"> </tiny-button>
6+
</div>
7+
<div>
8+
<tiny-button type="text" @click="next" :disabled="disabledRight" :icon="TinyIconChevronRight"></tiny-button>
9+
</div>
10+
</div>
311
<tiny-carousel-item class="carousel-item-demo" v-for="(item, pos) in cardData" :key="item">
412
<template #default>
5-
<div v-for="num in cardData.length" :key="num">
13+
<div class="card-layout" v-for="num in cardData.length" :key="num">
614
<div v-if="num === pos + 1" :class="['card-dsp']">
715
<tiny-card
816
v-for="(child, childIndex) in item.children"
@@ -23,17 +31,24 @@
2331
</template>
2432

2533
<script>
26-
import { Carousel, CarouselItem, Card } from '@opentiny/vue'
34+
import { Carousel, CarouselItem, Card, Button } from '@opentiny/vue'
35+
import { IconChevronRight, IconChevronLeft } from '@opentiny/vue-icon'
2736
2837
export default {
2938
components: {
3039
TinyCarousel: Carousel,
3140
TinyCarouselItem: CarouselItem,
32-
TinyCard: Card
41+
TinyCard: Card,
42+
TinyButton: Button
3343
},
3444
data() {
3545
return {
46+
TinyIconChevronRight: IconChevronRight(),
47+
TinyIconChevronLeft: IconChevronLeft(),
3648
curIndex: 0,
49+
index: 1,
50+
disabledLeft: false,
51+
disabledRight: false,
3752
cardData: [
3853
{
3954
children: [
@@ -82,27 +97,99 @@ export default {
8297
cardType: 'logo',
8398
cardSrc: `/static/images/user-head.png`,
8499
content: '1-3-content'
100+
},
101+
{
102+
cardTitle: '2-4',
103+
cardType: 'logo',
104+
cardSrc: `/static/images/user-head.png`,
105+
content: '2-4-content'
85106
}
86107
]
87108
}
88109
]
89110
}
111+
},
112+
mounted() {
113+
this.disableStatus()
114+
},
115+
methods: {
116+
next() {
117+
this.index = Math.min(this.index + 1, 8)
118+
this.$refs.carouselRef.next()
119+
this.disableStatus()
120+
},
121+
prev() {
122+
this.index = Math.max(this.index - 1, 0)
123+
this.$refs.carouselRef.prev()
124+
this.disableStatus()
125+
},
126+
disableStatus() {
127+
this.disabledRight = false
128+
this.disabledLeft = false
129+
if (this.index === 1) {
130+
this.disabledLeft = true
131+
this.disabledRight = false
132+
}
133+
if (this.index === this.cardData.length) {
134+
this.disabledRight = true
135+
this.disabledLeft = false
136+
}
137+
}
90138
}
91139
}
92140
</script>
93141
94-
<style scoped>
142+
<style lang="less" scoped>
143+
.carousel-item-demo {
144+
display: flex;
145+
justify-content: center;
146+
}
95147
.card-dsp {
96148
display: flex;
97149
justify-content: flex-start;
98-
padding: 0 4px 0 12px;
150+
align-items: center;
151+
height: 100%;
99152
}
100153
.mb {
101154
margin-bottom: 20px;
102155
}
103156
.card-demo {
104157
width: 25%;
105-
height: 300px;
106158
margin-right: 8px;
159+
height: 200px;
160+
&:last-child {
161+
margin-right: 0;
162+
}
163+
&:hover {
164+
border-color: #1476ff;
165+
}
166+
}
167+
.btn-layout {
168+
position: relative;
169+
display: flex;
170+
justify-content: space-between;
171+
top: 45%;
172+
z-index: 10;
173+
padding: 0 76px;
174+
}
175+
/deep/ .tiny-button.tiny-button--text.tiny-button.is-only-icon {
176+
font-size: 16px;
177+
border: none;
178+
.tiny-svg {
179+
fill: #808080;
180+
}
181+
&.is-disabled {
182+
.tiny-svg {
183+
fill: #c2c2c2;
184+
}
185+
}
186+
&:hover {
187+
background-color: transparent;
188+
}
189+
&:not(.is-disabled) {
190+
.tiny-svg:hover {
191+
fill: #191919;
192+
}
193+
}
107194
}
108195
</style>

‎examples/sites/demos/pc/app/carousel/close-loop-composition-api.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<tiny-carousel height="150px" :loop="false" arrow="always">
2+
<tiny-carousel height="150px" loop :disabled="true" arrow="always">
33
<tiny-carousel-item class="carousel-item-demo" v-for="item in 3" :key="item">
44
<h3>{{ item }}</h3>
55
</tiny-carousel-item>

‎examples/sites/demos/pc/app/carousel/close-loop.spec.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ test('关闭循环轮播', async ({ page }) => {
99
const arrow = carousel.locator('.tiny-carousel__arrow')
1010

1111
// 左侧切换按钮应该不可见
12-
await expect(arrow.first()).not.toBeVisible()
12+
await expect(arrow.first()).toBeVisible()
1313
// 点击下一张按钮
1414
await arrow.nth(1).click()
1515
// 当前应该显示第二张幻灯片
@@ -18,7 +18,7 @@ test('关闭循环轮播', async ({ page }) => {
1818
// 当前应该显示第三张幻灯片
1919
await expect(carouselItems.nth(2)).toHaveCSS('transform', 'matrix(1, 0, 0, 1, 0, 0)')
2020
// 右侧切换按钮应该不可见
21-
await expect(arrow.nth(1)).not.toBeVisible()
21+
await expect(arrow.nth(1)).toBeVisible()
2222
// 点击上一张按钮
2323
await arrow.first().click()
2424
// 当前应该显示第一张幻灯片

‎examples/sites/demos/pc/app/carousel/close-loop.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<tiny-carousel height="150px" :loop="false" arrow="always">
2+
<tiny-carousel height="150px" loop :disabled="true" arrow="always">
33
<tiny-carousel-item class="carousel-item-demo" v-for="item in 3" :key="item">
44
<h3>{{ item }}</h3>
55
</tiny-carousel-item>

‎examples/sites/demos/pc/app/carousel/webdoc/carousel.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -52,9 +52,9 @@ export default {
5252
},
5353
desc: {
5454
'zh-CN':
55-
'<p>通过配置 <code>loop</code> 属性为<code>false</code>后，若走马灯幻灯片已切换到最后一项，则将不能再从第一项开始循环切换。即切换到最后一项时，右侧切换箭头不再显示，切换到第一项时，左侧切换箭头不再显示。</p>\n',
55+
'<p>通过配置 <code>loop</code> 属性为<code>true</code>，<code>disabled</code> 属性为<code>true</code>后，若走马灯幻灯片已切换到最后一项，则将不能再从第一项开始循环切换。即切换到最后一项时，右侧切换箭头不再显示，切换到第一项时，左侧切换箭头不再显示。</p>\n',
5656
'en-US':
57-
'<p>After the <code>loop</code> attribute is set to <code>false</code>, if the slide is switched to the last item, the slide cannot be switched cyclically from the first item. That is, when switching to the last item, the right toggle arrow is no longer displayed, and when switching to the first item, the left toggle arrow is no longer displayed. </p>\n'
57+
'<p>After the <code>loop</code> attribute is set to <code>true</code> and the <code>disabled</code> attribute is set to <code>true</code> if the slide is switched to the last item, the slide cannot be switched cyclically from the first item. That is, when switching to the last item, the right toggle arrow is no longer displayed, and when switching to the first item, the left toggle arrow is no longer displayed. </p>\n'
5858
},
5959
codeFiles: ['close-loop.vue']
6060
},

0 commit comments

Comments
 (0)