前端学习——工具的使用

1. 引入一个组件需要什么步骤

引入一个组件，一定不要加{}

（对）import editForm from “./component/editForm”;
（错）import { editForm } from “./component/editForm”;

<template>
  <div style="height: 100%" class="pol-index fence-page">
    <edit-form							// 步骤2
      ref="newForm"
      :show.sync="showNewForm"
      :loading="newFormLoading"
      :mode.sync="formType"
      :bureauId="bureauId"
      @submit="newFormSubmit"
    />
  </div>
</template>

import editForm from "./component/editForm";			// 步骤1

2. 监听变量的修改

data() {
	return {
		tipShow: false;
	}
},

watch:{
	tipShow(newVal, oldVal){
		console.log("原始数值为", oldVal);
      	console.log("修改数值为", newVal);
    }
},

3. async与await实现异步调用

// 获取待处理事件总数
    async getTotalCount() {
      let taskCount = await this.getTaskList();
      let maintenanceCount = await this.getMaintenanceList();
      let insuranceCount = await this.getInsuranceList();
      this.totalCount = taskCount + maintenanceCount + insuranceCount;
    },

    // 获取待审批任务列表
    async getTaskList() {
      // 构造参数
      let obj = {
        state: 0,
      };
      let data = {
        ...this.page,
        ...obj,
      };

      // 访问后端，获取待审批任务列表
      return new Promise((resolve, reject) => {
        taskList(data)
          .then((res) => {
            if (res && res.data) {
              resolve(res.data.total);
            }
          })
          .catch();
      });
    },

    // 获取保养设备列表
    async getMaintenanceList() {
      let data = {
        ...this.page,
      };

      return new Promise((resolve, reject) => {
        searchMaintenance(data)
          .then((res) => {
            if (res && res.data) {
              resolve(res.data.total);
            }
          })
          .catch();
      });
    },

    // 获取过期设备列表
    async getInsuranceList() {
      let data = {
        ...this.page,
      };

      return new Promise((resolve, reject) => {
        searchInsurance(data)
          .then((res) => {
            if (res && res.data) {
              resolve(res.data.total);
            }
          })
          .catch();
      });
    },

4. position: relative

position: relative;: 这意味着该元素的定位是相对于其正常位置。
当您为这个元素添加top、right、bottom或left属性时，这些值会相对于其正常位置进行调整。

5. 定时执行方法

// 定义timer对象
data(){
	return {
		timer: null,
	}
}

// 初始化timer对象，5秒执行一次getTotalCount()
initTotal() {
    this.getTotalCount();
    this.timer = window.setInterval(() => {
        this.getTotalCount();
    }, 5000);
},

// 销毁timer对象
beforeDestroy() {
    window.clearInterval(this.timer);
},