PageFooter 页脚

说明

主要用于页面底部（吸底）区域内容展示，比如编辑页面的操作按钮等。model=fixed 表示相对于页面吸底，model=absolute 表示相对于父元素（需要position:relative）吸底

用法示例

基础用法

<template>

  <div style="border:1px solid red;height:100px;position:relative;">
    <y-page-footer :model="model" class="page-footer">
      <y-button @click="handleClick">{{ model === 'fixed' ? '相对父元素' : '相对页面' }}</y-button>
    </y-page-footer>

  </div>


</template>

<script setup lang="ts">
import { ref } from 'vue';

const model = ref<'fixed' | 'absolute'>('absolute');

const handleClick = () => {
  model.value = model.value === 'fixed' ? 'absolute' : 'fixed';
}
</script>

<style scoped>
.page-footer {
  background-color: #eee;
}
</style>

隐藏源码

API

Attributes

属性名	说明	类型	默认值
height	组件高度，有效的css尺寸值	string / number	'56px'
left	组件左侧距离，有效的css尺寸值	string / number	0
rifht	组件右侧距离，有效的css尺寸值	string / number	0
model	组件固定时相对于页面或者父元素	enum	'fixed'

Slots

名称	说明	参数
default	内容	object