vue3项目开发过程中所遇到的问题积累

已于 2024-08-08 15:40:43 修改
阅读量158 收藏 3
点赞数 4
文章标签： 前端
于 2024-08-05 16:43:43 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46371234/article/details/140929898
版权

本篇文章呢主要是想对自己平时在开发项目时遇到的问题做一下记录，方便自己后续复习，后续会继续更新这个文档的

1、百度地图功能

在这里插入图片描述
实现代码

<template>
    <div class="bmapgl">
      <el-dialog
        :model-value="openMap"
        title="位置选择"
        width="1000px"
        @close="cancel"
      >
        <el-form label-width="80px">
          <el-row>
            <el-col :span="10">
              <el-form-item label="当前地点">
                <el-input
                  size="small"
                  type="text"
                  id="suggestId"
                  v-model="addressInfo.address"
                  placeholder="请输入地点"
                  @blur="onBlurClick"
                />
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="位置经度">
                <el-input
                  size="small"
                  type="text"
                  v-model="addressInfo.longitude"
                  readonly
                />
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="位置纬度">
                <el-input
                  size="small"
                  type="text"
                  v-model="addressInfo.latitude"
                  readonly
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div
          class="baidu"
          ref="mapRef"
          id="baidumap"
          style="width: 100%; height: 450px"
        ></div>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="cancel">取 消</el-button>
            <el-button type="primary" @click="confirmSelect"> 确 定 </el-button>
          </span>
        </template>
      </el-dialog>
    </div>
  </template>
   
  <script setup >
  import { onMounted, watch, ref, reactive } from "vue";
  import { ElMessage } from "element-plus";
  const emit = defineEmits(["confirmMapAddress"]);
  const props = defineProps({
    openMap:{
      type:Boolean,
      default:false,
    },
    address:{
      type:String,
      default:''
    },
    longitude:{
      type:[Number,String],
    },
    latitude:{
      type:[Number,String]
    }
  })
  let map = ref(null);
  const mapZoom = ref(15);
  const ak = ref("7eVTXNtnM12OxEIly2uL6uBaj9YRtOmy");
  // let mapShow = ref(false);
  let addressInfo = reactive({
    // 地址信息
    longitude: "", // 经度
    latitude: "", // 纬度
    province: "", // 省
    city: "", // 市
    district: "", // 区
    address: "", // 详细地址
  });
  watch(
    () => props.openMap,
    () => {
      if (!props.openMap) {
        map.value && map.value.destroy();
      }else{
        // initMap();
        init()
      }
    },
    { deep: true }
  );
  onMounted(() => {
    init()
    // initMap();
  });
  let geocoder;
  const init = () => {
    map.value = null;
    BMPGL(ak.value).then((BMapGL) =>{
      map.value = new BMapGL.Map("baidumap");
      var zoomCtrl = new BMapGL.ZoomControl(); // 添加缩放控件
      map.value.addControl(zoomCtrl);
      var cityCtrl = new BMapGL.CityListControl(); // 添加城市列表控件
      map.value.addControl(cityCtrl);
      var LocationControl = new BMapGL.LocationControl(); // 添加定位控件，用于获取定位
      map.value.addControl(LocationControl);
      var scaleCtrl = new BMapGL.ScaleControl(); // 添加比例尺控件
      map.value.addControl(scaleCtrl);
      map.value.setMapType(); // 设置地图类型为标准地图模式；
      var localcity = new BMapGL.LocalCity();
      localcity.get((e) => {
        map.value.centerAndZoom(e.name, mapZoom.value);
      });
   
      let point;
      addressInfo.address = props.address
      if( props.longitude !== ''){
        addressInfo.longitude = Number(props.longitude)
      }
      if(props.latitude !== ''){
        addressInfo.latitude = Number(props.latitude)
      }
      //初始化的时候如果有经纬度，需要先在地图上添加点标记
      if (addressInfo.longitude && addressInfo.latitude) {
        point = new BMapGL.Point(addressInfo.longitude, addressInfo.latitude);
        map.value.centerAndZoom(point, mapZoom.value);
        var marker2 = new BMapGL.Marker(point);
        //在地图上添加点标记
        setTimeout(()=> {
          map.value.addOverlay(marker2);
          var opts = {
            width : 200,     // 信息窗口宽度
            height: 80,     // 信息窗口高度
            title : "地址" , // 信息窗口标题
            enableMessage:false,//设置允许信息窗发送短息
          }
          var infoWindow = new BMapGL.InfoWindow(addressInfo.address, opts);  // 创建信息窗口对象 
          map.value.openInfoWindow(infoWindow,point);
        },1000)
      }
   
      map.value.enableScrollWheelZoom(true);
      map.value.setHeading(64.5);
      map.value.setTilt(73);
      geocoder = new BMapGL.Geocoder();

      //点击下拉框的值
      map.value.addEventListener(
        "click",
        function (e) {
          // 判断是否点击了标注点
          if(!e.overlay || !(e.overlay instanceof BMapGL.Marker)){
            map.value.clearOverlays();
            var point1 = new BMapGL.Point(e.latlng.lng, e.latlng.lat);
            // 创建点标记
            var marker1 = new BMapGL.Marker(point1);
            // 在地图上添加点标记
            map.value.addOverlay(marker1);
  
            addressInfo.longitude = e.latlng.lng;
            addressInfo.latitude = e.latlng.lat;
            // var geoc = new BMapGL.Geocoder(); // 创建地址解析器的实例
            geocoder.getLocation(point1, (rs) => {
              let adr = rs.addressComponents;
              addressInfo.address =
                adr.province +
                adr.city +
                adr.district +
                adr.street +
                adr.streetNumber; // 省市区街道门牌号
            });
          }
        }
      );
    })
  }
  const onBlurClick = (event) => {
    addressInfo.address = event.target.value
    if(addressInfo.address && addressInfo.address !== ''){
      geocoder.getPoint(
        addressInfo.address,
        pot => {
          if (pot) {
            addressInfo.longitude = pot.lng;
            addressInfo.latitude = pot.lat;
            map.value.clearOverlays();
            var point1 = new BMapGL.Point(pot.lng, pot.lat);
            map.value.centerAndZoom(point1, mapZoom.value);
            // 创建点标记
            var marker1 = new BMapGL.Marker(point1);
            // 在地图上添加点标记
            map.value.addOverlay(marker1); 
          } else {
            addressInfo.address = ''
            addressInfo.longitude = '';
            addressInfo.latitude = '';
            map.value.clearOverlays();
          }
        },
        {
          // 这里可以设置地址解析的选项
        }
      );
    }else{
      addressInfo.longitude = '';
      addressInfo.latitude = '';
      map.value.clearOverlays();
    }
  }

  const initMap = () => {
    map.value = null;
    BMPGL(ak.value).then((BMapGL) => {
      map.value = new BMapGL.Map("baidumap");
      
      var ac = new BMapGL.Autocomplete({
        //建立一个自动完成的对象
        input: "suggestId",
        location: map.value,
      });
      ac.enableAutoComplete = false
      var zoomCtrl = new BMapGL.ZoomControl(); // 添加缩放控件
      map.value.addControl(zoomCtrl);
      var cityCtrl = new BMapGL.CityListControl(); // 添加城市列表控件
      map.value.addControl(cityCtrl);
      var LocationControl = new BMapGL.LocationControl(); // 添加定位控件，用于获取定位
      map.value.addControl(LocationControl);
      var scaleCtrl = new BMapGL.ScaleControl(); // 添加比例尺控件
      map.value.addControl(scaleCtrl);
      map.value.setMapType(); // 设置地图类型为标准地图模式；
      var localcity = new BMapGL.LocalCity();
      localcity.get((e) => {
        map.value.centerAndZoom(e.name, mapZoom.value);
      });
   
      let point;
      addressInfo.address = props.address
      if(props.address !== ''){
        setTimeout(() => {
          ac.setInputValue(addressInfo.address);
        },1000)
      }
      if( props.longitude !== ''){
        addressInfo.longitude = Number(props.longitude)
      }
      if(props.latitude !== ''){
        addressInfo.latitude = Number(props.latitude)
      }
      //初始化的时候如果有经纬度，需要先在地图上添加点标记
      if (addressInfo.longitude && addressInfo.latitude) {
        point = new BMapGL.Point(addressInfo.longitude, addressInfo.latitude);
        map.value.centerAndZoom(point, mapZoom.value);
        var marker2 = new BMapGL.Marker(point);
        //在地图上添加点标记
        setTimeout(()=> {
          map.value.addOverlay(marker2);
          var opts = {
            width : 200,     // 信息窗口宽度
            height: 80,     // 信息窗口高度
            title : "地址" , // 信息窗口标题
            enableMessage:false,//设置允许信息窗发送短息
          }
          var infoWindow = new BMapGL.InfoWindow(addressInfo.address, opts);  // 创建信息窗口对象 
          map.value.openInfoWindow(infoWindow,point);
        },1000)
      }
   
      map.value.enableScrollWheelZoom(true);
      map.value.setHeading(64.5);
      map.value.setTilt(73);

      //点击下拉框的值
      map.value.addEventListener(
        "click",
        function (e) {
          // 判断是否点击了标注点
          if(!e.overlay || !(e.overlay instanceof BMapGL.Marker)){
            map.value.clearOverlays();
            var point1 = new BMapGL.Point(e.latlng.lng, e.latlng.lat);
            // 创建点标记
            var marker1 = new BMapGL.Marker(point1);
            // 在地图上添加点标记
            map.value.addOverlay(marker1);
  
            addressInfo.longitude = e.latlng.lng;
            addressInfo.latitude = e.latlng.lat;
            var geoc = new BMapGL.Geocoder(); // 创建地址解析器的实例
            geoc.getLocation(point1, (rs) => {
              let adr = rs.addressComponents;
              addressInfo.address =
                adr.province +
                adr.city +
                adr.district +
                adr.street +
                adr.streetNumber; // 省市区街道门牌号
            });
          }
        }
      );
      ac.addEventListener("onconfirm", function (e) {
        addressInfo.longitude = ''
        addressInfo.latitude = ''
        //鼠标点击下拉列表后的事件
        var _value = e.item.value;
        addressInfo.address =
          _value.province +
          _value.city +
          _value.district +
          _value.street +
          _value.business;
        // 搜索
        map.value.clearOverlays(); //清除地图上所有覆盖物
        //智能搜索
        var local = new BMapGL.LocalSearch(map.value, {
          onSearchComplete: () => {
            //获取第一个智能搜索的结果
            const pp = local.getResults().getPoi(0).point;
            map.value.centerAndZoom(pp, mapZoom.value);
            map.value.addOverlay(new BMapGL.Marker(pp)); //添加标注
            addressInfo.longitude = pp.lng;
            addressInfo.latitude = pp.lat;
          },
        });
        local.search(addressInfo.address);
      });
    });
  };
  /**
   * 确认选择
   */
  const confirmSelect = () => {
    if (addressInfo.address == "") {
      ElMessage({
        message: "请选择位置",
        type: "error",
        center: true,
      });
      return;
    }
    emit("confirmMapAddress", addressInfo,false);
    
  };
  /**
   * 取消选择
   */
  const cancel = () => {
    addressInfo.address = ''
    addressInfo.longitude = ''
    addressInfo.latitude = ''
    emit("cancelMap", false);
  };
  function BMPGL(ak) {
    return new Promise(function (resolve, reject) {
      window.init = function () {
        // eslint-disable-next-line
        resolve(BMapGL);
      };
      const script = document.createElement("script");
      script.type = "text/javascript";
      script.src = `https://api.map.baidu.com/api?v=3.0&type=webgl&ak=${ak}&callback=init`;
      script.onerror = reject;
      document.head.appendChild(script);
    });
  }

  </script>
  <style>
  .tangram-suggestion {
    z-index: 99999;
  }
  </style>
  <style scoped lang="scss">
  :deep(.BMap_cpyCtrl) {
    display: none !important;
  }
  :deep(.BMap_cpyCtrl) {
    display: none !important;
  }
   
  :deep(.el-dialog__header),
  :deep(.el-dialog__footer) {
    padding: 15px 20px;
  }
   
  :deep(.el-dialog__body) {
    border-top: 1px solid #e8eaec;
    border-bottom: 1px solid #e8eaec;
    padding: 20px;
  }
  :deep(.el-dialog__headerbtn) {
    top: 0;
    font-size: 18px;
  }
  :deep(.el-dialog) {
    border-radius: 8px;
  }
  </style>

initMap方法是可以实现检索功能的，但是后面发现检索个人开发注册的时候是有限制的，如果想无限用就要付费了，所以就把检索去除了，就有了现在的init跟失焦事件完成的
刚开始的难点可能在编辑的时候，要回显出来，地址及标注，刚开始的初始想法错了，导致走了不少弯路
最后经同事提醒，发现原来回显的地址已经出来了，只不过是被自动创建给刷新覆盖了，然后发现了这个之后，问题就好解决了
把input框的值重写使用 setInputValue

ac.setInputValue(addressInfo.address)
2、使用elementUI Plus组件上传图片功能

vue页面代码

<el-form-item label="形象图" prop="ticketImage">
    <el-upload
        class="avatar-uploader"
        :action="uploadImgUrl"
        :headers="headers"
        :show-file-list="true"
        list-type="picture-card"
        :on-success="handleAvatarSuccess"
        :before-upload="beforeAvatarUpload"
        :file-list="fileList"
        :limit="1"
        :before-remove="handleAvatarDelete"
        :on-preview="handleAvatarPreview"
        :class="{ hide: fileList.length >= 1 }"
    >
        <el-icon class="avatar-uploader-icon"><Plus /></el-icon>
        <template #tip>
            <div class="el-upload__tip">
                建议上传尺寸750*450，1M以内
            </div>
        </template>
    </el-upload>
    <el-dialog v-model="dialogVisible" title="预览">
        <img w-full :src="form.ticketImage" alt="暂无图片" style="display: block; max-width: 100%; margin: 0 auto" />
    </el-dialog>
</el-form-item>

js代码

const uploadList = ref([]);
const baseUrl = import.meta.env.VITE_APP_BASE_API;
const uploadImgUrl = ref(import.meta.env.VITE_APP_BASE_API + '/common/upload'); // 上传的图片服务器地址
const headers = ref({ Authorization: 'Bearer ' + getToken() });
const fileList = ref([]);

const beforeAvatarUpload = (file) => {
    if(file){
        const isLt = file.size / 1024 / 1024 < 1
        if(!isLt){
            proxy.$modal.msgError(`图片大小不能超过 1MB!`);
            return false;
        }
    }
    // if (fileSize) {
	// 	const isLt = file.size / 1024 / 1024 < props.fileSize;
	// 	if (!isLt) {
	// 		proxy.$modal.msgError(`上传头像图片大小不能超过 ${props.fileSize} MB!`);
	// 		return false;
	// 	}
	// }
	proxy.$modal.loading('正在上传图片，请稍候...');
}
const handleAvatarSuccess = (res, file) => {
    if (res.code === 200) {
        form.value.ticketImage = res.fileName
		uploadList.value.push({ name: res.fileName, url: res.url });
		fileList.value = fileList.value.filter((f) => f.url !== undefined).concat(uploadList.value);
        // console.log('fileList.value',fileList.value)
        uploadList.value = []
        proxy.$modal.closeLoading();
	} else {
		
	}
}

const handleAvatarPreview = (file) => {
	dialogVisible.value = true;
}
const handleAvatarDelete = (file) => {
    fileList.value = []
    form.value.ticketImage = ''
}

css(主要是想去除自带的动效)

:deep(.el-date-editor .el-input__prefix) {
  display: none;
}
:deep(.hide .el-upload--picture-card) {
	display: none;
}
.avatar-uploader :deep(.el-upload-list__item) {
    transition: none !important;
}
3、使用elementUI Plus组件中el-date-picker默认回显当前年总回显1970问题

在这里插入图片描述

new Date().getFullYear()
console.log('year',year) // 2024

打印出来是2024，但是页面上回显的确是1970，百度了之后发现要转换一下类型

new Date().getFullYear().toString()

之后就可以了，在此记录一下

张张Z7
关注
  • 4
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
Vue3 开发中常见的问题和解决办法
小刘哥的博客
08-06 1006
可以使用来定义一个异步加载的组件。
blog:开发过程中遇到的问题或者一些过往的经验
04-07
在开发过程中，我们经常会遇到各种问题，这些问题既是挑战也是学习的机会。这篇博客主要分享了一些开发者在实际工作中积累的经验和解决问题的方法。以下是一些关键的知识点： 1. **错误处理与调试**：在编程中，...
vue3在开发视频管理后台管理系统遇到的问题及解决方案，阶段汇总
qq_18798149的博客
09-13 461
开发vue3后台管理过程中遇到的一些典型的问题记录下来，要是有一天忘了还能回来看看。
vue3学习过程中遇到的问题和解决方案集合
m0_56307415的博客
05-29 613
vue3项目报错及问题处理
Vue 3 中的常见操作难点及解决方法
沉浮yu大海的博客
03-12 703
在Vue 3中，开发者可能会遇到一些常见的操作难点，本文将结合代码详细说明这些难点，并提供相应的解决方法，帮助读者更好地理解和应对这些挑战。
开发中积累的vue知识点
song854601134的博客
06-14 1960
3.由于js中函数没有重载的这一说。所以在vue的methods中。下面只是定义了一个函数。因为底下的那个函数把上面的函数给覆盖了。 自定义事件 组件实例销毁后，原生的dom事件仍可以被调用，但是我们的自定义事件不会被调用了。原生的dom事件，比如@click加上的事件。虽然原生的dom事件仍可以调用，但是这些事件带来的数据更新变化不会在同步到vue页面上了。 全局事件总线 vuex中模块化+namespaced 写了namespaced:true， 路由router 起别名的引用 使
Rust开发WebAssembly在Html和Vue中的应用
爪哇盘古
08-04 2923
WebAssembly或wasm是用于浏览器内客户端脚本的低级、可移植的字节码格式，是一种运行在现代网络浏览器中的新型代码、并且提供新的性能特性和效果，对于浏览器下载和加载是有效的。当然它的存在就像rust官网说的一样，它不是来替代js，而是强化js！Rust是一门系统编程语言，专注于安全，尤其是并发安全，支持函数式和命令式以及泛型等编程范式的多范式语言。总的来说我用了2个月的时间研究它，能写一些小东西，让我感觉很舒服的是因它的机制生产的产物并没有出现什么奇奇怪怪的问题。这是一个漫长的时刻！...
基于原子化思想的 Vue3 组件库 UnoCSS UI
萌宅鹿的技术小屋
05-22 3203
UnocssUI 是一个基于 UnoCSS 带有原子化思想的现代化 Vue3 组件库，它的特点是简单，每个组件的实现之间没有任何依赖（只在 一个 .vue 文件实现），非常适合用来学习组件库的封装，同时它也在快速的迭代与建设中。
vue3+antd搭建登录页面——vue3初体验——基础积累
yehaocheng520的博客
07-21 1130
vue3+antd搭建登录页面——vue3初体验——基础积累
Vue 3的设计过程（翻译自尤雨溪原文）
夕山雨的博客
08-10 959
转载声明：本文翻译自尤雨溪微博链接原文，主要介绍了Vue 3的设计过程。对原文感兴趣的可查看原文（英文版）：The process: Making Vue 3。翻译不当之处敬请参考原文予以纠正。 Vue 3的设计过程 重写Vue.js下个主版本的经验总结 作者：尤雨溪 创作日期：2020年5月 在过去的一年里，Vue团队一直在开发Vue.js的下一个主版本，我们打算在2020年上半年发布它（原文注释：在写作本文时，这个工作仍在继续）。与新的Vue主版本有关的想法是在2018年底成形的，那时Vue 2的代码库
Vue.js 开发中的经验与技巧总结
AngelCryToo的专栏
02-27 295
VUE3 组件版本不一致导致的问题，package-lock.json
vue踩坑记-在项目中安装依赖模块npm install报错
10-17
在使用Vue.js框架进行项目开发时，我们经常会使用npm（Node Package Manager）来安装...当然，开发者在解决这类问题时也应该积累经验，了解报错信息背后的原理，以便在未来的开发过程中能够更快地定位并解决类似问题。
vue.js开发环境搭建教程
10-19
在当今前端开发领域，Vue.js已成为流行的JavaScript框架之一。...如果你在搭建开发环境的过程中遇到任何问题，可以参考上述步骤进行排查和修复。随着经验的积累，相信你能够越来越熟练地搭建和管理Vue.js的开发环境。
解决vue 项目引入字体图标报错、不显示等问题
10-18
在Vue项目中，引入字体图标是一项常见的操作，但有时可能会遇到一些问题，如报错或图标不显示。本文将详细解析这两个问题的原因及相应的解决策略。 首先，问题一：字体图标报错。当我们在Vue项目中尝试引入字体图标...
解决vue组件中click事件失效的问题
10-16
在Vue.js开发过程中，我们经常会遇到各种事件绑定问题，尤其是`click`事件失效的情况。...希望这些内容能对你在Vue开发中遇到的类似问题提供帮助。在实践中不断积累经验，你会发现这些问题逐渐变得不再棘手。
关于前端服务器字体的引用
qq_69304031的博客
09-02 375
服务器字体是一种强大的工具，可以帮助我们实现全场景字体风格的统一。通过定义服务器字体，我们可以确保网页在不同的设备和浏览器上都能呈现出一致的字体效果，提升用户体验和品牌形象。在使用服务器字体时，需要注意字体文件的版权问题，并确保字体文件的加载速度不会影响网页的性能。希望这篇博客对你在网页设计中使用服务器字体有所帮助。如果你有任何问题或建议，欢迎在评论区留言。
vue3.5新增特性
最新发布
yunbabac的博客
09-05 211
vue3.5
前端代码注释风格 - CSS篇
yangguangxiadewo的专栏
09-02 1162
本文基于《阿里巴巴CSS编程规约》、stylelint rules进行编写，涉及预编译语言（Sass、Less）的编码风格和最佳实践。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

张张Z7

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值