文章目录
- 1. 引入一个组件需要什么步骤
- 2. 监听变量的修改
- 3. async与await实现异步调用
- 4. position: relative
- 5. 定时执行方法
1. 引入一个组件需要什么步骤
引入一个组件，一定不要加{}
（对）import editForm from “./component/editForm”;
（错）import { editForm } from “./component/editForm”;
<template><div style="height: 100%" class="pol-index fence-page"><edit-form // 步骤2ref="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);
},
)
