fpi-componentAppearance
fpi-el-page-layout PC端管理系统通用的布局组件
基础使用
内容传送到了内置了default插槽
<!--
* @Author: mjh
* @Date: 2023-08-22 16:01:55
* @LastEditors: mjh
* @LastEditTime: 2023-08-23 09:11:51
* @Description:
-->
<template>
<div class="container">
<FpiElPageLayout title="这是一个标题">
<div style="height: 14px;font-size: 14px;line-height: 14px;">
内容区域
</div>
</FpiElPageLayout>
</div>
</template>
<script lang="ts" setup></script>
<style scoped>
.container {
width: 100%;
height: 600px;
}
</style>
显示代码
内置返回&Tabs
<!--
* @Author: mjh
* @Date: 2023-08-22 16:01:55
* @LastEditors: mjh
* @LastEditTime: 2023-08-23 09:11:57
* @Description:
-->
<template>
<div class="container">
<FpiElPageLayout
v-model:tab="tab"
title="这是一个标题"
:show-back="showBack"
:show-tabs="showTabs"
:tabs="tabs"
@back="onBack"
>
<div v-show="tab === '1'" style="height: 14px;font-size: 14px;line-height: 14px;">
内容区域1
</div>
<div v-show="tab === '2'" style="height: 14px;font-size: 14px;line-height: 14px;">
内容区域2
</div>
</FpiElPageLayout>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const showBack = true
const onBack = () => {
alert('back')
}
const showTabs = true
const tabs = [{ name: 'tab页面1', code: '1' }, { name: 'tab页面2', code: '2' }]
const tab = ref('1')
</script>
<style scoped>
.container {
width: 100%;
height: 600px;
}
</style>
显示代码
内置插槽
<template>
<div class="container">
<FpiElPageLayout
title="这是一个标题"
>
<template #header-left>
<span style="color: #fff;">头部左侧插槽</span>
</template>
<template #header-right>
<span style="color: #fff;">头部右侧插槽</span>
</template>
<div style="height: 14px;font-size: 14px;line-height: 14px;">
内容区域1
</div>
</FpiElPageLayout>
</div>
</template>
<script lang="ts" setup></script>
<style scoped>
.container {
width: 100%;
height: 600px;
}
</style>
显示代码
自定义内容区多列
如果定义了columns, 则内置的default插槽无法使用
<!--
* @Author: mjh
* @Date: 2023-08-22 17:13:55
* @LastEditors: mjh
* @LastEditTime: 2023-08-23 09:12:03
* @Description:
-->
<template>
<div class="container">
<FpiElPageLayout title="这是一个标题" :columns="columns">
<template #columnOne>
<div style="height: 14px;font-size: 14px;line-height: 14px;">
内容区域1
</div>
</template>
<template #columnTwo>
<div style="height: 14px;font-size: 14px;line-height: 14px;">
内容区域2
</div>
</template>
<template #columnThree>
<div style="height: 14px;font-size: 14px;line-height: 14px;">
内容区域3
</div>
</template>
</FpiElPageLayout>
</div>
</template>
<script lang="ts" setup>
const columns = [
{
slotName: 'columnOne',
defaultWidth: 100, // 可选 默认宽度200, 但是如果为数组的最后一列不生效
maxWidth: 150, // 可选 默认不设置 但是如果为数组的最后一列不生效
minWidth: 80, // 可选 默认不设置 但是如果为数组的最后一列不生效
style: {}, // 可选 默认不设置
class: '', // 可选 默认不设置
hideBorder: false, // 可选 默认false 但是如果为数组的最后一列不生效
disableDrag: false, // 可选 默认false 但是如果为数组的最后一列不生效
},
{
slotName: 'columnTwo',
defaultWidth: 200,
minWidth: 150
},
{
slotName: 'columnThree',
}
]
</script>
<style scoped>
.container {
width: 100%;
height: 600px;
}
</style>
显示代码
属性
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| title | 标题 | string | 可选 | |
| showBack | 是否显示返回按钮 | boolean | 可选 | false |
| showTabs | 是否展示tabs组件 | boolean | 可选 | false |
| tab / v-model:tab | 选择的tab | string | 可选 | |
| tabs | 定义头部tabs内的数据 | {name: string; code: string;}[] | 可选 | [] |
| columns | 主内容区定义分割布局 | ColumnsItem[] | 可选 | [] |
ColumnsItem
| 名称 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| slotName | 插槽名称 | string | 必填 | |
| defaultWidth | 默认宽度 (最后一列时无效) | number | 可选 | 200 |
| maxWidth | 最大宽度 (最后一列时无效) | number | 可选 | |
| minWidth | 最小宽度 (最后一列时无效) | number | 可选 | |
| style | 样式 | CSSProperties | 可选 | |
| class | 类名 | string | ||
| hideBorder | 是否隐藏边 (最后一列时无效) | boolean | 可选 | false |
| disableDrag | 是否禁止拖动 (最后一列时无效) | boolean | 可选 | false |
事件
| 名称 | 说明 | 类型 |
|---|---|---|
| update:tab | 修改tab值 | (tab: string) => void |
| back | 点击返回按钮 | () => void |
插槽
| 名称 | 说明 |
|---|---|
| header-left | 头部标题左侧 |
| header-right | 头部右侧 |
| default | 默认插槽（无columns数据时有效） |
| 动态插槽 columns -> slotName | 可以插入定义的内容区 |
贡献者：
大气-李国帝