theluyuan/layui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

perf(carousel): 初步完成 carousel 轮播组件

Browse Source
This commit is contained in:
就眠仪式 2021-10-22 16:37:47 +08:00
parent 186f2f8fd5
commit a04dd07764
3 changed files with 49 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
docs/docs/zh-CN/components/carousel.md
View File

@ -2,10 +2,18 @@
<template> <template>
<lay-carousel v-model="active"> <lay-carousel v-model="active">
<lay-carousel-item id="1">条目一</lay-carousel-item> <lay-carousel-item id="1">
<lay-carousel-item id="2">条目二</lay-carousel-item> <div style="color: white;text-align: center;width:100%;height:300px;line-height:300px;background-color:#79C48C;">条目一</div>
<lay-carousel-item id="3">条目三</lay-carousel-item> </lay-carousel-item>
<lay-carousel-item id="4">条目四</lay-carousel-item> <lay-carousel-item id="2">
<div style="color: white;text-align: center;width:100%;height:300px;line-height:300px;background-color:#79C48C;">条目二</div>
</lay-carousel-item>
<lay-carousel-item id="3">
<div style="color: white;text-align: center;width:100%;height:300px;line-height:300px;background-color:#79C48C;">条目三</div>
</lay-carousel-item>
<lay-carousel-item id="4">
<div style="color: white;text-align: center;width:100%;height:300px;line-height:300px;background-color:#79C48C;">条目四</div>
</lay-carousel-item>
</lay-carousel> </lay-carousel>
</template> </template>

2
docs/src/view/home.vue
View File

@ -216,7 +216,7 @@
line-height: 28px; line-height: 28px;
margin: 0 6px; margin: 0 6px;
padding: 0 8px; padding: 0 8px;
border-radius: 2px; border-radius: 4px;
color: #c2c2c2; color: #c2c2c2;
color: rgba(255, 255, 255, 0.8); color: rgba(255, 255, 255, 0.8);
border: 1px solid #c2c2c2; border: 1px solid #c2c2c2;

45
src/module/carousel/index.vue
View File

@ -14,20 +14,31 @@
<li <li
v-for="ss in slots" v-for="ss in slots"
:key="ss" :key="ss"
:class="[ss.props.id === modelValue ? 'layui-this' : '']" :class="[ss.props.id === active ? 'layui-this' : '']"
@click.stop="change(ss.props.id)" @click.stop="change(ss.props.id)"
></li> ></li>
</ul> </ul>
</div> </div>
<button class="layui-icon layui-carousel-arrow" lay-type="sub" @click="prev"></button <button
><button class="layui-icon layui-carousel-arrow" lay-type="add" @click="next"></button> class="layui-icon layui-carousel-arrow"
lay-type="sub"
@click="prev"
>
</button
><button
class="layui-icon layui-carousel-arrow"
lay-type="add"
@click="next"
>
</button>
</div> </div>
</template> </template>
<script setup name="LayCarousel" lang="ts"> <script setup name="LayCarousel" lang="ts">
import { withDefaults, defineProps, provide, useSlots, ref } from 'vue' import { withDefaults, defineProps, provide, useSlots, ref } from 'vue'
const slot = useSlots() as any const slot = useSlots() as any
const slots = slot.default && slot.default() const slots = slot.default && (slot.default() as any[])
const props = withDefaults( const props = withDefaults(
defineProps<{ defineProps<{
@ -43,7 +54,7 @@ const props = withDefaults(
const active = ref(props.modelValue) const active = ref(props.modelValue)
const emit = defineEmits(['update:modelValue','change','close']) const emit = defineEmits(['update:modelValue', 'change', 'close'])
const change = function (id: any) { const change = function (id: any) {
emit('update:modelValue', id) emit('update:modelValue', id)
@ -53,11 +64,27 @@ const change = function (id: any) {
provide('active', active) provide('active', active)
const prev = function() { const prev = function () {
console.log("上一页") for(var i = 0; i< slots.length; i++) {
if(slots[i].props.id === active.value) {
if(i === 0) {
return false;
}
active.value = slots[i - 1].props.id
break;
}
}
} }
const next = function() { const next = function () {
console.log("下一页") for(var i = 0; i< slots.length; i++) {
if(slots[i].props.id === active.value) {
if(i === slots.length - 1) {
return false;
}
active.value = slots[i + 1].props.id
break;
}
}
} }
</script> </script>