vue2常用js与css相关小技巧

条幅提示：

 this.$confirm('是否导出?', '提示', {
      //     confirmButtonText: '确定',
      //     cancelButtonText: '取消',
      //     type: 'warning'
      //   }).then(() => {
      //     this.exportDetailLog()//函数
      //   }).catch(() => {
      //   });
      // },

接口导出xlsx：

exportListExcel1(data).then((response) => {
    //     if (response) {
    //       let exportFileName = "导出明细.xlsx";
    //       this.download(response, exportFileName);
    //       this.$message({
    //         message: "导出成功",
    //         type: "success",
    //         center: true,
    //         duration: 2000,
    //       });
    //     }
    //   });


 download(data, filename) {
      if (data == null) {
      } else {
        let url = window.URL.createObjectURL(new Blob([data]));
        let link = document.createElement("a");
        link.style.display = "none";
        link.href = url;
        link.setAttribute("download", filename);
        document.body.appendChild(link);
        link.click();
      }
    },

table表格导出

import FileSaver from "file-saver";
import * as XLSX from "xlsx";
 exportExcel() {
      /* generate workbook object from table */
      var xlsxParam = { raw: true }; // 导出的内容只做解析，不进行格式转换
      var wb = XLSX.utils.table_to_book(
        document.querySelector("#exportTable"),
        xlsxParam
      );
      /* get binary string as output */
      var wbout = XLSX.write(wb, {
        bookType: "xlsx",
        bookSST: true,
        type: "array"
      });
      try {
        FileSaver.saveAs(
          new Blob([wbout], { type: "application/octet-stream" }),
          "导出数据.xlsx"
        );
      } catch (e) {
        if (typeof console !== "undefined") {
          console.log(e, wbout);
        }
      }
      return wbout;
    },

el-table表格相关样式修改

表格间隔背景
 <el-table
      :data="tableData"
      style="width: 100%"
      height="calc(100% - 19.375rem)"
      :row-class-name="tableRowClassName"
      v-loading="isLoading"
    ><el-table/>

 tableRowClassName({row, rowIndex}) {
      if (rowIndex % 2 != 1) {
        return "color-row";
      }
      return "";
    },


 .color-row {
    background: #f8f9fd;
  }



表格背景色的修改
 .el-table {
        color: #ffffff;
      }
      ::v-deep .el-table thead {
        color: #63b0ff;
      }
      ::v-deep .el-table,
      ::v-deep .el-table__expanded-cell {
        background-color: #012b67 !important;
        border: .0625rem solid #012b67; //去除表格
      }
      /* 表格内背景颜色 */
      ::v-deep .el-table th,
      ::v-deep .el-table tr,
      ::v-deep .el-table td {
        background-color: #012b67 !important;
        border: .0625rem solid #006cff; //去除表格
      }
::v-deep .el-table tr {
          &:nth-child(2n) {
            background-color: rgba(102, 202, 255, 0.3) !important;
            border: 0; //去除表格
          }
        }
     /* 去除底部留白 */
       .el-table::before {
          left: 0;
          bottom: 0;
          width: 100%;
          height: 0rem;
        }

溢出添加省略号

 span {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }

项目网页链接的跳转

 goto(link) {
      if (link.indexOf("http://") != -1 || link.indexOf("https://") != -1) {
        window.open(link, "_blank");
      }
    }

文本框的滚动条的样式设置

元素需要设置overflow:scroll
 // 滚动条
  ::-webkit-scrollbar {
    width: 0.3rem;
    height: 0.4rem;
  }

  ::-webkit-scrollbar-track {
    border-radius: 0.125rem;
  }

  ::-webkit-scrollbar-thumb {
    border-radius: 0.625rem;
    background: linear-gradient(0deg, #243748, rgba(119, 227, 240, 0.7));
    box-shadow: 0rem 0.6875rem 0.75rem 0.0625rem rgba(16, 112, 153, 0.46);
    border-radius: 0.25rem;
    opacity: 0.8;
  }

时间处理

 dateAdd(dateValue) {
      let dateTime = new Date(dateValue);
      dateTime = dateTime.setDate(dateTime.getDate() + 1);
      let date = new Date(parseInt(dateTime));
      let y = date.getFullYear();
      let m = date.getMonth() + 1;
      m = m < 10 ? "0" + m : m;
      let d = date.getDate();
      d = d < 10 ? "0" + d : d;
      let time = y + "-" + m + "-" + d;
      return time;
    },

购物车总价计算

// 总钱数  = 所有单项的钱数累加  单项的钱数 = 数量 * 单价
  effectiveListPrice() {
    return this.effectiveList
      .reduce((sum, item) => sum + item.count * Number(item.nowPrice), 0)
      .toFixed(2)
  }

动态绑定样式

:class="{transt:show}"
:class="[currentbtn==index?'activeBtn':'btn-item']"
:class="{'search-item':index < searchDataList.length-1,'search-item-noline':index == searchDataList.length-1}"

全屏和退出全屏

 exitFullScreen(){
        var el = document.documentElement
        var isFullscreen = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen
            if(!isFullscreen){
               (el.requestFullscreen && el.requestFullscreen()) || (el.mozRequestFullScreen && el.mozRequestFullScreen()) || (el.msRequestFullscreen && el.msRequestFullscreen)
            }else{
                document.exitFullscreen ? document.exitFullscreen() : document.mozCancelFullScreen ? document.mozCancelFullScreen() : document.webkitExitFullscreen ? document.webkitExitFullscreen() : ''
            }
          this.flag = !this.flag
    }

小数点的相关保留问题

截取小数点前面的
 this.jryxData.zjarr = num1.substring(0,num1.indexOf("."))

数组元素保留两位
  this.rgzData.zjarr = zjData.map(item => {
            return item.toFixed(2)
         })

数据的某个字段保留两位
 const keepTwo = (item) => parseFloat(item || "")?.toFixed(2) || "";
 let d = data.map((s) => ({
          ...s,
          before_l_value: keepTwo(s.before_l_value),
        }));


管道符过滤器
<div>{{item.value | tofixed}}</div>
filters:{
tofixed(num){
return Number(num).toFixed(2)
}



字段函数保留两位小数
import {toNumber} from '@/utils/index'
  getNumber(val){
      return toNumber(val,2)
    }

export function toNumber(params, num) {
  //+params===Number(params)
  if (+params || params === 0 || params === "0") {
    if(num){
      return +parseFloat(params).toFixed(num);
    }else{
      return Number(params)
    }
  }
  return params;
}

el-select样式的修改

 <el-select
                    :popper-append-to-body="false"
/>//需加上这一句

 ::v-deep .el-input--small .el-input__inner {
                    height: 1.375rem;
                    background-color: rgba(23, 75, 150, 0.7) !important;
                    border: none;
                    color: #ffffff;
                  }
                  ::v-deep .el-select-dropdown {
                    background-color: rgba(23, 75, 150, 0.5) !important;
                    // height: 200px;
                  }
                  ::v-deep .el-select-dropdown__item.hover {
                    background-color: rgba(143, 180, 233, 0.5) !important;
                  }
                  ::v-deep .el-select-dropdown__item {
                    color: #ffffff !important;
                  }
                  ::v-deep .el-select-dropdown__wrap {
                    max-height: 180px !important;
                  }

对数组对象的每项添加属性并进行分类排序

 let data = dataList.reduce((obj, item) => {
            const itemByColor = {
              ...item,
              color: this.dataJson.colorObj[item.areaname],
            };
            if (obj[item.name]) {
              obj[item.name].push(itemByColor);
            } else {
              obj[item.name] = [itemByColor];
            }
            return obj;
          }, {});
          Object.entries(data).forEach(([key, value]) => {
            data = {
              ...data,
              [key]: value.sort(function (a, b) {
                return a.value - b.value;
              }),
            };
          });

路由相关问题

路由跳转以及传参
 this.$router.push({
        path: '/amap/equityPenetration',
        query: {
          ...this.entDetail
        }
      })
路由参数的获取
this.$route.query.id
新标签页跳转
       let routerData = this.$router.resolve({
        path: "/zjszhptow",
       });
     window.open(routerData.href, "_blank");

el-table表格自动滚动

 const table = this.$refs.table;
    const divData = table.bodyWrapper;
    clearInterval(this.timers);
    this.timers = setInterval(() => {
      divData.scrollTop += 1;
      if (divData.clientHeight + divData.scrollTop >= divData.scrollHeight) {
        divData.scrollTop = 0;
      }
    }, 60);
  },
  beforeDestroy() {
    clearInterval(this.timers);

iframe传值问题

iframe子向父传值
在父页面里
 mounted(){
    // 监听子页面发送的消息
     window.addEventListener("message", (messageEvent) => {;
        console.log(messageEvent.data,11111);
        this.clickParent = messageEvent.data
    });
  },

在子页面里
 // 向父页面发送消息
     sendParent(){
          window.parent.postMessage(
        "sendTop",
        "http://localhost:8013/#/iframezj"  //父页面的地址
      );
    },