element上传组件循环引用及简单时间倒计时的实现

一、element上传组件循环引用

在使用vue框架，结合element-ui库时，我们可能会遇到element上传组件循环引用的问题。这个问题主要是由于在组件导入过程中，自己调用了自己，导致了循环依赖的情况。解决这个问题可以采用以下两种方式：

1. 使用动态导入

动态导入可以在运行时才导入依赖库，而不是在编译时就解决依赖。这样可以避免循环依赖的问题。

例如：

<template>
  <el-upload
    :action="uploadUrl"
    :on-success="handleUploadSuccess"
    :before-upload="beforeAvatarUpload"
    :file-list="fileList"
    list-type="picture-card">
    <div class="upload-text">点击上传</div>
  </el-upload>
</template>

<script>
export default {
  data() {
    return {
      fileList: [],
      uploadUrl: '',
    };
  },
  methods: {
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isPNG = file.type === 'image/png';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG && !isPNG) {
        this.$message.error('上传头像图片只能是 JPG 或者 PNG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return (isJPG || isPNG) && isLt2M;
    },
    handleUploadSuccess(response, file, fileList) {
      console.log(response, file, fileList);
    },
  },
};
</script>

1. 使用mixin

Mixin是一种分发 Vue 组件中可复用功能的非常灵活的方式。使用Mixin可以将需要共享的代码放在mixin中，然后在需要使用的组件中引入即可。

例如：

// uploadMixin.js
export default {
  data() {
    return {
      fileList: [],
      uploadUrl: '',
    };
  },
  methods: {
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isPNG = file.type === 'image/png';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG && !isPNG) {
        this.$message.error('上传头像图片只能是 JPG 或者 PNG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return (isJPG || isPNG) && isLt2M;
    },
    handleUploadSuccess(response, file, fileList) {
      console.log(response, file, fileList);
    },
  },
};

// component.vue
<template>
  <el-upload
    :action="uploadUrl"
    :on-success="handleUploadSuccess"
    :before-upload="beforeAvatarUpload"
    :file-list="fileList"
    list-type="picture-card">
    <div class="upload-text">点击上传</div>
  </el-upload>
</template>

<script>
import UploadMixin from './uploadMixin';

export default {
  mixins: [UploadMixin],
};
</script>

二、简单时间倒计时的实现

在web开发中，我们经常会遇到一些需要倒计时的场景，比如秒杀，拼团等活动。下面提供一种简单的倒计时实现方法：

<template>
  <div>{{ formatTime }}</div>
</template>

<script>
export default {
  data() {
    return {
      endTime: 1631278800000, // 时间戳
      intervalId: null, // setInterval的ID
    };
  },
  computed: {
    currentTime() {
      return new Date().getTime();
    },
    remainingTime() {
      return this.endTime - this.currentTime;
    },
    formatTime() {
      const remainingSeconds = parseInt(this.remainingTime / 1000);
      const hours = Math.floor(remainingSeconds / 3600);
      const minutes = Math.floor((remainingSeconds % 3600) / 60);
      const seconds = Math.floor(remainingSeconds % 60);
      return `${hours}小时${minutes}分钟${seconds}秒`;
    },
  },
  mounted() {
    this.intervalId = setInterval(() => {
      if (this.remainingTime <= 0) {
        clearInterval(this.intervalId);
      }
    }, 1000);
  },
  beforeDestroy() {
    clearInterval(this.intervalId);
  },
};
</script>

在这个示例中，我们定义了一个endTime属性，表示倒计时结束时间的时间戳，同时也定义了一个remainingTime属性，用来计算当前剩余时间。在computed中定义了一个formatTime属性，用来将倒计时的时间格式化为字符串输出。在mounted中使用setInterval每秒钟执行一次剩余时间的计算，并判断是否已经到达倒计时的结束时间。在beforeDestroy中清除setInterval。