vue3.0常用写法

vue3.0常用的函数及方法：

:style="'background-color:'+record.color"


ref定义的要用.vule赋值，适用于数字、字符串
reactive定义的数组不需要用vule,适用于数组、对象

============================================

路由跳转：useuseRouter 函数用于获取当前的路由器实例
import { useRouter } from "vue-router";
const router: any = useRouter();
router.push({
    path: "/repairDetail",
  });

===========================================

获取路由id   useRoute 函数用于获取当前的路由信息
import { useRoute } from 'vue-router';
const route = useRoute();
route.query.id


=============================================


const stepDict = reactive([
  { text: "已提交", value: 0, },
  { text: "已受理", value: 1, },
  { text: "已派单", value: 2, },
  { text: "已处理", value: 3, },
  { text: "已评价", value: 4, },
])

===========================================

const getRepairInfo = () => {
  dataLoading.value = true
  GetRepairInfo(route.query.id).then((res: any) => {
    repairData.value = res.data.result
  }).catch((err) => {
    console.log(err);
  }).finally(() => {
    dataLoading.value = false
  })
}

onMounted(() => {
  getRepairInfo()
})

================================================

相当于swiper
<el-carousel height="200px" motion-blur>
      <el-carousel-item v-for="item in 4" :key="item">
        <h3 class="small justify-center" text="2xl">{{ item }}</h3>
      </el-carousel-item>
    </el-carousel>



scoped内部修改组件的样式
::v-deep .el-carousel__container{
    height: 500px;
  }

/deep/ .el-checkbox__inner{
    background-color: #fff;
    border: #ff943e 1px solid;
}



北京或者文字半透明
 background: rgba(255, 255, , 255, , 0.8);
 colorrgba(0, 0, 0, 0.5);

================================

时间日期格式化：moment.js
import moment from 'moment';
{{ moment(item.createDate).format("YYYY-MM-DD HH:mm:ss")}}



//拼接报修分类
const getRepairCategories = (repairCategories) => {
  return repairCategories?.map(obj => obj.category.name).join("、")
}

//******根据id筛选数据 *******
const getWorkPlanCharge = () => {
  let findWorkPlan = chargesList.value.find(obj => obj.id == taskData.value.projectId)
 return findWorkPlan ? findWorkPlan.charges : []
}

==========================================================

接口配置：

单个字段传值：
//通过建筑物获取房屋
export const GetRoomsForSelect = (buildingId: any) => {
  return request.get("Repair/GetRoomsForSelect", {
    params: {
      buildingId: buildingId,
    },
  }
);
};

多字段传值：
//分页获取报修单
export const GetRepairInfos = (data: any) => {
  return request.get("Repair/GetRepairInfos", {
    params: {
      ...data,
    },
  });
};

接口请求：
 SaveRepairInfo(data).then((res: any) => {
    if (res.data.result) {
      showSuccessToast("上报成功");
      router.push({
        path: "/repairList",
      });
    }
  }).catch((err) => {
    console.log(err)
  }).finally(() => {
    sumbitLoading.value = false
  })


//带确认按钮的弹窗
ElMessageBox.confirm(
    '确定要删除该负责人吗？',
    '温馨提示',
    {
      confirmButtonText: '确认删除',
      cancelButtonText: '取消',
      type: 'warning',
    }
).then(() => {
      ElMessage({
        type: 'success',
        message: '删除成功',
      })
}) .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消成功',
      })
})


//弹窗消息提示
 ElMessageBox.alert('This is a message', 'Title', {
    // if you want to disable its autofocus
    // autofocus: false,
    confirmButtonText: 'OK',
    callback: (action: Action) => {
      ElMessage({
        type: 'info',
        message: `action: ${action}`,
      })
    },
  })



提示弹窗
//成功弹窗
  ElMessage({
    message: '成功',
    type: 'success',
  })

//错误弹窗
  ElMessage({
    message: '失败',
    type: 'warning',
  })

===================
父组件调用子组件的方法  sing()
<Child ref="child"/>

 this.$refs.child.sing();

===================

<el-checkbox-group v-model="repairHandlers">
      <!-- <el-checkbox :label="charges.chargePeopleName" :value="charges.id" v-for="(charges,indx) in item.category.categoryCharges" :key="indx" /> -->   //repairHandlers里的值为：'55464654654'
      <el-checkbox :label="charges.chargePeopleName" :value="{categoryId:charges.id}" v-for="(charges,indx) in item.category.categoryCharges" :key="indx" />  //repairHandlers里的值为：categoryId:'55464654654'
      <!-- <el-checkbox :label="charges.chargePeopleName" :value="charges" v-for="(charges,indx) in item.category.categoryCharges" :key="indx" /> -->    //repairHandlers里的值为对象
</el-checkbox-group>


==========================

弹窗收集data,要通过合并对象的方式，防止双向绑定
Object.assign(formData.value,row)


//手机号验证
import { isPhone } from "../../src/util/until";
if (!isPhone(value))
      callback(new Error(translateTitle("密码不能少于6位")));
 else callback();

==========================

暂无数据：

 <el-empty description="暂无数据" :image-size="200" v-else />

//返回对象内部某个属性
const data = {
    repairInfoId: id,  
    repairHandlers: repairHandlers.value.map(obj =>{
      return {
        repairInfoId: id,
        categoryChargeId:obj.id,
      }
    })
  }


//紧急情况  颜色 前端根据颜色或者step获取属性值
const colorList = ["#1677ff", "#52c41a", "#fadb14", "#fa8c16", "#f5222d"]
const getEmergencyLevelColorByKey = (value) => {
  let findObj = dict.emergencyLevelTypes.find(obj => obj.value == value)
  console.log('findObj',findObj)
  return findObj ? colorList[value] : "#dadada"
}

使用方法： <a-tag :color="getEmergencyLevelColorByKey(task.emergencyLevel)" class="radius10"> {{ getEmergencyLevelLabelByKey(task.emergencyLevel) }}</a-tag>








时间格式转换
import moment from 'moment';
moment(repairData.createDate).format("YYYY-MM-DD HH:mm:ss")


//监听数据变化watch，然后再赋值或者执行
watch(()=> props.status,(newVal,oldVal)=>{
  console.log("监听",newVal,oldVal)
  getStatus();
})




 emit检索数据向外抛出
const selectFapUser = () => {
  emit("update:charges", [...selectUsers.value].map(obj => {
    return {
      fapUserId: obj.fapUserId,
      fapUserName: obj.fapUserName,
    }
  })
)

对象合并
Object.assign({},obj1,logList.value);

给已经有的数组里新增前端需要的属性
logList.value = res.data.results;
      logList.value.map(obj => {
        obj.more=false
        obj.moreTxt='显示更多'
        console.log("obj",obj)
  })


格式化时间

import moment from 'moment';

 {{ moment(task.endDate).format("YYYY年MM月DD日") }}

=========vue2.0==========================
时间格式化
{{scope.row.jinXiao.jinXiaoQianDaoQueRen?formatDate(scope.row.jinXiao.jinXiaoQianDaoQueRen,"YYYY-MM-DD HH:mm"):""}}

 watch: {
     confirmVisible: {
                handler: function (val, oldVal) {
                    this.$emit("changed", this.confirmVisible)
                },
                deep: true
      },
},

 

moment组件的用法 https://www.jianshu.com/p/10bb00e88da4

普及一下 moment.js 的相关知识

获取当前的日期和时间  moment()

获取String的日期和时间  moment(String)

获取当天的年份  moment().get('year')

获取当天的月份 0-12   moment().get('month')+1

获取当天的日期   moment().get('date')
 
得到的时间格式为YYYY-MM-DD   moment(String,'YYYY-MM-DD')  、 moment(String).format('YYYY-MM-DD')

设置年份，获取一年前的时间   moment().subtract(1, 'years')

设置月份，获取一个月前的时间   moment().subtract(1, 'months')

设置日期，获取昨天的时间    moment().subtract(1, 'days')  // 昨天   moment().subtract(30, 'days') // 31天

获取今天的0时0分0秒  moment().startOf('day')

获取本周第一天的0时0分0秒    moment().startOf('week')
 
获取今天的23时59分59秒    moment().endOf('day')

获取本周第一天的23时59分59秒  moment().endOf('week')

获取2月的天数    moment("2023-02", "YYYY-MM").daysInMonth() // 28

获取时间戳(以秒为单位)   moment().format('X').unix() // 返回值为数值型

获取时间戳(以毫秒为单位)    moment().format('x').valueOf() // 返回值为数值型