50 lines
921 B
Vue
50 lines
921 B
Vue
<template>
|
|
<div :class="prefixCls" :style="{ width: barWidth, transition: '0.3s all' }">
|
|
<div style="float: left">
|
|
<slot name="extra">{{ extra }}</slot>
|
|
</div>
|
|
<div style="float: right">
|
|
<slot></slot>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'FooterToolBar',
|
|
props: {
|
|
prefixCls: {
|
|
type: String,
|
|
default: 'ant-pro-footer-toolbar'
|
|
},
|
|
collapsed: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
isMobile: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
siderWidth: {
|
|
type: Number,
|
|
default: undefined
|
|
},
|
|
extra: {
|
|
type: [String, Object],
|
|
default: ''
|
|
}
|
|
},
|
|
computed: {
|
|
barWidth () {
|
|
return this.isMobile ? undefined : `calc(100% - ${this.collapsed ? 80 : this.siderWidth || 256}px)`
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.ant-pro-footer-toolbar {
|
|
z-index: 1001;
|
|
}
|
|
</style>
|