- 博客(71)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 梳理清楚的echarts地图下钻和标点信息组件
是适配字体大小的，getEchartsFontSize(0.12) === 12。是获取地图json的，这里的是我公司的，可以用阿里云的代替。是地图容器变化刷新地图适配的，可以你们自己写。是base64图片就是图上那个标点的底图。还有不明白的可以看是之前的文章，默认数据没有就是全国地图，
2024-05-29 15:07:43
408
原创 uniapp开发h5页面的扫码功能(html5-qrcode和mumu-getQrcode两种方式)，以及后续用安卓扫码传h5的方法
因为uniapp自带的api不支持h5，而且非微信环境也无法使用公众号jsjdk的扫码，只能尝试其他方法但是发现只能https域名才可以调用，其他所有人的都不许http域名
2024-04-08 09:52:33
2882
2
原创 通过el-select选择器和el-tree树形结构二次封装(vue2+elementUI)，开发element-plus的TreeSelect树形选择器
领导看我在另一个vue3项目的el-tree-select挺好的，叫我移入vue2的项目中。但是vue2版本的elementUI，并没有这个组件，所以只能自己找，找半天找不到和它差不多的，通过网友写的组件改写的
2024-03-13 12:00:47
1598
1
原创 获取上个月或者下个月的时间戳
需求：给定一个时间戳，获取这个时间戳上个月或者下个月的时间戳？难点是不确定月份，所以这里先获取月份，再判断的（具体看代码注释都有）。时间戳转年月日就不贴出来了，网上太多了。
2023-11-10 14:14:34
295
原创 mousedown拖拽功能(vue3+ts)
因为项目有rem适配，使用第三方插件无法处理适配问题，所有只能自己写拖拽功能了拖拽一般都会想到按下，移动，放开，但是本人亲测，就在div绑定一个按下事件就行了（在事件里面写另外两个事件），另外两个绑上，会莫名其妙卡死，那种莫名其妙的问题推荐几个开发调试时使用的第三方拖动插件吧，虽然没用上，但是他们是真的好和，其中前者更轻量化，后者功能更全。
2023-08-08 18:54:20
953
原创 postcss-pxtorem适配插件动态配置rootValue（根据文件路径名称，动态改变vue.config里配置的值）
想到通过判断文件夹名称的方式，因为不同项目，肯定有分开的文件夹包着，特殊的分辨率，按照他路径名称判断有没有这个文件夹名称就行了。
2023-07-28 11:49:27
3279
8
原创 uview2.x 下，使用u-picker封装省市区选择器独立组件
uview没有专门的省市区选择器，而且他的选择器也做的不太好，不支持tree树，所以要自己准备好省市区json数据，还需要处理数据变成多维数组。这里我借鉴了csdn众多人的示例代码，封装的独立组件。只需要展示省市区名字就行了。
2023-05-31 18:37:47
1759
5
原创 解决echarts5中国地图只显示南海问题，及china.js china.json下载
问题：echarts5中国地图，只显示南海说明：echarts3版本后，因为版权问题，echarts不再内置中国地图，也没有中国地图数据，网上找的又很多有问题，或者语焉不详。。。1：需要手动引入china.json文件，在public文件下，不能放src那。:2：很多开源项目或者老项目用的jQuery的$.getJSON，vue就不要引入这玩意了，用axios的axios.get(uploadedDataURL).then((geoJson: any) => {})就行了。3：echar
2023-03-29 17:13:10
5949
9
原创 css特效之父元素转动，子元素始终保持正的（公转不自转）
帮忙写了下，解决了旋转问题（公转不自转），但是五个子元素靠定位是没用的，想到大学老师教的偏移属性，找啊找，找到了。冲突，不能用在一个元素上，室友的方法是拆了，子元素转就行了，我不想写这么多重复代码，就想到，我多套一个盒子，然后转变思路，父转，子反方向转，但是因为无法定位元素位置，用的绝对定位的手动位置，根本算不准，导致出问题。需求：五个东西跟着父元素转，但是保持正面朝上。我开始的思路是：让父盒子转就行了。前端自学群计算机专业硕士女同学（不放一起就行了，解决了。
2023-03-21 23:11:24
1782
6
原创 uniapp自定义头部(官方状态栏高度var(--status-bar-height)失效后的处理)
说明：之前都是用uview UI自定义头部，发现现在他的插槽无法解决我的需求后，决定自己写一个，但是遇到了一堆坑，最恶心的是var(–status-bar-height)，获取手机状态栏高度这个属性失效了，没办法自己获取手机状态栏高度去了代码说明：核心函数是状态栏高度（statusBarHeight）+ 底部高度（48px）这里安卓是44px，ios是48px，我偷懒没做处理，直接用的48px效果图：组件代码：<template> <view class="myHeader"
2021-12-16 19:03:53
16001
原创 注册验证码倒计时
说明：本来我是不想写这玩意的，想我也不是一个萌新了，10分钟搞定一点问题都没有别人写if else我直接来个三元。别人还要true false，我一个时间就行了直到我写了半小时还没搞定QAQ。。。我就老老实实用传统方法了 <text v-if="sendMsgDisabled" class="getCode">{{time + 's'}}</text> <text v-else class="getCode" @click="getCode">获取验证码.
2021-12-14 11:50:32
269
原创 控制台ASSII
关于在控制台留下点标识，ASSII技术可以转图片为标识asciiart - 可以制作图片的lunicode - 制作英文和数字patorjk - 制作英文和数字1lineart - 制作符号表情效果： created () { let ascii = ` ⢇⢇⣇⢇⢇⢇⣇⢇⢇⢇⢇⢇⢇⢇⣇⢣⢃⠃⠃⠃⠋⠁⠀⠉⠙⣏⢇⣇⣇⣇⣇⣇⣇⣇⣇⣇⣇⣇⢇⢇⢇⢇⢇⣇⣇⣇⢇⢇⢇⢇ ⢇⢇⢇⢇⢇⢇⢇⢣⢇⢇⢣⢇⢇⢇⢇⢀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⣏⣇⣇⣇⢇⢇⢇⢇⣇⣇⣇⣇⣇⣇⢇⢇⢇⢇⢇⢇⢇⢇⢇ ⣇⣇
2021-11-29 17:57:35
286
原创 uniapp正则限制只能输入数字和字母
介绍：此功能核心是正则和replace替换函数，只能输入数字和字母，其他的替换成空值，相当于删除非匹配项html:<input @input="onKeyVinInput" type="text" maxlength='6' v-model="customerDetails.vin" placeholder="请输入车架号后6位" />js: // 车架号 onKeyVinInput(event) { var value = event.detail.value.toUpper
2021-11-29 15:21:04
2387
原创 uniapp选中多张图片或者视频（多图上传）
因为产品需求，市面上找不到和他类似的组件。只能自己写这个是封装的函数，单图的不知道有没有问题，多图上传没问题，因为小程序的函数不支持多图上传，只能一张张的调上传接口，所以我用了Promise.all方法来，处理异步里面单独的上传，在所以上传跑完，函数才返回出链接合成的数组js方面的代码：// 多图上传// type: 1图片和视频，2图片// count：最大数量export function headerUploads(type = 1, count = 1) { let mediaT
2021-07-19 13:43:30
4026
5
原创 微信小程序更新版本
微信小程序更新版本在App.vue文件，onLaunch生命周期里，加上它就行了虽然这更新的代码烂大街了，用处也不大，一般清除进程，再进去会自动更新，还是写下，方便自己复制粘贴吧if (wx.canIUse('getUpdateManager')) { const updateManager = wx.getUpdateManager() updateManager.onCheckForUpdate(function(res) { if (res.hasUpdate) { updat
2021-07-19 11:31:37
180
原创 文字对齐（text-align: justify；）
代码：text-align: justify;text-align-last: justify;例子：.left { width: 90rpx; // text-align: center; text-align: justify; text-align-last: justify; color: #41526C; line-height: 32rpx; margin-right: 45rpx;}原来加了后
2021-06-26 12:35:35
224
原创 优化滚动条样式
备注：这玩意兼容代码太难找了，这个做了兼容，谷歌和火狐没啥问题效果：LESS文件：div { width: 100%; height: 100px; overflow-y: auto; scrollbar-width: thin; scrollbar-arrow-color: #f0d1a2; /**/ /*三角箭头的颜色*/ scrollbar-face-color: #f0d1a2; /**/ /*立体滚动条的颜色*/ scrollbar-3dlig
2021-05-31 16:32:54
204
原创 原生js复制内容到剪切板
网上说的不明不白，坑了我半天，发现必须先创建input，复制选中input的值，好™坑啊，代码如下：html<div class="popups-box"> <div class="title"> 微信号 </div> <div class="content"> <img src="__MOBILE__/images/imgs/250.png" alt="">
2021-04-19 14:58:51
127
原创 百度地图展示v3
说明：之前文章用的百度地图v1太老了，这次拿到同事的v3来，自己试了一遍，果然好多了html:<div id="baiduMapv3" style="height: 100%;width: 100%;"></div>js:// 先引入<script src="http://api.map.baidu.com/getscript?v=3.0&ak=ZuZ619faA8xlWMFx9tFQP55AnIf2MIqP"></script>//
2021-04-14 14:15:03
336
原创 保存画布到本地出现的bug和画布的隐藏
和隔壁画布隐藏一起，卡了我几个小时…保存相册失败后，再次授权// 下载 btn() { uni.canvasToTempFilePath({ // x: 100, // y: 200, // width: 50, // height: 50, // destWidth: 100, // destHeight: 100, fileType: 'jpg', canvasId: 'myCanvas', su
2021-04-11 01:34:38
131
原创 媒体查询（个人总结）
公司响应式用媒体查询做。。。把以前媒体查询捡起来先，分别对应超大屏，普通pc，平板，手机body { background-color: red;}@media screen and (min-width: 992px) and (max-width: 1199px) { body { background-color: pink; }}@media screen and (min-width: 768px) and (max-width: 991px) { bod
2021-03-11 16:22:02
102
原创 溢出隐藏省略号大法
单行：overflow: hidden;text-overflow:ellipsis;white-space: nowrap;多行：display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;
2021-03-03 15:31:58
197
1
原创 小程序基础语法--常用（个人小总结）
小程序基本文件：wxml（结构），wxss（样式），js（行为），json（配置）语法：wx:if…wx:elif…wx:else（判断是否创建）hidden（通过display属性控制显示与隐藏），wx:for(循环数组是key—value； 循环对象是value—key)。事件绑定：bind，input框绑定事件是bindinput=“函数名”，点击事件是bindtap获取默认值：事件源对象（e.default.value）；赋值：需要通过this.setData（{num：e.default
2021-02-26 10:22:27
348
原创 uniapp请求封装（个人总结）
自己根据公司同事留下的代码改的，uniapp请求封装import { BASE_URL} from './config.js'// 公共的请求方法function request ({ url, method, // 不填为不需要token,为true为需要token isAuth, data, // 默认显示Loading isShowLoading = true}) { return new Promise((resolve, reject) =>
2021-01-16 14:48:54
2232
1
原创 一直对props传值和emit和sync不太清楚，总结一下
prop父传子：在父组件定义子标签用:子组件值=父组件值，然后在子组件用props: ['子组件值']来接收,可以直接使用了，但是一般是作为子组件的值的默认值来用，直接改变的话会报错，可以创建一个中间值来存就行了//父组件的子标签<loginSon :names='name'/>//子组件<span>父亲传的值：{{names}}</span>// props: ['names'] props: { names: { type:
2021-01-14 11:46:40
209
原创 筛选数组中对象的一个元素，返回这条对象信息
var outArr=[ {"name":"张三","id":1,age:18}, {"name":"李四","id":2,age:19}, {"name":"王五","id":3,age:18}, {"name":"小红","id":4,age:20}, {"name":"小明","id":5,age:17}, {"name":"小白","id":6,age:18}];var newArr = outArr.filter(function (obj) { return obj.ag
2021-01-13 17:51:25
1027
原创 测试用的video视频地址
ogg3秒https://www.w3school.com.cn/i/movie.oggmp410秒https://www.runoob.com/try/demo_source/mov_bbb.mp410秒https://www.runoob.com/try/demo_source/movie.mp4
2020-12-14 16:39:00
4899
原创 判断登录设备，跳转不同网址
判断登录设备，手机，平板，还是电脑，可以在App.vue做 mounted() { var os = (function() { var ua = navigator.userAgent, isWindowsPhone = /(?:Windows Phone)/.test(ua), isSymbian = /(?:SymbianOS)/.test(ua) || isWindowsPhone, isAndroid = /(?:Androi
2020-12-11 11:15:40
424
原创 animate.css加wow.js实现：滚动都指定位置有动态特效
说明：animate管特效，wow是让用户滚动到位置触发特效使用方法：引入animate.css，wow依赖animate，所以必须提前引入， <!-- head的css --> <link rel="stylesheet" href="./lib/animate/css/animate.min.css"> <link rel="stylesheet" href="./lib/animate/css/mobile_animate.css">js引入后
2020-12-03 16:00:22
498
原创 微信网页分享给朋友和朋友圈
导入jssdk，调接口获取appid什么的（后端做这步，前端调用），遇到一个史前巨坑，发现无法分享，后来旁边前端想起来，只能设置分享内容，无法按钮直接分享，三脸懵逼代码奉上shareWeChat1 () { console.log('开始分享'); createJsapiSignatureApi({ url:'https://mp.c****8.com/pages/minePage/invitation/index' }).then(res=>{ let
2020-12-02 17:55:48
399
原创 前端处理后端传的文件，导出，下载总结
// 导出函数 export2Excel () { this.$http({ url: this.$http.adornUrl('/sys/bill/doExportExcel'), method: 'post', responseType: 'blob' }).then((_res) => { let blob = new Blob([_res.data], { type: 'appl
2020-11-05 13:42:49
457
原创 vue 导入导出表格（xlsx和xls）
导入，直接给后端文件，element UI做的<div class="file"> <el-upload class="upload-demo" action="http://47.97.220.184:8912/weisui/sys/bill/doImportExcel" :before-upload="beforeAvatarUpload"
2020-11-04 09:12:01
1630
原创 vue做谷歌登录，脸书登录
老实说，这个就是真的做的欲仙欲死了，脸书登录还好，谷歌登录后端给我看的文件根本看不懂。。。后来还是一个玩的好的php，帮我分析流程，解决问题的参考别人的几个博客，不过他们做的除了准备方面，其他的，实在太简单了：1.Vue.js中Facebook第三方登录api实现[亲测可用]2.Vue.js中Google第三方登录api实现[亲测可用]3.后端给我的参考文件，放github上吧，先不上链接了，文件在公司最后，放出我自己源代码<template> <div class="s
2020-10-25 22:43:13
1635
2
原创 vue分享到推特脸书2（总结）
这个好像也没啥好讲的，虽然找了好久才解决他，但是涉及到的知识点其实没多少，具体思路可以看我上一篇文章源码：这是后期做的vue项目分享部分的源代码<template> <div class="shareItem" @click.stop="closeAlert"> <div class="share_box" @click.stop> <div class="ul_share"> <!-- 分享addthis -
2020-10-25 22:28:41
2260
2
原创 前端分享到推特，脸书
前端分享到推特，脸书推特：https://twitter.com/intent/tweet?url=网址&text=内容脸书：http://www.facebook.com/sharer.php?u=网址addthis：https://www.addthis.com/国外的addthis，不知道为什么老是显示不出来后端给的东西：<!DOCTYPE html><html><head> <!-- twitter --> &
2020-10-21 11:36:22
1640
原创 公共样式初始化文件（备用）
公共样式初始化文件：1.最简单*{ padding:0; margin:0; list-style: none; text-decoration: none; box-sizing: border-box;}html,body,.app{ height:100%;}2.reset.csshtml, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockq
2020-10-08 23:26:30
266
原创 合并两数组内对象，只有id相同（map方法+find方法）
合并数组内对象思路：先map循环一个数组，每一项提出来，和另一个数组每一项的id进行比较，如果id相同，就返回哪一项随便合并对象使用方法：map,find具体代码： let cart = [ { id: 4399, name: '黄忠' }, { id: 4379, name: '吕布' } ]; let goodsList = [ { id: 4399, wq: '弓箭',
2020-09-23 22:35:04
997
flexible.js
2020-07-05
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人