Element-ui框架修改-upload、step

Element-ui框架修改-2017.09.04

【upload】

需求-照片墙只上传一张，上传之后上传按钮消失

修改地址-Packages-upload-src-index 

添加方法

hidePictureCardUpload() {
      document.getElementsByClassName("el-upload el-upload--picture-card")[0].style.display = "none";
    }

使用

<el-upload
  action="https://jsonplaceholder.typicode.com/posts/"
  list-type="picture-card"
  :on-preview="handlePictureCardPreview"
  :on-remove="handleRemove" ref="upload">
  <i class="el-icon-plus"></i>
</el-upload>
<el-dialog v-model="dialogVisible" size="tiny">
  <img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>

this.$refs.upload.hidePictureCardUpload();

【step】

需求-在描述部分添加多行信息和按钮

修改地址-Package-steps-src-step.vue

修改后的如下

<template>
  <div
    class="el-step"
    :style="[style,  isLast ? "" : { marginRight: - $parent.stepOffset + "px" }]"
    :class="["is-" + $parent.direction]">
    <div
      class="el-step__head"
      :class="["is-" + currentStatus, { "is-text": !icon }]">
      <div
        class="el-step__line"
        :style="isLast ? "" : { marginRight: $parent.stepOffset + "px" }"
        :class="["is-" + $parent.direction, { "is-icon": icon }]">
        <i class="el-step__line-inner" :style="lineStyle"></i>
      </div>

      <span class="el-step__icon">
        <slot
          v-if="currentStatus !== "success" && currentStatus !== "error""
          name="icon">
          <i v-if="icon" :class="["el-icon-" + icon]"></i>
          <div v-else>{{ index + 1 }}</div>
        </slot>
        <i
          v-else
          :class="["el-icon-" + (currentStatus === "success" ? "check" : "close")]">
        </i>
      </span>
    </div>
    <div
      class="el-step__main"
      :style="{ marginLeft: mainOffset }">
      <div
        class="el-step__title"
        ref="title"
        :class="["is-" + currentStatus]">
        <slot name="title">{{ title }}</slot>
      </div>
      <div
        class="el-step__description"
        :class="["is-" + currentStatus]">
        <slot name="description">{{description}}</slot>
        <br>
        <slot name="dates">{{dates}}</slot>
        <br>
        <slot name="button">
          <el-button type="text" @click="buttonEnter">{{button}}</el-button>
        </slot>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "ElStep",
  props: {
    title: String,
    icon: String,
    description: String,
    dates: String,
    button: String,
    status: String
  },

  data() {
    return {
      index: -1,
      lineStyle: {},
      mainOffset: 0,
      internalStatus: ""
    };
  },

  beforeCreate() {
    this.$parent.steps.push(this);
  },

  beforeDestroy() {
    const steps = this.$parent.steps;
    const index = steps.indexOf(this);
    if (index >= 0) {
      steps.splice(index, 1);
    }
  },

  computed: {
    currentStatus() {
      return this.status || this.internalStatus;
    },
    prevStatus() {
      const prevStep = this.$parent.steps[this.index - 1];
      return prevStep ? prevStep.currentStatus : "wait";
    },
    isLast: function() {
      const parent = this.$parent;
      return parent.steps[parent.steps.length - 1] === this;
    },
    style: function() {
      const parent = this.$parent;
      const isCenter = parent.center;
      const len = parent.steps.length;

      if (isCenter && this.isLast) {
        return {};
      }

      const space = (typeof parent.space === "number"
        ? parent.space + "px"
        : parent.space
          ? parent.space
          : 100 / (isCenter ? len - 1 : len) + "%");
      if (parent.direction === "horizontal") {
        return { width: space };
      } else {
        if (!this.isLast) {
          return { height: space };
        }
      }
    }
  },

  methods: {
    updateStatus(val) {
      const prevChild = this.$parent.$children[this.index - 1];

      if (val > this.index) {
        this.internalStatus = this.$parent.finishStatus;
      } else if (val === this.index && this.prevStatus !== "error") {
        this.internalStatus = this.$parent.processStatus;
      } else {
        this.internalStatus = "wait";
      }

      if (prevChild) prevChild.calcProgress(this.internalStatus);
    },

    calcProgress(status) {
      let step = 100;
      const style = {};

      style.transitionDelay = 150 * this.index + "ms";
      if (status === this.$parent.processStatus) {
        step = this.currentStatus !== "error" ? 50 : 0;
      } else if (status === "wait") {
        step = 0;
        style.transitionDelay = (-150 * this.index) + "ms";
      }

      style.borderWidth = step ? "1px" : 0;
      this.$parent.direction === "vertical"
        ? style.height = step + "%"
        : style.width = step + "%";

      this.lineStyle = style;
    },
    buttonEnter(event) {
      this.$emit("button-enter", this, event);
    }
  },

  mounted() {
    const parent = this.$parent;

    if (parent.direction === "horizontal") {
      if (parent.alignCenter) {
        this.mainOffset = -this.$refs.title.getBoundingClientRect().width / 2 + 16 + "px";
      }
    }

    const unwatch = this.$watch("index", val => {
      this.$watch("$parent.active", this.updateStatus, { immediate: true });
      unwatch();
    });
  }
};
</script>

使用

<el-steps :space="200" :active="1">
  <el-step title="步骤 1" description="这是一段很长很长很长的描述性文字" dates="2018.10.10" button="确认" @button-enter="buttonEnter"></el-step>
  <el-step title="步骤 2" description="这是一段很长很长很长的描述性文字1" dates="2018.10.11" button="确认"></el-step>
  <el-step title="步骤 3" description="这是一段很长很长很长的描述性文字"></el-step>
</el-steps>