feat(LMWF): support sticky footer

lbwa · Mar 7, 2020 · 3b73127 · 3b73127
1 parent e699e8c
commit 3b73127
Showing 1 changed file with 27 additions and 4 deletions.
diff --git a/src/layouts/LMainWithFooter.vue b/src/layouts/LMainWithFooter.vue
@@ -1,9 +1,20 @@
 <template>
   <div class="l-mwf">
-    <router-view />
+    <template v-if="sticky">
+      <main :class="{ 'l-mwf__main': true, sticky }">
+        <router-view />
+      </main>
+    </template>
+
+    <router-view v-else />
+
     <footer class="l-mwf__footer">
       Copyright &copy; {{ new Date().getFullYear() }}
-      <a href="http://github.com/lbwa" target="_blank" rel="noopener noreferrer"
+      <a
+        href="http://github.com/lbwa"
+        target="_blank"
+        rel="noopener noreferrer"
+        class="link"
         >Bowen</a
       >
     </footer>
@@ -12,14 +23,26 @@
 
 <script>
 export default {
-  name: 'LMainWithFooter'
+  name: 'LMainWithFooter',
+
+  props: {
+    sticky: {
+      type: Boolean,
+      default: true
+    }
+  }
 }
 </script>
 
 <style lang="sass" scoped>
 .l-mwf
+  &__main
+    &.sticky
+      height: calc(100vh - 60px)
+
   &__footer
-    padding: 20px 0
+    height: 60px
+    line-height: 60px
     font-size: 12px
     text-align: center
 </style>