| <template> |
| <div class="wrapper"> |
| <navbar |
| :dataRole="dataRole" |
| :height="height" |
| :backgroundColor="backgroundColor" |
| :title="title" |
| :titleColor="titleColor" |
| :leftItemSrc="leftItemSrc" |
| :leftItemTitle="leftItemTitle" |
| :leftItemColor="leftItemColor" |
| :rightItemSrc="rightItemSrc" |
| :rightItemTitle="rightItemTitle" |
| :rightItemColor="rightItemColor" |
| @naviBarRightItemClick="naviBarRightItemClick" |
| @naviBarLeftItemClick="naviBarLeftItemClick" |
| ></navbar> |
| <div class="wrapper" :style="{ marginTop: height }"> |
| <slot></slot> |
| </div> |
| </div> |
| </template> |
| |
| <style scoped> |
| .wrapper { |
| position: absolute; |
| top: 0; |
| left: 0; |
| right: 0; |
| bottom: 0; |
| width: 750; |
| } |
| </style> |
| |
| <script> |
| module.exports = { |
| components: { |
| navbar: require('./navbar.vue') |
| }, |
| props: { |
| dataRole: { default: 'navbar' }, |
| backgroundColor: { default: 'black' }, |
| height: { default: 88 }, |
| title: { default: "" }, |
| titleColor: { default: 'black' }, |
| rightItemSrc: { default: '' }, |
| rightItemTitle: { default: '' }, |
| rightItemColor: { default: 'black' }, |
| leftItemSrc: { default: '' }, |
| leftItemTitle: { default: '' }, |
| leftItemColor: { default: 'black' } |
| }, |
| methods: { |
| naviBarRightItemClick: function (e) { |
| this.$emit('naviBarRightItemClick', e) |
| }, |
| naviBarLeftItemClick: function (e) { |
| this.$emit('naviBarLeftItemClick', e) |
| } |
| } |
| } |
| </script> |