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

ci(component): 初步集成 滑块 和 轮播 组件

Browse Source
This commit is contained in:
就眠仪式 2021-10-15 22:44:10 +08:00
parent b45df1c1c1
commit b083b50111
7 changed files with 82 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
docs/docs/zh-CN/components/carousel.md Normal file
View File

@ -0,0 +1,19 @@
::: demo
<template>
<lay-carousel></lay-carousel>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
return {
}
}
}
</script>
:::

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

@ -3,25 +3,25 @@
<template>
<ul class="layui-row layui-col-space15">
<li class="layui-col-sm3">
<div style="background-color: #009688;padding:10px;color:whitesmoke;padding:30px">
<div style="background-color: #009688;padding:10px;color:whitesmoke;padding:30px;border-radius:2px;">
<p>#009688</p><p>
</p><p tips="">主色调之一</p>
</div>
</li>
<li class="layui-col-sm3">
<div style="background-color: #5FB878;padding:10px;color:whitesmoke;padding:30px">
<div style="background-color: #5FB878;padding:10px;color:whitesmoke;padding:30px;border-radius:2px;">
<p>#5FB878</p><p>
</p><p tips="">一般用于选中状态</p>
</div>
</li>
<li class="layui-col-sm3">
<div style="background-color: #393D49;padding:10px;color:whitesmoke;padding:30px">
<div style="background-color: #393D49;padding:10px;color:whitesmoke;padding:30px;border-radius:2px;">
<p>#393D49</p><p>
</p><p tips="">通常用于导航</p>
</div>
</li>
<li class="layui-col-sm3">
<div style="background-color: #1E9FFF;padding:10px;color:whitesmoke;padding:30px">
<div style="background-color: #1E9FFF;padding:10px;color:whitesmoke;padding:30px;border-radius:2px;">
<p>#1E9FFF</p><p>
</p><p tips="">经典蓝</p>
</div>
@ -48,25 +48,25 @@ export default {
<template>
<ul class="layui-row layui-col-space15">
<li class="layui-col-sm3">
<div style="background-color: #FFB800;padding:10px;color:whitesmoke;padding:30px">
<div style="background-color: #FFB800;padding:10px;color:whitesmoke;padding:30px;border-radius:2px;">
<p>#FFB800</p><p>
</p><p tips="">暖色系</p>
</div>
</li>
<li class="layui-col-sm3">
<div style="background-color: #FF5722;padding:10px;color:whitesmoke;padding:30px">
<div style="background-color: #FF5722;padding:10px;color:whitesmoke;padding:30px;border-radius:2px;">
<p>#FF5722</p><p>
</p><p tips="">比较引人注意的颜色</p>
</div>
</li>
<li class="layui-col-sm3">
<div style="background-color: #01AAED;padding:10px;color:whitesmoke;padding:30px">
<div style="background-color: #01AAED;padding:10px;color:whitesmoke;padding:30px;border-radius:2px;">
<p>#01AAED</p><p>
</p><p tips="">文本链接着色</p>
</div>
</li>
<li class="layui-col-sm3">
<div style="background-color: #2F4056;padding:10px;color:whitesmoke;padding:30px">
<div style="background-color: #2F4056;padding:10px;color:whitesmoke;padding:30px;border-radius:2px;">
<p>#2F4056</p><p>
</p><p tips="">侧边色</p>
</div>

5
docs/src/layouts/Layout.vue
View File

@ -309,6 +309,11 @@ export default {
title: '滑块',
subTitle: 'slider',
path: '/zh-CN/components/slider',
},{
id: 38,
title: '轮播',
subTitle: 'carousel',
path: '/zh-CN/components/carousel'
}
]

6
docs/src/router/zh-CN.ts
View File

@ -198,7 +198,11 @@ const zhCN = [
path: '/zh-CN/components/slider',
component: () => import('../../docs/zh-CN/components/slider.md'),
meta: { title: '滑块' },
},
},{
path: '/zh-CN/components/carousel',
component: () => import('../../docs/zh-CN/components/carousel.md'),
meta: { title: '轮播' },
}
],
},
]

6
src/index.ts
View File

@ -55,6 +55,8 @@ import LayPage from './module/page/index'
import LayTransfer from './module/transfer/index'
import LayCheckboxGroup from './module/checkboxGroup/index'
import LaySlider from './module/slider/index'
import LayCarousel from './module/carousel/index'
const components: Record<string, IDefineComponent> = {
LayRadio,
@ -109,7 +111,8 @@ const components: Record<string, IDefineComponent> = {
LayPage,
LayTransfer,
LayCheckboxGroup,
LaySlider
LaySlider,
LayCarousel
}
const install = (app: App, options?: InstallOptions): void => {
@ -178,6 +181,7 @@ export {
LayTransfer,
LayCheckboxGroup,
LaySlider,
LayCarousel,
install,
}

9
src/module/carousel/index.ts Normal file
View File

@ -0,0 +1,9 @@
import type { App } from 'vue'
import Component from './index.vue'
import type { IDefineComponent } from '../type/index'
Component.install = (app: App) => {
app.component(Component.name || 'LayCarousel', Component)
}
export default Component as IDefineComponent

31
src/module/carousel/index.vue Normal file
View File

@ -0,0 +1,31 @@
<template>
<div
class="layui-carousel"
id="test1"
lay-anim=""
lay-indicator="inside"
lay-arrow="always"
style="width: 100%; height: 280px"
>
<div carousel-item="">
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div class="layui-this"></div>
</div>
<div class="layui-carousel-ind">
<ul>
<li class=""></li>
<li class=""></li>
<li class=""></li>
<li class=""></li>
<li class="layui-this"></li>
</ul>
</div>
<button class="layui-icon layui-carousel-arrow" lay-type="sub"></button
><button class="layui-icon layui-carousel-arrow" lay-type="add"></button>
</div>
</template>
<script setup name="LayCarousel" lang="ts">
</script>