update: 保存按钮组件

src/components/layout/hb-form-bottom.vue

+<template>
+  <div class="hb-form-bottom" :style="{ width: width, 'justify-content': horizontal == 'left' ? 'flex-start' : horizontal == 'right' ? 'flex-end' : 'center' }">
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'HbFormBottom',
+  inject: ['layoutVm'],
+  props: {
+    horizontal: {
+      type: String,
+      // 可选值： left：居左 right：居右
+      default: 'center'
+    }
+  },
+  data() {
+    return {
+      width: '0px'
+    };
+  },
+  mounted() {
+    this.width = this.$parent.$el.offsetWidth + 'px';
+    this.layoutVm.pagePaddingBottom = '56px';
+  },
+  beforeDestroy() {
+    this.layoutVm.pagePaddingBottom = 0;
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.hb-form-bottom {
+  display: flex;
+  align-items: center;
+  position: fixed;
+  right: 0;
+  bottom: 0;
+  z-index: 100;
+  width: calc(100% - 12px);
+  height: 56px;
+  background: #ffffff;
+  box-shadow: 1px -2px 8px 0px rgba(220, 223, 230, 0.6);
+}
+</style>

src/components/layout/index.vue

@@ -4,7 +4,7 @@
     <aside-menu v-show="showAside" :menu-list="activedMenu.length > 0 ? activedMenu[0].childList : []" :actived-code="activedMenu.length > 2 ? activedMenu[2].menuCode : ''"></aside-menu>
     <div class="hb-layout-content">
       <bread-menu v-if="activedMenu.length > 3" :menu-list="activedMenu.slice(2)"></bread-menu>
-      <div class="hb-layout-pager" :style="{ height: activedMenu.length > 3 ? `calc(100% - 30px)` : '100%' }">
+      <div class="hb-layout-pager" :style="{ height: activedMenu.length > 3 ? `calc(100% - 30px)` : '100%', 'padding-bottom': pagePaddingBottom }">
         <!-- 页面内容 -->
         <!-- <router-view v-if="activeBrand" :brandId="activeBrand" :activeGroupId="activeGroup" :tabType="activeTab" @showTab="showTab"></router-view> -->
         <keep-alive v-if="$route.meta.keepAlive">
@@ -37,6 +37,7 @@ export default {
   data() {
     return {
       showAside: true,
+      pagePaddingBottom: '0px',
       enterpriseId: '',
       // 菜单平铺数据
       flatMenuList: [],

src/main.js

@@ -31,6 +31,7 @@ import htmlToPdf from '@/components/utils/htmlToPdf';
 import VueAMap from 'vue-amap';
 import Vue from 'vue';
 import buttonCode from '../menu-data/button-code.json';
+import HbFormBottom from '@/components/layout/hb-form-bottom.vue';
 
 // Vue.use(contentmenu);
 Vue.use(VueAMap);
@@ -46,6 +47,7 @@ Vue.use(vueOfficeUploadImage);
 Vue.use(vueOfficeArea);
 Vue.use(vueOfficeAside);
 Vue.use(vueOfficeHeader);
+Vue.component('hb-form-bottom', HbFormBottom);
 
 Vue.config.productionTip = false;
 // Vue.use(ElementUI, { size: 'large' });

src/views/apps/order-evaluate/evaluate-set.vue

@@ -54,9 +54,9 @@
         </el-form-item>
       </el-form>
     </el-form>
-    <el-button type="primary" @click="onSave">保存</el-button>
-    <!-- <hb-form-bottom>
-    </hb-form-bottom> -->
+    <hb-form-bottom>
+      <el-button type="primary" @click="onSave">保存</el-button>
+    </hb-form-bottom>
   </div>
 </template>
 <script>