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

✨(component): pageHeader组件 新增默认插槽设置,用于开发者想自定义右侧内容,而不仅仅是局限于文字

Browse Source 
ISSUES CLOSED: #I4V3VC
This commit is contained in:
0o张不歪o0 2022-06-20 13:44:11 +08:00
parent 80807a2ceb
commit 2a93cfee7b
2 changed files with 32 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
package/component/src/component/pageHeader/index.vue
View File

@ -4,7 +4,10 @@
<i class="layui-icon layui-icon-return"></i>
<div class="lay-page-header__title">{{ backText }}</div>
</div>
<div class="lay-page-header__content">{{ content }}</div>
<div class="lay-page-header__content">
<slot v-if="slots.default"></slot>
<template v-else> {{ content }}</template>
</div>
</div>
</template>
@ -14,7 +17,9 @@ export default {
};
</script>
<script lang="ts" setup>
import { useSlots } from "vue";
import "./index.less";
export interface LayPageHeaderProps {
content?: string;
backText?: string;
@ -25,4 +30,6 @@ const props = withDefaults(defineProps<LayPageHeaderProps>(), {
});
const emits = defineEmits(["back"]);
const slots = useSlots();
</script>

25
package/document/src/document/zh-CN/components/pageHeader.md
View File

@ -38,6 +38,29 @@ const handleBack=()=>{
:::
::: title PageHeader 插槽
:::
::: demo 使用 默认插槽可以自定义右侧内容 同时content属性将失效
<template>
<lay-page-header backText="back" @back="handleBack">
<span>Do what ever you want...</span>&nbsp;
<lay-icon type="layui-icon-face-smile" color="red"></lay-icon> &nbsp;
<lay-icon type="layui-icon-face-smile" color="orange"></lay-icon> &nbsp;
<lay-icon type="layui-icon-face-smile" color="green"></lay-icon> &nbsp;
<lay-icon type="layui-icon-face-smile" color="cyan"></lay-icon> &nbsp;
<lay-icon type="layui-icon-face-smile" color="blue"></lay-icon> &nbsp;
<lay-icon type="layui-icon-face-smile" color="black"></lay-icon> &nbsp;
</lay-page-header>
</template>
<script setup>
const handleBack=()=>{
alert('点击返回回调')
}
</script>
:::
::: title PageHeader 属性
:::
@ -46,7 +69,7 @@ const handleBack=()=>{
| 属性 | 描述 | 可选值 |
| ------ | ---- | -------------- |
| content| 标题 | -- |
| content| 标题,当前默认插槽不为空时失效 | -- |
| backText| 返回文本 | 默认 "返回" |
:::