- 博客(53)
- 收藏
- 关注
RSS订阅
原创 vue/nuxt +vue-i18n配置多语言,实现一条命令打相应语言包和切换页面语言
vue配置多语言1.安装依赖：npm i vue-i18n -S2.i18n.jsimport Vue from 'vue'import VueI18n from 'vue-i18n'import store from '../store'//多语言Vue.use(VueI18n)const i18n = new VueI18n({ locale: store.getters.locale, // 将要切换的语言，可以通过url拼的参数获取，用户行为select选择获取，本地m
2022-02-15 09:38:24
1566
原创 (2023进阶版）vue+h5 通过高德地图（原生） 获取当前位置定位
前言：因为也是用的上一个版本的代码，为了描述清楚所以就直接复制文章来更改了，这一版更加完善简洁，高德地图精确度也更高(2021年写过的一版上线了挺长时间，2023年突然被应用市场下架，说流程走不通，就卡在获取定位失败。改了之后已上线运行
2023-06-20 16:36:17
5245
2
原创 vue 两个不同layout包裹的页面之间 数据通信
a页面打开了一个b页面，两者路由路径不同，且layout也不同。但b页面有个删除操作，删除后，要在a页面进行刷新。
2023-01-30 15:46:42
464
原创 element-Ui 表格，自定义计算 合并单元格
ui画的表格需要根据不同的数据项，进行合并不确定的单元格。1.对于条件要明确，比如我需要第三行开始到第四行合并，先合并两个试试水，更改后，标题没合并。- 标题3会有不确定的项且进行合并。
2022-10-20 18:37:39
517
原创 elementUI Tooltip框利用img做提示媒介，提示失败
新项目很多提示框，发现明明相同代码但效果不同。在img外层添加span标签即可解决。
2022-09-20 09:26:41
437
原创 （2021-2022）(vue)h5 通过高德地图（原生） 获取当前位置定位
百度地图原生[点这里]vue-amap是基于高德原生封装好的供vue使用，对图层的操作会更便捷一些。当前的需求，只需拿到当前定位。所以可以使用原生js
2022-09-08 14:44:47
6377
2
原创 (vue)h5 通过百度地图（原生） 获取当前位置
使用原生百度地图js,动态增加script标签，进行异步加载回调定位。然后显示该城市的服务项百度的当前定位一开始加载 会弹出框问你能不能给定位，当时还是选择了百度地图，在定位精度上，高德差了点。（当时我哥在其他城市帮我反反复复测了很多次，直到能准确定位城市）在public/index.html的head里引入。
2022-09-08 10:12:56
2450
原创 (切换多语言)vantUI+vue-i18n进行国际化配置及新增没有的语言包
最近项目有多语言设置h5使用的是vantUI,vant的组件方法挺好的 可以自定义组件文字显示，但是！一旦有些自定义不注意的，还是会显示中文所以就使用国际化，统一更改一下吧。
2022-09-05 16:39:16
1043
原创 （切换多语言）elementUI +vue-i18n 的国际化设置及使用
/getLang是获取到缓存的值，，可以设置为store的值，只要能判别语言就可以。//利用Object.assign进行本地语言包和elementUI语言包整合。//enLocale 是element的语言包，需要什么就引入。elementUI全部引入到项目时（也就是没有按需加载）按需加载的i18n.js设置不同，
2022-09-05 16:11:58
1735
原创 vue 使用eval()函数，将字符串变成引用方法 ReferenceError: get1 is not defined“
多个选择项，调用不同参数就想将方法名放到select的数据项中，用了eval函数eval(val[1]+“()”)，添加（）结果报错想了会，是因为没有this指引到vue实例中去，自行拼接 this.get1()就可以引用方法了...
2022-05-24 11:30:57
926
原创 谷歌地图 点击地图 返回了plus_code和formatted_address
geocode(request) { this.clear(); this.geocoder .geocode(request) .then((result) => { const {results} = result; this.map.setCenter(re.
2022-05-19 14:13:33
541
原创 vue2.0/原生js使用谷歌地图并显示标记点（附两点间路径方法）
图1，谷歌地图初始化并实现显示点信息图2 ,谷歌地图实现两点间路径 图3，高德地图实现搜索显示点，可点击地图取点并获取地址，也可以搜索出来前提使用地图，都是需要获取开发者的key的，去各个地图开发平台申请key实现图1,图2简单的实现谷歌引入-搜索样式<div style="display: none"> <input id="origin-input" class="controls" type="text" placeh
2022-05-17 15:37:19
1706
原创 逗号、换行输入多个ID，正则替换
遇到了个需求，-请输入ID，可以用逗号、换行输入多个ID-同时也要注意防呆，注意多个换行，多个英文中文逗号混合-同时输入时，要输出ID数量用的vue,那就用computedcomputed:{ inputShow(){ let data=JSON.stringify(this.formRight.deviceList) let data1=data.replace(/\\n|[，]/g,',') let show=JSON.parse(
2022-05-06 18:09:39
578
原创 使用compression-webpack-plugin进行vue项目 压缩js打包
app内嵌的h5访问过慢，大约6秒，是js文件也慢可以进行1）路由懒加载2）忽略插件语言包最后来压缩1.安装，比较稳定且打包不会报错npm i compression-webpack-plugin@5.0.12.vue.config.js使用deleteOriginalAssets: true这个属性是删除已经压缩的源文件，使用了的确会使体积变小，但我部署后访问页面空白出现了SyntaxError: Unexpected token <如果执意要用，可以参照以下解决方法htt
2022-04-28 17:12:41
995
原创 github新建项目及上传下载，极简易版
将之前做的小功能放到npm上，顺便也上一上GitHub和giteegitee可以链接导入GitHub的项目。所以弄GitHub就行申请github账号之后，建立资源库2.新建完资源库，获取项目链接3.打开电脑的Git bash here,将项目克隆下来4.在vant-date-pickers文件夹里打开Git Gui(有git Bash应该也有这个）1）选择help 的show SSH key2）本地有之前配好的ssh,或者自己百度方法生成也行。复制3）在github网站上找ssh配置，新
2022-04-21 15:07:17
926
原创 h5获取富文本中图片适配展示
1.在编辑器传入的图片尺寸大都比h5宽，如果直接用v-html渲染传回的标签代码，则图片显示则很大2，获取到后台数据时，程序已经渲染了页面，然后开始处理图片样式，id为box-show<div id="box-show" class="mgt-10" v-html="mes.content">this.$nextTick(()=>{ this.checkImg() })获取已经被v-html渲染的节点，并获取其中img标签
2022-04-15 15:13:39
1006
1
原创 给nuxt项目添加SEO，GTM代码，GA代码
用nuxt写官网添加seo 添加GA代码 head(){ return{ show2:false, title:this.title, meta:[{ hid:'title',name:'title',content:this.title },{ hid:'description',name:'description',content:this.description },
2022-04-15 11:58:49
1408
原创 h5嵌ios，播放视频全屏无法关闭处理方法
1.让ios自己做app浏览器的处理（一个安卓的老员工告诉我的）这些都是要做优化的，比如uc那种人家都是自己做处理的。并不需要我这个h5操心.(但我不知道，所以做了2）2.不使用控件的全屏播放，自己做弹出框（缺点：交互复杂，且不能实现真的全屏）思路：当视频在页面时，可以使用video标签截出第一帧当封面，且不设置control。当点击到video时，弹出一个预览框，可以直接播放视频。踩坑：试用了video.js,vue-mini-player.还是全屏播放后不能进行任何操作。但发现vid
2022-04-15 11:39:17
1310
原创 快速创建vue简易项目
现在vue3已经出来很久了，但目前公司项目使用的依旧是vue2要做一个小项目，不需要自己搭建什么路由权限等但也需要集成打包，webpack的简易模板用不太惯，就直接用脚手架npm install -g @vue/cli-initvue init webpack 项目名如果想配config.js就新建文件就可以了...
2022-03-24 09:42:08
1034
原创 nuxt swiper vue-awesome-swiper，坑多多
前提：外包写了个官网，纯html。无seo/不支持一套代码多个语言等，所以重构开始进坑：用nuxt改写swiper 巨巨巨多（跳坑请看）1.nuxt不支持swiper，经常弹出。改用2之后少弹2.改用vue-awesome-swiper，非常非常不顺利！！！！！百分之八十出现的bug全是这个的错（当然可能是我菜）（1）老老实实下载swiper和vue-awesome-swiper不行，会遭遇样式消失等待各种版本问题，现在就是遇到比较稳定的就是vue-awesome-swiper v3.1.3 +
2022-02-14 18:46:33
1529
1
原创 h5 使用原生JS获取富文本标签内容，并进行展示
初衷嵌入app的h5免责声明（动态更改）1.cdn vue做了h5，后发生点击失效，及加载vuejs慢，页面不出来2.只能用原生js写一个小html了document.getElementById(‘message’).insertAdjacentHTML(“afterEnd”,msg)，获取某个元素，并在元素里添加富文本标签```html<!DOCTYPE html><html lang="en"><head> <meta name="vi
2022-02-11 13:48:57
3299
原创 把时间戳转换成倒计时
nowDate(val){ var starttime = val; let that=this var show=setInterval(function () { let nowtime=Date.parse(new Date())//把当前时间转换成时间戳 // console.log(starttime) console.log(nowtime); var time = starttime - no
2021-12-31 11:54:40
718
原创 element-ui 校验只报默认校验错误提示
例子是这样写acceptPhone:[ { required: true, message: '请填写电话', trigger: 'blur', validator:valicontactPhone, } ], var valicontactPhone=(rule,value,callback)=>{
2021-12-02 17:49:23
659
原创 nuxt nuxtServerInit asyncData 不能await 或者await报错
因为一般是async nuxtServerI async asyncDataawait fangfa（） await的上一层一定要是async。不然会报错。
2021-11-22 18:48:33
758
原创 vue-awesome-swiper 设置autoHeight，最后不满一页也占了一页
坑多多，做兼容和自适应想死的那种类似底部导航，是放在swiper里的slide不满一页，但是在进行页面缩放时就会占满一页 不好看将autoHeight取消，然后设置除导航栏以外的height: calc(100vh) !important;这样缩放都不会自动...
2021-11-22 18:44:10
770
原创 nuxt 动态路由打包报多个404
前提是之前打包设置打包成功的。也就是设置了promise，之后新增了store初始化的请求我之前是从store初始化，请求到数据之后，就在页面直接拿state数据渲染。简单的banner图没问题，但是类似详情这种，既要进行动态路由请求，又要初始化渲染数据对于nuxt初始化理解，也算不够深刻。我先是初始化，单个id循环请求完所有的详情数据，放入数组。在页面进行查找某个id ,然后再找到id对应的详情数据 ，进行渲染结果就是打包报多个404，以及打包停止（不报错）。解决办法在页面 async a
2021-11-22 18:38:07
1653
原创 nuxt 引入vue-baidu-map/vue-amap 地图底图空白，看不到线路
前提：百度和高德地图都试过了，都是一片空白，但是点击元素可以显示地点详细信息样式。唯独底图瓦片不显示。如果只是为了做展示用，不使用其他功能，可以直接引入原生百度地图<template> <div id="map"> <div @click="init">查询</div><!-- <el-input class="input" v-model="place" @change="init"></el-input&g
2021-11-05 15:12:37
1048
原创 swiper 的slide 宽高不一致 导致切换出现空白页
原因：遇到三个swiper互相嵌套，大swiper包含一个水平一个垂直方向的小swiper两个swiper互相影响，水平swiper向下滚动变成垂直swiper中间出现很大空白页的1.第一是想设定水平swiper高度，但我大swiper没设置自动高度，也不能固定，无果。2.设置speed的速度，只要我速度够快，没有谁的眼能赶得上我！也算另类实现效果...
2021-10-28 20:17:48
1057
原创 双层v-for + v-model +input 循环出tab或表单
1.如图，4个tab页，相似的属性填写。2.解决踩坑1：直接拿接口的数组数据循环，然后利用Object.assign添加接口数据没有的属性进去，用v-for循环出来后，v-model=item.type.实际效果：不能填写input框，连输入都不行踩坑2：在坑1的基础上，更改v-model=item[type]（看了某个文章说，点对象不能做变量，要用【】。）实际效果：可以输入，但第一个框输入的内容 出现在了第二第三等剩余的框中踩坑3：在坑3的基础上，添加input的动态唯一id实际效果：
2021-07-28 15:33:46
345
原创 浏览器表单自动填充 解决
用了autocomplete=new-password,密码不会自动填充了，但还是会弹出来让选择自动填充。尤其还会自动填充密码栏以及接近的type=text的input框。还有一些电话号码 也会填充隔壁type=text的input框。在方法2的基础上，套一层el-form。使用elementUI-input也会偶然出现这个。
2021-07-20 11:10:43
783
原创 File to import not found or unreadable: ~@/variables.scss.
File to import not found or unreadable: ~@/variables.scss.1.利用vue create 安装了简易项目2.想使用sass，于是下载了 “node-sass”: “^4.14.1”,“sass-loader”: “^8.0.2”,3.新创建vue.config.js，写上如下配置4.报了如题的错误，更改@import…这些路径，要明确指向某个文件才不报错。我猜测是由于配置要有个基础共用文件做事例打包...
2021-07-09 14:49:39
6162
原创 隐藏滚动条
1、在父盒子设置高度和溢出隐藏2.在子盒子设置滚动auto，重点是width进行 calc计算。总结：外盒子进行溢出隐藏，内盒子设置滚动条，就把内容宽度加大，滚动条则被外盒子隐藏
2021-02-22 16:49:37
546
原创 swiper navigation 点击切换按钮，出现蓝色外框
查看元素，我是div包裹着，有些是spandiv:focus {outline: none;}
2020-06-24 17:45:53
1759
原创 swiper banner图循环（loop）播放+banner图点击跳转有时成功有时失效
环境：nuxt项目，vue语法前置条件：npm install swiper在页面@import “swiper/css/swiper.css”;在初始化swiper时加入loop：true；（这会复制一个slide。用可以用realIndex确定真实索引）在div加入swiper的class，在该div绑定@click出现的坑：可以一直切换上下一页，loop没问题。比如下一页点击几次，点击banner图想跳转，跳转失效。如果下一页只点击一次，是可以跳转的解决办法：不用在div绑定click，
2020-06-24 17:39:52
489
原创 swiper 图片做轮播并点击跳转 跳转路径出错
环境：nuxt项目，语法：vue首先去官网拿简单轮播图例子var mySwiper = new Swiper('.swiper-container', { autoplay: true,//可选选项，自动滑动})把它放在init（）方法里，然后放在mounted（）里。对轮播图片做一个v-for，再@click=check(path),把路径传给方法，方法里做router.push!!!重点来了，本地开发是可以进行正常点击跳转的，一打包变成html就不行排除了图片加载过久等等问题，发现是图
2020-06-18 18:00:01
1080
原创 过滤数组返回数组、返回对象
以前过滤数组用filter，它会创建一个新的数组，数组里包含符合返回条件的数据无论数据是什么格式，总是会返回一个数组，如进阶：如果想获得的是数组中符合条件的数据，并返回数据本身的格式，而不需要用数组装着，用Array.find。这个方法返回满足条件的第一个元素的值...
2020-06-15 16:42:59
1813
原创 在旧项目引入Vue，iview组件库
1.旧项目都是用html+jq插件，决定引入vue+iview组件库有两种方法，一个是cdn引入，一个是本地文件引入iview官网的cdn引入是能正常使用的2.将三个文件下载下来本地引入会报找不到iconfXXX地址：font：https://github.com/view-design/ViewUI/tree/master/dist/styles...
2020-05-15 18:06:21
529
原创 对动态生成的ul-li进行点击事件并更改其样式
1、点击动态的ul-li，给被点击的添加颜色$(this).addClass(“active”).siblings().removeClass(“active”) ，siblings（）是监听除该元素的同级元素
2020-05-12 18:07:34
1275
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人