vue2.7 | vue3 ts sfc代码编写

单文件组件sfc

编写模板

声明使用ts，setup标识使用composion API，组件导入在script import即可，其他template、style模块和vue2一样。

定义data、方法、生命周期函数、refs使用

推荐使用ref定义数据，使用数据的时候，一些地方需要.value获取；
注意：element ui 没有很好的TS类型支持，一些数据定义需要额外定义。(全局方法也是没有（需要全局定义type），好多需要补齐的地方，有点为了用而用了)
此外，refs的用法注意，vue composition 里面没有this了。

使用全局注册方法

老项目体验（升级vue2.7+ts)

因为项目比较老旧的原因，vue2.7还是对TS的支持还是不太够：
例如取某个DOM定义的ref，获取元素调用某个方法时，需要定义：

导致方法调用的可选链过长（不然会告警）：

老项目存留的js方法重构ts的成本也比较大。（如果不修改的话，会有很多地方使用any，感觉为了ts而ts了)

代码例子

<!-- 2.出入省统计 -->
<script setup lang="ts">
  import CenterMap from "@/views/index/CenterMap.vue";
  import type {ComponentPublicInstance} from 'vue'
  import {onMounted, ref, getCurrentInstance, onBeforeMount, onBeforeUnmount} from "vue";
  import {deepClone} from '@/utils/index.js'
  import {listFlow} from '@/api/biz/flow.js'
  import consts from '@/utils/consts.js'
  import {getPicture, getPicturePrefix} from '@/api/biz/picture.js'
  import {allListPortalFrame} from '@/api/base/PortalFrame.js'

  const {proxy} = getCurrentInstance() as any

  const pictureUrlPrefix = ref<string>('')
  const gateData = ref<Array<any>>([])
  const defaultPageSize = 50

  const entryCarList = ref<Array<any>>([])
  const entryCarPageTotal = ref<number>(0)
  const entryCarPageLoading = ref<boolean>(false)
  const entryCarQueryParams = ref<{ pageNum: number, pageSize: number }>({
    pageNum: 1,
    pageSize: 50
  })

  const outCarList = ref<Array<any>>([])
  const outCarPageTotal = ref<number>(0)
  const outCarPageLoading = ref<boolean>(false)
  const outCarQueryParams = ref<{ pageNum: number, pageSize: number }>({
    pageNum: 1,
    pageSize: 50
  })

  const refEntryCar = ref<HTMLElement & { bodyWrapper?: HTMLElement } | null>(null)
  const refOutCar = ref<HTMLElement & { bodyWrapper?: HTMLElement } | null>(null)
  const map = ref<ComponentPublicInstance & { resizeChart?: () => void, showInfo?: (any) => void } | null>(null);

  onBeforeMount(() => {
    getEntryCarList()
    getOutCarList()
    getPortalAllList()
    getPictureUrlPrefix()
  });

  onMounted(() => {
    window.addEventListener("resize", resizeChart)
  })
  onBeforeUnmount(() => {
    window.removeEventListener("resize", resizeChart)
  })

  function getPictureUrlPrefix() {
    getPicturePrefix().then(response => {
      pictureUrlPrefix.value = response?.pictureUrlPrefix ?? ''
    })
  }

  function getPortalAllList() {
    allListPortalFrame().then(response => {
      gateData.value = response.data
    })
  }

  function getTableHeaderClass({row, column, rowIndex, columnIndex}): string {
    return 'detail-table-header'
  }

  function getTableRowClass({row, column, rowIndex, columnIndex}): string {
    return 'detail-table-row'
  }

  const resizeChart = () => {
    map?.value?.resizeChart && map.value.resizeChart()
  }

  const getEntryCarList = (pageSize = defaultPageSize, pageNum = 1) => {
    entryCarPageLoading.value = true;
    listFlow({
      ...entryCarQueryParams.value,
      entryOutProvince: "ENTRY"
    }).then((response) => {
      entryCarList.value = response.rows;
      entryCarPageTotal.value = response.total;
      entryCarPageLoading.value = false;

      // Scroll to top
      if (refEntryCar?.value && refEntryCar.value.bodyWrapper?.scrollTop) {
        refEntryCar.value.bodyWrapper.scrollTop = 0;
      }
    }).catch((err) => {
      console.error(err);
      proxy?.$message.error('获取数据失败，刷新页面或者联系管理员！');
    });
  }

  const getOutCarList = (pageSize = defaultPageSize, pageNum = 1) => {
    outCarPageLoading.value = true;
    listFlow({
      ...outCarQueryParams.value,
      entryOutProvince: "OUT"
    }).then((response) => {
      outCarList.value = response.rows;
        outCarPageTotal.value = response.total;
        outCarPageLoading.value = false;

        // Scroll to top
        if (refOutCar?.value && refOutCar.value.bodyWrapper?.scrollTop) {
        refOutCar.value.bodyWrapper.scrollTop = 0;
        }
        }).catch((err) => {
        console.error(err);
        proxy?.$message.error('获取数据失败，刷新页面或者联系管理员！');
        });
        }
        const showCarInfo = (item) => {
        if (item.portalCode && gateData.value?.map(gate => gate.portalCode)?.includes(item.portalCode)) {
        let curItem = item
        // 获取车辆的抓拍图
        if (pictureUrlPrefix && pictureUrlPrefix.value !== '' && curItem.snapPictureId) {
        getPicture(curItem.snapPictureId).then(result => {
        curItem = {
        ...curItem,
        image: pictureUrlPrefix.value + result.data.relativeAddress
        }
        }).catch((err) => {
        proxy?.$message.error(err)
        }).finally(() => {
        let detail = deepClone(gateData.value.find(gate => gate.portalCode === curItem.portalCode))
        detail = {
        ...detail,
        car: curItem
        }
        map?.value?.showInfo && map.value.showInfo(detail)
        })
        } else {
        let detail = deepClone(gateData.value.find(gate => gate.portalCode === item.portalCode))
        detail = {
        ...detail,
        car: item
        }
        map?.value?.showInfo && map.value.showInfo(detail)
        }
        } else {
        proxy?.$message.info("没有对应的ETC门架信息")
        }
        }
        </script>

        <template>
        <div class="home-count">
        <div class="flex-box">
        <div class="flex-map">
        <CenterMap ref="map" image-background-size="200%"></CenterMap>
        </div>
        <div class="table-list">
        <div class="portal-table-wrap">
        <div class="portal-table">
        <div class="corner" v-for="i in 4" :key="i" :class="'c' + i"></div>
        <div class="portal-table-title">
        <div class="title-left">
        <img class="icon" src="/images/chart-icon-5.png" alt="出省信息"/>
        <span class="title-content">出省信息</span>
        </div>
        </div>
        <div class="portal-table-main">
        <el-table
        ref="refOutCar"
        :data="outCarList"
        v-loading="outCarPageLoading"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
        :header-cell-class-name="getTableHeaderClass"
        :row-class-name="getTableRowClass"
        height="calc(25vh - 10px)"
        @row-click="showCarInfo"
        >
        <el-table-column label="门架编号" align="center" prop="portalCode" min-width="130px"/>
        <el-table-column label="门架名称" align="center" prop="portalName"/>
        <el-table-column label="车牌" align="center" prop="licensePlateNumber">
        <template v-slot="scope">
        <span class="car-number">{{ scope.row.licensePlateNumber }}</span>
        </template>
        </el-table-column>
        <el-table-column label="通过时间" align="center" prop="passageTime" min-width="120px"/>
        <el-table-column label="车型" align="center" prop="vehicleModel">
        <template v-slot="scope">
        <span>{{ consts.vehicleModels[scope.row.vehicleModel] }}</span>
        </template>
        </el-table-column>
        <el-table-column label="车轴信息" align="center" prop="axleNumber" width="100px">
        <template v-slot="scope">
        <span>{{ scope.row.axleNumber }}轴</span>
        </template>
        </el-table-column>
        </el-table>
        <pagination
        class="table-pagination"
        v-show="outCarPageTotal>0"
        :total="outCarPageTotal"
        :page.sync="outCarQueryParams.pageNum"
        :limit.sync="outCarQueryParams.pageSize"
        :page-sizes="[10, 20, 50, 100]"
        layout="total, sizes, prev, pager, next"
        :pagerCount="5"
        @pagination="getOutCarList"
        />
        </div>
        </div>
        </div>
        <div class="portal-table-wrap">
        <div class="portal-table">
        <div class="corner" v-for="i in 4" :key="i" :class="'c' + i"></div>
        <div class="portal-table-title">
        <div class="title-left">
        <img class="icon" src="/images/chart-icon-4.png" alt="入省信息"/>
        <span class="title-content">入省信息</span>
        </div>
        </div>
        <div class="portal-table-main">
        <el-table
        ref="refEntryCar"
        :data="entryCarList"
        v-loading="entryCarPageLoading"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
        :header-cell-class-name="getTableHeaderClass"
        :row-class-name="getTableRowClass"
        height="calc(25vh - 10px)"
        @row-click="showCarInfo"
        >
        <el-table-column label="门架编号" align="center" prop="portalCode" min-width="130px"/>
        <el-table-column label="门架名称" align="center" prop="portalName"/>
        <el-table-column label="车牌" align="center" prop="licensePlateNumber">
        <template v-slot="scope">
        <span class="car-number">{{ scope.row.licensePlateNumber }}</span>
        </template>
        </el-table-column>
        <el-table-column label="通过时间" align="center" prop="passageTime" min-width="120px"/>
        <el-table-column label="车型" align="center" prop="vehicleModel">
        <template v-slot="scope">
        <span>{{ consts.vehicleModels[scope.row.vehicleModel] }}</span>
        </template>
        </el-table-column>
        <el-table-column label="车轴信息" align="center" prop="axleNumber" width="100px">
        <template v-slot="scope">
        <span>{{ scope.row.axleNumber }}轴</span>
        </template>
        </el-table-column>
        </el-table>
        <pagination
        class="table-pagination"
        v-show="entryCarPageTotal>0"
        :total="entryCarPageTotal"
        :page.sync="entryCarQueryParams.pageNum"
        :limit.sync="entryCarQueryParams.pageSize"
        :page-sizes="[10, 20, 50, 100]"
        layout="total, sizes, prev, pager, next"
        :pagerCount="5"
        @pagination="getEntryCarList"
        />
        </div>
        </div>
        </div>
        </div>

        </div>
        </div>
        </template>

        <style lang="scss" scoped>
        :deep(.el-table .el-table__header-wrapper th, .el-table th.el-table__cell) {
        font-size: 15px;
        color: #9ecad9;
        border: none;
        }

        :deep(.el-table--enable-row-hover .el-table__body tr:hover > td) {
        background-color: transparent;
        color: #ffc300;
        }

        :deep(.el-table::before, .el-table--group::after, .el-table--border::after) {
        background-color: transparent;
        }

        :deep(.detail-table-header) {
        font-weight: bold;
        }

        :deep(.el-table tr) {
        background-color: transparent;
        }

        :deep(.el-table th) {
        background-color: transparent;
        }

        :deep(.detail-table-row) {
        background-color: transparent;
        color: #01d6ff;
        font-size: 15px;
        }

        :deep(.el-table__row > td, .el-table th.is-leaf) {
        border: none
        }

        :deep(.el-table, .el-table__expanded-cell) {
        background-color: transparent;
        }

        :deep(.pagination-container) {
        background-color: transparent;
        }

        .car-license-row {
        color: #FFB956;
        }


        .home-count {
        flex: 1;
        padding: 15px 20px;

        .car-number {
        color: #FFB956;
        }

        .flex-box {
        width: 100%;
        display: flex;
        justify-content: center;

        .flex-map {
        width: calc(100vh - 360px);
        height: calc(100vh - 360px);
        padding: 20px;
        }

        .table-list {
        flex: 1;
        max-width: 800px;
        display: flex;
        flex-direction: column;
        }

        .portal-table-wrap {
        width: 100%;
        height: calc(40vh - 30px);
        position: relative;

        .portal-table {
        width: 100%;
        display: flex;
        flex-direction: column;
        padding: 5px;
        position: absolute;
        background: url('/images/grid.png') left top;

        .portal-table-main {
        background-color: rgba(0, 0, 0, 0);
        }

        .portal-table-title {
        flex: 1;
        height: 54px;
        padding: 5px 5px;
        margin: 0;
        font-size: 18px;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .title-left {
        vertical-align: middle;
        min-width: 120px;

        .title-content {
        vertical-align: middle;
        }

        .icon {
        width: 30px;
        height: 30px;
        margin-right: 5px;
        vertical-align: middle;

        }
        }

        .table-pagination {
        flex: 1;
        background-color: rgba(0, 0, 0, 0);
        }
        }

        :deep(.portal-search-form) {
        .el-form-item--small .el-form-item__label {
        color: #87b1b9;
        }
        }

        .corner {
        width: 12px;
        height: 12px;
        border: 3px solid #1084B6;
        position: absolute;
        z-index: 99;

        &.c1 {
        border-right: 0;
        border-bottom: 0;
        left: 0;
        top: 0;
        }

        &.c2 {
        border-left: 0;
        border-bottom: 0;
        right: 0;
        top: 0;
        }

        &.c3 {
        border-left: 0;
        border-top: 0;
        right: 0;
        bottom: 0;
        }

        &.c4 {
        border-top: 0;
        border-right: 0;
        left: 0;
        bottom: 0;
        }
        }
        }
        }


        }
        }

        </style>