![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
996 前端小伙子
习惯开发:vue2 + elementui + MQTT 实时通讯
开发过:小程序,微前端(qiankun),移动端,pc端
展开
-
dom-to-image.js 页面截图
dom-to-image.js 页面截图解决: dom-to-image.js 视频标签 video 不显示解决: dom-to-image.js svg 标签不显示解决: dom-to-image.js 图片链接失效报错原创 2023-02-06 10:36:24 · 2885 阅读 · 0 评论 -
element tree懒加载局部刷新
一、在el-tree 标签,写入node-key="id"ref="asyncTree"二、在 懒加载的load 绑定的事件中,首级需要把node 存储起来1、getData是请求数据方法 loadNode (node, resolve) { if (node.data && node.data.id) { this.getData(node.data.id, resolve) } else if (node...原创 2021-11-26 16:45:37 · 1352 阅读 · 0 评论 -
git由ssh方式改为https方式
先删除关联git remote rm origin在获取到项目https地址重新绑定关联git remote add origin http://gitlab.xxxxxxxx.cn:xxxx/xxxxxx/xxx.git本地分支和仓库分支关联git pullgit branch --set-upstream-to=origin/dev dev原创 2021-09-23 14:26:55 · 1455 阅读 · 0 评论 -
自定义修改 input 的range
最终效果遇到的问题: 1、无法直接修改 input 进度条进度条颜色,解决办法使用css3背景渐变解决css: 需要注意加上-webkit-appearance: none 否则无效 /*滑动条背景*/ input[type="range"] { -webkit-appearance: none; width: 522px; height: 24px; background: linear-gradient(90deg, #1C2D...原创 2021-09-22 15:59:43 · 1009 阅读 · 1 评论 -
vue脚手架创建,报错spawn yarn ENOENT
spawn yarn ENOENT 这是因为yarn找不到,而且设置的默认包管理是yarn可以修改成npm一、直接在C盘用户名/.vuerc文件进行修改,将 "packageManager"改为"npm"{ "useTaobaoRegistry": false, "packageManager": "npm"}修改好后创建vuevue create XXXXXX...原创 2021-08-12 16:18:23 · 395 阅读 · 1 评论 -
vue 图片裁剪
官方文档传送门效果图文档备注原创 2021-07-21 15:38:30 · 277 阅读 · 0 评论 -
vue 中移除没有使用的class和id 样式
前言因为在多次迭代后的项目有很多不用的样式,如果一直留着就会导致文件过大,在用户访问的时候请求时间加大,所以需要优化这方面的代码 所以我这边在项目 build 的时候,就需要移除多余不用的样式代码进行简单的优化npm安装与使用 1、使用到的npm包有 “purifycss-webpack”,“purify-css”,“glob”cnpm i --save purifycss-webpack purify-css glob 2、在 webpack.config.js 或...原创 2021-05-10 11:34:28 · 1488 阅读 · 1 评论 -
js 时间转字符串时间
// 格式化日期,如月、日、时、分、秒保证为2位数 formatNumber (n) { n = n.toString() return n[1] ? n : '0' + n }, // 参数number为毫秒时间戳,format为需要转换成的日期格式 formatTime (number, format) { const time = new Date(number) const newArr = [] cons.原创 2021-04-06 14:15:56 · 188 阅读 · 0 评论 -
使用 el-upload 和 xlsx 上传 xlsx文件
一、安装 xlsxcnpm i xlsx二、在 vue 中使用我这边是使用element 里面的el-upload 组件上传方法 <el-upload ref="upload" action="" accept=".csv" :headers="myHeaders" :on-change="upload" :http-request="handleHttpRequestImg" :sho...原创 2021-04-02 14:42:51 · 1738 阅读 · 0 评论 -
自定义 element 表格颜色
max-height原创 2021-01-16 14:25:41 · 1200 阅读 · 0 评论 -
html 英文数字换行
html 英文数字换行 在需要css上加下面代码即可 div{ word-break: break-all; }原创 2021-01-13 17:41:44 · 274 阅读 · 0 评论 -
前端文件流下载
一、在vux中使用了 Axios 后,后端返回来的是文件流 这里我们可以直接用 Axios 方法返回的 res 赋值到 blob const blob = res const reader = new FileReader() reader.readAsDataURL(blob) reader.onload = function (ev) { if (window.navigator.msSaveOrOpenBlob) {原创 2020-12-23 15:27:47 · 6149 阅读 · 0 评论 -
element表单校验不进入 validate 问题
element UI 自定义校验 不进入 validate 问题console.log 表单的 $refs 可以看到 validate 方法 但是不执行,很奇怪,所以答案就是 自定义的时候如果完成校验 或者 不进校验 需要写上 callback()错误代码var notZero = (rule, value, callback) => { if (!value) { return callback(new Error('值必须是大于0')); } };修改后代码var原创 2020-12-16 16:18:06 · 3367 阅读 · 0 评论 -
地图坐标系之间转换 (js)
首先我们需要知道中国常用的地图分别都是什么 bd09II: 百度地图 gcj02: 高德地图、腾讯地图 cgcs200: 天地图 wgs84: osm、谷歌、arcgisonline我们已经大概有了解了,所以接下来 我们需要了解他们之间的关系1、经纬度转换 BD09 <=> GCJ02 <=> WGS84(CGCS200) BD09 <=> GCJ02 GCJ02 <=> WGS84(CGCS200)2、经纬度与墨卡托 墨卡.转载 2020-10-20 10:14:56 · 3776 阅读 · 0 评论 -
随手记录(日历)
日历原创 2020-10-16 19:50:18 · 190 阅读 · 0 评论 -
刷新当前页面 (Vue)
1.首先在APP.vue里面,写入刷新方法,路由初始状态是显示的<template> <div> <div id="app"> <router-view v-if="isRouterAlive"/> </div> </div></template><script> export default { name: 'App', components:原创 2020-10-16 10:33:26 · 118 阅读 · 0 评论 -
检测到目标站点存在javascript框架库漏洞 (随手记录)
问题总结:js-cookie 系列解决问题vue项目里面引用了js-cookie用来存放登录的一些信息了。删除js-cookie重新打包就可以了。至于页面上的数据,那就存放在localstroge就行。具体用法: var storage=localStorage; // 存放数据 storage.setItem("key",value); // 根据key获取数据 storage.getItem("key"); // 根据key删除数据 storage.removeItem("ke.原创 2020-10-12 09:30:24 · 9902 阅读 · 25 评论 -
vue使用 element-ui 禁止 DateTimePicker 选择时间
效果图:<el-date-picker v-model="value1" type="date" placeholder="选择日期" :picker-options="pickerOptions"></el-date-picker>1、在组件data 声明 pickerOptions data () { return { pickerOptionsStart: {} }; },2、 在 生命周期(created) 需原创 2020-07-06 11:24:26 · 2339 阅读 · 0 评论 -
git 日常使用命令
一、项目上传内容命令git add . 写日志git commit -m '上传内容解释’拉取 git pull 拉取后 shift 加 ; wq在推送 git push二、在 gitee 或者其他网站下载项目到本地git clone git链接地址原创 2020-07-06 11:13:04 · 92 阅读 · 0 评论 -
Vue知识点(有一点长)
一、MVVM的理解Model-View-ViewModel的缩写,Model代表数据模型,View代表UI组件,ViewModel将Model和View关联起来数据会绑定到viewModel层并自动将数据渲染到页面中,视图变化的时候会通知viewModel层更新数据二、Vue2.x响应式数据/双向绑定原理Vue 数据双向绑定主要是指:数据变化更新视图,视图变化更新数据。其中,View变化更新Data,可以通过事件监听的方式来实现,所以 Vue数据双向绑定的工作主要是如何根据Data变化更新V转载 2020-07-04 11:55:21 · 149 阅读 · 0 评论 -
js 获取几天前 或几天后的 日期
getDay(day){ var today = new Date(); var targetday_milliseconds=today.getTime() + 1000*60*60*24*day; today.setTime(targetday_milliseconds); var tYear = today.getFullYea...原创 2020-01-05 17:57:01 · 1846 阅读 · 0 评论 -
更新element-ui版本
卸载当前版本npm uninstall element-ui安装指定版本npm install element-ui@2.12.0 -S原创 2019-12-13 11:37:55 · 264 阅读 · 0 评论 -
VUE 安装 vant
1、第一步:npm i vant -S2、第二步: 安装 babel-plugin-import 插件,babel-plugin-import 是一款 babel 插件,它会在编译过程中将 import 的写法自动转换为按需引入的方式npm i babel-plugin-import -D3、第三步:在.babelrc文件中配置plugins(在启动项目目录中)把里面的 plugins...原创 2019-08-16 09:16:26 · 797 阅读 · 0 评论 -
vue 使用 html2canvas 截图
// html2canvas 是把页面中一个标签 生成一张图片 (一帮用于生成海报)// 只要浏览器支持 Canvas 即可,包括:Firefox 3.5+、Google Chrome、Opera 新的版本、IE9 以上的浏览器。// 移动端 也就是手机 本人实际操作也是可以兼容的一、去 html2canvas.js 官网下载 html2canvas 到本地项目中官方地址 : http:...原创 2019-08-16 10:20:58 · 3035 阅读 · 2 评论 -
vue 前端生成 二维码
这个 npm 搜索就可以了 我就给你一条消息 剩下的你就自己玩吧下载 node-qrcodenpm i node-qrcodenpm 地址 https://www.npmjs.com/package/node-qrcode相关生成二维码样式消息https://github.com/soldair/node-qrcode#qr-code-options在 main.js 中 impo...原创 2019-08-16 10:35:06 · 761 阅读 · 0 评论 -
vue js 获取时间
**获取本周、上周的开始结束时间** function getTime(n){ var now=new Date(); var year=now.getFullYear(); //因为月份是从0开始的,所以获取这个月的月份数要加1才行 var month=now.getMonth()+1; var date=now.getDate(); var day=...原创 2019-08-29 16:54:04 · 1324 阅读 · 0 评论 -
echarts 百度图表 缩放
项目中用到的,vue的 直接看吧 <template> <div> <!-- 导航 --> <ul class="navigation ovh pos_f l_0 t_0 w_100vh b_t"> <li :style="{ width: 100/navigationList.length...原创 2019-08-29 17:07:01 · 343 阅读 · 0 评论 -
单页面与多页面间的区别及优缺点
单页面应用(SPA),通俗一点说就是指只有一个主页面的应用,浏览器一开始要加载所有必须的 html, js, css。所有的页面内容都包含在这个所谓的主页面中。但在写的时候,还是会分开写(页面片段),然后在交互的时候由路由程序动态载入,单页面的页面跳转,仅刷新局部资源。多应用于pc端。多页面(MPA),就是指一个应用中有多个页面,页面跳转时是整页刷新单页面的优点: 1,用户体验好,快,内容...原创 2019-09-28 10:46:34 · 2756 阅读 · 0 评论 -
import和require的区别
ode编程中最重要的思想就是模块化,import和require都是被模块化所使用。遵循规范require 是 AMD规范引入方式import是es6的一个语法标准,如果要兼容浏览器的话必须转化成es5的语法调用时间require是运行时调用,所以require理论上可以运用在代码的任何地方import是编译时调用,所以必须放在文件开头本质require是赋值过程,其实requir...转载 2019-09-28 10:49:22 · 82 阅读 · 0 评论 -
vue安装高德地图
<scripttype="text/javascript"src="https://webapi.amap.com/maps?v=1.4.15&key='key自己申请'&plugin=AMap.MouseTool,AMap.Geolocation,AMap.ControlBar,Map3D,AMap.DistrictSearch,AMap.RangingTool,A...原创 2019-10-10 16:57:41 · 693 阅读 · 0 评论 -
vue 使用 animate.css
项目中 用到了一下 动画 懒到写 就想用 animate 结果 搜索一下 基本都是一样的文章 但是就是没用,采坑的路就不说了 哎;直接引用 最直接的方法 但是 别人访问 你网站的时候 会吧 这个animate 全部加载 导致打开网络慢的一批;<head><link rel=“stylesheet” href=“animate.min.css”></head...原创 2019-08-13 14:26:45 · 567 阅读 · 0 评论