vue-cli对element-ui组件进行二次封装的实战记录

下面是针对“vue-cli对element-ui组件进行二次封装的实战记录”的完整攻略：

1. 准备工作

首先，我们需要在vue-cli项目中安装element-ui和vuex这两个依赖：

npm install element-ui --save
npm install vuex --save

接下来，我们需要在main.js中进行全局引入，并使用Vue.use进行插件注册：

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

2.创建封装组件

我们需要在src/components文件夹中创建一个新的组件：MyDatePicker（示例1）和MyUpload（示例2）。在这两个组件中，我们需要引入element-ui的相关组件，并进行封装。以下是具体代码及说明：

示例1：MyDatePicker组件

<template>
  <el-date-picker
      v-model="value"
      :picker-options="pickerOptions"
      type="date"
      placeholder="请选择日期">
  </el-date-picker>
</template>

<script>
export default {
  name: "MyDatePicker",
  props: {
    value: {
      type: String,
      default: ''
    },
    pickerOptions: {
      type: Object,
      default: () => {
        return {
          disabledDate(date) {
            return date && date < new Date()
          }
        }
      }
    }
  }
}
</script>

说明：

• 在这个组件中，我们使用了<el-date-picker>组件，并将其作为模板使用。使用v-model，我们可以将父组件传递给该组件的日期值进行双向绑定。
• pickerOptions选项对象是一个可选属性。如果传递了该属性，则将其应用于<el-date-picker>组件内的选项。在此示例中，我们在pickerOptions中传递了一个禁用日期选项，具体为禁用以前的日期。

示例2：MyUpload组件

<template>
  <el-upload
      class="upload-demo"
      :limit="limit"
      :file-list="fileList"
      :on-exceed="handleExceed"
      :on-success="handleSuccess"
      :on-remove="handleRemove"
      :on-preview="handlePreview"
      :multiple="multiple"
      :show-file-list="showFileList"
      :before-upload="beforeUpload"
      :action="action"
      :headers="headers">
    <el-button size="small" type="primary">点击上传</el-button>
    <div slot="tip" class="el-upload__tip">只能上传xx MB以内的文件</div>
  </el-upload>
</template>

<script>
export default {
  name: 'MyUpload',
  props: {
    url: {
      type: String,
      default: ''
    },
    limit: {
      type: Number,
      default: 3
    },
    fileList: {
      type: Array,
      default: () => []
    },
    multiple: {
      type: Boolean,
      default: false
    },
    showFileList: {
      type: Boolean,
      default: true
    },
    headers: {
      type: Object,
      default: () => {}
    },
    extraData: {
      type: Object,
      default: () => {}
    },
    beforeUpload: {
      type: Function,
      default: () => {}
    }
  },
  data() {
    return {
      action: this.url || '',
    }
  },
  methods: {
    handleExceed(files, fileList) {
      let msg = `最多只能上传${this.limit}个文件`
      this.$message.warning(msg)
    },
    handleSuccess(response, file, fileList) {
      // 上传成功的操作
    },
    handleRemove(file, fileList) {
      // 删除文件的操作
    },
    handlePreview(file) {
      // 预览的操作
    }
  }
}
</script>

说明：

• 在这个组件中，我们使用了<el-upload>组件，并将其作为模板使用。我们将limit属性用于限制文件上传的最大数量，默认为3，且如果超过限制，将不允许上传文件。我们还为<el-upload>组件内的七个事件定义了一个默认方法，以便我们可以在子组件中对上传的文件进行操作。
• action属性是一个可选属性，用于指定上传文件的URL地址，默认为空值。通过使用url属性在外部传递URL参数，我们可以灵活地指定上传文件的URL地址。
• 我们还通过使用<div slot="tip">来查看文件上传的提示。