meixioacomponent 0.1.0

package/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "meixioacomponent",
+  "version": "0.1.0",
+  "private": false,
+  "author": "YuRi",
+  "main": "lib/meixioacomponent.umd.min.js",
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "lib": "vue-cli-service build --target lib --name meixicomponent --dest lib packages/components/index.js"
+  },
+  "dependencies": {
+    "axios": "^0.27.2",
+    "core-js": "^3.6.5",
+    "dayjs": "^1.11.3",
+    "element-ui": "^2.15.9",
+    "register-service-worker": "^1.7.1",
+    "vue": "^2.6.11",
+    "vue-router": "^3.2.0",
+    "vuedraggable": "^2.24.3",
+    "vuex": "^3.4.0"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "~4.5.13",
+    "@vue/cli-plugin-pwa": "~4.5.13",
+    "@vue/cli-plugin-router": "~4.5.13",
+    "@vue/cli-plugin-vuex": "~4.5.13",
+    "@vue/cli-service": "~4.5.13",
+    "less": "^3.0.4",
+    "less-loader": "^5.0.0",
+    "vue-template-compiler": "^2.6.11"
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead"
+  ]
+}

package/packages/components/base/baseAnchor/baseAnchor.vue

@@ -0,0 +1,156 @@
+<template>
+  <ol class="base-anchor-wrap">
+    <li
+      class="anchor-item-wrap"
+      :class="{
+        active: index == active,
+      }"
+      :key="index"
+      v-for="(item, index) in list"
+    >
+      <a
+        v-if="type == 'page'"
+        :href="`${currentPath}#${item.id}`"
+        @click="aTagClick(index)"
+        >{{ item.title }}</a
+      >
+      <span @click="toSetScrollTop(index)" v-else> {{ item.title }} </span>
+    </li>
+  </ol>
+</template>
+
+<script>
+export default {
+  name: "baseAnchor",
+  data() {
+    return {
+      active: 0,
+      _listenElement: null,
+    };
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.init();
+    });
+  },
+
+  beforeDestroy() {
+    this._listenElement?.removeEventListener("scroll", this.listenScroll);
+  },
+
+  props: {
+    listenElementId: {
+      //只接受id
+      type: String,
+    },
+    list: {
+      type: Array,
+    },
+    type: {
+      type: String,
+      default: "page",
+    },
+  },
+  computed: {
+    currentPath() {
+      return this.$route.path;
+    },
+  },
+  methods: {
+    init() {
+      let type = this.$props.type;
+      if (type == "page") {
+        this._listenElement =
+          document.getElementsByClassName("layout-contnet")[0];
+        this._listenElement?.addEventListener("scroll", this.listenScroll);
+      } else {
+        this._listenElement = document.getElementById(
+          `${this.$props.listenElementId}`
+        );
+        this._listenElement?.addEventListener("scroll", this.listenScroll);
+      }
+    },
+    aTagClick(index) {
+      this.active = index;
+    },
+    listenScroll(e) {
+      if (this.$props.list.length <= 0) return;
+      let type = this.$props.type;
+      let scrollTop = e.target.scrollTop;
+      for (let i = 0; i < this.$props.list.length; i++) {
+        let item = this.$props.list[i];
+        let node = null;
+        // 类型
+        if (type == "page") {
+          // page 代表是全局 监听 layout 的滚动
+          node = document.getElementById(item.id);
+        } else {
+          // 指定的容器
+          node = this._listenElement.querySelector(`#${item.id}`);
+        }
+        // 滑动到底部直接赋值
+        if (scrollTop + e.target.clientHeight >= e.target.scrollHeight - 5) {
+          this.active = this.$props.list.length - 1;
+          break;
+        }
+        // 如果循环到最后一个dom也直接赋值
+        if (i == this.$props.list.length - 1) {
+          this.active = i;
+          break;
+        } else {
+          let nextItem = this.$props.list[i + 1];
+          let nextNode = null;
+          if (type == "page") {
+            nextNode = document.getElementById(nextItem.id);
+          } else {
+            nextNode = this._listenElement.querySelector(`#${nextItem.id}`);
+          }
+          // 判单scrolltop是否小于下一个dom的高度
+          if (scrollTop < nextNode.offsetTop) {
+            this.active = i;
+            break;
+          }
+        }
+      }
+    },
+    toSetScrollTop(index) {
+      if (index == this.active) {
+        return;
+      }
+      let id = this.$props.list[index].id;
+      let dom = this._listenElement.querySelector(`#${id}`);
+      if (dom) {
+        this._listenElement.scrollTop = dom.offsetTop + 10;
+        this.aTagClick(index);
+      }
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.base-anchor-wrap {
+  width: auto;
+  height: auto;
+  overflow-y: auto;
+  .anchor-item-wrap {
+    padding-left: calc(var(--padding-4) * 2);
+    border-left: 2px solid var(--color-border);
+    a,
+    span {
+      display: inline-block;
+      color: var(--font-color-m);
+      margin: var(--margin-2) 0px;
+      font-size: var(--font-size-base);
+    }
+    span {
+      cursor: pointer;
+    }
+  }
+
+  .active {
+    border-left: 2px solid var(--color-primary);
+    color: var(--color-primary) !important;
+  }
+}
+</style>

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

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

package/packages/components/base/baseAppendix/baseAppendix.vue

@@ -0,0 +1,78 @@
+<template>
+  <div class="base-appendix-wrap">
+    <div class="appendix-title">
+      <base-icon
+        :name="`icon-weibiaoti--`"
+        :color="`d`"
+        :size="`l`"
+      ></base-icon>
+      <span>附件</span>
+    </div>
+
+    <div class="appendix-content">
+      <uploadItemVue
+        :key="index"
+        :item="item"
+        :type="`appendix`"
+        v-for="(item, index) in module"
+        @deleteAppendixItem="deleteAppendixItem(index)"
+      ></uploadItemVue>
+    </div>
+  </div>
+</template>
+
+<script>
+import uploadItemVue from "../upload/uploadItem.vue";
+export default {
+  name: "baseAppendix",
+  data() {
+    return {};
+  },
+
+  props: {
+    value: {
+      type: Array,
+      require: true,
+    },
+  },
+  computed: {
+    module: {
+      set(val) {
+        this.$emit("input", val);
+      },
+      get() {
+        return this.$props.value;
+      },
+    },
+  },
+  components: {
+    uploadItemVue,
+  },
+  methods: {
+    deleteAppendixItem(index) {
+      this.module.splice(index, 1);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.base-appendix-wrap {
+  width: 100%;
+  height: auto;
+  padding: var(--padding-5);
+  border-radius: calc(var(--radius) * 2);
+  border: 1px dashed var(--color-border-d);
+  .appendix-title {
+    width: auto;
+    display: flex;
+    align-items: center;
+    margin-bottom: var(--margin-5);
+    span {
+      color: var(--font-color-d);
+      font-size: var(--font-size-base);
+      font-weight: var(--font-weight-kg);
+    }
+  }
+}
+</style>

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

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