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>