xt-element-ui 1.0.9 → 1.1.1

package/src/components/layout/BaseCollapse.vue

@@ -0,0 +1,48 @@
+<template>
+  <span>
+    <slot>
+    </slot>
+    <slot v-if="open" name="open">
+    </slot>
+    <slot name="suffix">
+    </slot>
+    <component :is="elTag" v-if="$slots.open" :type="buttonType" plain @click="handleToggle()" style="margin: 0px 0px 18px 10px">
+      <i :class="open?'el-icon-arrow-up':'el-icon-arrow-down'"></i>
+      {{ open?"收 起": moreText }}
+    </component>
+  </span>
+</template>
+<script>
+export default {
+  name: "BaseCollapse",
+  props: {
+    defaultOpen: {
+      type: Boolean,
+      default: false
+    },
+    moreText: {
+      type: String,
+      default: "展 开"
+    },
+    buttonType: {
+      type: String,
+      default: "primary"
+    },
+    elTag: {
+      type: String,
+      default: "elButton" // 支持el标签 及html标签
+    }
+  },
+  data() {
+    return {
+      open: this.defaultOpen || false
+    };
+  },
+  methods: {
+    handleToggle() {
+      this.open = !this.open;
+      this.$emit("change", this.open);
+    }
+  }
+};
+</script>

package/src/components/layout/ExFieldset.vue

@@ -0,0 +1,204 @@
+<template>
+  <fieldset class="exFieldset" :class="[border ? 'is-border' : 'part',type ? `is-${type}`: '',effect?`effect-${effect}`:'' ]">
+    <legend class="fix-top legend">
+      <BaseFlexBox class="title" content="between">
+        <slot name="legend">
+          {{ legend }}
+        </slot>
+      </BaseFlexBox>
+    </legend>
+    <legend class="fix-top tool" v-if="$slots.tool">
+      <BaseFlexBox content="end" gap="0 5">
+        <slot name="tool"></slot>
+      </BaseFlexBox>
+    </legend>
+    <div class="field" v-if="$slots.default">
+      <slot />
+    </div>
+  </fieldset>
+</template>
+<script>
+export default {
+  name: "ExFieldset",
+  props: {
+    legend: {},
+    type: {
+      type: String,
+      default: "info"
+    },
+    effect: {
+      type: String,
+      default: "" // plain  dark
+    },
+    border: {
+      type: Boolean,
+      default: false
+    }
+  }
+};
+</script>
+<style scoped lang="scss">
+.exFieldset {
+  position: relative;
+  margin: 0;
+  padding: 0;
+  min-inline-size: unset;
+  border: transparent;
+  &.part{
+    padding: 20px 0 10px;
+    >.legend{
+      >.title{
+        padding-left: 10px;
+        font-weight: 700;
+        border-left: 3px solid #409EFF;
+      }
+    }
+    >.field{
+      padding: 10px 10px 0px;
+    }
+  }
+  &.is-border{
+    >.field{
+      margin-top: 15px;
+      padding: 20px 10px 10px;
+      border-top-left-radius: 10px;
+      border-top-right-radius: 10px;
+      border: 1px solid #dedcdc;
+    }
+    &.is{
+      &-primary{
+        border-color: #409EFF;
+        .legend{
+          color: #409EFF;
+        }
+        &.effect-plain{
+          background-color: #fff;
+          border-color: #409EFF;
+          .legend{
+            border: 1px solid #409EFF;
+            background-color: #fff;
+            color: #409EFF;
+          }
+        }
+        &.effect-dark{
+          .legend{
+            color: #fff;
+            background: #409EFF;
+          }
+        }
+      }
+      &-success{
+        border-color: #67C23A;
+        .legend{
+          color: #67C23A;
+          background-color: #fff;
+        }
+        &.effect-plain{
+          background-color: #fff;
+          border-color: #67C23A;
+          .legend{
+            border: 1px solid #67C23A;
+            background-color: #fff;
+            color: #67C23A;
+          }
+        }
+        &.effect-dark{
+          .legend{
+            color: #fff;
+            background: #67C23A;
+          }
+        }
+      }
+      &-info{
+        border-color: #dcdfe6;
+        .legend{
+          color: #a9a9a9;
+          background-color: #fff;
+        }
+        &.effect-plain{
+          background-color: #fff;
+          border-color: #dcdfe6;
+          .legend{
+            border: 1px solid #dcdfe6;
+            background-color: #fff;
+            color: #a9a9a9;
+          }
+        }
+        &.effect-dark{
+          .legend{
+            color: #fff;
+            background-color: #a9a9a9;
+          }
+        }
+      }
+      &-danger{
+        border-color: #F56C6C;
+        .legend{
+          color: #F56C6C;
+          background-color: #fff;
+        }
+        &.effect-plain{
+          border-color: #F56C6C;
+          background-color: #fff;
+          .legend{
+            border: 1px solid #F56C6C;
+            background-color: #fff;
+            color: #F56C6C;
+          }
+        }
+        &.effect-dark{
+          .legend{
+            color: #fff;
+            background: #F56C6C;
+          }
+        }
+      }
+      &-warning{
+        border-color: #E6A23C;
+        .legend{
+          color: #E6A23C;
+          background-color: #fff;
+        }
+        &.effect-plain{
+          border-color: #E6A23C;
+          background-color: #fff;
+          .legend{
+            background-color: #fff;
+            border: 1px solid #E6A23C;
+            color: #E6A23C;
+          }
+        }
+        &.effect-dark{
+          .legend{
+            color: #fff;
+            background: #E6A23C;
+          }
+        }
+      }
+    }
+  }
+  .fix-top{
+    position: absolute;
+    top: 0px;
+    padding: 0;
+    background-color: #fff;
+    @include background_color("mainBg");
+  }
+  .tool{
+    right: 10px;
+  }
+  .legend {
+    line-height: 20px;
+    left: 10px;
+    @include addSize($font_size_16, $size_diff_2);
+    padding: 5px 0;
+    border-radius: 2px;
+    background-color: inherit;
+  }
+  ::-webkit-scrollbar-thumb {
+    background: rgba(144,147,153,0.3);
+    box-shadow: inset 0 0 5px rgba(144,147,153,0.3) !important;
+    -webkit-box-shadow: inset 0 0 5px rgba(144,147,153,0.3) !important;
+  }
+}
+</style>

package/src/components/page/index.vue

@@ -0,0 +1,109 @@
+<template>
+  <el-container class="page-container">
+    <el-container class="page-main">
+      <el-header v-if="$slots.header && showHeader" ref="header" height="" :class="{'page-header':$slots.aside}">
+        <slot name="header" />
+      </el-header>
+      <el-main ref="main" style="padding: 0;">
+        <slot :tableHeight="calcHeight - tableBorderHeight" />
+      </el-main>
+      <el-footer v-if="$slots.footer && showFooter" ref="footer" height="">
+        <slot name="footer" />
+      </el-footer>
+    </el-container>
+    <el-aside class="page-aside" v-if="$slots.aside && showAside" :width="asideWidth" ref="aside">
+      <slot name="aside" />
+    </el-aside>
+    <slot name="dialog" />
+  </el-container>
+</template>
+<script>
+export default {
+  name: "ExPage",
+  props: {
+    showHeader: { type: Boolean, default: true },
+    showFooter: { type: Boolean, default: true },
+    showAside: { type: Boolean, default: true },
+    diffHeight: {
+      type: Number,
+      default: 60
+    },
+    minHeight: {
+      type: Number,
+      default: 200
+    },
+    tableBorderHeight: {
+      type: Number,
+      default: 1
+    },
+    asideWidth: {
+      type: String
+    }
+  },
+  data() {
+    return {
+      tableHeight: 360
+    };
+  },
+  computed: {
+    calcHeight() {
+      return Math.max(this.tableHeight, this.minHeight);
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      // 表格高度自适应浏览器大小
+      this.doLayout();
+      window.onresize = () => {
+        this.doLayout();
+      };
+    });
+  },
+  methods: {
+    doLayout() {
+      // 多减去1 解决高度相等时 出现滚动条问题
+      if (this.$refs.main) {
+        this.tableHeight = this.$refs.main.$el.getBoundingClientRect().height - (this.diffHeight) - this.tableBorderHeight;
+      } else {
+      }
+    }
+  }
+};
+</script>
+<style scoped lang="scss">
+.el-main {
+  padding: 0;
+  background: #fff;
+  .formBox {
+    background: #f0f0f2;
+  }
+}
+.el-footer{
+  border-top: 1px solid #f0f0f2;
+  padding: 5px 0;
+}
+.el-header{
+  padding: 0;
+}
+.el-aside {
+  background-color: #fff;
+  margin-left: 10px;
+  height: 100%;
+  padding: 0;
+  border: 1px solid #eee;
+  margin-bottom: 0;
+  overflow-x: hidden;
+}
+.page-container{
+  padding: 20px;
+  height: 100%;
+  background: #f0f0f2;
+}
+.page-header{
+  padding: 10px 10px 0;
+  background: #fff;
+}
+.page-main{
+  padding: 0;
+}
+</style>