meixioacomponent 0.2.21 → 0.2.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "meixioacomponent",
-  "version": "0.2.21",
+  "version": "0.2.22",
   "private": false,
   "author": "YuRi",
   "main": "lib/meixioacomponent.umd.min.js",

package/packages/components/base/baseIcon/index.vue

@@ -5,10 +5,7 @@
     @click.stop="iconClick"
     :class="{ event: event && !disable, plain: plain, disable: disable }"
   >
-    <i
-      :class="`meixicomponenticonfont ${name}`"
-      :style="{ color: _color, fontSize: _size }"
-    ></i>
+    <i :class="iconName" :style="{ color: _color, fontSize: _size }"></i>
   </div>
 </template>
 
@@ -20,6 +17,10 @@ export default {
   },
 
   props: {
+    iconClass: {
+      type: String,
+      default: "meixi",
+    },
     event: {
       type: Boolean,
       default: false,
@@ -94,6 +95,14 @@ export default {
       }
       return size;
     },
+    iconName() {
+      let _iconClass = this.$props.iconClass;
+      if (_iconClass == "meixi") {
+        return `meixicomponenticonfont ${this.$props.name}`;
+      } else if (_iconClass == "element") {
+        return `${this.$props.name}`;
+      }
+    },
   },
   methods: {
     iconClick() {

package/packages/components/base/baseLineInfoItem/baseLineInfoItem.vue

@@ -147,7 +147,8 @@ export default {
   }
   .infor-value {
     box-sizing: border-box;
-    padding: var(--padding-5) calc(var(--padding-5) * 1.5);
+    padding: var(--padding-5) 0px;
+    padding-left: var(--padding-5);
     span {
       color: var(--font-color-d);
       font-size: var(--font-size-base);

package/packages/components/base/basePopoverButton/index.js

@@ -0,0 +1,6 @@
+import basePopoverButton from "./index.vue";
+
+basePopoverButton.install = function (Vue) {
+  Vue.component(basePopoverButton.name, basePopoverButton);
+};
+export default basePopoverButton;

package/packages/components/base/basePopoverButton/index.vue

@@ -0,0 +1,128 @@
+<template>
+  <el-popover
+    v-model="module"
+    :trigger="trigger"
+    @show="popoverShow"
+    @hide="popoverHide"
+    :placement="placement"
+  >
+    <template>
+      <div class="popover-content" ref="popoverContent">
+        <slot name="popoverContent"></slot>
+      </div>
+    </template>
+    <el-button
+      slot="reference"
+      :size="buttonSize"
+      class="popover-button"
+      :type="module ? 'selected' : 'info'"
+    >
+      <base-icon
+        :size="`s`"
+        :color="module ? 'text-white' : 'd'"
+        :plain="true"
+        :event="true"
+        v-if="buttonIcon"
+        :name="buttonIcon"
+        class="button-icon"
+        :iconClass="iconClass"
+        @iconClick="iconClick"
+      ></base-icon>
+      <span class="inner-span" v-if="buttonText"> {{ buttonText }}</span>
+    </el-button>
+  </el-popover>
+</template>
+
+<script>
+export default {
+  name: "basePopoverButton",
+  data() {
+    return {};
+  },
+
+  props: {
+    // 是否禁用
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    // 触发方式
+    // 	click/focus/hover/manual
+    trigger: {
+      type: String,
+      default: "click",
+    },
+    // 位置
+    // top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end
+    placement: {
+      default: "bottom",
+      type: String,
+    },
+    // button 按钮的大小
+    buttonSize: {
+      default: "small",
+    },
+    // 控制显影的参数
+    value: {
+      default: false,
+    },
+
+    // button文字内容
+    buttonText: {
+      type: String,
+      default: "",
+    },
+
+    // icon的类名
+    buttonIcon: {
+      type: String,
+
+      require: false,
+    },
+
+    iconClass: {
+      type: String,
+      default: "meixi",
+    },
+  },
+  computed: {
+    module: {
+      set(val) {
+        this.$emit("input", val);
+      },
+      get() {
+        return this.$props.value;
+      },
+    },
+  },
+  methods: {
+    popoverShow() {
+      this.$emit("popoverShow");
+    },
+    popoverHide() {
+      this.$emit("poporverHide");
+    },
+    iconClick() {
+      this.module = true;
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.popover-content {
+}
+.popover-button {
+  .button-icon {
+  }
+  /deep/ span {
+    display: flex;
+    align-items: center;
+    flex-flow: row nowrap;
+    justify-content: flex-start;
+  }
+  .inner-span {
+    margin-left: var(--margin-3);
+  }
+}
+</style>

package/packages/components/index.js

@@ -32,6 +32,7 @@ import baseFormWrap from "./proForm/proFormWrap/index";
 import baseProTable from "./proPageTable/index";
 import baseMoverVerifiBar from "./base/baseMoverVerifiBar";
 import baseTimeLine from "./base/baseTimeLine";
+import basePopoverButton from "./base/basePopoverButton";
 // js 文件相关
 import Theme from "../config/theme/theme";
 import DynamicMount from "./dynamicmount/index.js";
@@ -77,6 +78,7 @@ const meixicomponents = [
   baseProTable,
   baseMoverVerifiBar,
   baseTimeLine,
+  basePopoverButton,
 ];
 
 const install = (Vue) => {
@@ -128,6 +130,7 @@ export default {
   baseProTable,
   baseMoverVerifiBar,
   baseTimeLine,
+  basePopoverButton,
   Theme,
   SelectStore,
   useImg,

package/packages/components/proPageTable/oa_pro_footer.vue

@@ -7,25 +7,16 @@
       </div>
     </div>
     <div class="footer-right">
-      <el-popover
-        ref="popover"
-        trigger="click"
-        placement="top"
-        @show="popoverShow"
-        @hide="popoverHide"
+      <basePopoverButton
+        :placement="`top`"
+        v-model="popoverFlag"
+        :iconClass="`element`"
+        :buttonIcon="`el-icon-s-fold`"
       >
-        <template>
+        <template slot="popoverContent">
           <oa_pro_handle_table_borderVue></oa_pro_handle_table_borderVue>
         </template>
-        <el-button
-          size="mini"
-          :type="selected ? 'selected' : 'info'"
-          slot="reference"
-          class="handle-table-border"
-        >
-          <i class="el-icon-s-fold"></i>
-        </el-button>
-      </el-popover>
+      </basePopoverButton>
 
       <base-pagination
         :config="pageConfig"
@@ -38,11 +29,12 @@
 </template>
 
 <script>
+import basePopoverButton from "../base/basePopoverButton/index.vue";
 import oa_pro_handle_table_borderVue from "./oa_pro_handle_table_border.vue";
 export default {
   data() {
     return {
-      selected: false,
+      popoverFlag: false,
     };
   },
   props: {
@@ -57,6 +49,7 @@ export default {
     },
   },
   components: {
+    basePopoverButton,
     oa_pro_handle_table_borderVue,
   },
   methods: {
@@ -68,13 +61,6 @@ export default {
       this.$emit("pageCurrentChange");
       this.$parent.startHttp(false);
     },
-    popoverShow() {
-      this.selected = true;
-    },
-
-    popoverHide() {
-      this.selected = false;
-    },
   },
 };
 </script>
@@ -137,5 +123,9 @@ export default {
       justify-content: flex-end;
     }
   }
+
+  /deep/ .el-button--small {
+    padding: 10px !important;
+  }
 }
 </style>