前端开发过程记录

JianZhen✓

已于 2023-06-21 14:29:45 修改

阅读量102

点赞数 1

分类专栏：日常开发文章标签：前端 vue.js javascript

于 2023-04-16 17:46:45 首次发布

本文链接：https://blog.csdn.net/aZHANGJIANZHENa/article/details/130154186

版权

日常开发专栏收录该内容

17 篇文章 0 订阅

订阅专栏

js获取当前年份

const yearNow = new Date().getFullYear().toString() || "";

js获取当前季度

    getCurrQuarter() {
      // 获取当前季度：
      var currMonth = new Date().getMonth() + 1;
      var currQuarter = Math.floor(
        currMonth % 3 == 0 ? currMonth / 3 : currMonth / 3 + 1
      );
      switch (currQuarter) {
        case 1:
          this.queryList.riskQuarter = "第一季度";
          break;
        case 2:
          this.queryList.riskQuarter = "第二季度";
          break;
        case 3:
          this.queryList.riskQuarter = "第三季度";
          break;
        case 4:
          this.queryList.riskQuarter = "第四季度";
          break;
      }
    },

js判断列表里是否有脏数据，es6的some会返回布尔值

console.log(' status:>> ', this.missionList.some(item=>item.id==null));

js获取白屏时间与首屏时间

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

    </style>
    <script>
        // 获取首屏时间
                console.log(new Date().getTime() - performance.timing.navigationStart);

    </script>
</head>
<body>

    <div class="modal">
      
    </div>
    <script>
        //获取白屏时间
                console.log(new Date().getTime() - performance.timing.navigationStart);

    </script>

</body>
</html>

关于mixin，mixin就是把一些公共方法进行抽离，方便复用，mixin会与组件进行混合，相当于组件里多出几个变量与方法

mixin会先于组件执行，如果组件里有和mixin里重名的变量，会直接覆盖mixin里的同名变量

vue2的mixin制作复制方法，创建copyMisIn.js文件

let copyMisin = {
    methods: {
        copy(content) {
            const result = this.getCopy(content);
            if (result === false) {
                this.$message.error("不支持");
            } else {
                this.$message.success("复制成功");
            }
        },
        getCopy(content) {
            let textarea = document.createElement("textarea");
            textarea.value = content;
            textarea.readOnly = "readOnly";
            document.body.appendChild(textarea);
            textarea.select(); // 选择对象
            textarea.setSelectionRange(0, content.length); //核心
            let result = document.execCommand("Copy"); // 执行浏览器复制命令
            textarea.remove();
            return result;
        },
    }
}
export default copyMisin;

使用copy方法

<template>
 <div>
        <div class="logcontent" v-for="item in missionList" :key="item.id">
          <span>{{ item.content }}</span
          ><span class="copy" title="复制" @click="copy(item.content)"></span>
        </div>
      </div>
 
   
  </cwDialog>
</template>
<script>
import copyMisin from "@/js/copyMisIn.js";
export default {
  mixins: [copyMisin],
 
};
</script>
<style lang="less">
</style>

前端打包部署浅析，使用winscp

我们使用npm run build 将前端项目打成dist包，然后把打好的包放到服务器指定文件夹下，配置一下nginx，确保相关站点能指向服务器的前端文件夹目录，然后重启服务就行了

在vue2中tab切换使用动态组件，是父传子子传父跟正常组件一样的使用方法

父组件

<style lang="less" scoped>
</style>

<template>
  <div
    class="extractCommont extractSearch extractDataMaintenanceSearch"
    id="container"
  >
  
            <component :is="currentView" @infoChange="getInfo"></component>
          
  </div>
</template>

<script>

import personalReport from "./personalReport.vue"; //声誉风险台账 个人上报
import subordinateUnit from "./subordinateUnit.vue"; //声誉风险台账 下属单位
import operatingDepartment from "./operatingDepartment.vue"; //声誉风险台账 业务部门

export default {
  components: {

    personalReport,
    subordinateUnit,
    operatingDepartment,
  },
  data() {
    return {
      query:{},
      currentView: "",
      tabnameList: [],
      isActive: "",
      statistics: {
        typeCount: 0,
        divided: 0,
        office: 0,
        apply: 0,
        conclude: 0
      },
      statisticsType: 1,
    };
  },
  methods: {
    getInfo(val){
      this.query=val;
    console.log('val :>> ', val);
    },



    toggleTabs(url, id, ele) {
//需要写一个切换组件的方法，把组件components里注册的名字给到:is
      this.currentView = url.split("/")[3];
      
      }
    },

  }
};
</script>

子组件

<template>
  <!-- 个人上报 -->
  <div class="extractCommont extractSearch">
    
          <div class="titleLabel col-9">
            <label>时间范围</label>
            <el-radio-group v-model="riskQuarter" size="mini">
              <el-radio-button
                v-for="lab in optionTime"
                :key="lab.lable"
                :label="lab.value"
                >{{ lab.label }}</el-radio-button
              >
            </el-radio-group>
           
          
          <div class="titleLabel col-9">
            <el-input
              type="text"
              placeholder="输入问题描述搜索关键词"
              class="col-2"
              clearable
              v-model="questionRemark"
            />&nbsp;&nbsp;

            <button class="blue" @click="searchBtn()">
              <img src="../../../images/search.png" />查询
            </button>
          </div>
        </div>
      </transition>
    </div>
   
  </div>
</template>

<script>


const yearNow = new Date().getFullYear().toString() || "";
export default {

  data() {
    return {
     
      uploadRiskYear: yearNow,
      uploadRiskQuarter: "",
      uploadDepartMent: "", //排查部门

     
      riskQuarter: "",
      riskYear: yearNow,
    
      optionTime: [
        {
          value: "",
          label: "全部"
        },
        {
          value: "第一季度",
          label: "第一季度"
        },
        {
          value: "第二季度",
          label: "第二季度"
        },
        {
          value: "第三季度",
          label: "第三季度"
        },
        { value: "第四季度", label: "第四季度" }
      ],
     
    };
  },
  created() {
    this.getCurrQuarter();
  },
  mounted() {
  },
  methods: {

    getCurrQuarter() {
      // 获取当前季度：
      var currMonth = new Date().getMonth() + 1;
      var currQuarter = Math.floor(
        currMonth % 3 == 0 ? currMonth / 3 : currMonth / 3 + 1
      );
      switch (currQuarter) {
        case 1:
          this.riskQuarter = "第一季度";
          this.uploadRiskQuarter = "第一季度";
          break;
        case 2:
          this.riskQuarter = "第二季度";
          this.uploadRiskQuarter = "第二季度";
          break;
        case 3:
          this.riskQuarter = "第三季度";
          this.uploadRiskQuarter = "第三季度";
          break;
        case 4:
          this.riskQuarter = "第四季度";
          this.uploadRiskQuarter = "第四季度";
          break;
      }
      const arr = [];
      arr.push(
        this.riskQuarter || ["第一季度", "第二季度", "第三季度", "第四季度"]
      );
      this.$emit("infoChange", {
        riskYear: this.riskYear + "年",
        riskQuarter: arr,
        queryType: 1,
        orgType: Number(this.orgType)
      });
    },
  
  }
};
</script>
<style lang="scss" scoped>

</style>

当我们使用element-ui时，我们懒得在下面写方法写from格式参数调接口时，我们用到了auto-load属性，关了之后就不会出现上传完文件就立马提交的情况，把它关了之后使用ref点击保存再去执行下一步。

<el-upload
              class="upload"
              action="/cbrc/work/book/batchAddRisk"
              :auto-upload="false"
              :on-success="upsuccess"
              :headers="header"
              :on-remove="deletefile"
              :before-upload="handleChange"
              :file-list="fileList"
              :limit="1"
              :data="{
                orgType: uploadDepartMent,
                riskQuarter: uploadRiskQuarter,
                riskYear: uploadRiskYear ? uploadRiskYear + '年' : ''
              }"
             :on-change="
                () => {
                  exportOver = true;
                }
              "
              ref="upload"
            >
              <el-button type="primary" class="blue"
                >添加文件<i class="el-icon-upload el-icon--right"></i
              ></el-button>
              <div class="upload__tip">
                备注：只可上传一个文件，已有风险舆情隐患只更新状态，不覆盖原数据
              </div>
            </el-upload>

:on-change="

() => {

exportOver = true;

}

是为了监测到文件上传状态，我们可以用exportOver来判断文件是否上传完毕来决定必填校验是否展示

js代码

 this.$refs.upload.submit();

vue2的computed 使用场景

原代码-不好维护

<el-button
        v-if="
          (realSubmitStatus || pageStatus === 'add') &&
            !(userInfo.orgId === 7 && userInfo.depType === 1)
        "
        :loading="saveLoading"
        @click="saveIt('上报')"
        class="blue"
        type="primary"
        >提交上报</el-button
      >

现在的代码-使用computed：

  <el-button
        v-if="showSendBtn"
        :loading="saveLoading"
        @click="saveIt('上报')"
        class="blue"
        type="primary"
        >提交上报</el-button
      >


 computed: {
    showSendBtn: function() {
      const { orgId, depType } = this.userInfo;
      if (
        (this.realSubmitStatus || this.pageStatus === "add") &&
        !(orgId === 7 && depType === 1)
      ) {
        return true;
      }
      return false;
    }
  },

data() {

return {

depTypeDic: JSON.parse(sessionStorage.getItem("dataDic")).depType

}

};

},

 computed: {
    depTypeName: function() {
    
      let name = "";
      console.log('this.depTypeDic :>> ', this.depTypeDic);
      if (this.depTypeDic && this.depTypeDic.length > 0) {
        this.depTypeDic.forEach(item => {
          if (this.form.depType && item.code == this.form.depType) {
            name = item.name;
          }
        });
      }

      return name;
    }
  },

却发现computed中的this.depTypeDic值是未定义，所以需要在computed里再获取一下本地存储里的值

  computed: {
    depTypeName: function() {
      let name = "";
      const depTypeDic = JSON.parse(sessionStorage.getItem("dataDic")).depType;
      if (depTypeDic && depTypeDic.length > 0) {
        depTypeDic.forEach(item => {
          if (this.form.depType && item.code == this.form.depType) {
            name = item.name;
          }
        });
      }
      return name;
    }
  },