前端相关汇总（持续更新）

JS

  let host = location.protocol + '//' + location.host // 协议:ip:端口
  let origin = location.protocol + '//' + location.hostname // 协议:ip

js获取近半年月份

 getMonths() {
      var monthArr = [];
      var data = new Date();
      var year = data.getFullYear();
      data.setMonth(data.getMonth() + 1, 1); //获取到当前月份,设置月份
      for (var i = 0; i < 6; i++) {
        data.setMonth(data.getMonth() - 1); //每次循环一次 月份值减1
        var m = data.getMonth() + 1;
        m = m < 10 ? "0" + m : m;
        this.monthArr.push(data.getFullYear() + "-" + m);
      }
       console.log(this.monthArr);
     return monthArr;
   },

EasyUI

加载效果

// 下载进度效果
function ajaxLoading(){
	$("<div class=\"datagrid-mask\"></div>").css({display:"block",width:"100%",height:$(window).height()}).appendTo("body");
	$("<div class=\"datagrid-mask-msg\"></div>").html("正在处理，请稍候。。。").appendTo("body").css({display:"block",left:($(document.body).outerWidth(true) - 190) / 2,top:($(window).height() - 45) / 2});
}
function ajaxLoadEnd(){
	$(".datagrid-mask").remove();
	$(".datagrid-mask-msg").remove();
}

原始异步下载

/**
 *
 * @param url 地址
 * @param form new Form()
 * @param fileName 文件名
 */
function fileDownXHR(url, form, fileName) {
	ajaxLoading(); //发送请求前打开进度条
	var xhr = new XMLHttpRequest();
	xhr.open('POST', url, true);//get请求，请求地址，是否异步
	xhr.responseType = "blob";    // 返回类型blob
	xhr.onload = function () {// 请求完成处理函数
		if (this.status === 200) {
			var blob = this.response;// 获取返回值
			var a = document.createElement('a');
			a.download = new Date().toLocaleDateString()+ fileName +'.xls';
			a.href=window.URL.createObjectURL(blob);
			a.click();
			ajaxLoadEnd(); //任务执行成功，关闭进度条
		} else {
			$.messager.alert('错误','文件下载失败，请重试！','error');
		}
	};
	xhr.send(form)
}

Easyui如何实现combotree,输入文本及时筛选功能

https://blog.csdn.net/qq_45629145/article/details/121328335

Vue

Vue中将文件批量下载打包成zip格式

https://blog.csdn.net/qq_45629145/article/details/120410403

flex布局设置单个子元素靠右

父元素设置了 flex 布局

display: flex;
align-items: center;

如何让某个子元素靠右呢

方法一

flex: 1;
text-align: right;

或

方法二

margin-left: auto;

IView

IView实现动态添加表单选项并实现高级搜索

https://blog.csdn.net/qq_45629145/article/details/120492243

ElementUI

table上方按钮输入框布局

效果实现：

<div style="margin-bottom: 10px">
        <el-row type="flex" justify="space-between">
          <el-col :span="12">
              <el-button type="primary" @click="handleQuery"><svg-icon icon-class="bind"/> 绑定单位</el-button>
              <el-button
                  icon="el-icon-refresh"
                  @click="getList"
              >刷新</el-button>
          </el-col>
          <el-col :span="12" style="flex-basis: max-content;">
            <el-input
                v-model="queryParams.equipName"
                placeholder="搜索设备名称/识别号"
                clearable
                style="width: 240px"
                @keyup.enter.native="handleQuery"
            />
            <el-button style="margin-left: 10px" type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
          </el-col>
        </el-row>
    </div>

抽屉布局

效果：

<el-drawer
        title="绑定单位"
        :visible.sync="drawer">
      <div style="display: flex;flex-direction: column;height: 100%">
        <div style="height: 50px;display: flex;justify-content: center">
          <div style="width: 90%">
            <el-input
                placeholder="输入关键字进行过滤"
                v-model="filterText">
            </el-input>
          </div>
        </div>
        <div style="flex: 1;overflow: auto">
          <el-tree
              class="filter-tree"
              :data="deptOptions"
              :props="defaultProps"
              :filter-node-method="filterNode"
              ref="tree">
          </el-tree>
        </div>
        <div style="height: 50px;text-align: center;">
          <el-button @click="drawer = false">取 消</el-button>
          <el-button type="primary" @click="" :loading="loading">{{ loading ? '提交中 ...' : '确 定' }}</el-button>
        </div>
      </div>

    </el-drawer>