Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit9fad9d2

Browse files
committed
refactor(CCarousel): allow using v-for loop inside component
1 parentcff451d commit9fad9d2

File tree

1 file changed

+36
-34
lines changed

1 file changed

+36
-34
lines changed

‎packages/coreui-vue/src/components/carousel/CCarousel.ts

Lines changed: 36 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import{
22
defineComponent,
33
h,
4-
reactive,
54
ref,
65
VNode,
76
onBeforeMount,
@@ -79,10 +78,15 @@ const CCarousel = defineComponent({
7978
},
8079
setup(props,{ slots}){
8180
constcarouselRef=ref()
82-
consttimeout=ref()
81+
82+
constactive=ref(props.index)
8383
constanimating=ref(false)
84-
constvisible=ref()
8584
constcustomInterval=ref<boolean|number>(props.interval)
85+
constdirection=ref('next')
86+
constitems=ref<VNode[]>([])
87+
consttimeout=ref()
88+
constvisible=ref()
89+
8690
constsetAnimating=(value:boolean)=>{
8791
animating.value=value
8892
}
@@ -105,28 +109,15 @@ const CCarousel = defineComponent({
105109
}
106110
}
107111

108-
conststate=reactive({
109-
items:[]asVNode[],
110-
active:props.index,
111-
direction:'next',
112-
})
113-
114-
onBeforeMount(()=>{
115-
if(slots.default){
116-
//@ts-expect-error TODO: fix types
117-
state.items=slots.default().filter((child)=>child.type.name==='CCarouselItem')
118-
}
119-
})
120-
121-
consthandleControlClick=(direction:string)=>{
112+
consthandleControlClick=(_direction:string)=>{
122113
if(animating.value){
123114
return
124115
}
125-
state.direction=direction
126-
if(direction==='next'){
127-
state.active===state.items.length-1 ?(state.active=0) :state.active++
116+
direction.value=_direction
117+
if(_direction==='next'){
118+
active.value===items.value.length-1 ?(active.value=0) :active.value++
128119
}else{
129-
state.active===0 ?(state.active=state.items.length-1) :state.active--
120+
active.value===0 ?(active.value=items.value.length-1) :active.value--
130121
}
131122
}
132123

@@ -139,19 +130,19 @@ const CCarousel = defineComponent({
139130
}
140131

141132
consthandleIndicatorClick=(index:number)=>{
142-
if(state.active===index){
133+
if(active.value===index){
143134
return
144135
}
145136

146-
if(state.active<index){
147-
state.direction='next'
148-
state.active=index
137+
if(active.value<index){
138+
direction.value='next'
139+
active.value=index
149140
return
150141
}
151142

152-
if(state.active>index){
153-
state.direction='prev'
154-
state.active=index
143+
if(active.value>index){
144+
direction.value='prev'
145+
active.value=index
155146
}
156147
}
157148

@@ -163,6 +154,17 @@ const CCarousel = defineComponent({
163154
}
164155
}
165156

157+
onBeforeMount(()=>{
158+
if(slots.default){
159+
constchildren=typeofslots.default()[0].type==='symbol' ?slots.default()[0].children :slots.default()
160+
161+
if(children&&Array.isArray(children)){
162+
//@ts-expect-error TODO: fix types
163+
items.value=children.filter((child)=>child.type.name==='CCarouselItem')
164+
}
165+
}
166+
})
167+
166168
onMounted(()=>{
167169
window.addEventListener('scroll',handleScroll)
168170
})
@@ -174,7 +176,7 @@ const CCarousel = defineComponent({
174176
return
175177
}
176178

177-
if(!props.wrap&&state.active<state.items.length-1){
179+
if(!props.wrap&&active.value<items.value.length-1){
178180
!animating.value&&cycle()
179181
}
180182
})
@@ -204,23 +206,23 @@ const CCarousel = defineComponent({
204206
{
205207
class:'carousel-indicators',
206208
},
207-
state.items.map((_,index)=>{
209+
items.value.map((_,index)=>{
208210
returnh('button',{
209211
type:'button',
210212
id:index,
211213
'data-coreui-target':'',
212-
...(state.active===index&&{class:'active'}),
214+
...(active.value===index&&{class:'active'}),
213215
onClick:()=>handleIndicatorClick(index),
214216
})
215217
}),
216218
),
217219
h(
218220
'div',
219221
{class:'carousel-inner'},
220-
state.items.map((item,index)=>{
222+
items.value.map((item,index)=>{
221223
returnh(item,{
222-
active:state.active===index ?true :false,
223-
direction:state.direction,
224+
active:active.value===index ?true :false,
225+
direction:direction.value,
224226
})
225227
}),
226228
),

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp