html 中 div, class, button详解

1. div
div是HTML中最常用的标签之一，用于定义文档中的一个区域或块级容器，可以用来分割网页的不同部分，比如内容区、头部区、底部区等等。div标签的作用是划分出一块独立的区域，在这个区域中可以放置其他的HTML元素。

2. class
class是HTML中用来定义样式的一种属性，它可以用于HTML中的任何元素。通过class属性，我们可以为同一类元素设置相同的样式，使得网页样式更加统一。比如，我们可以将多个div元素设置为同一个class，然后在CSS中设置这个class的样式，这样就可以让这些div元素具有相同的样式了。

3. button
button是HTML中用来创建按钮的标签，它可以用来触发一些交互操作，比如提交表单、跳转页面、打开弹窗等等。button标签可以设置多个属性，包括type、name、value、onclick等等，通过这些属性可以实现不同的功能。button标签可以包含其他HTML元素，比如文字、图标、图片等等，可以通过CSS来设置这些元素的样式。

相关问题

详解element ui中的upload组件

Element UI 的 Upload 组件是一个文件上传组件，允许用户上传多个文件，并支持拖拽上传和文件预览。下面我将详细介绍这个组件的使用方法。

## 安装

首先，需要在项目中安装 Element UI。

npm install element-ui --save

然后，在 main.js 中引入 Element UI。

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

Vue.use(ElementUI)

## 基本用法

在需要使用 Upload 的组件中，可以这样写：

<el-upload
  class="upload-demo"
  action="/upload"
  :data="{ user_id: 123 }"
  :on-success="handleSuccess"
  :on-error="handleError"
  :before-upload="beforeUpload"
  :file-list="fileList"
  :auto-upload="false">
  <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
  <el-button size="small" type="success" @click="submitUpload">上传到服务器</el-button>
  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>

上面代码中，`action` 属性是上传的后端接口地址，`data` 属性是上传时需要携带的额外参数，`on-success` 和 `on-error` 属性分别是上传成功和失败时的回调函数，`before-upload` 属性是上传前的校验函数，`file-list` 属性是已经上传的文件列表，`auto-upload` 属性表示是否自动上传。

在 Upload 组件中，需要通过 `slot` 分别定义两个按钮，分别是选取文件和上传到服务器的按钮。同时，可以通过 `slot` 定义提示信息。

<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
<el-button size="small" type="success" @click="submitUpload">上传到服务器</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>

最后，需要在 Vue 实例中定义对应的函数。

export default {
  data() {
    return {
      fileList: []
    }
  },
  methods: {
    handleSuccess(response, file, fileList) {
      console.log(response, file, fileList);
    },
    handleError(error, file, fileList) {
      console.log(error, file, fileList);
    },
    beforeUpload(file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }

      return isJPG && isLt2M;
    },
    submitUpload() {
      this.$refs.upload.submit();
    }
  }
}

上面代码中，`handleSuccess` 和 `handleError` 分别是上传成功和失败时的回调函数，在这里可以对上传的结果进行处理。`beforeUpload` 是上传前的校验函数，可以在这里对上传的文件进行校验。`submitUpload` 用于手动触发上传。

## 高级用法

### 限制上传文件类型和大小

可以通过 `accept` 和 `before-upload` 属性来限制上传文件的类型和大小。

<el-upload
  class="upload-demo"
  action="/upload"
  :data="{ user_id: 123 }"
  :on-success="handleSuccess"
  :on-error="handleError"
  :before-upload="beforeUpload"
  :file-list="fileList"
  :auto-upload="false"
  accept="image/*"
  :limit="3"
  :on-exceed="handleExceed">
  <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
  <el-button size="small" type="success" @click="submitUpload">上传到服务器</el-button>
  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>

上面代码中，`accept` 属性限制了只能上传图片类型的文件，`before-upload` 函数限制了文件大小不超过 500KB，同时还设置了最多上传 3 个文件的限制，并在超出限制时触发 `on-exceed` 方法。

handleExceed(files, fileList) {
  this.$message.warning(`当前限制选择 ${this.limit} 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
}

### 上传到阿里云 OSS

可以通过 `before-upload` 和 `custom-request` 属性来实现上传到阿里云 OSS。

<el-upload
  class="upload-demo"
  :action="ossConfig.host"
  :data="ossConfig.params"
  :on-success="handleSuccess"
  :on-error="handleError"
  :before-upload="beforeUpload"
  :file-list="fileList"
  :auto-upload="false"
  :custom-request="ossConfig.customRequest">
  <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
  <el-button size="small" type="success" @click="submitUpload">上传到服务器</el-button>
  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>

上面代码中，`action` 属性设置为阿里云 OSS 的上传地址，`data` 属性设置为上传时需要携带的额外参数。在 `before-upload` 函数中，需要返回一个 Promise 对象，该 Promise 对象中需要实现上传到阿里云 OSS 的逻辑。

beforeUpload(file) {
  const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
  const isLt2M = file.size / 1024 / 1024 < 2;

  if (!isJPG) {
    this.$message.error('上传头像图片只能是 JPG 格式!');
  }
  if (!isLt2M) {
    this.$message.error('上传头像图片大小不能超过 2MB!');
  }

  return isJPG && isLt2M && new Promise((resolve, reject) => {
    const ossConfig = this.getOssConfig();

    this.ossConfig = ossConfig;

    const client = new OSS({
      accessKeyId: ossConfig.accessid,
      accessKeySecret: ossConfig.accesskey,
      stsToken: ossConfig.securitytoken,
      bucket: ossConfig.bucket,
      region: ossConfig.region,
      cname: true
    });

    client.multipartUpload(ossConfig.dir + '/' + file.name, file).then((result) => {
      console.log(result);
      resolve();
    }).catch((error) => {
      console.log(error);
      reject();
    });
  });
},
getOssConfig() {
  // 获取阿里云 OSS 的配置
}

在 `custom-request` 函数中，可以实现上传成功和失败的回调函数。

ossConfig: {
  host: '',
  params: {},
  customRequest: (config) => {
    const { action, data, file, headers, onError, onSuccess, onProgress } = config;

    const xhr = new XMLHttpRequest();
    xhr.open('POST', action, true);

    Object.keys(headers).forEach((key) => {
      xhr.setRequestHeader(key, headers[key]);
    });

    xhr.onload = function onload() {
      if (xhr.readyState === 4 && xhr.status === 200 && xhr.responseText !== '') {
        try {
          const response = JSON.parse(xhr.responseText);
          onSuccess(response, xhr);
        } catch (error) {
          onError(error, xhr);
        }
      } else {
        onError(new Error('上传失败'), xhr);
      }
    };

    xhr.onerror = function onerror(error) {
      onError(error, xhr);
    };

    xhr.upload.onprogress = function onprogress(event) {
      if (event.total > 0) {
        event.percent = (event.loaded / event.total) * 100;
      }
      onProgress(event, xhr);
    };

    const formData = new FormData();
    Object.keys(data).forEach((key) => {
      formData.append(key, data[key]);
    });
    formData.append('file', file);

    xhr.send(formData);
  }
},

react 中unstated-next的 createContainer详解

`unstated-next` 是 `unstated` 的升级版，是一个基于 React Hooks 的状态管理库。其中 `createContainer` 是其 API 之一，用于创建一个状态容器。

`createContainer` 的基本语法如下：

import { createContainer } from 'unstated-next';

const useContainer = createContainer(ContainerClass);

其中，`ContainerClass` 是一个类，用于定义状态容器的数据和方法。`useContainer` 是一个 React Hook，可以在组件中使用该 Hook 获取状态容器的实例。状态容器实例中包含了类中定义的数据和方法。

下面是一个简单的示例：

import { createContainer } from 'unstated-next';
import { useState } from 'react';

class CounterContainer {
  state = {
    count: 0
  }

  increment = () => {
    this.setState({ count: this.state.count + 1 });
  }

  decrement = () => {
    this.setState({ count: this.state.count - 1 });
  }
}

const useCounter = createContainer(CounterContainer);

function Counter() {
  const { state, increment, decrement } = useCounter.useContainer();
  return (
    <div>
      <button onClick={decrement}>-</button>
      <span>{state.count}</span>
      <button onClick={increment}>+</button>
    </div>
  );
}

以上代码中，`CounterContainer` 类定义了一个包含 `count` 属性和 `increment`、`decrement` 方法的状态容器。`useCounter` Hook 获取到该状态容器的实例，通过 `state` 属性和 `increment`、`decrement` 方法实现了一个简单的计数器组件。

需要注意的是，`unstated-next` 的 `createContainer` 与 `Docker` API 中的 `createContainer` 是两个完全不同的东西，它们没有任何关系，也不要混淆。