vue高德地图H5定位及城市选择器控件实现详细教程
需求说明:H5实现初始化通过高德地图进行定位城市,用户也可以自行点击选择其他城市
主要功能点:定位、城市选择器
实现效果
一、初始准备这里采用 高德地图 JS API去实现上述两项功能,使用高德地图 JS API 开发地图应用需要先注册账号并申请Key,https://lbs.amap.com/api/javascript-api/guide/abc/prepare
首先,注册开发者账号,成为高德开放平台开发者,地址 https://console.amap.com/dev/id/choose
这里我选择的个人开发者,只需要手机号认证即可创建,后续有需求可以选择企业开发者。
登陆之 ...
文字过长截取添加小数点
显示一行
width:200px
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
如果需要显示多行,在需要设置的元素style中添加以下代码:
word-break: break-all;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
H5项目dialog弹框封装
1需求:H5项目在退出登录时需要弹出弹框提示是否确认退出登录,但该项目体积较小,没有引入组件库,所以决定自己封装一个dialog弹框
子组件
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111 ...
san框架(4)--san框架深层遍历数据无法更新视图
san框架官方文档:https://baidu.github.io/san/tutorial/start/
san框架遇到数组深层做数据修改时,直接 set 数据会发现没有触发视图的更新,但是将数据打印在控制台上发现数据确实是已经进行了修改。
San 的数据变更在内部是 Immutable 的,因此遇到数组深层做数据交换时直接 set 数据会发现没有触发视图的更新。
因为直接set赋值后,相当于是一种浅拷贝,浅拷贝拷贝的是引用地址,san内部监测到数据的引用地址没变,默认判定数据没变,所以就没有触发视图的更新。要想在深层数据修改后触发视图更新,就要对数据进行深拷贝。(深拷贝主要是将另一个对象的 ...
vue单页设置页面不刷新 记录滚动条的位置
功能需求点击商城第三级分类节点进入商品列表页,然后点返回按钮时页面重新回到了第一个一级分类节点的三级节点下。但需要的效果是返回到当前的三级分类节点(页面在底部)。
vue单页 使用keep-alive页面返回不刷新
法1:设置所有页面进入分类页时都缓存(已试过成功)
keep-alive是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM。
1.在配置router的文件中设置分类页的keepAlive为true
2.将app.vue文件设置为
123456789101112131415<template> <div id="app&quo ...
hexo配置GitHub/gitee双部署
原本将博客搭载在GitHub上,但作为国外站点实在是比较慢也不太稳定,查看博客的加载速度十分不友好,所以决定把博客搬到国内的gitee上,提高访问速度。
gitee创建仓库1、首先登录gitee, https://gitee.com/ 创建仓库
2、配置sshkey
由于之前生成过,所以只需要找到之前的id_rsa.pub文件打开复制即可
点击gitee设置,去配置sshkey
点击SSH公钥,输入标题和复制的公钥进行配置
hexo项目配置在hexo根目录的_config.yml中进行配置仓库地址
配置完成,执行hexo g -d将博客推送到GitHub和gitee。
gitee ...
Cannot find module '@babel/compat-data/corejs3-shipped-proposals'
问题:npm run dev 报错Cannot find module ‘@babel/compat-data/corejs3-shipped-proposals’
解决:npm update –depth 5 @babel/compat-data
error in ./src/assets/images/logo.png报错
vue项目启动执行时大量报错找不到图片,error in ./src/assets/images/logo.png
解决:先卸载再重新安装image-webpack-loader
123npm uninstall image-webpack-loadercnpm install image-webpack-loader --save-dev
更新:如果安装image-webpack-loader依然报错pngquant failed to build, make sure that libpng-dev is installed那就需要先安装imag ...
vue-pdf实现PDF文件流展示
需求说明:后台返回PDF文件流,前端使用vue-pdf插件进行展示
最开始搜索出的插件都是pdf.js,但由于该vue项目不是特别完整的结构,没有public/assets文件夹,一直报找不到那个文件,最后只好放弃换一个方式。
最终采用了vue-pdf插件,可以直接安装,方便快捷
下载vue-pdf
1npm install vue-pdf -D
页面使用
123456789101112131415161718192021222324252627282930313233343536373839404142<pdf v-for="i in numPages&quo ...
纯jQuery树状结构封装
拖延症中。。。。
2021-08-16更新:哈哈哈哈哈哈哈我终于来填坑了,感觉拖了一年
需求:之前做的一个h5项目要实现4级下拉选择人员的功能,但是给到我的demo就是一个写死的四级导航栏样式,所以自己手写了一个四级下拉导航栏
demo:
实现
封装了一个小demo,见https://github.com/QingMuZhang/treeDemo