- 博客(33)
- 问答 (12)
- 收藏
- 关注
原创 nuxt.js + vue-i18n + nuxt-i18n 实现多语言国际化
2、使用1、新建lang文件夹,分别新建对应语言的json文件举个例子~新建zh.json: 新建en.json:2、新建文件夹plugins(放置插件),新建i18n.js3、新建文件夹middleware(中间件),新建i18n.js4、在store文件夹里,新建index.js5、在nuxt.config.js中引入6、在页面使用7、切换语言我这里用得是bootstrapVue的组件,根据自己的页面情况而定3、踩坑但是出现了诸多问题:一、vuex没有数据持久化,因为nuxt
2022-06-23 17:04:56 6582 7
原创 vue 实现 v-show 或 v-if 的动画过渡
实际效果:一、<transition name="zoom" mode="out-in"> <image v-if="!video.like" @click="onLike" src="../../static/images/like.png" key="like"></image> <image v-else @click="onUnlike" src="../../static/images/like_after.png"key="unlike"&
2022-05-30 10:48:51 3934 1
原创 vue使用高德地图后坐标偏移问题
前言:因为项目有多个版本,有app端及H5端,app端定位地理信息是用手机GPS获取,而H5端定位地理信息是用高德地图获取,但是发现高德地图获取的坐标系有偏移~一、使用高德地图: // 获取当前定位 AMap.plugin('AMap.Geolocation', function() { const geolocation = new AMap.Geolocation({ enableHighAccuracy: true, //是否使用高精度定位,.
2021-09-09 18:18:28 8302 24
原创 Android Studio中打包Hybrid App生成APK
使用工具:前端:webstrom安卓:android studio一、打包dist文件命令行:npm run build成功生成dist文件后二、替换Android工程中原打包文件我的项目放在src => mian => assets 下三、生成apk包1、在Android工程中,点开Bulid,选择Generate Signed APK。如果发现菜单中每次此选项地,也不要着急,从git拉下别人的代码,难免出现冲突。解决方法:点击file,选中如下图所示Sync P.
2021-09-06 16:29:27 493
原创 Vue如何使用百度地图及踩坑
文章目录一、前提准备,申请密钥二、引入百度地图的方法1. 线上SDK引入2. 插件vue-baidu-mapa、全局引入b、局部引入三、踩坑1、自动定位不精准一、前提准备,申请密钥二、引入百度地图的方法1. 线上SDK引入1、index.html: <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=你申请的AK"></script>2、build => we
2021-08-05 18:08:39 607
转载 吸顶u-sticky和下拉选框u-dropdown配合使用,吸顶后下方内容被遮挡
前言:因为最近使用uniapp开发小程序,使用了uview组件。在同时使用了吸顶u-sticky 和 下拉选框u-dropdown后,发现吸顶后,下方内容会被遮挡。哭唧唧~百度后有大佬解决啦,地址:https://gitee.com/xuqu/uView/issues/I3J1RB?from=project-issue所以想记录一下啦~添加了一个变量,关闭的时候把高设置为0,打开的时候回复屏幕高度,能解决dropdown和sticky配合使用的时候遮挡下面内容的问题,目前达到预期效果一.
2021-08-02 10:38:21 3513 2
原创 面试可能会遇到的程序题
从易到难,循序渐进的过程啦:1. 点击input依次输出的值const text = document.getElementById('text');text.onclick = function (e) { console.log('onclick')}text.onfocus = function (e) { console.log('onfocus')}text.onmousedown = function (e) { console.log('onmousedown')}
2021-07-07 16:31:09 116
原创 js之你意想不到的输出结果
因为无意中看到了这个神奇的网站,题目都很有意思,也可以对js的知识点查漏补缺1. true + false console.log(true + false) // 1解析:两个布尔值相加,会先转成数字,再相加转数字规则: true为 1, false为 0,补充一下其他的转数字规则: null为 0, undefined为 NaN,symbol会报错,字符串看内容,如果是数字或者进度制就正常转,否则就NaN2. [,,,].length (此时[ ]内为三个英文逗号,用英文写,只.
2021-07-05 14:24:26 190
原创 vue项目使用elementui 上传图片(自动上传和手动上传) 并压缩图片
前言:首先你的需求:你的项目图片是需要自动上传还是手动上传自动上传:auto-upload为true时,before-upload有效;auto-upload为false时,before-upload无效
2021-07-01 12:03:19 4123 1
原创 npm install报错 run `npm audit fix` to fix them, or `npm audit` for details
由于办公换了一台电脑,重新拉项目后,安装npm,报错,如下图:在一番百度后,报错原因:依赖包存在严重漏洞,需要更新,解决方法都差不多:第一种:npm audit fix npm audit fix --forcenpm audit命令行解析:1. npm audit fix : 扫描您的项目以了解漏洞,并自动安装任何与易受攻击的依赖关系兼容的更新2. npm audit fix --force :为主要依赖关系安装半主要更新3. npm audit:扫描您的项目以了解漏洞,只需显
2021-06-30 09:44:40 5110 1
原创 由for循环引起的var与let的血案
起因是在网上看到得一个经典面试题:for (var i = 1; i <= 5; i++) { setTimeout(function test() { console.log(i) }, i * 1000);}// 依次输出:6 6 6 6 6当时俺没想通,难道不应该依次输入1,2,3,4,5吗?然后敲下了:for (let i = 1; i <= 5; i++){ setTimeout(() =>{ console.log
2021-06-25 09:34:24 147
原创 微信小程序如何正确引入iconfont图标
最近在微信小程序踩坑啦,开始愉快了像web项目一样引入iconfont图标,结果发现:然后??对,这个讨厌的小方块,显示失败啦最好一番百度后,成功解决啦,哈哈哈因为,小程序必须先转为base64引入!!!第一步:下载后解压,你将得到这样的目录结构:第二步:转换成base64网址:https://transfonter.org/选择后缀为 .ttf 的文件第三步:下载成功后,得到一个名为 “transfonter.org” 开头的压缩包,解压后得到三个文件,打开 “styleshe
2021-06-24 10:34:30 2860 2
原创 git常用语法集合
文章目录配置关联Git仓库1.关联远程仓库:2.修改远程仓库地址:3.配置公私钥:提交文件分支管理1.查看分支:2.删除分支:3.创建分支:4.切换分支:合并分支:其他配置git config–local(只对当前项目有效) --global(对所有项目有效)举个栗子:查看当前项目配置:git config --local --list配置当前项目:git config --loacl user.name '账户名'git config --local user.email '邮箱'
2021-06-23 09:21:00 144
原创 微信小程序实现局部下拉刷新
先上效果图啦:注意:1.使用了scroll-view,是无法触发onPullDownRefresh的。2.配置文件中的"enablePullDownRefresh": true 是整体下拉,不能实现局部下拉。代码如下:wxml:<scroll-view class="order_card scroll_view" scroll-y="true" bindrefresherrefresh="bindDownLoad" //
2021-06-22 17:59:50 1360 3
原创 js判断字符串包含某个字符串的多种方法
1. string.search()返回值:匹配成功的第一个字符的下标,未匹配则返回-1用法:string.search(searchValue)举个例子: let searchVal = 'yyds' let searchResult = searchVal.search('y') console.log(searchResult) // 0 3. string.includes()返回值:Boolean用法: string.includes(searchValue, start)
2021-06-15 17:44:13 47619 1
原创 css实现Material Design风格的输入框
效果图:html:<div id="inpit-box"> <input class="input-control" placeholder="账号"/> <label class="input-label">账号</label></div>css: .input-control{ outline: none; height: 35px; border: 1px solid #808
2021-06-09 17:43:41 442
原创 Html引入公共页面的踩坑
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript"> $(functi
2021-05-28 15:32:17 258
原创 vue项目 封装axios接口并添加token请求头
目录下新建utils文件夹,创建一个request.js用来封装axios。引入axios,Vue
2021-05-26 17:36:21 3514
原创 vue2项目详细使用高德地图教程,超详细!!!
高德官网教程地址:https://lbs.amap.com/api/javascript-api/guide/abc/prepare官网其实很详细啦,但这是比官网还详细的保姆级教程!入门准备:成功注册账号后,申请key:1.2.3.
2021-05-18 10:07:30 3759
原创 window.location.href 拨打电话 IOS端不起作用
使用window.location.href 拨打电话,发现android端能跳转到通讯页面,但ios没有反应:window.location.href = 'tel://'+ phoneNum 在网上查阅资料后,最常见的几种方法:方式一:<a href="" ref="tels"></a>this.$refs.tels.href = `tel://`'+ phoneNumthis.$refs.tels.click()方式二:setTimeout(() =>
2021-05-17 18:23:13 4051 3
原创 git报错解决方法合集
1. Reinitialized existing Git repository in D:/vueproject/needcash/.git/2.fatal: remote origin already exists.本地库已经关联了origin的远程库,并且,该远程库指向GitHub。1、先输入$ git remote rm origin (删除关联的origin的远程库)2、再输入$ git remote add origin...
2021-05-13 09:00:08 1255
原创 vue项目使用swiper设置按屏幕宽度响应式
效果图如下:使用的版本为swiper5代码如下:breakpoints: { 320: { //当屏幕宽度大于等于320 slidesPerView: 1, spaceBetween: 10 }, 776: { //当屏幕宽度大于等于776 slidesPerView: 2, spaceBetween: 60 }, 1000: { //当屏幕宽度大于等于1000 slidesPerView: 3, spaceBetween:
2020-09-29 10:20:14 2638
原创 vue项目使用swiper自动播放,前进后退按钮失效
一.下载npm:npm install swiper --saveyarnyarn add swiper二.引入因为是一个页面使用,所以局部引入啦在script引入:import Swiper from 'swiper'在style引入:(此处是5.4.5版本的css路径)@import "../../node_modules/swiper/css/swiper.css";三.页面使用mounted () { this.initSwiper()},methods: { i
2020-09-24 15:40:34 2259 1
原创 vue 项目如何使用animate.css及踩坑
因为项目需要使用到animate.css,特此记录一下啦。首先一 . 安装在命令行中执行:使用npm或者cnpm安装npm install animate.css --save 或 cnpm install animate.css --save使用yarn安装yarn add animate.css --save二. 引入在main.js全局引入import animate from 'animate.css'Vue.use(animate)三. 页面使用类名需要和引入的名称相同
2020-09-21 16:40:15 2274 3
原创 vue 实现平滑滚动及导航栏固定偏移问题
一. 实现页面平滑滚动html:<a class="nav-link active" @click="scrollHome">HOME</a><home id="home"></home>method:scrollHome () { document.getElementById('home').scrollIntoView({ block: 'start', behavior: 'smooth' })}二 . 解决导航栏固定偏移问题如果
2020-09-18 15:39:07 2729
原创 vue项目使用 Echarts 实现双柱柱状图
安装echarts:npm install echarts -S 或者 cnpm install echarts -S(淘宝镜像)main.js引入全局引入:import echarts from 'echarts'Vue.prototype.$echarts = echarts按需引入:示例引入的是柱状import echarts from 'echarts/lib/echarts'import 'echarts/lib/chart/bar'export default ech
2020-08-26 14:19:38 2675
原创 vue如何优雅的上传文件
vue如何优雅的上传文件上传文件的方式新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能,丰富你的文章UML 图表FLowchart流程图导出与导入导出导入上传文件的方式下面是我使用过得两种提交方法,详细说一下哈1.使用表单提交文件2.使用Elementui封装的组件提交文件新的改变
2020-08-18 14:50:51 22273
原创 Elementui Tooltip 修改背景色和箭头颜色
需求:修改Tooltip的背景颜色和箭头颜色代码如下:<style lang="less"> /*修改tooltip的背景颜色*/ .el-tooltip__popper { background-color: #585E6B !important; } /*修改tooltip的箭头颜色*/ .el-tooltip__popper[x-placement^=top] .popper__arrow::after { bo
2020-08-18 13:41:59 4076
空空如也
bootstrapTable 水平滚动条显示了但无效
2021-08-27
vue项目修改host和port后报错?(可以用localhost和本地IP访问)
2020-10-28
关于vue项目使用swiper,前进后退按钮,自动播放失效
2020-09-22
v-charts的图表随着div的高度自适应
2020-08-14
v-chars 详情内容溢出被隐藏,如何让它向上显示?
2020-08-11
vue 使用Elementui的message,该怎么设置出现时的坐标呀?
2020-08-11
vue, 使用form表单上传文件,传参一直都是空的!!!??
2020-08-04
vue项目一直报错,已经在父组件定义了,子组件总报属性未定义??哭
2020-07-21
救救孩子,前端小白:对JSON字符串进行拷贝后,为什么会变成这样??
2020-06-12
怎么把对象和数组的值深拷贝到另一个对象
2020-06-12
vue 的路由跳转不起作用,没有任何反应
2020-06-10
TA创建的收藏夹 TA关注的收藏夹
TA关注的人