[新增] container 容器组件, 支持 流模式 与 普通模式

This commit is contained in:
就眠仪式 2021-09-29 09:42:11 +08:00
parent 1689ba0375
commit 34418908f2
6 changed files with 53 additions and 2 deletions

View File

@ -27,6 +27,8 @@ import LayTimeline from "./module/timeline/index"
import LayTimelineItem from "./module/timelineItem/index"
import LayTextarea from "./module/textarea/index"
import LaySwitch from "./module/switch/index"
import LayCollapse from "./module/collapse/index"
import LayContainer from "./module/container/index"
const components: Record<string, IDefineComponent> = {
LayRadio,
@ -52,7 +54,9 @@ const components: Record<string, IDefineComponent> = {
LayTimeline,
LayTimelineItem,
LayTextarea,
LaySwitch
LaySwitch,
LayCollapse,
LayContainer
}
const install = (app: App, options?: InstallOptions): void => {
@ -90,6 +94,8 @@ export {
LayTimelineItem,
LayTextarea,
LaySwitch,
LayCollapse,
LayContainer,
install,
}

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 || 'LayCollapse', Component)
}
export default Component as IDefineComponent

View File

@ -0,0 +1,9 @@
<template>
<div class="layui-collapse">
<slot></slot>
</div>
</template>
<script setup name="LayCollapse" lang="ts">
</script>

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 || 'LayContainer', Component)
}
export default Component as IDefineComponent

View File

@ -0,0 +1,17 @@
<template>
<div :class="classes">
<slot></slot>
</div>
</template>
<script setup name="LayContainer" lang="ts">
import { defineProps } from '@vue/runtime-core'
const props =
defineProps<{
fluid?: boolean
}>()
const classes = props.fluid ? 'layui-fluid' : 'layui-container'
</script>

View File

@ -1,9 +1,10 @@
<template>
<div class="layui-side">
<div class="layui-side-scroll">
<slot></slot>
</div>
</div>
</template>
<script setup name="LaySide" lang="ts">
</script>