vue2升级vue3注意点

字典数据

data(){
    const { ...dictObj } = this.useDict("sys_normal_disable",'sys_yes_no');
    return {
       dict:{
          type: dictObj
       },
     }
 }

js

:showSearch.sync 替换成 v-model:showSearch
:page.sync 替换成 v-model:page
:limit.sync 替换成 v-model:limit
:visible.sync 替换成 v-model
process.env.VUE_APP_BASE_API 替换成 import.meta.env.VITE_APP_BASE_API

 <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
  </div>
 改为
 <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
   </template>

<span class="el-dropdown-link"> <i class="el-icon-d-arrow-right el-icon--right"></i>更多 </span>
 <el-dropdown-menu slot="dropdown">
    <el-dropdown-item command="handleUpload" v-if='scope.row.count < 3 && scope.row.attachmentSwitch != "0"'
      v-hasPermi="['operate:reSaleContract:edit']">上传附件</el-dropdown-item>
    <el-dropdown-item command="handleDelete"
      v-hasPermi="['operate:reSaleContract:remove']">删除</el-dropdown-item>
    <el-dropdown-item command="handleShowMsg" v-hasPermi="['operate:reSaleMsg:list']">日志</el-dropdown-item>
</el-dropdown-menu>
改为
 <el-button
    type="primary"
    text="primary"
    style="margin-right: 10px">
    <el-icon><DArrowLeft /></el-icon>更多
  </el-button>
 <template #dropdown>
     <el-dropdown-menu >
        <el-dropdown-item command="handleUpload" v-if='scope.row.count < 3 && scope.row.attachmentSwitch != "0"'
          v-hasPermi="['operate:reSaleContract:edit']">上传附件</el-dropdown-item>
        <el-dropdown-item command="handleDelete"
          v-hasPermi="['operate:reSaleContract:remove']">删除</el-dropdown-item>
        <el-dropdown-item command="handleShowMsg" v-hasPermi="['operate:reSaleMsg:list']">日志</el-dropdown-item>
      </el-dropdown-menu>
 <template>

1.表格操作栏的按钮：

link换成type="primary" text="primary"或
2.<template #default="scope" v-if="scope.row.roleId !== 1">
需要把v-if="scope.row.roleId !== 1"挪到template下面标签
引入子组件
ediFormatLine: () => import("../ediFormatLine") 改为 ediFormatLine: require('../ediFormatLine'),
@keyup.enter.native 替换成 @keyup.enter
type="text" 替换 link
value-format="yyyy" 替换 value-format="YYYY"

value-format="yyyy-MM" 替换 value-format="YYYY-MM"


<ImageUploadDrag :fileList="fileList" v-model="form.imgUrl" :limit="1" @input="handleChange" />
//更新需要使用update:modelValue'
props.value     props.modelValue
this.$emit('input') 修改为 this.$emit('update:modelValue')
//子组件触发input时间需要另外添加如下代码
this.$emit("input", this.fileList);

icon替换

el-icon-search 替换成 Search
el-icon-refresh 替换成 Refresh
el-icon-plus 替换成 Plus
el-icon-edit 替换成 Edit
el-icon-delete 替换成 Delete
el-icon-download 替换成 Download
el-icon-upload2 替换 Upload
el-icon-upload 替换 UploadFilled

接口调用成功失败提示框

this.msgError改为this.$modal.msgError

this.alert改为ElMessageBox.alert或者this.$modal.alert

this.$message.success改为this.$modal.msgSuccess

vue开发的小程序uniapp替换成taro

安装@qiun/ucharts依赖包

import uCharts from "@qiun/ucharts";
import { View, Image, Canvas } from "@tarojs/components";
//onTouchEnd设置鼠标移入有tooltip的效果,onTouchStart,onTouchMove设置图表可滑动
 <Canvas
          // {...canvasProps}
          canvas-id='barChart'
          id='barChart'
          className='charts'
          onTouchStart={touchstart}
          onTouchMove={touchmove}
          onTouchEnd={handleTap}
        />

更多信息可访问官网查看

vue2升级vue3注意点