- 博客(42)
- 收藏
- 关注
RSS订阅原创 vue3+优化vue-baidu-map中marker点过多导致的页面卡顿问题
优化手机移动端h5地图中，marker点很多会造成的地图卡顿问题
2024-06-15 10:36:06
896
1
原创 Uint8Array文件下载
vue项目，自己调用了阿里云OSS的SDK，进行文件的上传以及下载，有个功能是列表中的附件需要支持点击下载，这里就用到阿里云oss的文件下载，使用了Nodejs的SDK。其中的result，返回的是 Uint8Array 类型的二进制数据,如下图所示。属性为文件名，这样点击下载链接时，文件会自动以该文件名保存到本地。上述代码中，首先用了oss下载文件返回的 result 这个。对象将该二进制数据转换成二进制数据对象，并指定。API 来实现二进制数据的下载。，表示下载的文件类型为二进制数据。
2023-05-08 13:58:09
1072
原创 VUE 将图片base64编码转换为图片上传的文件流
//使用toDataURL方法得到了一个 数据url，data:[<mediatype>][;base64],<data>letdataURL=canvas.toDataURL("image/jpeg");打印dataURL如下：封装方法，将dataURL转换为文件流base64toFile (dataurl, filename = 'file') { let arr = dataurl.split(',') let mi...
2021-06-24 17:57:11
3127
3
原创 前端通过图片路径实现下载
//imgsrc 图片路径 name 下载图片名称 downloadImage (imgsrc, name) { let image = new Image(); // 解决跨域 Canvas 污染问题 image.setAttribute("crossOrigin", "anonymous"); image.onload = function () { let canvas = document.createElement...
2021-06-12 15:48:58
1193
1
原创 git 常用命令
常用命令#查看本地分支git branch#查看远程和本地分支git branch -a#删除本地分支local_branchgit branch -d local_branch#创建本地分支 local_branchgit branch local_branch#创建本地分支local_branch 并切换到local_branch分支git checkout -b local_branch#切换到分支local_branchgit checkout local_br
2021-05-22 17:02:27
113
原创 vue rtmp流播放
video.js不能直接播放rtmp流，需要videojs-flash.js 这个插件cnpm install video-js -Scnpm install videojs-flash -Sdemo<template> <div> <div id="video-container"> <video id="myvideo" width="800" height="600" .
2021-02-20 17:31:01
2376
9
原创 3D 高德地图实现 旋转功能
<script>export default { data() { return { map:null, mapAnimateControl: false }; }, mounted() { this.initMap(); }, methods: { initMap() { this.map = new AMap.Map("map", { zoom: 10, resize.
2021-01-06 09:21:15
2565
1
原创 vue 使用canvas 进行图片标注
<template> <div class="draw"> <div class="drawTop" ref="drawTop" v-if="lineStep == lineNum"> <div> <el-button type @click="resetAll">清空</el-button> <el-button type @click="repeal">撤销&l..
2020-12-28 14:02:27
2655
原创 vue 上下轮播封装
<template> <div class="roll"> <ul :class="{'roll-content': true, 'sliding': sliding}" ref="list"> <li class="roll-list" v-for="(item, index) in data" :key="index" :style="liStyle"> <slot :item="item" :index=".
2020-12-19 14:37:43
390
4
原创 vue项目app扫码登录pc
需求：APP 扫码登录 思路：通过接口获取二维码唯一标识，例如：qrcodeId 通过qrcodejs2插件生成 二维码（二维码内容就是 qrcodeId，具体根据APP 需要） 循环调用接口，查看扫码状态（app是否扫码确认登录）case：//下载插件npm install --save qrcodejs2 <div id="qrcode">二维码位置</div><script>import QRCode from 'qrcod...
2020-09-02 11:28:24
1539
1
原创 vue element 实现全局加载 Loading
请求发起的时候开始loading，响应结束的时候关闭loading/** * 全局请求方式 */import axios from 'axios'import Vue from 'vue'import router from '@/router/index'import {Message,Loading} from 'element-ui' //项目已经全局引入element的话可以不单独引入let loading = null //定义loading变量//开始 加载loadi
2020-08-18 15:07:55
5540
原创 vue-cli4 配置 gzip 压缩
安装插件 npm i -D compression-webpack-plugin vue.config.js 配置 //引入该插件const CompressionWebpackPlugin = require("compression-webpack-plugin")//匹配此 {RegExp} 的资源const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/imodule.exp...
2020-08-08 11:46:09
4447
原创 vue pc端 自适应
pc rem 简单的适配 （把这段js 放在public文件下的index文件中即可） window.addEventListener('resize', function () { var winWidth = document.documentElement.offsetWidth || document.body.offsetWidth winWidth = winWidth < 1280 ? 1280 : winWidth var oHtml = document
2020-08-05 11:55:44
654
原创 vue 页面文字禁止选中，仅输入框和文本域可选
CSS样式控制*{ -webkit-touch-callout:none; /*系统默认菜单被禁用*/ -webkit-user-select:none; /*webkit浏览器*/ -khtml-user-select:none; /*早期浏览器*/ -moz-user-select:none;/*火狐*/ -ms-user-select:none; /*IE10*/ user-select:none; } inpu..
2020-06-24 13:23:21
3516
转载 vue 滑块验证（非原创）
github文档地址：https://github.com/yimijianfang/vue-drag-verify 注意用的时候需要对父元素或html设置user-select: none效果1实现方法1 新建一个 vue 文件 将以下代码复制进去<template> <div ref="dragVerify" class="drag_verify" :style="dragVerifyStyle" @m...
2020-05-30 17:34:57
789
原创 vue 解析token
安装插件npm install jwt-decode --save需要用到的地方引入jwt-decodeimport jwtDecode from 'jwt-decode'使用const decode = jwtDecode(token); console.log(decode);
2020-05-26 12:01:03
1363
1
原创 vue 滑动验证插件
实现效果安装插件npm install --save vue-monoplasty-slide-verify全局注册//main.js//引入插件import SlideVerify from 'vue-monoplasty-slide-verify';Vue.use(SlideVerify);使用<template> <div> <slide-verify :l="42" ...
2020-05-25 13:40:42
1525
原创 js银行卡保留前后四位，中间格式化为*
// 隐藏银行卡中间号码export const hideBankCard = (value) => { if (value && value.length > 8) { return `${value.substring(0, 4)} ${"*".repeat(value.length - 8).replace(/(.{4})/g, `$1 `)}${value.length % 4 ? " " : ""}${value.slice(-4)}`; } r.
2020-05-18 11:15:16
3208
原创 element 省市区三级联动
使用npm下载省市县数据 （数据来源-https://github.com/airyland/china-area-data）npm install element-china-area-data -S在需要使用的地方引入省市二级联动（不带“全部”选项）:provinceAndCityData 省市二级联动（带“全部”选项）:provinceAndCityDataPlus 省市区三级联动（不带“全部”选项）：regionData 省市区三级联动（带“全部”选项）：regio...
2020-05-16 09:25:47
1039
2
原创 js 用户名 密码 手机号 身份证等 常用正则
校验用户名可以为中文，英文字母，数字及下划线组成，长度3-15位let regex = /^[\u4E00-\u9FA5\uF900-\uFA2D|\w]{3,15}$/;6-16个字符,不包含空格,必须包含数字,字母或字符至少两种let regex = /(?!.*\s)(?!^[\u4e00-\u9fa5]+$)(?!^[0-9]+$)(?!^[A-z]+$)(?!^[^A-z0-9]+$)^.{6,16}$/验证是否为11位有效手机号码let regex=/^[1][3,4,5..
2020-05-15 13:27:20
666
原创 vue 面包屑路由动态实现应用
项目：vue 后台管理系统 UI: element-ui路由对象 matched 属性首先我们先来看看官方对 matched 的介绍。matched：返回一个数组，包含当前路由的所有嵌套路径片段的路由记录 。可以看到当我们定义好路由结构以后，我们就可以获取到当前页面的路由记录。首先我们先创建一个面包屑的组件。<template> <div> <el-breadcrumb separator-class="el-icon-arrow-r..
2020-05-09 16:53:58
1279
原创 Vant Dialog 弹出框 字体模糊
造成原因以我本次移动端项目为例 ，这是dialog 原本组件默认的代码，由于设置了transform: translate3d(-50%,-50%,0);在设置 transform时 div的宽度或者高度并不是偶数，移动50%之后，像素点并不是整数，出了小数，和显示像素没有对上，所以导致了下图所示的模糊解决方案由于 盒子在奇数下 使用 transform:translate (-...
2019-12-17 16:18:35
3022
原创 npm的镜像替换成淘宝
查看当前镜像npm get registry --> https://registry.npmjs.org/ 设置淘宝镜像npm config set registry http://registry.npm.taobao.org/换成原本镜像npm config set registry https://registry.npmjs.org/...
2019-11-04 21:29:16
240
原创 初次安装git配置用户名和邮箱及密钥
1-首先去官网下载git （速度比较慢，耐心等待一下） 地址：https://git-scm.com/downloads2-下载完成后 按照提示完成安装3-右键打开 git 命令行4-在命令行输入以下两条命令git config --global user.name "这里面填你的名字" //然后回车git config --global user...
2019-10-29 16:40:05
707
原创 element ui body添加类名 下拉框修改样式避免全局污染
element中要想修改下拉框样式必须去掉scoped，并且下拉框他不属于当前组件的域，所以说如果一个项目有两个甚至更多的地方要用到这个组件，那么难免会出现样式冲突。（一个页面要只有一处用到可忽略）解决冲突的方法，在vue中给个别组件中的body添加类名具体思路是 -监听当前下拉框，给body添加一个类，下拉框消失再移除这个class，代码如下1.通过 visible-chang...
2019-10-14 17:55:56
2202
原创 css实现超出文本溢出用省略号代替
单行 overflow: hidden; /* 溢出隐藏 */text-overflow:ellipsis; /* 省略号代替 */white-space: nowrap; /* 不换行 */ 多行 https://blog.youkuaiyun.com/qq_45062261/article/details/100774685...
2019-09-12 16:07:36
679
原创 element ui中表头文本居中的方法
<el-table-column prop="date" label="日期" width="180" align="center"> //element ui 表格文本居中的方法</el-table-column>
2019-09-12 15:59:46
9275
原创 CSS文本超过两行用省略号代替（不考虑兼容性）
代码demo如下：适用于WebKit浏览器内核<template> <div class="box"> 测试文本123测试文本123测试文本123测试文本123测试文本123测试文本123测试文本123测试文本123 </div></template><script> export d...
2019-09-12 15:51:56
700
原创 element ui table tooltip设置宽度
element-ui的table列超出部分省略加悬浮提示 并设置tooltip 宽度vue项目中 给element ui的 table 表格某一列添加超出部分省略加悬浮提示 ::show-overflow-tooltip="true" 实例代码如下<el-table-column :show-overflow-tooltip="true" prop="ad...
2019-09-12 15:35:58
12357
4
原创 PowerShell yarn : 无法加载文件 C:\Users\Admin\AppData\Roaming\npm\yarn.ps1,因为在此系统因为在此系统上禁止运行脚本。
1、搜索powershell，右键以管理员身份运行2、若要在本地计算机上运行您编写的未签名脚本和来自其他用户的签名脚本，请使用以下命令将计算机上的 执行策略更改为 RemoteSigned执行：set-ExecutionPolicy RemoteSigned3、查看执行策略：get-ExecutionPolicy4. 关闭命令窗口 即可...
2019-08-29 10:23:48
49939
20
原创 rem布局
rem基础rem单位rem (root em)是一个相对单位，类似于em，em是父元素字体大小。不同的是rem的基准是相对于html元素的字体大小。比如，根元素（html）设置font-size=12px; 非根元素设置width:2rem; 则换成px表示就是24px。/* 根html 为 12px */html {font-size: 12px;}/* 此时 div...
2019-08-13 12:42:37
298
原创 elementui el-table根据分页显示表格序号
根据分页显示序号：当前点击的页码： pageNum 每页显示的数量： pageSize <el-table-column label="序号" width="80px"> <template slot-scope="scope"> <div> {{scope.$ind...
2019-08-07 11:27:00
1025
原创 vscode修复eslint的报错
具体操作如下：1、安装添加eslint 和 vetur 插件2、首选项设置搜索eslint 勾选Auto Fix On Save 并点击edit in setting.json进行设置{ "eslint.validate": [ "javascript",{ "language": "vue", "auto...
2019-08-06 13:03:51
3537
1
原创 vue+axios 实现Excel下载
后端给出下载Excel的接口 axios.get('/sms/task/export',{ responseType: 'blob',// 表明返回服务器返回的数据类型, params: { params: JSON.stringify({ token: sessionSt...
2019-07-29 17:12:36
190
原创 svn 小乌龟 主分支合并
一般trunk保存主线代码，其他人的分支代码放在branches目录下。这是默认约定。从主线合并到分支主线更新后，把主线代码合并（更新）到自己的分支，保证自己的分支上的代码是最新的。清理分支代码，避免存在未提交的代码（commit or revert） 切换到主线，更新到最新版本 切换回分支 右键 合并 选择主线url + 合并方式（URL） + 全部版本 进行合并确认...
2019-07-24 11:06:32
2245
原创 element-ui 添加滚动条
例如 在一个弹出框的表格添加滚动条 <!-- 弹出框 --> <el-dialog :title="title" :visible.sync="dialogVisible" width="50%" center :close-on-click-modal=false> <div style="height:500px;" class="scr...
2019-07-24 10:32:35
35266
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人