meixioacomponent 0.1.0

package/packages/components/base/baseEdito/baseEdito.vue

@@ -0,0 +1,202 @@
+<template>
+  <div class="base-edito-wrap">
+    <div class="no-launch" v-show="!launch" @click="launch = true">
+      <span>{{ spanValue }}</span>
+    </div>
+    <div class="launch" v-show="launch">
+      <div class="edito-title-wrap">
+        <slot name="edito-title-slot"></slot>
+      </div>
+      <div class="edito-content-wrap">
+        <el-input
+          type="textarea"
+          v-model="textValue"
+          :autosize="{ minRows: 4, maxRows: 22 }"
+          placeholder="请输入内容"
+        >
+        </el-input>
+        <baseUploadVue
+          ref="baseUpload"
+          v-model="imgList"
+          v-show="imgList.length > 0"
+        ></baseUploadVue>
+        <baseAppendixVue
+          :key="appendixKey"
+          ref="baseAppendix"
+          v-model="appendix"
+          v-show="appendix.length > 0"
+          style="margin-top: calc(var(--margin-5) * 2)"
+        ></baseAppendixVue>
+      </div>
+      <div class="base-edito-handle" v-if="useUpload">
+        <base-icon
+          :size="`m`"
+          :color="`d`"
+          :event="true"
+          :title="`图片`"
+          @iconClick="addImg"
+          :name="`icon-tupian_huaban`"
+        ></base-icon>
+        <base-icon
+          :size="`m`"
+          :color="`d`"
+          :event="true"
+          :title="`附件`"
+          @iconClick="addAppendix"
+          :name="`icon-weibiaoti--`"
+        ></base-icon>
+      </div>
+      <baseUploadItemVue
+        v-model="appendix"
+        ref="baseUploadItem"
+        style="display: none"
+        :uploadType="`multiple`"
+        @uploadEd="uploadEd"
+      ></baseUploadItemVue>
+      <baseButtonHandle
+        :config="handleConfig"
+        style="margin-top: var(--margin-5)"
+      ></baseButtonHandle>
+    </div>
+  </div>
+</template>
+
+<script>
+import baseUploadVue from "../baseUpload/baseUpload.vue";
+import baseAppendixVue from "../baseAppendix/baseAppendix.vue";
+import baseUploadItemVue from "../baseUpload/baseUploadItem.vue";
+import baseButtonHandle from "../baseButtonHandle/baseButtonHandle.vue";
+//
+
+export default {
+  name: "baseEdito",
+  data() {
+    return {
+      appendixKey: 0,
+      // 上传图片的数组
+      imgList: [],
+      // 附件的数组
+      appendix: [],
+      // 是否展开
+      launch: false,
+      // 文字内容
+      textValue: "",
+      // 底部按钮的配置
+      handleConfig: [],
+    };
+  },
+  created() {
+    this.handleConfig = [
+      {
+        text: "确定",
+        type: "primary",
+        plain: false,
+        click: () => {
+          this.confirm();
+        },
+      },
+      {
+        text: "取消",
+        type: "info",
+        plain: false,
+        click: () => {
+          this.launch = false;
+        },
+      },
+    ];
+  },
+  props: {
+    useUpload: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  computed: {
+    spanValue() {
+      return this.textValue ? this.textValue : "点击输入文字内容";
+    },
+  },
+  components: {
+    baseUploadVue,
+    baseAppendixVue,
+    baseButtonHandle,
+    baseUploadItemVue,
+  },
+  methods: {
+    addImg() {
+      this.$refs.baseUpload.$refs.itemUpload.clickFile();
+    },
+    addAppendix() {
+      this.$refs.baseUploadItem.clickFile();
+    },
+
+    confirm() {
+      let obj = {
+        textValue: this.textValue,
+        imgList: this.imgList
+          .filter((item) => {
+            return item.process == 100;
+          })
+          .map((item) => {
+            return item.url;
+          }),
+        appendix: this.appendix
+          .filter((item) => {
+            return item.process == 100;
+          })
+          .map((item) => {
+            return item.url;
+          }),
+      };
+
+      console.log(obj);
+      this.$emit("editoConfirm", obj);
+    },
+    uploadEd(list) {
+      this.appendix = list;
+    },
+  },
+  watch: {},
+};
+</script>
+
+<style lang="less" scoped>
+.base-edito-wrap {
+  width: 100%;
+  height: auto;
+  margin: var(--margin-5) 0px;
+  background: var(--color-gray-s);
+  border: 2px solid var(--color-border);
+  padding: var(--padding-5) calc(var(--padding-5) * 2);
+  .no-launch {
+    width: 100%;
+    height: auto;
+    cursor: pointer;
+    padding: calc(var(--padding-5) * 2) 0px;
+    span {
+      color: var(--font-color-s);
+      font-size: var(--font-base-s);
+    }
+  }
+  .edito-title-wrap {
+    width: 100%;
+  }
+  .edito-content-wrap {
+    width: 100%;
+    height: auto;
+    padding: var(--padding-5) 0px;
+  }
+  /deep/ textarea {
+    resize: none !important;
+    font-weight: var(--font-weight-g);
+    color: var(--font-color-d) !important;
+  }
+  .base-edito-handle {
+    display: flex;
+    align-items: center;
+    /deep/ i {
+      font-weight: var(--font-weight-kg);
+    }
+  }
+}
+</style>

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

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

package/packages/components/base/baseFixedHeader/baseFixedHeader.vue

@@ -0,0 +1,168 @@
+<template>
+  <div class="base-fixed-header-wrap" :class="[`header-${currentNews.type}`]">
+    <div class="fixed-header-content">
+      <span class="header-text">{{ currentNews.content }}</span>
+
+      <div class="content-handle-wrap" v-if="showHandle">
+        <base-icon
+          :size="`s`"
+          :event="true"
+          :plain="true"
+          :disable="upDisable"
+          :color="`text-white`"
+          :name="`icon-shouqi`"
+          @iconClick="upNews"
+        >
+        </base-icon>
+        <base-icon
+          :size="`s`"
+          :event="true"
+          :plain="true"
+          :color="`text-white`"
+          :name="`icon-xiala`"
+          :disable="downDisable"
+          @iconClick="downNews"
+        >
+        </base-icon>
+      </div>
+      <el-button
+        size="mini"
+        @click="newsConfirm"
+        :type="currentNews.type"
+        v-if="currentNews.event"
+        >确定</el-button
+      >
+    </div>
+
+    <base-icon
+      :size="`s`"
+      :event="true"
+      :title="`关闭`"
+      :color="`text-white`"
+      :name="`icon-close`"
+      class="header-close-icon"
+      @iconClick="closeHeader"
+    >
+    </base-icon>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "baseFixedHeader",
+  data() {
+    return {
+      index: 0,
+    };
+  },
+  props: {
+    newsList: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  computed: {
+    currentNews() {
+      return this.$props.newsList[this.index];
+    },
+
+    showHandle() {
+      return this.$props.newsList.length > 1;
+    },
+
+    upDisable() {
+      return this.index == 0;
+    },
+    downDisable() {
+      return this.$props.newsList.length - 1 == this.index;
+    },
+  },
+  methods: {
+    closeHeader() {
+      this.deleteNews();
+    },
+    setNewIndex() {
+      this.index = this.$props.newsList.length - 1;
+    },
+    upNews() {
+      this.index -= 1;
+    },
+    downNews() {
+      this.index += 1;
+    },
+    newsConfirm() {
+      this.currentNews.event(this.deleteNews);
+    },
+
+    deleteNews() {
+      if (this.index != 0) {
+        this.$props.newsList.splice(this.index, 1);
+        this.upNews();
+      } else {
+        this.$destroy();
+      }
+    },
+
+    returnIndex() {
+      return this.index;
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.base-fixed-header-wrap {
+  top: 0px;
+  left: 0px;
+  width: 100%;
+  height: 40px;
+  z-index: 99999;
+  position: fixed;
+  background: white;
+  padding: var(--padding-5);
+  box-shadow: var(--shadow-fixed);
+  display: flex;
+  align-items: center;
+  flex-flow: row nowrap;
+  justify-content: center;
+  transition: all 0.7s ease-in;
+  .fixed-header-content {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    .header-text {
+      font-size: var(--font-size-base);
+    }
+    .content-handle-wrap {
+      display: flex;
+      flex-flow: column;
+      align-items: center;
+      justify-items: center;
+      margin: 0px calc(var(--margin-5) * 4);
+      .plain + .plain {
+        margin: 0px;
+      }
+    }
+  }
+  .header-close-icon {
+    position: absolute;
+    top: 50%;
+    right: var(--padding-5);
+    transform: translateY(-50%);
+  }
+}
+.header-primary {
+  background: var(--color-primary);
+}
+.header-danger {
+  background: var(--color-error);
+}
+.header-primary,
+.header-danger {
+  .fixed-header-content {
+    .header-text {
+      color: var(--text-white);
+    }
+  }
+}
+</style>

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

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

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

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

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

@@ -0,0 +1,146 @@
+<template>
+  <div
+    class="base-icon-wrap"
+    :title="title"
+    @click.stop="iconClick"
+    :class="{ event: event && !disable, plain: plain, disable: disable }"
+  >
+    <i
+      :class="`iconfont ${name}`"
+      :style="{ color: _color, fontSize: _size }"
+    ></i>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "baseIcon",
+  data() {
+    return {};
+  },
+
+  props: {
+    event: {
+      type: Boolean,
+      default: false,
+    },
+    name: {
+      type: String,
+      require: true,
+    },
+    color: {
+      default: "d",
+      type: String,
+    },
+    size: {
+      default: "d",
+      type: String,
+    },
+    active: {
+      type: Boolean,
+      default: false,
+    },
+    title: {
+      type: String,
+    },
+    plain: {
+      type: Boolean,
+      default: false,
+    },
+    disable: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  computed: {
+    _color() {
+      let color = null;
+      if (this.$props.active) {
+        color = `var(--color-primary)`;
+        return color;
+      }
+      let propsColor = this.$props.color;
+      switch (propsColor) {
+        case "d":
+          color = `var(--icon-color-d)`;
+          break;
+        case "m":
+          color = `var(--icon-color-m)`;
+          break;
+        case "s":
+          color = `var(--icon-color-s)`;
+          break;
+        default:
+          color = `var(--${propsColor})`;
+          break;
+      }
+      return color;
+    },
+    _size() {
+      let size = null;
+      switch (this.$props.size) {
+        case "s":
+          size = `var(--icon-size-s)`;
+          break;
+        case "d":
+          size = `var(--icon-size-base)`;
+          break;
+        case "l":
+          size = `var(--icon-size-l)`;
+          break;
+
+        default:
+          break;
+      }
+      return size;
+    },
+  },
+  methods: {
+    iconClick() {
+      if (this.$props.event) {
+        this.$emit("iconClick");
+      }
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.base-icon-wrap {
+  width: 32px;
+  height: 32px;
+  display: flex;
+  cursor: default;
+  align-items: center;
+  background: inherit;
+  flex-flow: row nowrap;
+  justify-content: center;
+  border-radius: var(--radius);
+  i {
+    font-size: var(--icon-default);
+  }
+}
+.event {
+  cursor: pointer;
+  transition: all 0.3s var(--ease-out);
+  &:hover {
+    background: var(--hover-gray);
+    i {
+      color: var(--color-primary) !important;
+    }
+  }
+}
+.plain {
+  width: auto;
+  height: auto;
+}
+.disable {
+  cursor: not-allowed;
+  i {
+    color: var(--color-gray-d) !important;
+  }
+}
+.plain + .plain {
+  margin-left: var(--margin-4);
+}
+</style>