饿了吗组件Element研究之基础篇

Posted 2023-05-01

参考技术A el-row包裹一行，距下20px

 el-col,一列   用法（el-col ：span="24", 1-24自由选择）

gutter： 指定栏与栏之间的间隔，默认为零。 用法 <el-row :gutter="20">

offset： 分栏偏移。 用法 <el-col :span="6" :offset="6">

将type属性赋值为 'flex'，可以启用 flex 布局，并可通过justify属性来指定 start, center, end, space-between（左右不留间隔）, space-around （左右也有间隔）其中的值来定义子元素的排版方式。

用法 <el-row type="flex" justify="center">

参照了 Bootstrap 的 响应式设计，预设了四个响应尺寸：xs、sm、md和lg。

通过设置类名为el-icon-iconName来使用即可。eg <i class="el-icon-edit"></i>

Button 组件默认提供7种主题，由type属性来定义，默认为default。

<el-button>默认按钮</el-button>

<el-button type="primary">默认按钮</el-button>

你可以使用disabled属性来定义按钮是否可用，它接受一个Boolean值。

<el-button :plain="true" :disabled="true">主要按钮</el-button>

type="success warning danger info"

自定义css??

.block:padding:30px 24px; border-bottom:#eff2f6

.demonstrationfont-size:14px;color:#8492a6;line-height:44px

.demo-button .intro-block .wrapperfloat:right;margin-right:20px;

.el-dropdown display:inline-block;position:relative;

el-table (--fit,--stripe,--border,,,) 

 - el-table__header-wrapper > table > thead > tr > th

 - el-table__body-wrapper  > table > tbody> tr(.el-table__row) > td

饿了么Element UI之Upload组件图片上传原创

图片文件换汤不换药，只要注意前端的写法即可

1.饿了么组件可以利用 http-request 的属性对上传进行自定义 :http-request="uploadFile"

2.设置文件FormData对象传入请求

const formdata = new FormData();
const file = params.file;
formdata.append("file", file);

3.全部代码

<template>
  <div style="margin-top:5%">
    <el-upload
      :onError="uploadError"
      :onSuccess="uploadSuccess"
      class="upload-demo"
      ref="upload"
      :auto-upload="false"
      accept=".eml"
      multiple
      :before-upload="beforeUpload"
      action=" "
      :http-request="uploadFile"
    >
      <el-button slot="trigger" size="small" type="primary">----</el-button>
      <el-button slot="trigger" size="small" type="primary">----</el-button>
      <el-button slot="trigger" size="small" type="primary">----</el-button>
      <el-button slot="trigger" size="small" type="primary">----</el-button>
      <el-button slot="trigger" size="small" type="primary">选取邮件</el-button>

      <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传邮件</el-button>
      <div slot="tip" class="el-upload__tip">可以同时上传多个eml文件至服务器</div>
    </el-upload>
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {};
  },
  computed: {
    //进入的用户
    userSO_json() {
      let userSO_json = JSON.parse(sessionStorage.getItem("userSO_json"));
      return userSO_json;
    }
  },
  methods: {
    /**
     * 自定义:http-request="uploadFile"之后，回调方法暂且失效，所以提示信息应该写在axios里面
     */
    // 上传成功后的回调
    uploadSuccess(response, file, fileList) {
      console.log("上传文件", response);
      this.$message({
        showClose: true,
        message: "恭喜你，邮件上传成功",
        type: "success"
      });
    },
    // 上传错误后的回调
    uploadError(err, file, fileList) {
      if (err.message != "") {
        this.$message.warning(err.message);
      } else {
        this.$message.warning("网络错误，不能访问");
      }
    },
    uploadFile(params) {
      const formdata = new FormData();
      const file = params.file;
      formdata.append("file", file);
      axios
        .post("/api/EmlUploadController/uploadFile?userName="+this.userSO_json.userName, formdata, {
          headers: {
            //头部信息
            "Content-Type": "multipart/form-data",
            token: this.userSO_json.token
          }
        })
        .then(response => {
          this.$message({
            showClose: true,
            message: "恭喜你，邮件上传成功",
            type: "success"
          });
        })
        .catch(error => {
          //前端的token留在点击退出按钮那里删除，这里就只是提示过期
          if (error.message != "") {
            this.$message.warning("此封一模一样邮件你已经上传过了");
          } else {
            this.$message.warning("后端token过期，请重新登录");
          }
        });
    },
    //添加任务
    async beforeUpload(file) {
      console.log("beforeUpload");
      // const extension = file.name.split(".")[1] === "eml";
      // const isLt2M = file.size / 1024 / 1024 < 10;
      // if (!extension) {
      //   console.log("上传邮件只能是 eml格式!");
      // }
      // if (!isLt2M) {
      //   console.log("上传邮件大小不能超过 10MB!");
      // }
      // return extension && isLt2M;
    },

    //提交
    submitUpload() {
      this.$refs.upload.submit();
    }
  }
};
</script>
<style scoped>
.el-table--border,
.el-table--group {
  border: none;
}
.el-table__header-wrapper th:nth-last-of-type(2) {
  border-right: none;
}
.el-table--border td:nth-last-of-type(1) {
  border-right: none;
}
.el-table--border::after,
.el-table--group::after {
  width: 0;
}
.el-select .el-input {
  width: 180px;
}
.input-with-select .el-input-group__prepend {
  background-color: #fff;
}
.input-with-select {
  margin-left: -5px;
}
.select {
  margin-left: 0px;
}
.input-with-select {
  background-color: #fff;
  width: 390px;
}
.pagination {
  height: 80px;
  text-align: center;
}
.choose {
  float: left;
}
.upload-demo {
  float: left;
}
.button1 {
  left: 40%;
}
.button2 {
  text-align: center;
}
.divider {
  margin: 0;
}
.conditionalQuery {
  float: right;
  height: 60px;
  margin-right: 80px;
}
</style>